@publishfx/publish-chart 2.0.2 → 2.1.0

package/dist/components/g2/base/g2groupbar.js

@@ -0,0 +1,188 @@
+import { lines } from "@antv/g-pattern";
+import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyScaleYLinear, createChart, getMainView } from "./g2Helpers.js";
+const Y_AXIS_FIELD = 'groupValue';
+function renderG2GroupBarChart(container, options) {
+    const { data, x, y, maxY, timeRange: _timeRange, themeColors, indicators: _indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight = true, isCompare: _isCompare = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, legendItems = [], indicatorId } = options;
+    const chart = createChart({
+        container,
+        height,
+        autoFit: true
+    });
+    chart.options({
+        marginBottom: 0,
+        paddingBottom: 0,
+        insetBottom: 0
+    });
+    console.log('isLegend:', legend, isLegend);
+    const view = getMainView(chart);
+    view.attr('marginBottom', isLegend ? 0 : 16);
+    if (isHorizontal) view.coordinate({
+        transform: [
+            {
+                type: 'transpose'
+            }
+        ]
+    });
+    console.log(legendItems, 'legendItems');
+    view.data(data);
+    applyScaleYLinear(view, {
+        field: 'y',
+        domainMin: 0,
+        domainMax: maxY,
+        nice: true,
+        clamp: true
+    });
+    if (isHighlight) applyHighlightDate(view, x, data, highlightDate);
+    const interval = view.interval().encode('x', x).encode('y', y).encode('color', 'groupType').transform({
+        type: 'stackY',
+        reverse: true
+    }).style({
+        columnWidthRatio: 0.5,
+        fill: (datum)=>{
+            const groupType = String(datum.groupType ?? '');
+            const index = legendItems.findIndex((item)=>item.id === groupType);
+            if (groupType.includes('_compare')) return {
+                image: lines({
+                    backgroundColor: '#fff',
+                    backgroundOpacity: 0.65,
+                    stroke: '#6aa1ff',
+                    lineWidth: 3,
+                    spacing: 3
+                }),
+                repetition: 'repeat',
+                transform: 'rotate(-30deg)'
+            };
+            return themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9";
+        }
+    });
+    applyAxisX(view, {
+        title: false,
+        grid: false
+    });
+    applyAxisY(view, {
+        title: false,
+        grid: true,
+        gridLineDash: [
+            0,
+            0
+        ],
+        labelFormatter: formatAxis
+    });
+    view.legend(false);
+    interval.tooltip({
+        items: [
+            (datum)=>{
+                const groupType = String(datum.groupType ?? '');
+                const index = legendItems.findIndex((item)=>item.id === groupType);
+                return {
+                    value: datum[Y_AXIS_FIELD],
+                    name: datum['groupType'],
+                    indicatorId,
+                    channel: Y_AXIS_FIELD,
+                    color: themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9",
+                    percent: `${(100 * Number(datum.percent)).toFixed(2)}%`
+                };
+            }
+        ].filter(Boolean)
+    });
+    if (tooltipRender) interval.interaction('tooltip', {
+        shared: true,
+        render: (_event, payload)=>{
+            const { title, items } = payload;
+            const lastIsChange = items.filter((item)=>item.isChange);
+            let safeItems = items;
+            if (lastIsChange.length > 0) safeItems = [
+                ...items.filter((item)=>!item.isChange),
+                lastIsChange[lastIsChange.length - 1]
+            ];
+            return tooltipRender(title, safeItems ?? []) ?? null;
+        }
+    });
+    else view.interaction('tooltip', true);
+    applyAuxiliaryLineY(view, auxiliaryLineData);
+    const nodeList = [];
+    console.log('nodeList data:', data);
+    data.forEach((item)=>{
+        view.shape().data([
+            {
+                [x]: item[x],
+                [y]: 0
+            }
+        ]).encode('x', x).encode('y', y).tooltip(false).style({
+            render: ({ x: px, y: py }, context)=>{
+                const { document } = context;
+                const g = document.createElement('g', {});
+                const { paddingLeft = 24, marginLeft = 12 } = context?.coordinate?.options || {};
+                const adjustLeft = paddingLeft + marginLeft;
+                if (item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0) {
+                    nodeList.push({
+                        pointP: {
+                            x: px + adjustLeft,
+                            y: py
+                        },
+                        pointData: item.nodeInfos || {},
+                        color: item.color
+                    });
+                    const c1 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 2,
+                            fill: 'white'
+                        }
+                    });
+                    const c2 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 5,
+                            fill: item.color
+                        }
+                    });
+                    g.appendChild(c2);
+                    g.appendChild(c1);
+                }
+                return g;
+            }
+        });
+    });
+    if (isDataTag && formatLabel) {
+        const groupedByX = data.reduce((acc, item)=>{
+            const key = item[x];
+            if (!acc[key]) acc[key] = [];
+            acc[key].push(item);
+            return acc;
+        }, {});
+        const lastItemsInEachStack = new Set();
+        Object.values(groupedByX).forEach((group)=>{
+            group.sort((a, b)=>a[y] - b[y]);
+            const lastItem = group[group.length - 1];
+            lastItemsInEachStack.add(lastItem);
+        });
+        interval.label({
+            text: (d)=>{
+                if (lastItemsInEachStack.has(d)) return formatLabel(d);
+                return '';
+            },
+            position: isHorizontal ? 'right' : 'top',
+            offset: 0,
+            dy: isHorizontal ? 0 : -18,
+            dx: isHorizontal ? 5 : 0,
+            textAlign: isHorizontal ? 'left' : 'center',
+            transform: [
+                {
+                    type: 'exceedAdjust'
+                }
+            ]
+        });
+    }
+    chart.render();
+    let hasEmittedNodeList = false;
+    chart.on('afterrender', ()=>{
+        if (hasEmittedNodeList) return;
+        if (onNodeListChange) onNodeListChange(nodeList);
+        hasEmittedNodeList = true;
+    });
+    return chart;
+}
+export { renderG2GroupBarChart };

package/dist/components/g2/base/g2line.d.ts

@@ -0,0 +1,77 @@
+/**
+ * G2 折线图函数式 API
+ * 复用 g2Helpers 的 createChart、scale、axis、legend、auxiliary、getColorByGroupType
+ */
+import { type AuxiliaryLineItem } from './g2Helpers';
+import { ChartTimeRange } from '../../../core/ChartTypes';
+export interface RenderG2LineChartOptions {
+    /** 已转换后的数据（含 groupValue，groupType 可能带 _compare） */
+    data: any[];
+    /** X 轴字段，如 groupName */
+    x: string;
+    /** 主指标 key，用于取色与图例 */
+    y: string;
+    /** Y 轴最小值，用于 scale domainMin（不传则用 0） */
+    minY?: number;
+    /** Y 轴最大值，用于 scale domainMax */
+    maxY: number;
+    /** 时间范围 */
+    timeRange?: ChartTimeRange;
+    /** Y 轴刻度数量，默认 5 */
+    yTickCount?: number;
+    /** 为 true 时设置 minLimit/maxLimit，使刻度在 [minY, maxY] 上均匀且恰好为 yTickCount 个（类 linear-strict） */
+    useStrictTicks?: boolean;
+    /** 主题色数组 */
+    themeColors: string[];
+    /** 多指标 id 列表，用于按顺序取色 */
+    indicators?: string[];
+    /** 指标名映射，图例文案 indicatorMap[id]?.indicatorName */
+    indicatorMap?: Record<string, {
+        indicatorName?: string;
+    }>;
+    /** Y 轴刻度格式化 */
+    formatAxis?: (val: any) => string;
+    /** 高亮日期，用于 x 轴 gridFilter */
+    highlightDate?: string[];
+    /** 辅助线 */
+    auxiliaryLineData?: AuxiliaryLineItem[];
+    /** 是否显示数据标签 */
+    isDataTag?: boolean;
+    /** 是否显示图例 */
+    isLegend?: boolean;
+    /** 是否启用图例高亮 */
+    isHighlight?: boolean;
+    /** 数据标签格式化：formatLabel(datum) */
+    formatLabel?: (datum: any) => string;
+    /** 图表高度 */
+    height?: number;
+    /** 图例宽度（像素，position 为 bottom 时生效） */
+    legendLength?: number;
+    /** 图例区域高度（像素，可选） */
+    legendSize?: number;
+    /** Tooltip 自定义渲染：返回挂载的 DOM，由调用方（如 React）注入 */
+    tooltipRender?: (title: string, items: Array<{
+        color?: string;
+        name: string;
+        value: any;
+        isChange?: boolean;
+        compareTime?: string;
+    }>) => HTMLElement | null;
+    /** 将计算出的节点信息传递给外层（用于渲染 NodePopover 等） */
+    onNodeListChange?: (nodes: Array<{
+        pointP: {
+            x: number;
+            y: number;
+        };
+        pointData: any;
+        color: string;
+    }>) => void;
+    /** 图表首次渲染完成后回调，用于 NodeDetail 获取绘图区宽高与偏移 */
+    onChartRender?: (chartProps: {
+        layout: any;
+    }) => void;
+}
+/**
+ * 在容器上渲染 G2 折线图（当期线 + 对比线 + 坐标轴 + 图例 + 辅助线），返回 Chart 实例便于 destroy/更新
+ */
+export declare function renderG2LineChart(container: HTMLElement, options: RenderG2LineChartOptions): any;

package/dist/components/g2/base/g2line.js

@@ -0,0 +1,208 @@
+import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
+const Y_AXIS_FIELD = 'groupValue';
+function renderG2LineChart(container, options) {
+    const { data, x, y, minY, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], auxiliaryLineData = [], isDataTag = false, isLegend = true, isHighlight = true, formatLabel, height = 300, legendLength: _legendLength, legendSize: _legendSize, tooltipRender, onNodeListChange, onChartRender } = options;
+    console.log('g2line data:', data, x, y);
+    const colorOpts = {
+        themeColors,
+        primaryKey: y,
+        indicators
+    };
+    const chart = createChart({
+        container,
+        height,
+        autoFit: true
+    });
+    chart.options({
+        marginBottom: 0,
+        paddingBottom: 0,
+        insetBottom: 0
+    });
+    const view = getMainView(chart);
+    view.attr('marginBottom', isLegend ? 0 : 16);
+    view.data(data);
+    const domainMin = minY ?? 0;
+    applyScaleYLinear(view, {
+        field: 'y',
+        domainMin,
+        domainMax: maxY,
+        nice: true,
+        clamp: true
+    });
+    console.log('g2linets:', x, Y_AXIS_FIELD, data);
+    const line = view.line().data(data.filter((item)=>!item.groupType.includes('_compare'))).encode('x', x).encode('y', Y_AXIS_FIELD).encode('color', 'groupType').style({
+        lineWidth: 2,
+        stroke: (_datum, index)=>themeColors[index] ?? themeColors[0]
+    });
+    const compareLine = view.line().data(data.filter((item)=>item.groupType.includes('_compare'))).encode('x', x).encode('y', Y_AXIS_FIELD).encode('color', 'groupType').style({
+        lineDash: [
+            4,
+            4
+        ],
+        lineWidth: 2,
+        stroke: (_datum, index)=>themeColors[index] ?? themeColors[0]
+    });
+    applyAxisX(view, {
+        title: false,
+        grid: true,
+        gridStroke: '#333',
+        gridLineWidth: 50,
+        gridLineDash: [
+            1000
+        ],
+        gridFilter: highlightDate.length > 0 && isHighlight ? (val)=>highlightDate.includes(val?.label) : ()=>false
+    });
+    applyAxisY(view, {
+        title: false,
+        grid: true,
+        gridStrokeOpacity: 0.2,
+        gridLineDash: [
+            0,
+            0
+        ],
+        labelFormatter: formatAxis
+    });
+    line.tooltip({
+        items: [
+            (datum)=>({
+                    value: datum[Y_AXIS_FIELD],
+                    name: datum['groupType'],
+                    indicatorId: datum['groupType'],
+                    channel: Y_AXIS_FIELD,
+                    color: getColorByGroupType(datum['groupType'], colorOpts) || 'transparent'
+                })
+        ]
+    });
+    const hasCompareData = data.some((item)=>item.groupType.includes('_compare'));
+    console.log('hasCompareData:', hasCompareData, data);
+    if (hasCompareData) compareLine.tooltip({
+        items: [
+            (datum)=>({
+                    value: datum[Y_AXIS_FIELD],
+                    compareTime: datum?.compareTime,
+                    name: datum['groupType'],
+                    indicatorId: datum['groupType'].replace('_compare', ''),
+                    channel: Y_AXIS_FIELD,
+                    color: getColorByGroupType(datum['groupType'], colorOpts) || 'transparent'
+                }),
+            (datum)=>({
+                    name: datum['groupType'].replace('_compare', '_change'),
+                    indicatorId: datum['groupType'].replace('_compare', ''),
+                    value: datum?.change,
+                    isChange: true,
+                    color: 'transparent'
+                })
+        ]
+    });
+    if (tooltipRender) line.interaction('tooltip', {
+        shared: true,
+        crosshairsY: true,
+        marker: false,
+        render: (_event, payload)=>{
+            const { title, items } = payload;
+            console.log('tooltipRender:', title, items, indicators);
+            if (indicators.length) {
+                const groupedItems = indicators.map((indicator)=>items.filter((i)=>i.indicatorId === String(indicator)));
+                console.log(groupedItems.flat(), 'tooltip groupedItems');
+                const sortedItems = groupedItems.map((group)=>[
+                        group.filter((i)=>i.name === i.indicatorId),
+                        group.filter((i)=>i.compareTime),
+                        group.filter((i)=>i.name.includes('_change'))
+                    ].filter(Boolean).flat()).flat();
+                console.log(sortedItems, 'tooltip sortedItems');
+                const formatItems = sortedItems.map((item)=>({
+                        ...item,
+                        color: getColorByGroupType(item?.indicatorId, colorOpts)
+                    }));
+                return tooltipRender(title, formatItems ?? []) ?? null;
+            }
+            {
+                const newItems = items.map((item)=>({
+                        ...item,
+                        color: getColorByGroupType(item?.indicatorId, colorOpts)
+                    }));
+                return tooltipRender(title, newItems ?? []) ?? null;
+            }
+        }
+    });
+    view.legend(false);
+    applyAuxiliaryLineY(view, auxiliaryLineData);
+    const nodeList = [];
+    console.log('nodeList data:', data);
+    data.forEach((item)=>{
+        view.shape().data([
+            {
+                [x]: item[x],
+                [y]: 0
+            }
+        ]).encode('x', x).encode('y', y).tooltip(false).style({
+            render: ({ x: px, y: py }, context)=>{
+                const { document } = context;
+                const g = document.createElement('g', {});
+                const { paddingLeft = 24, marginLeft = 12 } = context?.coordinate?.options || {};
+                const adjustLeft = paddingLeft + marginLeft;
+                if (item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0) {
+                    nodeList.push({
+                        pointP: {
+                            x: px + adjustLeft,
+                            y: py
+                        },
+                        pointData: item.nodeInfos || {},
+                        color: item.color
+                    });
+                    const c1 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 2,
+                            fill: 'white'
+                        }
+                    });
+                    const c2 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 5,
+                            fill: item.color
+                        }
+                    });
+                    g.appendChild(c2);
+                    g.appendChild(c1);
+                }
+                return g;
+            }
+        });
+    });
+    if (isDataTag && formatLabel) {
+        line.label({
+            dy: -10,
+            dx: -10,
+            offset: 0,
+            text: (d)=>formatLabel(d)
+        });
+        compareLine.label({
+            dy: -10,
+            dx: -10,
+            offset: 0,
+            text: (d)=>formatLabel(d)
+        });
+        view.labelTransform([
+            {
+                type: 'overlapDodgeY'
+            }
+        ]);
+    }
+    chart.render();
+    let hasEmittedNodeList = false;
+    chart.on('afterrender', ()=>{
+        if (hasEmittedNodeList) return;
+        if (onNodeListChange) onNodeListChange(nodeList);
+        const viewLayout = chart.getContext()?.views?.[0]?.layout;
+        if (onChartRender && viewLayout) onChartRender({
+            layout: viewLayout
+        });
+        hasEmittedNodeList = true;
+    });
+    return chart;
+}
+export { renderG2LineChart };

package/dist/components/g2/shared/G2CompareTooltip.d.ts

@@ -0,0 +1,23 @@
+type Item = {
+    color?: string;
+    name?: string;
+    value?: string | number;
+    isChange?: undefined | boolean;
+    compareTime?: undefined | string;
+    indicatorId?: string;
+    percent?: string | number;
+};
+interface Props {
+    isGroupBar?: boolean;
+    title: string;
+    items: Item[];
+    safeIndicatorMap: any;
+    formatter: any;
+    safeLegend: string;
+    auxiliaryLineData: undefined | {
+        name: string;
+        value: string | number;
+    }[];
+}
+declare const _default: import("react").NamedExoticComponent<Props>;
+export default _default;

package/dist/components/g2/shared/G2CompareTooltip.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { CompareChange } from "@publishfx/publish-components";
+import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
+const G2CompareTooltip = ({ isGroupBar = false, title, items, safeIndicatorMap, formatter, safeLegend, auxiliaryLineData })=>{
+    let auxiIndicatorId = "";
+    const uniqueColors = [];
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            padding: "0"
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: title
+            }),
+            items?.map(({ color, value, isChange, compareTime, indicatorId, name, percent }, index)=>{
+                let isFirst = false;
+                if (0 === index) auxiIndicatorId = indicatorId ?? "";
+                if (color && !uniqueColors.includes(color)) {
+                    isFirst = true;
+                    uniqueColors.push(color);
+                }
+                return /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        lineHeight: "12px",
+                        marginTop: index ? "10px" : "5px"
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        display: "inline-block",
+                                        width: "8px",
+                                        height: "8px",
+                                        marginRight: "5px",
+                                        backgroundColor: isFirst ? color : "transparent",
+                                        borderRadius: "50%"
+                                    }
+                                }),
+                                isChange ? "相比变化" : compareTime ? `${getIndicatorCompareName(safeIndicatorMap, indicatorId ?? '')}（${compareTime}）` : isGroupBar ? name : `${getIndicatorCompareName(safeIndicatorMap, indicatorId ?? '')}`,
+                                "："
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            style: {
+                                paddingLeft: "10px",
+                                fontWeight: "bold"
+                            },
+                            children: [
+                                isChange ? /*#__PURE__*/ jsx(CompareChange, {
+                                    value: value ?? 0,
+                                    fontSize: 12
+                                }) : formatter.formatIndicator(value, safeIndicatorMap[indicatorId ?? ""] ?? {}),
+                                percent && `（${percent}）`
+                            ]
+                        })
+                    ]
+                }, index);
+            }),
+            auxiliaryLineData?.map(({ name, value }, index)=>{
+                console.log("auxiliaryLineData:", name, value, safeLegend);
+                return /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        lineHeight: "12px",
+                        marginTop: "10px",
+                        marginLeft: "13px"
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            style: {
+                                marginRight: "8px"
+                            },
+                            children: [
+                                name,
+                                ":"
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            children: formatter.formatIndicator(value, safeIndicatorMap[auxiIndicatorId ?? ""] ?? {})
+                        })
+                    ]
+                }, index);
+            })
+        ]
+    });
+};
+const shared_G2CompareTooltip = /*#__PURE__*/ memo(G2CompareTooltip);
+export { shared_G2CompareTooltip as default };

package/dist/components/g2/shared/useG2TooltipContainer.d.ts

@@ -0,0 +1 @@
+export default function useG2TooltipContainer(): import("react").MutableRefObject<HTMLDivElement | null>;

package/dist/components/g2/shared/useG2TooltipContainer.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+import react_dom from "react-dom";
+function useG2TooltipContainer() {
+    const ref = useRef(null);
+    useEffect(()=>{
+        ref.current = document.createElement('div');
+        return ()=>{
+            if (ref.current) {
+                react_dom.unmountComponentAtNode(ref.current);
+                ref.current = null;
+            }
+        };
+    }, []);
+    return ref;
+}
+export { useG2TooltipContainer as default };

package/dist/components/shared/NodeDetail.js

@@ -12,7 +12,7 @@ const NodeDetail = ({ chartWidth, chartOffset, dvRows, ratio = 1 })=>{
             width: chartWidth,
             lineHeight: '14px',
             cursor: 'pointer',
-            position: 'absolute',
+            position: 'relative',
             bottom: -20,
             left: chartOffset
         },

package/dist/components/shared/NodePopover.d.ts

@@ -17,6 +17,7 @@ type NodePopoverProps = {
         x: number;
         y: number;
     };
+    style?: React.CSSProperties;
 };
 export declare const NodePopover: React.FC<NodePopoverProps>;
 export {};

package/dist/components/shared/NodePopover.js

@@ -2,7 +2,7 @@ import { Fragment, jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Popover } from "@arco-design/web-react";
 import { NodePopoverContent } from "./NodePopoverContent.js";
-const NodePopover = ({ pointData, pointP })=>{
+const NodePopover = ({ style, pointData, pointP })=>{
     const [nodeInfos, setNodeInfos] = useState([]);
     useEffect(()=>{
         setNodeInfos([
@@ -32,7 +32,8 @@ const NodePopover = ({ pointData, pointP })=>{
                     left: pointP.x - 10,
                     zIndex: 999,
                     width: 20,
-                    height: 20
+                    height: 20,
+                    ...style
                 }
             })
         })

package/dist/core/ChartTypes.d.ts

@@ -43,6 +43,10 @@ export interface ChartComponentConfig {
     isClickable?: boolean;
     isHorizontal?: boolean;
     isHighlight?: boolean;
+    innerRadius?: number;
+    outerRadius?: number;
+    minLabelPercentage?: number;
+    showOnlyLegend?: boolean;
 }
 /**
  * 辅助线数据

package/dist/index.d.ts

@@ -21,9 +21,14 @@ export { default as GroupLineCompare } from './components/composite/GroupLineCom
 export { default as MultipleLine } from './components/composite/MultipleLine';
 export { default as MultipleCompareLine } from './components/composite/MultipleCompareLine';
 export { default as G2BarChart } from './components/g2/base/G2BarChart';
+export { default as G2GroupBarChart } from './components/g2/base/G2GroupBarChart';
 export { default as G2LineChart } from './components/g2/base/G2LineChart';
+export { default as G2CombineChart } from './components/g2/base/G2CombineChart';
+export { default as G2PieChart } from './components/g2/base/G2PieChart';
 export { default as G2GaugeChart } from './components/g2/base/G2GaugeChart';
 export type { G2GaugeChartProps } from './components/g2/base/G2GaugeChart';
+export { default as G2IndicatorCardChart } from './components/g2/base/G2IndicatorCardChart';
+export type { IndicatorCardChartProps } from './components/g2/base/G2IndicatorCardChart';
 export { createLazyComponent, createLazyComponents } from './utils/lazyHelpers';
 export { TypeAdapter } from './adapters/TypeAdapter';
 export { DataAdapter } from './adapters/DataAdapter';