@antv/infographic 0.0.1-beta.1

package/src/designs/structures/compare-hierarchy-left-right.tsx

@@ -0,0 +1,362 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import {
+  Defs,
+  Ellipse,
+  getElementBounds,
+  Group,
+  Rect,
+} from '@antv/infographic-jsx';
+import { ItemsGroup } from '../components';
+import { LinearGradient } from '../defs';
+import { FlexLayout } from '../layouts';
+import { getPaletteColor } from '../utils';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface CompareHierarchyLeftRightProps extends BaseStructureProps {
+  /** 同侧数据项上下间隔 */
+  gap?: number;
+  /** 左右两侧间隔 */
+  groupGap?: number;
+  /** 子节点是否环绕根节点 */
+  surround?: boolean;
+  /** 数据项指示器样式 */
+  decoration?: 'none' | 'dot-line' | 'arc-dot' | 'split-line';
+  /** 是否翻转根节点 */
+  flipRoot?: boolean;
+  /** 是否翻转叶子节点 */
+  flipLeaf?: boolean;
+}
+
+const decorationWidthMap = {
+  none: 5,
+  'dot-line': 100,
+  'arc-dot': 20,
+  'split-line': 5,
+};
+
+export const CompareHierarchyLeftRight: ComponentType<
+  CompareHierarchyLeftRightProps
+> = (props) => {
+  const {
+    Title,
+    Items,
+    data,
+    gap = 20,
+    groupGap = 0,
+    decoration = 'none',
+    surround = true,
+    flipRoot = false,
+    flipLeaf = false,
+    options,
+  } = props;
+  const [RootItem, Item] = Items;
+  const { title, desc, items = [] } = data;
+
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+
+  const rootItemContent = (
+    <RootItem
+      indexes={[0]}
+      data={data}
+      datum={data.items[0]}
+      themeColors={{} as any}
+    />
+  );
+  const itemContent = (
+    <Item
+      indexes={[0, 0]}
+      data={data}
+      datum={items[0]?.children?.[0] || items[2]}
+    />
+  );
+
+  const rootItemBounds = getElementBounds(rootItemContent);
+  const itemBounds = getElementBounds(itemContent);
+
+  const itemElements: JSXElement[] = [];
+  const decoElements: JSXElement[] = [];
+
+  const [leftRoot, rightRoot] = items;
+  const leftItems = leftRoot?.children || [];
+  const rightItems = rightRoot?.children || [];
+
+  const totalHeight = Math.max(
+    rootItemBounds.height,
+    leftItems.length * (itemBounds.height + gap) - gap,
+    rightItems.length * (itemBounds.height + gap) - gap,
+  );
+
+  const decorationWidth = decorationWidthMap[decoration] || 0;
+  // create root items
+  const leftRootX = itemBounds.width + decorationWidth;
+  const rightRootX = leftRootX + rootItemBounds.width + groupGap;
+  const rootY = (totalHeight - rootItemBounds.height) / 2;
+  if (leftRoot) {
+    itemElements.push(
+      <RootItem
+        indexes={[0]}
+        x={leftRootX}
+        y={rootY}
+        data={data}
+        datum={leftRoot}
+        positionH={flipRoot ? 'normal' : 'flipped'}
+      />,
+    );
+  }
+  if (rightRoot) {
+    itemElements.push(
+      <RootItem
+        indexes={[1]}
+        x={rightRootX}
+        y={rootY}
+        data={data}
+        datum={rightRoot}
+        positionH={flipRoot ? 'flipped' : 'normal'}
+      />,
+    );
+  }
+
+  const addDecoElement = (
+    side: 'left' | 'right',
+    pos: [number, number],
+    indexes: number[],
+  ) => {
+    if (decoration === 'none') return;
+    const [x, y] = pos;
+
+    const currentColor = getPaletteColor(options, indexes);
+    const props: DecorationProps = {
+      x,
+      y,
+      width: itemBounds.width,
+      height: itemBounds.height,
+      side,
+      color: currentColor || '#ccc',
+      colorBg: options.themeConfig.colorBg || '#fff',
+    };
+    if (decoration === 'split-line') {
+      decoElements.push(<SplitLine {...props} />);
+    } else if (decoration === 'dot-line') {
+      decoElements.push(<DotLine {...props} />);
+    }
+  };
+
+  if (surround) {
+    const diameter = 2 * rootItemBounds.width + groupGap + itemBounds.width;
+    const radius = diameter / 2 + decorationWidth;
+
+    const circleCenterX = leftRootX + rootItemBounds.width + groupGap / 2;
+    const circleCenterY = rootY + rootItemBounds.height / 2;
+
+    leftItems.forEach((item, index) => {
+      const leftItemsHeight =
+        leftItems.length * (itemBounds.height + gap) - gap;
+      const leftStartY = (totalHeight - leftItemsHeight) / 2;
+      const itemY = leftStartY + index * (itemBounds.height + gap);
+
+      const itemCenterY = itemY + itemBounds.height / 2;
+      const dy = itemCenterY - circleCenterY;
+
+      const dxSq = Math.max(0, radius * radius - dy * dy);
+      const xCenter = circleCenterX - Math.sqrt(dxSq);
+      const leftX = xCenter - itemBounds.width / 2;
+
+      itemElements.push(
+        <Item
+          indexes={[0, index]}
+          datum={item}
+          data={data}
+          x={leftX}
+          y={itemY}
+          positionH={flipLeaf ? 'flipped' : 'normal'}
+        />,
+      );
+      addDecoElement('left', [leftX, itemY], [0, index]);
+    });
+
+    rightItems.forEach((item, index) => {
+      const rightItemsHeight =
+        rightItems.length * (itemBounds.height + gap) - gap;
+      const rightStartY = (totalHeight - rightItemsHeight) / 2;
+      const itemY = rightStartY + index * (itemBounds.height + gap);
+
+      const itemCenterY = itemY + itemBounds.height / 2;
+      const dy = itemCenterY - circleCenterY;
+
+      const dxSq = Math.max(0, radius * radius - dy * dy);
+      const xCenter = circleCenterX + Math.sqrt(dxSq);
+      const rightX = xCenter - itemBounds.width / 2;
+
+      itemElements.push(
+        <Item
+          indexes={[1, index]}
+          datum={item}
+          data={data}
+          x={rightX}
+          y={itemY}
+          positionH={flipLeaf ? 'normal' : 'flipped'}
+        />,
+      );
+      addDecoElement('right', [rightX, itemY], [1, index]);
+    });
+  } else {
+    // create left items
+    leftItems.forEach((item, index) => {
+      const leftItemsHeight =
+        leftItems.length * (itemBounds.height + gap) - gap;
+      const leftStartY = (totalHeight - leftItemsHeight) / 2;
+      const itemY = leftStartY + index * (itemBounds.height + gap);
+      const indexes = [0, index];
+      const leftX = 0;
+      itemElements.push(
+        <Item
+          indexes={indexes}
+          datum={item}
+          data={data}
+          x={leftX}
+          y={itemY}
+          positionH={flipLeaf ? 'flipped' : 'normal'}
+        />,
+      );
+      addDecoElement('left', [leftX, itemY], indexes);
+    });
+
+    // create right items
+    rightItems.forEach((item, index) => {
+      const rightItemsHeight =
+        rightItems.length * (itemBounds.height + gap) - gap;
+      const rightStartY = (totalHeight - rightItemsHeight) / 2;
+      const itemY = rightStartY + index * (itemBounds.height + gap);
+      const indexes = [1, index];
+      const rightX = rightRootX + rootItemBounds.width + decorationWidth;
+      itemElements.push(
+        <Item
+          indexes={indexes}
+          datum={item}
+          data={data}
+          x={rightX}
+          y={itemY}
+          positionH={flipLeaf ? 'normal' : 'flipped'}
+        />,
+      );
+      addDecoElement('right', [rightX, itemY], indexes);
+    });
+  }
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <Group width={0} height={0}>
+          {decoElements}
+        </Group>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+interface DecorationProps {
+  x: number;
+  y: number;
+  side: 'left' | 'right';
+  width: number;
+  height: number;
+  color: string;
+  colorBg: string;
+}
+
+const SplitLine = (props: DecorationProps) => {
+  const { x, y, width, height, color, colorBg, side } = props;
+  const lineY = y + height;
+  const linearGradientId = `split-line-linear-gradient-${side}`;
+
+  return (
+    <>
+      <Defs>
+        <LinearGradient
+          id={linearGradientId}
+          startColor={color}
+          stopColor={colorBg}
+          direction={side === 'left' ? 'left-right' : 'right-left'}
+        />
+      </Defs>
+      <Rect
+        x={x}
+        y={lineY}
+        width={width}
+        height={1}
+        fill={`url(#${linearGradientId})`}
+      />
+    </>
+  );
+};
+
+const DotLine = (props: DecorationProps) => {
+  const { x, y, side, width, height, color, colorBg } = props;
+  const radius = 6;
+  const innerRadius = radius / 3;
+  const d = radius * 2;
+  const innerD = innerRadius * 2;
+
+  const gap = 5;
+
+  const cx = side === 'left' ? x + width + radius + gap : x - radius - gap;
+  const cy = y + height / 2;
+
+  const innerX = cx - innerRadius;
+  const innerY = cy - innerRadius;
+
+  const lineLength = 80;
+  const dx = side === 'left' ? lineLength : -lineLength;
+
+  const linearGradientId = `dot-line-linear-gradient-${side}`;
+
+  return (
+    <Group>
+      <Defs>
+        <LinearGradient
+          id={linearGradientId}
+          startColor={color}
+          stopColor={colorBg}
+          direction={side === 'left' ? 'left-right' : 'right-left'}
+        />
+      </Defs>
+      <Ellipse
+        x={cx - radius}
+        y={cy - radius}
+        width={d}
+        height={d}
+        fill="none"
+        strokeWidth={1}
+        stroke={color}
+      />
+      <Ellipse
+        x={innerX}
+        y={innerY}
+        width={innerD}
+        height={innerD}
+        fill={color}
+      />
+      <Rect
+        x={side === 'left' ? cx : cx + dx}
+        y={cy - 0.5}
+        width={lineLength}
+        height={1}
+        fill={`url(#${linearGradientId})`}
+      />
+    </Group>
+  );
+};
+
+registerStructure('compare-hierarchy-left-right', {
+  component: CompareHierarchyLeftRight,
+  composites: ['title', 'item'],
+});

package/src/designs/structures/compare-hierarchy-row.tsx

@@ -0,0 +1,220 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import { getElementBounds, Group, Rect } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getPaletteColors } from '../utils';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface CompareHierarchyRowProps extends BaseStructureProps {
+  gap?: number;
+  itemGap?: number;
+  columnWidth?: number;
+  itemPadding?: number;
+  showColumnBackground?: boolean;
+  columnBackgroundAlpha?: number;
+}
+
+/**
+ * 横向层级对比结构
+ * 第一级：横向排列的根节点
+ * 第二级：每个根节点下的子节点列表
+ */
+export const CompareHierarchyRow: ComponentType<CompareHierarchyRowProps> = (
+  props,
+) => {
+  const {
+    Title,
+    Items,
+    data,
+    gap = 0,
+    itemGap = 20,
+    columnWidth = 280,
+    itemPadding = 5,
+    showColumnBackground = true,
+    columnBackgroundAlpha = 0.08,
+    options,
+  } = props;
+  const [RootItem, Item] = Items;
+  const { title, desc, items = [] } = data;
+
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+  const palette = getPaletteColors(options);
+
+  const itemElements: JSXElement[] = [];
+  const btnElements: JSXElement[] = [];
+
+  const childItemWidth = columnWidth - itemPadding * 2;
+
+  const rootItemBounds = getElementBounds(
+    <RootItem indexes={[0]} data={data} datum={items[0]} width={columnWidth} />,
+  );
+  const childItemBounds = getElementBounds(
+    <Item
+      indexes={[0, 0]}
+      data={data}
+      datum={items[0]?.children?.[0] || {}}
+      width={childItemWidth}
+    />,
+  );
+
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+
+  const maxChildrenCount = Math.max(
+    ...items.map((item) => item.children?.length || 0),
+    0,
+  );
+
+  const columnHeight =
+    rootItemBounds.height +
+    itemGap +
+    maxChildrenCount * (childItemBounds.height + itemGap);
+
+  items.forEach((rootItem, rootIndex) => {
+    const { children = [] } = rootItem;
+
+    const columnX = rootIndex * (columnWidth + gap);
+    const rootX = columnX;
+    const rootY = 0;
+
+    if (showColumnBackground) {
+      const baseColor = palette[rootIndex % palette.length];
+      const bgColor = `${baseColor}${Math.round(columnBackgroundAlpha * 255)
+        .toString(16)
+        .padStart(2, '0')}`;
+
+      itemElements.push(
+        <Rect
+          x={columnX}
+          y={rootY}
+          width={columnWidth}
+          height={columnHeight}
+          fill={bgColor}
+          rx={0}
+          ry={0}
+        />,
+      );
+    }
+
+    itemElements.push(
+      <RootItem
+        indexes={[rootIndex]}
+        datum={rootItem}
+        data={data}
+        x={rootX}
+        y={rootY}
+        width={columnWidth}
+      />,
+    );
+
+    btnElements.push(
+      <BtnRemove
+        indexes={[rootIndex]}
+        x={rootX + rootItemBounds.width - btnBounds.width - 10}
+        y={rootY + 10}
+      />,
+    );
+
+    if (rootIndex === 0) {
+      btnElements.push(
+        <BtnAdd
+          indexes={[rootIndex]}
+          x={rootX + rootItemBounds.width / 2 - btnBounds.width / 2}
+          y={rootY - btnBounds.height - 5}
+        />,
+      );
+    }
+
+    const childStartY = rootY + rootItemBounds.height + itemGap;
+
+    children.forEach((child, childIndex) => {
+      const childY =
+        childStartY + childIndex * (childItemBounds.height + itemGap);
+      const childX = rootX + itemPadding;
+      const indexes = [rootIndex, childIndex];
+
+      itemElements.push(
+        <Item
+          indexes={indexes}
+          datum={child}
+          data={data}
+          x={childX}
+          y={childY}
+          width={childItemWidth}
+        />,
+      );
+
+      btnElements.push(
+        <BtnRemove
+          indexes={indexes}
+          x={childX + childItemBounds.width - btnBounds.width - 10}
+          y={childY + (childItemBounds.height - btnBounds.height) / 2}
+        />,
+      );
+
+      if (childIndex < children.length - 1) {
+        btnElements.push(
+          <BtnAdd
+            indexes={[rootIndex, childIndex + 1]}
+            x={childX + childItemBounds.width / 2 - btnBounds.width / 2}
+            y={childY + childItemBounds.height - btnBounds.height / 2}
+          />,
+        );
+      }
+    });
+
+    const childX = rootX + itemPadding;
+
+    if (children.length > 0) {
+      const lastChildY =
+        childStartY + children.length * (childItemBounds.height + itemGap);
+      btnElements.push(
+        <BtnAdd
+          indexes={[rootIndex, children.length]}
+          x={childX + childItemBounds.width / 2 - btnBounds.width / 2}
+          y={lastChildY - childItemBounds.height / 2 - btnBounds.height / 2}
+        />,
+      );
+    } else {
+      btnElements.push(
+        <BtnAdd
+          indexes={[rootIndex, 0]}
+          x={childX + childItemBounds.width / 2 - btnBounds.width / 2}
+          y={childStartY - itemGap / 2 - btnBounds.height / 2}
+        />,
+      );
+    }
+  });
+
+  if (items.length > 0) {
+    const lastColumnX = items.length * (columnWidth + gap);
+    btnElements.push(
+      <BtnAdd
+        indexes={[items.length]}
+        x={lastColumnX - gap / 2 - btnBounds.width / 2}
+        y={-btnBounds.height - 5}
+      />,
+    );
+  }
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <BtnsGroup>{btnElements}</BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+registerStructure('compare-hierarchy-row', {
+  component: CompareHierarchyRow,
+  composites: ['title', 'item'],
+});