@antv/infographic 0.1.2 → 0.1.3

package/esm/designs/layouts/Flex.js

@@ -7,9 +7,10 @@ export const FlexLayout = createLayout((children, { flexDirection = 'row', justi
     const isRow = flexDirection === 'row' || flexDirection === 'row-reverse';
     const isReverse = flexDirection === 'row-reverse' || flexDirection === 'column-reverse';
     const childBounds = children.map((child) => getElementBounds(child));
+    const childrenBounds = getElementsBounds(children);
+    const containerWidth = props.width ?? childrenBounds.width;
+    const containerHeight = props.height ?? childrenBounds.height;
     const hasContainerSize = props.width !== undefined && props.height !== undefined;
-    const containerWidth = props.width || 0;
-    const containerHeight = props.height || 0;
     const lines = [];
     if (flexWrap === 'wrap' && hasContainerSize) {
         let currentLine = [];
@@ -171,33 +172,36 @@ export const FlexLayout = createLayout((children, { flexDirection = 'row', justi
         }
     }
     if (!hasContainerSize) {
-        if (alignItems === 'center' && !isRow) {
-            // For column layout, center items horizontally
-            const maxWidth = Math.max(...childBounds.map((bounds) => bounds.width));
-            layoutChildren.forEach((child, index) => {
-                const bounds = childBounds[index];
-                const centerOffset = (maxWidth - bounds.width) / 2;
-                const newProps = { ...child.props };
-                newProps.x = (newProps.x || 0) + centerOffset;
-                layoutChildren[index] = cloneElement(child, newProps);
-            });
-        }
-        else if (alignItems === 'center' && isRow) {
-            // For row layout, center items vertically
-            const maxHeight = Math.max(...childBounds.map((bounds) => bounds.height));
-            layoutChildren.forEach((child, index) => {
-                const bounds = childBounds[index];
-                const centerOffset = (maxHeight - bounds.height) / 2;
-                const newProps = { ...child.props };
-                newProps.y = (newProps.y || 0) + centerOffset;
-                layoutChildren[index] = cloneElement(child, newProps);
-            });
+        if (alignItems === 'center') {
+            if (isRow) {
+                const maxHeight = Math.max(...childBounds.map((b) => b.height));
+                layoutChildren.forEach((child, index) => {
+                    const bounds = childBounds[index];
+                    const centerOffset = (maxHeight - bounds.height) / 2;
+                    const newProps = { ...child.props };
+                    newProps.y = (newProps.y || 0) + centerOffset;
+                    layoutChildren[index] = cloneElement(child, newProps);
+                });
+            }
+            else {
+                const maxWidth = Math.max(...childBounds.map((b) => b.width));
+                layoutChildren.forEach((child, index) => {
+                    const bounds = childBounds[index];
+                    const centerOffset = (maxWidth - bounds.width) / 2;
+                    const newProps = { ...child.props };
+                    newProps.x = (newProps.x || 0) + centerOffset;
+                    layoutChildren[index] = cloneElement(child, newProps);
+                });
+            }
         }
-        const finalBounds = getElementsBounds(layoutChildren);
-        // props.x ??= finalBounds.x;
-        // props.y ??= finalBounds.y;
-        props.width ?? (props.width = finalBounds.width);
-        props.height ?? (props.height = finalBounds.height);
     }
-    return _jsx(Group, { ...props, children: layoutChildren });
+    const finalBounds = getElementsBounds(layoutChildren);
+    const containerProps = {
+        ...props,
+        x: props.x ?? childrenBounds.x,
+        y: props.y ?? childrenBounds.y,
+        width: props.width ?? finalBounds.width,
+        height: props.height ?? finalBounds.height,
+    };
+    return _jsx(Group, { ...containerProps, children: layoutChildren });
 });

package/esm/designs/structures/chart-bar.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType } from '../../jsx';
+import { ItemDatum, Padding } from '../../types';
+import type { BaseStructureProps } from './types';
+export interface ChartBarProps extends BaseStructureProps {
+    width?: number;
+    gap?: number;
+    barGap?: number;
+    barHeight?: number;
+    barAreaWidth?: number;
+    labelGap?: number;
+    padding?: Padding;
+    showValue?: boolean;
+    valueFormatter?: (value: number, datum: ItemDatum) => string;
+}
+export declare const ChartBar: ComponentType<ChartBarProps>;

package/esm/designs/structures/chart-bar.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+import { scaleLinear } from 'd3';
+import { getElementBounds, Group, Path, Rect, Text } from '../../jsx';
+import { parsePadding } from '../../utils';
+import { ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './registry';
+export const ChartBar = (props) => {
+    const { Title, Item, data, width, gap, barGap, barHeight = 28, barAreaWidth, labelGap = 16, padding = 24, showValue = true, options, valueFormatter = (value) => value.toString(), } = props;
+    const resolvedBarAreaWidth = barAreaWidth ?? width ?? 480;
+    const { title, desc, items = [], xTitle, yTitle } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    if (items.length === 0) {
+        return (_jsx(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
+    }
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = parsePadding(padding);
+    const sampleDatum = items[0] ?? { label: '', value: 0 };
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], datum: sampleDatum, data: data }));
+    const labelWidth = itemBounds.width || 140;
+    const labelHeight = itemBounds.height || barHeight;
+    const rowHeight = Math.max(barHeight, labelHeight);
+    const gapByHeight = Math.max(12, rowHeight * 0.35);
+    const resolvedGap = barGap ?? gap ?? gapByHeight;
+    const values = items.map((item) => item.value ?? 0);
+    const maxValue = Math.max(...values, 0);
+    const minValue = Math.min(...values, 0);
+    const domainMin = minValue < 0 ? minValue * 1.1 : 0;
+    let domainMax = maxValue > 0 ? maxValue * 1.1 : 0;
+    if (domainMax === domainMin) {
+        domainMax = domainMin + 1;
+    }
+    const scale = scaleLinear()
+        .domain([domainMin, domainMax])
+        .range([0, resolvedBarAreaWidth]);
+    const zeroX = Math.min(Math.max(scale(0), 0), resolvedBarAreaWidth);
+    const minBarWidth = Math.max(2, resolvedBarAreaWidth * 0.02);
+    const chartHeight = items.length * (rowHeight + resolvedGap) - resolvedGap;
+    const yTitleSpace = yTitle ? 24 : 0;
+    const xTickSpace = 20;
+    const xTitleSpace = xTitle ? 24 : 0;
+    const yStart = paddingTop + yTitleSpace;
+    const barStartX = paddingLeft + labelWidth + labelGap;
+    const valueSpace = showValue ? 80 : 0;
+    const axisGap = Math.max(8, rowHeight * 0.2);
+    const totalWidth = barStartX + resolvedBarAreaWidth + valueSpace + paddingRight;
+    const totalHeight = yStart + chartHeight + axisGap + xTickSpace + xTitleSpace + paddingBottom;
+    const themeColors = getThemeColors(options.themeConfig);
+    const axisColor = themeColors.colorText || '#666';
+    const colorPrimary = getColorPrimary(options);
+    const barElements = [];
+    const valueElements = [];
+    const itemElements = [];
+    const axisElements = [];
+    const tickElements = [];
+    const gridElements = [];
+    const titleElements = [];
+    const axisY = yStart + chartHeight + axisGap;
+    const formatTick = (value) => Number.isInteger(value) ? value.toString() : value.toFixed(1);
+    items.forEach((item, index) => {
+        const indexes = [index];
+        const value = item.value ?? 0;
+        const rowY = yStart + index * (rowHeight + resolvedGap);
+        const barY = rowY + (rowHeight - barHeight) / 2;
+        const barX = value >= 0 ? barStartX + zeroX : barStartX + scale(value);
+        const barWidthRaw = value >= 0 ? scale(value) - zeroX : zeroX - scale(value);
+        const barWidth = barWidthRaw === 0 ? minBarWidth : barWidthRaw;
+        const barColor = getPaletteColor(options, [index]) || themeColors.colorPrimary;
+        barElements.push(_jsx(Rect, { x: barX, y: barY, width: barWidth, height: barHeight, fill: barColor, rx: 6, ry: 6, "data-element-type": "shape" }));
+        if (showValue) {
+            const valueX = value >= 0 ? barX + barWidth + 8 : barX - 8;
+            valueElements.push(_jsx(Text, { x: valueX, y: barY + barHeight / 2, alignHorizontal: value >= 0 ? 'left' : 'right', alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: barColor, children: valueFormatter(value, item) }));
+        }
+        itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: paddingLeft, y: rowY + (rowHeight - labelHeight) / 2, width: labelWidth, height: labelHeight, positionV: "middle" }));
+    });
+    const tickCount = Math.max(3, Math.min(7, Math.floor(resolvedBarAreaWidth / 80)));
+    const ticks = scale.ticks(tickCount);
+    ticks.forEach((tick) => {
+        const tickX = barStartX + scale(tick);
+        gridElements.push(_jsx(Path, { d: `M${tickX} ${yStart} L${tickX} ${yStart + chartHeight}`, stroke: axisColor, strokeOpacity: 0.08, "data-element-type": "shape" }));
+        tickElements.push(_jsx(Path, { d: `M${tickX - 0.5} ${axisY} L${tickX - 0.5} ${axisY + 6}`, stroke: axisColor, "data-element-type": "shape" }));
+        tickElements.push(_jsx(Text, { x: tickX, y: axisY + 14, alignHorizontal: "center", alignVertical: "middle", fontSize: 12, fill: axisColor, children: formatTick(tick) }));
+    });
+    axisElements.push(_jsx(Path, { d: `M${barStartX} ${axisY} L${barStartX + resolvedBarAreaWidth} ${axisY}`, stroke: axisColor, "data-element-type": "shape" }));
+    if (domainMin < 0) {
+        axisElements.push(_jsx(Rect, { x: barStartX + zeroX - 0.5, y: yStart, width: 1, height: chartHeight, fill: colorPrimary, "data-element-type": "shape" }));
+    }
+    if (yTitle) {
+        titleElements.push(_jsx(Text, { x: paddingLeft + labelWidth / 2, y: paddingTop + yTitleSpace / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: yTitle }));
+    }
+    if (xTitle) {
+        titleElements.push(_jsx(Text, { x: barStartX + resolvedBarAreaWidth / 2, y: axisY + xTickSpace + xTitleSpace / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: xTitle }));
+    }
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { width: totalWidth, height: totalHeight, children: [_jsx(Group, { children: gridElements }), _jsx(Group, { children: barElements }), _jsx(Group, { children: valueElements }), _jsx(Group, { children: titleElements }), _jsx(Group, { children: [...axisElements, ...tickElements] }), _jsx(ItemsGroup, { children: itemElements })] })] }));
+};
+registerStructure('chart-bar', {
+    component: ChartBar,
+    composites: ['title', 'item', 'xTitle', 'yTitle'],
+});

package/esm/designs/structures/chart-line.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType } from '../../jsx';
+import { ItemDatum, Padding } from '../../types';
+import type { BaseStructureProps } from './types';
+export interface ChartLineProps extends BaseStructureProps {
+    width?: number;
+    height?: number;
+    gap?: number;
+    padding?: Padding;
+    showValue?: boolean;
+    valueFormatter?: (value: number, datum: ItemDatum) => string;
+}
+export declare const ChartLine: ComponentType<ChartLineProps>;

package/esm/designs/structures/chart-line.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+import { scaleLinear } from 'd3';
+import { Defs, Ellipse, getElementBounds, Group, Path, Text } from '../../jsx';
+import { getSimpleHash, parsePadding } from '../../utils';
+import { ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './registry';
+export const ChartLine = (props) => {
+    const { Title, Item, data, width, height = 260, gap = 10, padding = 24, showValue = true, options, valueFormatter = (value) => value.toString(), } = props;
+    const { title, desc, items = [], xTitle, yTitle } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    if (items.length === 0) {
+        return (_jsx(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
+    }
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = parsePadding(padding);
+    const itemProps = {
+        indexes: [0],
+        datum: items[0],
+        data,
+        positionH: 'center',
+        positionV: 'normal',
+    };
+    const sampleBounds = getElementBounds(_jsx(Item, { ...itemProps }));
+    const labelWidth = sampleBounds.width;
+    const labelHeight = sampleBounds.height;
+    const xTickSpace = Math.max(28, labelHeight + 14);
+    const yTickSpace = 44;
+    const yTitleSpace = yTitle ? 26 : 0;
+    const xTitleSpace = xTitle ? 22 : 0;
+    const baseSpacing = labelWidth + gap;
+    const naturalChartWidth = items.length > 0 ? (items.length - 1) * baseSpacing + labelWidth : 0;
+    const targetChartWidth = width !== undefined ? width : Math.max(200, naturalChartWidth || 320);
+    const spacing = items.length > 1
+        ? Math.max(baseSpacing, (targetChartWidth - labelWidth) / (items.length - 1))
+        : 0;
+    const derivedChartWidth = items.length > 0
+        ? Math.max(labelWidth, (items.length - 1) * spacing + labelWidth)
+        : 0;
+    const chartOriginX = paddingLeft + yTickSpace + yTitleSpace;
+    const chartOriginY = paddingTop + yTitleSpace;
+    const totalWidth = chartOriginX + derivedChartWidth + paddingRight;
+    const totalHeight = chartOriginY + height + xTickSpace + xTitleSpace + paddingBottom;
+    const values = items.map((item) => item.value ?? 0);
+    const maxValue = Math.max(...values, 0);
+    const minValue = Math.min(...values, 0);
+    const domainPadding = Math.max(Math.abs(maxValue), Math.abs(minValue)) * 0.1;
+    const domainMin = minValue < 0 ? minValue - domainPadding : 0;
+    let domainMax = maxValue > 0 ? maxValue + domainPadding : 1;
+    if (domainMax === domainMin) {
+        domainMax = domainMin + 1;
+    }
+    const scaleY = scaleLinear()
+        .domain([domainMin, domainMax])
+        .nice()
+        .range([height, 0]);
+    const zeroY = Math.max(0, Math.min(height, scaleY(0)));
+    const axisBaseY = domainMax <= 0 ? 0 : domainMin >= 0 ? height : zeroY;
+    const colorPrimary = getColorPrimary(options);
+    const themeColors = getThemeColors(options.themeConfig);
+    const axisColor = themeColors.colorText || '#666';
+    const gridElements = [];
+    const axisElements = [];
+    const lineElements = [];
+    const pointElements = [];
+    const valueElements = [];
+    const titleElements = [];
+    const tickElements = [];
+    const ticksY = scaleY.ticks(6);
+    ticksY.forEach((tick) => {
+        const yPos = chartOriginY + scaleY(tick);
+        gridElements.push(_jsx(Path, { d: `M ${chartOriginX} ${yPos} L ${chartOriginX + derivedChartWidth} ${yPos}`, width: derivedChartWidth, height: 1, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape", opacity: 0.08 }));
+        tickElements.push(_jsx(Text, { x: chartOriginX - 8, y: yPos, alignHorizontal: "right", alignVertical: "middle", fontSize: 12, fill: axisColor, children: Number.isInteger(tick) ? tick.toString() : tick.toFixed(1) }));
+    });
+    const xLabels = [];
+    const pointPositions = [];
+    const colorStopsData = [];
+    const createSmoothPath = (points) => {
+        if (points.length === 0)
+            return '';
+        if (points.length === 1) {
+            const p = points[0];
+            return `M ${p.x} ${p.y}`;
+        }
+        const segments = [];
+        segments.push(`M ${points[0].x} ${points[0].y}`);
+        for (let i = 0; i < points.length - 1; i++) {
+            const p0 = points[i - 1] || points[i];
+            const p1 = points[i];
+            const p2 = points[i + 1];
+            const p3 = points[i + 2] || p2;
+            const cp1x = p1.x + (p2.x - p0.x) / 6;
+            const cp1y = p1.y + (p2.y - p0.y) / 6;
+            const cp2x = p2.x - (p3.x - p1.x) / 6;
+            const cp2y = p2.y - (p3.y - p1.y) / 6;
+            segments.push(`C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${p2.x} ${p2.y}`);
+        }
+        return segments.join(' ');
+    };
+    items.forEach((item, index) => {
+        const x = chartOriginX + index * spacing + labelWidth / 2;
+        const y = chartOriginY + scaleY(item.value ?? 0);
+        pointPositions.push({ x, y, datum: item });
+        xLabels.push(_jsx(Item, { ...itemProps, indexes: [index], datum: item, x: x - labelWidth / 2, y: chartOriginY + height + 4 }));
+        const stopColor = getPaletteColor(options, [index]) || themeColors.colorPrimary;
+        colorStopsData.push({ x, color: stopColor });
+    });
+    const minStopX = colorStopsData.length > 0
+        ? Math.min(...colorStopsData.map((s) => s.x))
+        : chartOriginX;
+    const maxStopX = colorStopsData.length > 0
+        ? Math.max(...colorStopsData.map((s) => s.x))
+        : chartOriginX + derivedChartWidth;
+    const stopSpan = Math.max(1, maxStopX - minStopX);
+    const gradientStops = colorStopsData.map((s) => (_jsx("stop", { offset: `${((s.x - minStopX) / stopSpan) * 100}%`, stopColor: s.color })));
+    const areaStops = colorStopsData.map((s) => (_jsx("stop", { offset: `${((s.x - minStopX) / stopSpan) * 100}%`, stopColor: s.color, stopOpacity: "0.18" })));
+    if (colorStopsData.length > 0) {
+        const lastColor = colorStopsData[colorStopsData.length - 1].color;
+        gradientStops.push(_jsx("stop", { offset: "100%", stopColor: lastColor }));
+        areaStops.push(_jsx("stop", { offset: "100%", stopColor: lastColor, stopOpacity: "0.04" }));
+    }
+    const gradientIdBase = `chart-line-${getSimpleHash([
+        derivedChartWidth,
+        height,
+        axisColor,
+        colorPrimary,
+        colorStopsData.map((s) => `${s.x.toFixed(2)}-${s.color}`).join(),
+    ].join(':'))}`;
+    const gradientStrokeId = `${gradientIdBase}-stroke`;
+    const gradientAreaId = `${gradientIdBase}-area`;
+    const smoothLinePath = createSmoothPath(pointPositions);
+    lineElements.push(_jsx(Path, { d: smoothLinePath, width: derivedChartWidth, height: height, stroke: `url(#${gradientStrokeId})`, strokeWidth: 3, fill: "none", "data-element-type": "shape" }));
+    const areaCurveTail = smoothLinePath.includes('C')
+        ? smoothLinePath.slice(smoothLinePath.indexOf('C'))
+        : '';
+    const areaPath = [
+        `M ${pointPositions[0].x} ${chartOriginY + axisBaseY}`,
+        `L ${pointPositions[0].x} ${pointPositions[0].y}`,
+        areaCurveTail,
+        `L ${pointPositions[pointPositions.length - 1].x} ${chartOriginY + axisBaseY}`,
+        'Z',
+    ].join(' ');
+    lineElements.push(_jsx(Path, { d: areaPath, width: derivedChartWidth, height: height, fill: `url(#${gradientAreaId})`, stroke: "none", "data-element-type": "shape" }));
+    pointPositions.forEach((pos, index) => {
+        const paletteColor = getPaletteColor(options, [index]) || themeColors.colorPrimary;
+        pointElements.push(_jsx(Ellipse, { x: pos.x - 6, y: pos.y - 6, width: 12, height: 12, fill: paletteColor, "data-element-type": "shape" }));
+        if (showValue) {
+            valueElements.push(_jsx(Text, { x: pos.x, y: pos.y - 12, alignHorizontal: "center", alignVertical: "bottom", fontSize: 12, fontWeight: "bold", fill: paletteColor, children: valueFormatter(pos.datum.value ?? 0, pos.datum) }));
+        }
+    });
+    axisElements.push(_jsx(Path, { d: `M ${chartOriginX} ${chartOriginY + axisBaseY} L ${chartOriginX + derivedChartWidth} ${chartOriginY + axisBaseY}`, width: derivedChartWidth, height: 1, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape" }));
+    axisElements.push(_jsx(Path, { d: `M ${chartOriginX} ${chartOriginY} L ${chartOriginX} ${chartOriginY + height}`, width: 1, height: height, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape" }));
+    if (xTitle) {
+        titleElements.push(_jsx(Text, { x: chartOriginX + derivedChartWidth / 2, y: chartOriginY + height + xTickSpace + xTitleSpace / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: xTitle }));
+    }
+    if (yTitle) {
+        titleElements.push(_jsx(Text, { x: paddingLeft + yTitleSpace / 2, y: chartOriginY + height / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: yTitle }));
+    }
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { width: totalWidth, height: totalHeight, children: [_jsxs(Defs, { children: [_jsx("linearGradient", { id: gradientStrokeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: gradientStops }), _jsxs("linearGradient", { id: gradientAreaId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [areaStops, _jsx("stop", { offset: "100%", stopColor: colorPrimary, stopOpacity: "0.04" })] })] }), _jsx(Group, { children: gridElements }), _jsx(Group, { children: [...axisElements, ...tickElements] }), _jsx(Group, { children: lineElements }), _jsx(Group, { children: pointElements }), _jsx(Group, { children: valueElements }), _jsx(Group, { children: titleElements }), _jsx(ItemsGroup, { children: xLabels })] })] }));
+};
+registerStructure('chart-line', {
+    component: ChartLine,
+    composites: ['title', 'item', 'xTitle', 'yTitle'],
+});

package/esm/designs/structures/chart-pie.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from '../../jsx';
+import type { BaseStructureProps } from './types';
+export interface ChartPieProps extends BaseStructureProps {
+    radius?: number;
+    innerRadius?: number;
+    padding?: number;
+    showPercentage?: boolean;
+}
+export declare const ChartPie: ComponentType<ChartPieProps>;

package/esm/designs/structures/chart-pie.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+import { arc, pie } from 'd3';
+import { getElementBounds, Group, Path, Text } from '../../jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './registry';
+export const ChartPie = (props) => {
+    const { Title, Item, data, radius = 140, innerRadius = 0, padding = 30, showPercentage = true, options, } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
+    // 获取 Item 的预估尺寸
+    const sampleDatum = items[0] ?? { label: '', value: 0 };
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], datum: sampleDatum, data: data, positionH: "center", positionV: "middle" }));
+    const labelWidth = itemBounds.width || 140;
+    const labelHeight = itemBounds.height || 32;
+    // 基础半径设置
+    const outerRadius = Math.max(radius, 60);
+    // 连线水平拉伸的系数
+    const extensionFactor = 1.35;
+    const textGap = 8;
+    // 计算画布中心和总尺寸
+    // 水平方向：半径 * 系数 + 间距 + 标签宽度 + 边缘padding
+    const maxHorizontalDistance = outerRadius * extensionFactor + textGap + labelWidth;
+    const maxVerticalDistance = outerRadius;
+    const centerX = padding + maxHorizontalDistance;
+    const centerY = padding + maxVerticalDistance;
+    const totalWidth = centerX * 2;
+    const totalHeight = centerY * 2;
+    // 空数据处理
+    if (items.length === 0) {
+        return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { width: totalWidth, height: totalHeight, children: _jsx(BtnsGroup, { children: _jsx(BtnAdd, { indexes: [0], x: centerX - btnBounds.width / 2, y: centerY - btnBounds.height / 2 }) }) })] }));
+    }
+    const totalValue = items.reduce((sum, item) => sum + Math.max(item.value ?? 0, 0), 0);
+    const colorPrimary = getColorPrimary(options);
+    const themeColors = getThemeColors(options.themeConfig);
+    // 1. 饼图生成器
+    const pieGenerator = pie()
+        .value((item) => Math.max(item.value ?? 0, 0))
+        .sort(null)
+        .startAngle(0)
+        .endAngle(Math.PI * 2);
+    const arcData = pieGenerator(items);
+    // 2. 弧形生成器
+    const arcGenerator = arc()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius)
+        .cornerRadius(2);
+    // 连线起点
+    const innerArc = arc()
+        .innerRadius(outerRadius)
+        .outerRadius(outerRadius);
+    // 连线拐点
+    const outerArc = arc()
+        .innerRadius(outerRadius * 1.15)
+        .outerRadius(outerRadius * 1.15);
+    const percentTextRadius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const percentageArc = arc()
+        .innerRadius(percentTextRadius)
+        .outerRadius(percentTextRadius);
+    // 删除按钮位置
+    const deleteButtonArc = arc()
+        .innerRadius(outerRadius * 0.85)
+        .outerRadius(outerRadius * 0.85);
+    const sliceElements = [];
+    const percentElements = [];
+    const connectorElements = [];
+    const itemElements = [];
+    const btnElements = [];
+    // 3. 遍历生成图形
+    arcData.forEach((arcDatum) => {
+        const currentItem = arcDatum.data;
+        const originalIndex = arcDatum.index;
+        const color = getPaletteColor(options, [originalIndex]) ||
+            themeColors.colorPrimary ||
+            colorPrimary;
+        // --- 绘制扇形 ---
+        const pathD = arcGenerator(arcDatum) || '';
+        sliceElements.push(_jsx(Path, { d: pathD, fill: color, stroke: themeColors.colorBg, strokeWidth: 1, "data-element-type": "shape", width: outerRadius * 2, height: outerRadius * 2 }));
+        // --- 计算关键点 ---
+        const midAngle = arcDatum.startAngle + (arcDatum.endAngle - arcDatum.startAngle) / 2;
+        const isRight = midAngle < Math.PI;
+        // 1. 起点
+        const p0 = innerArc.centroid(arcDatum);
+        // 2. 拐点
+        const p1 = outerArc.centroid(arcDatum);
+        // 3. 终点 (水平拉伸)
+        const labelXOffset = outerRadius * extensionFactor * (isRight ? 1 : -1);
+        const p2 = [labelXOffset, p1[1]];
+        // --- 绘制连线 ---
+        connectorElements.push(_jsx(Path, { d: `M${centerX + p0[0]} ${centerY + p0[1]} L${centerX + p1[0]} ${centerY + p1[1]} L${centerX + p2[0]} ${centerY + p2[1]}`, stroke: colorPrimary, strokeOpacity: 0.45, strokeWidth: 2, fill: "none", "data-element-type": "shape" }));
+        // --- 绘制 Item ---
+        const itemX = centerX + p2[0] + (isRight ? textGap : -textGap - labelWidth);
+        const itemY = centerY + p2[1] - labelHeight / 2;
+        itemElements.push(_jsx(Item, { indexes: [originalIndex], datum: currentItem, data: data, x: itemX, y: itemY, width: labelWidth, height: labelHeight, positionH: isRight ? 'normal' : 'flipped', positionV: "middle", themeColors: getThemeColors({ colorPrimary: color }, options) }));
+        // --- 绘制百分比 ---
+        if (showPercentage && totalValue > 0) {
+            const percentPos = percentageArc.centroid(arcDatum);
+            const value = Math.max(arcDatum.value, 0);
+            const percentText = ((value * 100) / totalValue).toFixed(1);
+            // 定义文本框尺寸
+            const textWidth = 50;
+            const textHeight = 20;
+            percentElements.push(_jsx(Text, { x: centerX + percentPos[0] - textWidth / 2, y: centerY + percentPos[1] - textHeight / 2, width: textWidth, height: textHeight, alignHorizontal: "center", alignVertical: "middle", fontSize: 12, fontWeight: "bold", fill: "#ffffff", "data-value": value, "data-indexes": [originalIndex], "data-element-type": "item-value" /* ElementTypeEnum.ItemValue */, children: `${percentText}%` }));
+        }
+        // --- 绘制删除按钮 ---
+        const deletePos = deleteButtonArc.centroid(arcDatum);
+        btnElements.push(_jsx(BtnRemove, { indexes: [originalIndex], x: centerX + deletePos[0] - btnBounds.width / 2, y: centerY + deletePos[1] - btnBounds.height / 2 }));
+    });
+    // --- 绘制添加按钮 ---
+    arcData.forEach((arcDatum, index) => {
+        const nextIndex = (index + 1) % arcData.length;
+        const currentEnd = arcDatum.endAngle;
+        const nextStart = arcData[nextIndex].startAngle + (nextIndex === 0 ? Math.PI * 2 : 0);
+        const midAngle = (currentEnd + nextStart) / 2;
+        const btnR = outerRadius * 1.0;
+        const btnX = Math.sin(midAngle) * btnR;
+        const btnY = -Math.cos(midAngle) * btnR;
+        btnElements.push(_jsx(BtnAdd, { indexes: [index + 1], x: centerX + btnX - btnBounds.width / 2, y: centerY + btnY - btnBounds.height / 2 }));
+    });
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 30, children: [titleContent, _jsxs(Group, { width: totalWidth, height: totalHeight, children: [_jsx(Group, { x: centerX, y: centerY, children: sliceElements }), _jsx(Group, { children: connectorElements }), _jsx(Group, { children: percentElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('chart-pie', {
+    component: ChartPie,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/compare-binary-horizontal/dividers/pros-cons-arrow.js

@@ -15,6 +15,6 @@ export const ProsConsArrow = (props) => {
         fontWeight: 'bold',
         fill: colorBg,
     };
-    return (_jsxs(Group, { x: x, y: y, width: width, height: height, children: [_jsxs(ShapesGroup, { children: [_jsx("path", { d: "M137 54C137 54.2903 137 54.5806 136.706 54.7742L108.614 86.0323H64.7619C64.4071 86.0204 64.0557 86.1043 63.7453 86.2747C63.4349 86.4452 63.1773 86.6959 63 87C63.0037 86.7447 63.1092 86.5012 63.2936 86.3226L91.3862 55.0645H135.238C135.593 55.0763 135.944 54.9925 136.255 54.822C136.565 54.6516 136.823 54.4009 137 54.0968V54Z", fill: "#D9D9D9" }), _jsx("path", { d: "M39.3272 0.484649C39.6146 0.234929 39.9662 0.0736935 40.3407 0.0198929C40.7152 -0.0339076 41.0971 0.0219605 41.4414 0.180925C41.7857 0.33989 42.0783 0.595358 42.2846 0.917314C42.491 1.23927 42.6026 1.61434 42.6063 1.99848V14.8156H136.013C136.54 14.8156 137.045 15.0282 137.418 15.4068C137.791 15.7853 138 16.2987 138 16.834V53.166C138 53.7013 137.791 54.2147 137.418 54.5932C137.045 54.9718 136.54 55.1844 136.013 55.1844H42.6063V68.0015C42.6026 68.3857 42.491 68.7607 42.2846 69.0827C42.0783 69.4046 41.7857 69.6601 41.4414 69.8191C41.0971 69.9781 40.7152 70.0339 40.3407 69.9801C39.9662 69.9263 39.6146 69.7651 39.3272 69.5154L0.672847 36.5138C0.461378 36.3244 0.292014 36.0915 0.176005 35.8305C0.0599968 35.5695 0 35.2864 0 35C0 34.7136 0.0599968 34.4306 0.176005 34.1696C0.292014 33.9085 0.461378 33.6756 0.672847 33.4862L39.4265 0.484649H39.3272Z", fill: colorPositive }), _jsx("path", { d: "M157.394 73.0007C157.397 72.6162 157.509 72.2407 157.715 71.9183C157.922 71.596 158.214 71.3403 158.559 71.1811C158.903 71.022 159.285 70.9661 159.659 71.0199C160.034 71.0738 160.385 71.2352 160.673 71.4852L199.327 104.524C199.539 104.714 199.708 104.947 199.824 105.208C199.94 105.47 200 105.753 200 106.04C200 106.326 199.94 106.61 199.824 106.871C199.708 107.132 199.539 107.366 199.327 107.555L160.573 140.594C160.285 140.815 159.943 140.951 159.584 140.989C159.225 141.027 158.862 140.965 158.535 140.809C158.208 140.653 157.929 140.41 157.728 140.105C157.527 139.8 157.411 139.445 157.394 139.078V126.247H63.9874C63.4603 126.247 62.9548 126.034 62.5821 125.655C62.2094 125.276 62 124.762 62 124.226V87.8531C62 87.3172 62.2094 86.8032 62.5821 86.4242C62.9548 86.0453 63.4603 85.8324 63.9874 85.8324H157.394V73.0007Z", fill: colorNegative })] }), _jsx(Text, { x: 45, y: 15, ...textAttrs, children: "Pros" }), _jsx(Text, { x: 65, y: 86, ...textAttrs, children: "Cons" })] }));
+    return (_jsxs(Group, { x: x, y: y, width: width, height: height, children: [_jsxs(ShapesGroup, { children: [_jsx("path", { d: "M137 54C137 54.2903 137 54.5806 136.706 54.7742L108.614 86.0323H64.7619C64.4071 86.0204 64.0557 86.1043 63.7453 86.2747C63.4349 86.4452 63.1773 86.6959 63 87C63.0037 86.7447 63.1092 86.5012 63.2936 86.3226L91.3862 55.0645H135.238C135.593 55.0763 135.944 54.9925 136.255 54.822C136.565 54.6516 136.823 54.4009 137 54.0968V54Z", fill: "#D9D9D9" }), _jsx("path", { d: "M39.3272 0.484649C39.6146 0.234929 39.9662 0.0736935 40.3407 0.0198929C40.7152 -0.0339076 41.0971 0.0219605 41.4414 0.180925C41.7857 0.33989 42.0783 0.595358 42.2846 0.917314C42.491 1.23927 42.6026 1.61434 42.6063 1.99848V14.8156H136.013C136.54 14.8156 137.045 15.0282 137.418 15.4068C137.791 15.7853 138 16.2987 138 16.834V53.166C138 53.7013 137.791 54.2147 137.418 54.5932C137.045 54.9718 136.54 55.1844 136.013 55.1844H42.6063V68.0015C42.6026 68.3857 42.491 68.7607 42.2846 69.0827C42.0783 69.4046 41.7857 69.6601 41.4414 69.8191C41.0971 69.9781 40.7152 70.0339 40.3407 69.9801C39.9662 69.9263 39.6146 69.7651 39.3272 69.5154L0.672847 36.5138C0.461378 36.3244 0.292014 36.0915 0.176005 35.8305C0.0599968 35.5695 0 35.2864 0 35C0 34.7136 0.0599968 34.4306 0.176005 34.1696C0.292014 33.9085 0.461378 33.6756 0.672847 33.4862L39.4265 0.484649H39.3272Z", fill: colorPositive }), _jsx("path", { d: "M157.394 73.0007C157.397 72.6162 157.509 72.2407 157.715 71.9183C157.922 71.596 158.214 71.3403 158.559 71.1811C158.903 71.022 159.285 70.9661 159.659 71.0199C160.034 71.0738 160.385 71.2352 160.673 71.4852L199.327 104.524C199.539 104.714 199.708 104.947 199.824 105.208C199.94 105.47 200 105.753 200 106.04C200 106.326 199.94 106.61 199.824 106.871C199.708 107.132 199.539 107.366 199.327 107.555L160.573 140.594C160.285 140.815 159.943 140.951 159.584 140.989C159.225 141.027 158.862 140.965 158.535 140.809C158.208 140.653 157.929 140.41 157.728 140.105C157.527 139.8 157.411 139.445 157.394 139.078V126.247H63.9874C63.4603 126.247 62.9548 126.034 62.5821 125.655C62.2094 125.276 62 124.762 62 124.226V87.8531C62 87.3172 62.2094 86.8032 62.5821 86.4242C62.9548 86.0453 63.4603 85.8324 63.9874 85.8324H157.394V73.0007Z", fill: colorNegative })] }), _jsx(Text, { x: 40, y: 15, ...textAttrs, children: "Pros" }), _jsx(Text, { x: 70, y: 85, ...textAttrs, children: "Cons" })] }));
 };
 registerDivider('pros-cons-arrow', ProsConsArrow);

package/esm/designs/structures/hierarchy-mindmap.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentType } from '../../jsx';
+import type { HierarchyColorMode } from '../utils';
+import type { BaseStructureProps } from './types';
+type EdgeAlign = 'top' | 'center' | 'bottom' | number;
+type EdgeType = 'curved' | 'straight';
+type EdgeColorMode = 'solid' | 'gradient';
+export interface HierarchyMindmapProps extends BaseStructureProps {
+    /** 水平层级间距 */
+    levelGap?: number;
+    /** 垂直节点间距 */
+    nodeGap?: number;
+    /** 连线在节点上的垂直对齐方式；字符串为固定位置，数字为 0-1 比例 */
+    edgeAlign?: EdgeAlign;
+    /** 节点/连线着色模式 */
+    colorMode?: HierarchyColorMode;
+    /** 连线颜色模式 */
+    edgeColorMode?: EdgeColorMode;
+    /** 连线类型：曲线或直线 */
+    edgeType?: EdgeType;
+    /** 连线宽度 */
+    edgeWidth?: number;
+}
+export declare const HierarchyMindmap: ComponentType<HierarchyMindmapProps>;
+export {};