@antv/infographic 0.0.1-beta.1

package/src/designs/structures/sequence-snake-steps.tsx

@@ -0,0 +1,191 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import { getElementBounds, Group } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { SimpleArrow } from '../decorations';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary } from '../utils';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface SequenceSnakeStepsProps extends BaseStructureProps {
+  gap?: number;
+  itemsPerRow?: number;
+  rowGap?: number;
+}
+
+export const SequenceSnakeSteps: ComponentType<SequenceSnakeStepsProps> = (
+  props,
+) => {
+  const {
+    Title,
+    Item,
+    data,
+    gap = 40,
+    itemsPerRow = 3,
+    rowGap = 80,
+    options,
+  } = props;
+  const { title, desc, items = [] } = data;
+
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+  const colorPrimary = getColorPrimary(options);
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+  const itemBounds = getElementBounds(
+    <Item indexes={[0]} data={data} datum={items[0]} positionH="center" />,
+  );
+
+  const btnElements: JSXElement[] = [];
+  const itemElements: JSXElement[] = [];
+  const decorElements: JSXElement[] = [];
+
+  const arrowWidth = 25;
+  const arrowHeight = 25;
+
+  items.forEach((item, index) => {
+    const rowIndex = Math.floor(index / itemsPerRow);
+    const colIndex = index % itemsPerRow;
+    const isReversedRow = rowIndex % 2 === 1;
+    const actualColIndex = isReversedRow
+      ? itemsPerRow - 1 - colIndex
+      : colIndex;
+
+    const itemX = actualColIndex * (itemBounds.width + gap);
+    const itemY = rowIndex * (itemBounds.height + rowGap);
+    const indexes = [index];
+
+    itemElements.push(
+      <Item
+        indexes={indexes}
+        datum={item}
+        data={data}
+        x={itemX}
+        y={itemY}
+        positionH="center"
+      />,
+    );
+
+    btnElements.push(
+      <BtnRemove
+        indexes={indexes}
+        x={itemX + (itemBounds.width - btnBounds.width) / 2}
+        y={itemY + itemBounds.height + 10}
+      />,
+    );
+
+    if (index === 0) {
+      btnElements.push(
+        <BtnAdd
+          indexes={indexes}
+          x={itemX + (itemBounds.width - btnBounds.width) / 2}
+          y={itemY - btnBounds.height - 10}
+        />,
+      );
+    }
+
+    if (index < items.length - 1) {
+      const nextRowIndex = Math.floor((index + 1) / itemsPerRow);
+      const nextColIndex = (index + 1) % itemsPerRow;
+      const isNextReversedRow = nextRowIndex % 2 === 1;
+      const nextActualColIndex = isNextReversedRow
+        ? itemsPerRow - 1 - nextColIndex
+        : nextColIndex;
+
+      const nextItemX = nextActualColIndex * (itemBounds.width + gap);
+
+      const isSameRow = rowIndex === nextRowIndex;
+
+      if (isSameRow) {
+        const isRightToLeft = isReversedRow;
+        const arrowX = isRightToLeft
+          ? nextItemX + itemBounds.width + (gap - arrowWidth) / 2
+          : itemX + itemBounds.width + (gap - arrowWidth) / 2;
+        const arrowY = itemY + itemBounds.height / 2 - arrowHeight / 2;
+
+        decorElements.push(
+          <SimpleArrow
+            x={arrowX}
+            y={arrowY}
+            width={arrowWidth}
+            height={arrowHeight}
+            colorPrimary={colorPrimary}
+            rotation={isRightToLeft ? 180 : 0}
+          />,
+        );
+
+        btnElements.push(
+          <BtnAdd
+            indexes={[index + 1]}
+            x={arrowX + (arrowWidth - btnBounds.width) / 2}
+            y={itemY - btnBounds.height - 10}
+          />,
+        );
+      } else {
+        const turnArrowX = itemX + itemBounds.width / 2 - arrowWidth / 2;
+        const turnArrowY =
+          itemY + itemBounds.height + (rowGap - arrowHeight) / 2;
+
+        decorElements.push(
+          <SimpleArrow
+            x={turnArrowX}
+            y={turnArrowY}
+            width={arrowWidth}
+            height={arrowHeight}
+            colorPrimary={colorPrimary}
+            rotation={90}
+          />,
+        );
+
+        btnElements.push(
+          <BtnAdd
+            indexes={[index + 1]}
+            x={turnArrowX + (arrowWidth - btnBounds.width) / 2}
+            y={turnArrowY + (arrowHeight - btnBounds.height) / 2}
+          />,
+        );
+      }
+    }
+  });
+
+  if (items.length > 0) {
+    const lastIndex = items.length - 1;
+    const lastRowIndex = Math.floor(lastIndex / itemsPerRow);
+    const lastColIndex = lastIndex % itemsPerRow;
+    const isLastReversedRow = lastRowIndex % 2 === 1;
+    const lastActualColIndex = isLastReversedRow
+      ? itemsPerRow - 1 - lastColIndex
+      : lastColIndex;
+
+    const lastItemX = lastActualColIndex * (itemBounds.width + gap);
+    const lastItemY = lastRowIndex * (itemBounds.height + rowGap);
+
+    btnElements.push(
+      <BtnAdd
+        indexes={[items.length]}
+        x={lastItemX + (itemBounds.width - btnBounds.width) / 2}
+        y={lastItemY + itemBounds.height + btnBounds.height + 20}
+      />,
+    );
+  }
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group>
+        <Group>{decorElements}</Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <BtnsGroup>{btnElements}</BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+registerStructure('sequence-snake-steps', {
+  component: SequenceSnakeSteps,
+  composites: ['title', 'item'],
+});

package/src/designs/structures/sequence-steps.tsx

@@ -0,0 +1,122 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import { getElementBounds, Group } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { SimpleArrow } from '../decorations';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary } from '../utils';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface SequenceStepsProps extends BaseStructureProps {
+  gap?: number;
+}
+
+export const SequenceSteps: ComponentType<SequenceStepsProps> = (props) => {
+  const { Title, Item, data, gap = 40, options } = props;
+  const { title, desc, items = [] } = data;
+
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+  const colorPrimary = getColorPrimary(options);
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+  const itemBounds = getElementBounds(
+    <Item indexes={[0]} data={data} datum={items[0]} positionH="center" />,
+  );
+
+  const btnElements: JSXElement[] = [];
+  const itemElements: JSXElement[] = [];
+  const decorElements: JSXElement[] = [];
+
+  const arrowWidth = 25;
+  const arrowHeight = 25;
+  const topMargin = Math.max(btnBounds.height + 20, 30);
+
+  items.forEach((item, index) => {
+    const itemX = index * (itemBounds.width + gap);
+    const indexes = [index];
+
+    itemElements.push(
+      <Item
+        indexes={indexes}
+        datum={item}
+        data={data}
+        x={itemX}
+        y={topMargin}
+        positionH="center"
+      />,
+    );
+
+    btnElements.push(
+      <BtnRemove
+        indexes={indexes}
+        x={itemX + (itemBounds.width - btnBounds.width) / 2}
+        y={topMargin + itemBounds.height + 10}
+      />,
+    );
+
+    if (index === 0) {
+      btnElements.push(
+        <BtnAdd
+          indexes={indexes}
+          x={itemX + (itemBounds.width - btnBounds.width) / 2}
+          y={topMargin - btnBounds.height - 10}
+        />,
+      );
+    } else {
+      btnElements.push(
+        <BtnAdd
+          indexes={indexes}
+          x={itemX - gap / 2 - btnBounds.width / 2}
+          y={topMargin - btnBounds.height - 10}
+        />,
+      );
+    }
+
+    if (index < items.length - 1) {
+      const arrowX = itemX + itemBounds.width + (gap - arrowWidth) / 2;
+      const arrowY = topMargin + itemBounds.height / 2 - arrowHeight / 2;
+
+      decorElements.push(
+        <SimpleArrow
+          x={arrowX}
+          y={arrowY}
+          width={arrowWidth}
+          height={arrowHeight}
+          colorPrimary={colorPrimary}
+        />,
+      );
+    }
+  });
+
+  if (items.length > 0) {
+    const lastItemX = (items.length - 1) * (itemBounds.width + gap);
+    btnElements.push(
+      <BtnAdd
+        indexes={[items.length]}
+        x={lastItemX + itemBounds.width + (gap - btnBounds.width) / 2}
+        y={topMargin - btnBounds.height - 10}
+      />,
+    );
+  }
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group>
+        <Group>{decorElements}</Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <BtnsGroup>{btnElements}</BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+registerStructure('sequence-steps', {
+  component: SequenceSteps,
+  composites: ['title', 'item'],
+});

package/src/designs/structures/sequence-timeline.tsx

@@ -0,0 +1,189 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import {
+  Defs,
+  Ellipse,
+  getElementBounds,
+  Group,
+  Path,
+  Text,
+} from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor, getPaletteColors } from '../utils';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface SequenceTimelineProps extends BaseStructureProps {
+  gap?: number;
+  lineOffset?: number;
+}
+
+export const SequenceTimeline: ComponentType<SequenceTimelineProps> = (
+  props,
+) => {
+  const { Title, Item, data, gap = 10, options } = props;
+  const { title, desc, items = [] } = data;
+
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+  const colorPrimary = getColorPrimary(options);
+  const palette = getPaletteColors(options);
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+  const itemBounds = getElementBounds(
+    <Item indexes={[0]} data={data} datum={items[0]} positionH="normal" />,
+  );
+
+  const btnElements: JSXElement[] = [];
+  const itemElements: JSXElement[] = [];
+  const decorElements: JSXElement[] = [];
+
+  const stepLabelX = 10;
+  const timelineX = stepLabelX + 70 + 10;
+  const itemX = timelineX + 30;
+  const nodeRadius = 6;
+
+  // Add continuous timeline line first (so it appears behind the dots)
+  if (items.length > 1) {
+    const firstNodeY = itemBounds.height / 2 + nodeRadius;
+    const lastNodeY =
+      (items.length - 1) * (itemBounds.height + gap) +
+      itemBounds.height / 2 -
+      nodeRadius;
+    const continuousLinePath = `M ${timelineX} ${firstNodeY} L ${timelineX} ${lastNodeY}`;
+
+    const linearGradientId = 'gradient-timeline-line';
+    const totalHeight = lastNodeY - firstNodeY;
+
+    // Generate gradient stops for each item
+    const gradientStops = items.map((_, index) => {
+      const nodeY = index * (itemBounds.height + gap) + itemBounds.height / 2;
+      const offset = ((nodeY - firstNodeY) / totalHeight) * 100;
+      const color = getPaletteColor(options, [index]);
+      return <stop offset={`${offset}%`} stopColor={color || colorPrimary} />;
+    });
+
+    decorElements.push(
+      <>
+        <Defs>
+          <linearGradient
+            id={linearGradientId}
+            x1={timelineX}
+            y1={firstNodeY}
+            x2={timelineX}
+            y2={lastNodeY}
+            gradientUnits="userSpaceOnUse"
+          >
+            {gradientStops}
+          </linearGradient>
+        </Defs>
+        <Path
+          d={continuousLinePath}
+          stroke={`url(#${linearGradientId})`}
+          strokeWidth={2}
+          width={1}
+          height={lastNodeY - firstNodeY}
+        />
+      </>,
+    );
+  }
+
+  items.forEach((item, index) => {
+    const itemY = index * (itemBounds.height + gap);
+    const nodeY = itemY + itemBounds.height / 2;
+    const indexes = [index];
+
+    decorElements.push(
+      <Text
+        x={stepLabelX}
+        y={nodeY}
+        width={70}
+        fontSize={18}
+        fontWeight="bold"
+        alignHorizontal="left"
+        alignVertical="center"
+        fill={palette[index % palette.length]}
+      >
+        {`STEP ${index + 1}`}
+      </Text>,
+    );
+
+    itemElements.push(
+      <Item
+        indexes={indexes}
+        datum={item}
+        data={data}
+        x={itemX}
+        y={itemY}
+        positionH="normal"
+      />,
+    );
+
+    decorElements.push(
+      <Ellipse
+        x={timelineX - nodeRadius}
+        y={nodeY - nodeRadius}
+        width={nodeRadius * 2}
+        height={nodeRadius * 2}
+        fill={palette[index % palette.length]}
+      />,
+    );
+
+    btnElements.push(
+      <BtnRemove
+        indexes={indexes}
+        x={itemX - btnBounds.width - 10}
+        y={itemY + (itemBounds.height - btnBounds.height) / 2}
+      />,
+    );
+
+    if (index === 0) {
+      btnElements.push(
+        <BtnAdd
+          indexes={indexes}
+          x={itemX + (itemBounds.width - btnBounds.width) / 2}
+          y={itemY - btnBounds.height - 10}
+        />,
+      );
+    } else {
+      btnElements.push(
+        <BtnAdd
+          indexes={indexes}
+          x={itemX + (itemBounds.width - btnBounds.width) / 2}
+          y={itemY - gap / 2 - btnBounds.height / 2}
+        />,
+      );
+    }
+  });
+
+  if (items.length > 0) {
+    const lastItemY = (items.length - 1) * (itemBounds.height + gap);
+    btnElements.push(
+      <BtnAdd
+        indexes={[items.length]}
+        x={itemX + (itemBounds.width - btnBounds.width) / 2}
+        y={lastItemY + itemBounds.height + 10}
+      />,
+    );
+  }
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group>
+        <Group>{decorElements}</Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <BtnsGroup>{btnElements}</BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+registerStructure('sequence-timeline', {
+  component: SequenceTimeline,
+  composites: ['title', 'item'],
+});