@publishfx/publish-chart 2.0.3 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+**2.1.0** fix(chart): ts错误修复
+- 2026-02-28T16:06:24+08:00 [fix(chart): ts错误修复](http://lf.git.oa.mt/publish_platform/web/publish/commit/7a070b0f77b3ff41450fce0884f8713ebd58f4b2)
+- 2026-02-28T15:53:07+08:00 [fix(chart): 柱状图和折线图的图例分别设置为square和line](http://lf.git.oa.mt/publish_platform/web/publish/commit/a11ccf463d4fad84ae0d4b84672bc1db79951bb1)
+- 2026-02-28T15:40:18+08:00 [feat(chart): 折线图和组合图支持节点详情](http://lf.git.oa.mt/publish_platform/web/publish/commit/73593a0644bc956772395a307f6e73f43b80a159)
+- 2026-02-28T15:19:08+08:00 [fix(chart): 节点详情Dom结构修改](http://lf.git.oa.mt/publish_platform/web/publish/commit/0e8de83391883c976bf9a4aaaff161679f845c09)
+- 2026-02-28T15:17:44+08:00 [feat: 堆积图数据标签&高亮](http://lf.git.oa.mt/publish_platform/web/publish/commit/867b4341e71a8703f31b4c1808b7d57e0a58c480)
+- 2026-02-28T15:09:33+08:00 [feat(chart): 新增柱状图节点详情支持](http://lf.git.oa.mt/publish_platform/web/publish/commit/fd94eacc4618f04704caf4c61c8e914900ceb688)
+- 2026-02-28T12:22:23+08:00 [feat(chart): 着重显示的逻辑联动tooltipRender的数据处理](http://lf.git.oa.mt/publish_platform/web/publish/commit/934e5a798d8424327aa13a3d739fb03cc00935f4)
+- 2026-02-28T12:12:29+08:00 [feat(chart): 新增高亮日期辅助函数](http://lf.git.oa.mt/publish_platform/web/publish/commit/539ccc99d93680497fa770ea5c08c80b119eb098)
+- 2026-02-28T00:08:09+08:00 [feat(chart): 组合图tooltip修正](http://lf.git.oa.mt/publish_platform/web/publish/commit/12ac7885e508cf26a1b8322a6c048c25accfba54)
+- 2026-02-27T22:50:37+08:00 [feat(chart): G2Combine组合图支持双轴展示](http://lf.git.oa.mt/publish_platform/web/publish/commit/8c4428edecd5922f75746c168fd76da68364c690)
+- 2026-02-27T21:46:47+08:00 [feat: 堆积图](http://lf.git.oa.mt/publish_platform/web/publish/commit/55e60330c83cc19e548bbb91c9ed0837d39a9282)
+- 2026-02-27T20:58:12+08:00 [feat(chart): 图例组件支持symbol符号](http://lf.git.oa.mt/publish_platform/web/publish/commit/06435b768d54913aacf12280ff9e7b2e782fb7cb)
+- 2026-02-27T20:44:47+08:00 [fix(chart): G2Combine组合图的图例逻辑修改成线上一致](http://lf.git.oa.mt/publish_platform/web/publish/commit/ff7d39e61c9945aa9c1db61d319a7ae3d0cba23b)
+- 2026-02-27T19:49:23+08:00 [fix(chart): 组合图补充节点逻辑](http://lf.git.oa.mt/publish_platform/web/publish/commit/05ab21057b5c7695e559ab664c8e2135fd8b7f49)
+- 2026-02-27T19:45:55+08:00 [feat(chart): G2CombineChart组合图初步提交](http://lf.git.oa.mt/publish_platform/web/publish/commit/36e1d93d3d9714c8899e23bb86a829c22ce24aab)
+- 2026-02-27T16:10:00+08:00 [fix(chart): 修复折线图高亮参数支持](http://lf.git.oa.mt/publish_platform/web/publish/commit/691e792838831d92d2b1229ee500dab30b5af913)
+- 2026-02-27T16:01:24+08:00 [fix(chart): 辅助线使用自定义render渲染](http://lf.git.oa.mt/publish_platform/web/publish/commit/a9285296553ccb0c1c7e52a2365a1bd6c386d26b)
+- 2026-02-27T15:57:34+08:00 [feat(chart): 更新G2LineChart组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/c7c25e369fcebf1c04f1c9487d0de0dc7b533ef3)
+- 2026-02-26T23:33:58+08:00 [fix(chart): G2BarChart的图例文案保持一致](http://lf.git.oa.mt/publish_platform/web/publish/commit/01b0ae29d1deccb600163cefb983788c38e0948d)
+- 2026-02-26T22:58:27+08:00 [feat(chart): 增加G2BarChart柱状图](http://lf.git.oa.mt/publish_platform/web/publish/commit/b69d46602f28d3f68531f516a162ea6717a21ffc)
+- 2026-02-26T22:32:20+08:00 [feat(chart): G2版本Tooltip渲染函数更新](http://lf.git.oa.mt/publish_platform/web/publish/commit/2788488cdbe38561ec19b8f1fab814f0292029ed)
+- 2026-02-11T23:23:12+08:00 [feat(chart): 新增G2PieChart饼图和G2IndicatorCardChart指标卡图表组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/42e516b980dbccc39def106611af29eea64e42de)
+- 2026-02-11T20:19:51+08:00 [feat(chart): legend](http://lf.git.oa.mt/publish_platform/web/publish/commit/dc1957c73dbd91107ba6ca2f8e4f2aefbedb4b36)
+- 2026-02-10T16:31:05+08:00 [feat(chart): tooltip优化](http://lf.git.oa.mt/publish_platform/web/publish/commit/6a486017fcaf23bd478d269b4e74962347e316ba)
+- 2026-02-10T15:55:53+08:00 [feat(chart): tooltips](http://lf.git.oa.mt/publish_platform/web/publish/commit/bceab306e7ff2dd855a789982b9df37292bca2fe)
+- 2026-02-06T20:03:25+08:00 [feat: 节点信息&对比时间](http://lf.git.oa.mt/publish_platform/web/publish/commit/893949661301676195b1dba1a9531678da50f926)
+- 2026-02-05T18:38:44+08:00 [feat: 着重日功能](http://lf.git.oa.mt/publish_platform/web/publish/commit/a50195b6cc5d0f6645151194fa8d6e856e5af69a)
+
 **2.0.3** feat(chart): G2GaugeChart设置value文本的颜色和阈值保持一致
 - 2026-02-05T15:06:47+08:00 [feat(chart): G2GaugeChart设置value文本的颜色和阈值保持一致](http://lf.git.oa.mt/publish_platform/web/publish/commit/6b80990920484818132164048278789e6f6aa740)
 

package/dist/adapters/DataAdapter.d.ts

@@ -1,5 +1,5 @@
 export interface TransformConfig {
-    type: 'bar' | 'line' | 'barLine' | 'groupCompare';
+    type: 'bar' | 'groupBar' | 'line' | 'barLine' | 'groupCompare';
     x?: string;
     y?: string;
     z?: string;
@@ -15,9 +15,13 @@ export declare class DataAdapter {
      */
     static transform(data: any[], transformType: TransformConfig['type'], config: TransformConfig): any[];
     /**
-     * 柱状图数据转换
-     */
+   * 柱状图数据转换
+   */
     private static transformForBar;
+    /**
+   * 堆积图数据转换
+   */
+    private static transformForGroupBar;
     /**
      * 折线图数据转换
      */

package/dist/adapters/DataAdapter.js

@@ -5,6 +5,8 @@ class DataAdapter {
         switch(transformType){
             case 'bar':
                 return this.transformForBar(data, config);
+            case 'groupBar':
+                return this.transformForGroupBar(data, config);
             case 'line':
                 return this.transformForLine(data, config);
             case 'barLine':
@@ -37,6 +39,65 @@ class DataAdapter {
         }
         return dv.rows;
     }
+    static transformForGroupBar(data, config) {
+        const ds = new lib();
+        const dv = ds.createView().source(data);
+        const tdv = ds.createView().source(data);
+        if (config.y && config.x) {
+            dv.transform({
+                type: 'map',
+                callback: (row)=>{
+                    row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                    return row;
+                }
+            });
+            tdv.transform({
+                type: 'map',
+                callback: (row)=>{
+                    row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                    return row;
+                }
+            });
+            tdv.transform({
+                type: 'filter',
+                callback (row) {
+                    return !row[config.y] || '-' !== row[config.y];
+                }
+            });
+            tdv.transform({
+                type: 'aggregate',
+                fields: [
+                    config.y
+                ],
+                groupBy: [
+                    config.x
+                ],
+                operations: [
+                    'sum'
+                ],
+                as: [
+                    'total'
+                ]
+            });
+            tdv.transform({
+                type: 'sort',
+                callback (a, b) {
+                    return b.total - a.total;
+                }
+            });
+            const xKey = config.x ?? 'x';
+            const sortData = tdv.rows.map((item)=>item[xKey]);
+            if (config.isDescend) dv.transform({
+                type: 'sort',
+                callback (a, b) {
+                    if (-1 === sortData.indexOf(a[xKey])) return config.isHorizontal ? -1 : 1;
+                    if (-1 === sortData.indexOf(b[xKey])) return config.isHorizontal ? 1 : -1;
+                    return config.isHorizontal ? sortData.indexOf(b[xKey]) - sortData.indexOf(a[xKey]) : sortData.indexOf(a[xKey]) - sortData.indexOf(b[xKey]);
+                }
+            });
+        }
+        return dv.rows;
+    }
     static transformForLine(data, config) {
         const ds = new lib();
         const dv = ds.createView().source(data);

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

@@ -1,8 +1,9 @@
 /**
  * G2@5 基础柱状图组件
- * 复用现有架构，仅在渲染层面使用 G2@5 API
+ * 绘制逻辑复用 g2bar.renderG2BarChart，数据与 React 层（Context、Tooltip）在此组件内处理
+ * 支持单指标柱状、横向/纵向、升序/降序、数据标签、图例、辅助线
  */
-import React from 'react';
-import type { BaseChartProps } from '../../../core/ChartTypes';
+import React from "react";
+import type { BaseChartProps } from "../../../core/ChartTypes";
 declare const G2BarChart: React.FC<BaseChartProps>;
 export default G2BarChart;

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

@@ -1,19 +1,41 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
-import { Chart } from "@antv/g2";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import react_dom from "react-dom";
 import { useChartContext } from "../../../core/ChartContext.js";
+import { getAxisFormat } from "../../../utils/chartHelpers.js";
 import { DataAdapter } from "../../../adapters/DataAdapter.js";
-const G2BarChart = ({ height = 300, data, x = '', y = '', indicatorMap, onChartClick, legend = '', config })=>{
+import { NodePopover } from "../../shared/NodePopover.js";
+import { NodeDetail } from "../../shared/NodeDetail.js";
+import { transformIndicatorList } from "../../../utils/dataTransform.js";
+import G2CompareTooltip from "../shared/G2CompareTooltip.js";
+import useG2TooltipContainer from "../shared/useG2TooltipContainer.js";
+import { renderG2BarChart } from "./g2bar.js";
+import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
+import { G2BarLegend } from "./G2BarLegend.js";
+const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
+    showType: 0,
+    type: []
+}, auxiliaryLineData, highlightDate = [], indicators = [], timeRange })=>{
+    console.log("props data:", data, nodeSetting, "x:", x, "y:", y, "legend:", legend, "indicators:", indicators, timeRange);
     const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const tooltipContainerRef = useG2TooltipContainer();
+    const themeColors = contextConfig?.theme?.colors || [];
     const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
-    const safeLegend = legend || y;
+    const safeLegend = "groupType" !== legend ? legend || y : y;
+    const isCompare = timeRange?.compareStartTime !== "";
+    const safeY = "groupValue";
     const chartConfig = config || {};
-    const { isDataTag = false, isDescend = false, isHorizontal = false } = chartConfig;
+    const { isDataTag = false, isDescend = false, isHorizontal = false, isLegend = true, isHighlight = true } = chartConfig;
     const transformedData = useMemo(()=>{
-        const result = DataAdapter.transform(data, 'bar', {
-            type: 'bar',
+        console.log("transformedData: bar ---", legend, data, indicators);
+        if (!legend) {
+            let result = transformIndicatorList(indicators, data);
+            data = result[y] || [];
+        }
+        const result = DataAdapter.transform(data, "bar", {
+            type: "bar",
             x,
-            y,
+            y: safeY,
             isDescend,
             isHorizontal
         });
@@ -21,86 +43,205 @@ const G2BarChart = ({ height = 300, data, x = '', y = '', indicatorMap, onChartC
     }, [
         data,
         x,
-        y,
+        safeY,
         isDescend,
         isHorizontal,
         dataTransform,
         contextConfig.nodeMap
     ]);
+    console.log("transformedData: bar final", transformedData);
     const maxY = useMemo(()=>{
-        const values = transformedData.filter((item)=>'-' !== item[y] && void 0 !== item[y] && null !== item[y]).map((item)=>Number(item[y]) || 0);
-        return values.length > 0 ? Math.max(...values) : 0;
+        const values = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]) || 0);
+        const dataMax = values.length > 0 ? Math.max(...values) : 0;
+        const auxValues = auxiliaryLineData?.length ? auxiliaryLineData.map((item)=>item.value) : [];
+        const maxAux = auxValues.length ? Math.max(...auxValues) : dataMax;
+        return Math.max(dataMax, maxAux);
     }, [
         transformedData,
-        y
+        safeY,
+        auxiliaryLineData
+    ]);
+    const formatAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeLegend), [
+        safeIndicatorMap,
+        safeLegend
     ]);
+    const [xyList, setXYList] = useState([]);
+    const [activeIds, setActiveIds] = useState([]);
+    const [legendItems, setLegendItems] = useState([]);
     const containerRef = useRef(null);
     const chartRef = useRef(null);
+    const [viewWidth, setViewWidth] = useState(0);
+    const [viewOffset, setViewOffset] = useState(0);
+    useEffect(()=>{
+        if (!transformedData.length) {
+            setLegendItems([]);
+            setActiveIds([]);
+            return;
+        }
+        const groupTypes = Array.from(new Set(transformedData.map((d)=>d.groupType).filter((v)=>null != v)));
+        const items = groupTypes.map((id, index)=>({
+                id: String(id),
+                label: getIndicatorCompareName(safeIndicatorMap, String(id)) + (id.includes("_compare") ? `（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : ""),
+                color: themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9",
+                isCompare: String(id).includes("_compare"),
+                symbol: "square"
+            }));
+        setLegendItems(items);
+        if (!activeIds.length) setActiveIds(items.map((i)=>i.id));
+    }, [
+        transformedData,
+        safeIndicatorMap,
+        themeColors,
+        activeIds.length
+    ]);
+    const filteredData = useMemo(()=>{
+        if (!activeIds.length) return transformedData;
+        return transformedData.filter((d)=>d.groupType ? activeIds.includes(String(d.groupType)) : true);
+    }, [
+        transformedData,
+        activeIds
+    ]);
+    const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : 16 : 0;
     useEffect(()=>{
         if (!containerRef.current || !transformedData.length) return;
-        if (chartRef.current) chartRef.current.destroy();
-        const chart = new Chart({
-            container: containerRef.current,
-            autoFit: true,
-            height: height
-        });
-        chart.data(transformedData);
-        if (isHorizontal) chart.coordinate({
-            transform: [
-                {
-                    type: 'transpose'
-                }
-            ]
-        });
-        chart.scale({
-            [y]: {
-                nice: true,
-                min: 0,
-                max: maxY
+        if (chartRef.current) {
+            chartRef.current.destroy();
+            chartRef.current = null;
+        }
+        const chart = renderG2BarChart(containerRef.current, {
+            data: filteredData,
+            x,
+            y: safeY,
+            maxY,
+            themeColors,
+            indicatorMap: safeIndicatorMap,
+            formatAxis,
+            highlightDate: highlightDate ?? [],
+            isCompare,
+            isDataTag,
+            isLegend: !!isCompare,
+            isHorizontal,
+            isHighlight,
+            legend: safeLegend || void 0,
+            formatLabel: isDataTag && safeY ? (d)=>{
+                const v = d[safeY];
+                return "-" === v || null == v ? "" : formatter.formatIndicator(v, safeIndicatorMap[safeLegend]);
+            } : void 0,
+            height: height - canvasMarginBottom,
+            tooltipRender: (title, items)=>{
+                const container = tooltipContainerRef.current;
+                if (!container) return null;
+                let safeItems = items.map((i)=>({
+                        ...i,
+                        color: i.color || "transparent"
+                    }));
+                safeItems = safeItems.filter((i)=>i.indicatorId);
+                react_dom.render(/*#__PURE__*/ jsx(G2CompareTooltip, {
+                    title: title,
+                    items: safeItems,
+                    safeIndicatorMap: safeIndicatorMap,
+                    formatter: formatter,
+                    safeLegend: safeLegend,
+                    auxiliaryLineData: auxiliaryLineData
+                }), container);
+                return container;
             },
-            [x]: {
-                type: 'cat'
+            auxiliaryLineData: auxiliaryLineData ?? [],
+            onNodeListChange: (nodes)=>{
+                console.log("g2bar node list:", nodes, nodes[0], nodes[1]);
+                setXYList(nodes);
+            },
+            timeRange,
+            onChartRender: (chartProps)=>{
+                console.log("chartProps:", chartProps);
+                setViewWidth(chartProps.layout.innerWidth);
+                setViewOffset(chartProps.layout.paddingLeft + chartProps.layout.marginLeft);
             }
         });
-        if (safeLegend && false !== chartConfig.isLegend) chart.legend(safeLegend, {
-            position: 'top'
-        });
-        chart.interaction('poptip', true);
-        const interval = chart.interval().encode('x', x).encode('y', y);
-        if (safeLegend) interval.encode('color', safeLegend);
-        if (isDataTag) interval.label({
-            text: (d)=>formatter.formatIndicator(d[y], safeIndicatorMap[y]),
-            position: isHorizontal ? 'right' : 'top',
-            offset: 5
-        });
-        chart.render();
         chartRef.current = chart;
+        if (onChartClick) chart.on("element:click", (e)=>{
+            const datum = e.data?.data;
+            if (datum) onChartClick(datum);
+        });
         return ()=>{
             if (chartRef.current) {
+                chartRef.current.off("element:click");
                 chartRef.current.destroy();
                 chartRef.current = null;
             }
         };
     }, [
-        transformedData,
+        filteredData,
         height,
         x,
         y,
         safeLegend,
         isHorizontal,
         isDataTag,
+        isLegend,
+        isHighlight,
         maxY,
-        chartConfig.isLegend,
+        themeColors,
         safeIndicatorMap,
         formatter,
+        formatAxis,
+        highlightDate,
+        auxiliaryLineData,
         onChartClick
     ]);
-    return /*#__PURE__*/ jsx("div", {
-        ref: containerRef,
+    console.log("xyList:", xyList);
+    return /*#__PURE__*/ jsxs("div", {
         style: {
-            width: '100%',
-            height: `${height}px`
-        }
+            width: "100%",
+            position: "relative"
+        },
+        children: [
+            isLegend && legendItems.length > 1 && 2 === nodeSetting.showType && /*#__PURE__*/ jsx(G2BarLegend, {
+                items: legendItems,
+                activeIds: activeIds,
+                onChange: setActiveIds,
+                style: {
+                    marginBottom: 8
+                }
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: containerRef,
+                style: {
+                    width: "100%",
+                    height: `${height - canvasMarginBottom}px`
+                }
+            }),
+            isLegend && legendItems.length > 1 && 2 !== nodeSetting.showType && /*#__PURE__*/ jsx(G2BarLegend, {
+                items: legendItems,
+                activeIds: activeIds,
+                onChange: setActiveIds,
+                style: {
+                    marginBottom: 8
+                }
+            }),
+            2 !== nodeSetting.showType ? /*#__PURE__*/ jsx("div", {
+                children: xyList?.map((item, index)=>/*#__PURE__*/ jsx(NodePopover, {
+                        style: {
+                            position: "absolute",
+                            top: item.pointP?.y + 10,
+                            left: item.pointP?.x,
+                            width: 12,
+                            height: 12,
+                            borderRadius: "50%",
+                            transform: "translate(-50%, 0%)",
+                            background: item?.color,
+                            zIndex: 999
+                        },
+                        pointP: item.pointP,
+                        pointData: item.pointData
+                    }, index))
+            }) : /*#__PURE__*/ jsx(NodeDetail, {
+                chartWidth: viewWidth,
+                chartOffset: viewOffset,
+                dvRows: transformedData,
+                ratio: isCompare ? 2 : 1
+            })
+        ]
     });
 };
 const base_G2BarChart = G2BarChart;

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

@@ -0,0 +1,17 @@
+import React from "react";
+export type G2BarLegendItem = {
+    id: string;
+    label: string;
+    color: string;
+    isCompare?: boolean;
+    symbol?: "square" | "circle" | "line";
+};
+export type G2BarLegendProps = {
+    items: G2BarLegendItem[];
+    activeIds: string[];
+    onChange: (nextActiveIds: string[]) => void;
+    pageSize?: number;
+    maxLabelChars?: number;
+    style?: React.CSSProperties;
+};
+export declare const G2BarLegend: React.FC<G2BarLegendProps>;

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

@@ -0,0 +1,196 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Tooltip } from "@arco-design/web-react";
+const G2BarLegend = ({ items, activeIds, onChange, pageSize: pageSizeProp, maxLabelChars = 8, style })=>{
+    console.log("G2BarLegend items:", items, activeIds);
+    const [page, setPage] = useState(1);
+    const [autoPageSize, setAutoPageSize] = useState(pageSizeProp || items.length || 1);
+    const containerRef = useRef(null);
+    useEffect(()=>{
+        if (pageSizeProp) return void setAutoPageSize(pageSizeProp);
+        const computePageSize = ()=>{
+            const container = containerRef.current;
+            if (!container || !items.length) return void setAutoPageSize(items.length || 1);
+            const width = container.offsetWidth || 0;
+            if (!width) return void setAutoPageSize(items.length || 1);
+            const pagerReserveWidth = 80;
+            const availableWidth = Math.max(0, width - pagerReserveWidth);
+            const estimatedItemWidths = items.map((item)=>{
+                const labelLength = item.label ? item.label.length : 0;
+                console.log("computePageSize: estimatedItemWidths:", item.label, labelLength);
+                const visibleChars = labelLength;
+                return 16 + 8 * visibleChars;
+            });
+            const avgItemWidth = estimatedItemWidths.reduce((sum, w)=>sum + w, 0) / estimatedItemWidths.length;
+            if (!avgItemWidth || !isFinite(avgItemWidth)) return void setAutoPageSize(items.length || 1);
+            const computed = Math.max(1, Math.floor(availableWidth / avgItemWidth));
+            console.log("computePageSize: computed:", computed, availableWidth, avgItemWidth, estimatedItemWidths);
+            setAutoPageSize(computed);
+            setPage((p)=>Math.min(p, Math.max(1, Math.ceil(items.length / computed))));
+        };
+        computePageSize();
+        window.addEventListener("resize", computePageSize);
+        return ()=>{
+            window.removeEventListener("resize", computePageSize);
+        };
+    }, [
+        items,
+        pageSizeProp,
+        maxLabelChars
+    ]);
+    const total = items.length;
+    const pageCount = Math.max(1, Math.ceil(total / autoPageSize));
+    const visibleItems = useMemo(()=>{
+        const start = (page - 1) * autoPageSize;
+        const end = start + autoPageSize;
+        return items.slice(start, end);
+    }, [
+        items,
+        page,
+        autoPageSize
+    ]);
+    const handleToggle = (id)=>{
+        const isActive = activeIds.includes(id);
+        const nextSet = new Set(isActive ? activeIds.filter((x)=>x !== id) : [
+            ...activeIds,
+            id
+        ]);
+        const next = items.map((item)=>item.id).filter((itemId)=>nextSet.has(itemId));
+        onChange(next);
+    };
+    const handlePrev = ()=>{
+        setPage((p)=>p > 1 ? p - 1 : p);
+    };
+    const handleNext = ()=>{
+        setPage((p)=>p < pageCount ? p + 1 : p);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8,
+            fontSize: 12,
+            color: "#4e5969",
+            ...style
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    display: "flex",
+                    flexWrap: "nowrap",
+                    gap: 8,
+                    maxWidth: "100%",
+                    overflow: "hidden"
+                },
+                children: visibleItems.map((item)=>{
+                    const isActive = activeIds.includes(item.id);
+                    const baseColor = item.isCompare ? items.find((i)=>!i.isCompare)?.color : item.color;
+                    const displayLabel = item.label;
+                    const compareBg = `repeating-linear-gradient(-45deg,${baseColor} 0,${baseColor} 2px,#ffffff 2px, #ffffff 4px)`;
+                    let marker = null;
+                    marker = "square" === item.symbol ? /*#__PURE__*/ jsx("span", {
+                        style: {
+                            width: 10,
+                            height: 10,
+                            background: item.isCompare ? compareBg : item.color,
+                            marginRight: 4
+                        }
+                    }) : "line" === item.symbol ? /*#__PURE__*/ jsx("span", {
+                        style: {
+                            width: 10,
+                            height: 1,
+                            borderBottom: item.isCompare ? `2px dotted ${item.color}` : `2px solid ${item.color}`,
+                            marginRight: 4
+                        }
+                    }) : /*#__PURE__*/ jsx("span", {
+                        style: {
+                            width: 10,
+                            height: 10,
+                            borderRadius: "50%",
+                            marginRight: 4,
+                            boxSizing: "border-box",
+                            background: item.isCompare ? compareBg : item.color
+                        }
+                    });
+                    return /*#__PURE__*/ jsxs("div", {
+                        onClick: ()=>handleToggle(item.id),
+                        style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            padding: "2px 6px",
+                            borderRadius: 4,
+                            cursor: "pointer",
+                            userSelect: "none",
+                            opacity: isActive ? 1 : 0.5
+                        },
+                        children: [
+                            marker,
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                content: item.label,
+                                disabled: true,
+                                children: /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap"
+                                    },
+                                    children: displayLabel
+                                })
+                            })
+                        ]
+                    }, item.id);
+                })
+            }),
+            pageCount > 1 && /*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 4,
+                    marginLeft: 8,
+                    whiteSpace: "nowrap"
+                },
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: handlePrev,
+                        disabled: 1 === page,
+                        style: {
+                            border: "1px solid #d0d4db",
+                            backgroundColor: "#fff",
+                            borderRadius: 2,
+                            padding: "0 4px",
+                            cursor: 1 === page ? "not-allowed" : "pointer"
+                        },
+                        children: "<"
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        style: {
+                            fontSize: 12
+                        },
+                        children: [
+                            page,
+                            "/",
+                            pageCount
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: handleNext,
+                        disabled: page === pageCount,
+                        style: {
+                            border: "1px solid #d0d4db",
+                            backgroundColor: "#fff",
+                            borderRadius: 2,
+                            padding: "0 4px",
+                            cursor: page === pageCount ? "not-allowed" : "pointer"
+                        },
+                        children: ">"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { G2BarLegend };