@publishfx/publish-chart 2.1.38 → 2.1.41

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+**2.1.41** feat(chart): 分组对比折线图自定义图例与tooltip交互优化 f-6719092744
+- 2026-06-16T16:45:08+08:00 [feat(chart): 分组对比折线图自定义图例与tooltip交互优化 f-6719092744](http://lf.git.oa.mt/publish_platform/web/publish/commit/446f1dcea5fa50c1db96a395747bf26a5213a2f5)
+
+**2.1.39** feat(chart): 分组对比折线图自定义图例与tooltip交互优化 f-6719092744
+- 2026-06-16T16:45:08+08:00 [feat(chart): 分组对比折线图自定义图例与tooltip交互优化 f-6719092744](http://lf.git.oa.mt/publish_platform/web/publish/commit/446f1dcea5fa50c1db96a395747bf26a5213a2f5)
+
 **2.1.38** feat(chart): 分组对比折线图自定义图例逻辑优化 f-6719092744
 - 2026-06-16T14:36:13+08:00 [feat(chart): 分组对比折线图自定义图例逻辑优化 f-6719092744](http://lf.git.oa.mt/publish_platform/web/publish/commit/a03eaf696cb567384e0e888cb2cd1a86046ecae3)
 - 2026-06-09T11:58:41+08:00 [feat(chart): 撤销组合图tooltip优化 f-6854368983](http://lf.git.oa.mt/publish_platform/web/publish/commit/1b7e955aa4ff680ce2bad27c3709306d3f12c7d3)

package/dist/components/composite/GroupLineCompare.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import react, { memo, useEffect, useMemo, useState } from "react";
+import react, { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Axis, Chart, Legend, Line, Tooltip, View } from "bizcharts";
 import styled_components from "styled-components";
 import lib from "@antv/data-set/lib";
@@ -56,6 +56,8 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
     const [colorMap, setColorMap] = useState({});
     const [checkedLegendItems, setCheckedLegendItems] = useState(new Set());
     const [legendItems, setLegendItems] = useState([]);
+    const prevLegendItemsRef = useRef([]);
+    const isFirstRenderRef = useRef(true);
     const [padding, setPadding] = useState([
         20,
         10,
@@ -124,6 +126,17 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
         maxY,
         transformData
     ]);
+    useEffect(()=>{
+        if (transformData.length > 0) {
+            const groupTypeSet = new Set();
+            transformData.forEach((item)=>{
+                groupTypeSet.add(item.groupType);
+            });
+            setCheckedLegendItems(groupTypeSet);
+        }
+    }, [
+        isLegend
+    ]);
     useEffect(()=>{
         const groupTypeSet = new Set();
         transformData.forEach((item)=>{
@@ -155,7 +168,22 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
             }));
         setColorMap(colorMap);
         setLegendItems(legendItems);
-        setCheckedLegendItems(groupTypeSet);
+        setCheckedLegendItems((prev)=>{
+            if (isFirstRenderRef.current) {
+                isFirstRenderRef.current = false;
+                return groupTypeSet;
+            }
+            const prevLegendNames = new Set(prevLegendItemsRef.current.map((item)=>item.name));
+            const next = new Set();
+            groupTypeSet.forEach((item)=>{
+                const baseItem = item.endsWith('_compare') ? item.replace('_compare', '') : item;
+                if (prevLegendNames.has(baseItem)) {
+                    if (prev.has(baseItem)) next.add(item);
+                } else next.add(item);
+            });
+            return next;
+        });
+        prevLegendItemsRef.current = legendItems;
     }, [
         transformData
     ]);
@@ -220,6 +248,13 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
         transformData,
         x
     ]);
+    const finalLegendItems = useMemo(()=>legendItems.map((item)=>({
+                ...item,
+                unchecked: !checkedLegendItems.has(item.name)
+            })), [
+        legendItems,
+        checkedLegendItems
+    ]);
     return /*#__PURE__*/ jsxs(Chart, {
         height: height || 300,
         data: transformData,
@@ -302,17 +337,19 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
             }),
             /*#__PURE__*/ jsx(Tooltip, {
                 shared: true,
-                showCrosshairs: true,
+                showCrosshairs: checkedLegendItems.size > 0,
                 children: (title, items)=>{
-                    const originItems = items?.filter((item)=>!item.name.includes('_compare'));
+                    if (0 === checkedLegendItems.size) return null;
+                    const activeItems = items?.filter((item)=>checkedLegendItems.has(item.name)) || [];
+                    const originItems = activeItems.filter((item)=>!item.name.includes('_compare'));
                     return /*#__PURE__*/ jsx("div", {
                         style: {
                             padding: '10px 0'
                         },
-                        children: items?.length ? /*#__PURE__*/ jsxs(StyledTooltip, {
+                        children: originItems.length > 0 && /*#__PURE__*/ jsxs(StyledTooltip, {
                             children: [
-                                originItems?.map((it, index)=>{
-                                    const compareItem = items.find((item)=>item.name === `${it.name}_compare`) || {};
+                                originItems.map((it, index)=>{
+                                    const compareItem = activeItems.find((item)=>item.name === `${it.name}_compare`) || {};
                                     return /*#__PURE__*/ jsxs(react.Fragment, {
                                         children: [
                                             !index && /*#__PURE__*/ jsxs("div", {
@@ -400,7 +437,7 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
                                         ]
                                     }, index))
                             ]
-                        }) : title
+                        })
                     });
                 }
             }),
@@ -442,8 +479,7 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
                 custom: true,
                 position: "bottom-left",
                 name: legend,
-                items: legendItems,
-                filter: (name)=>checkedLegendItems.has(name),
+                items: finalLegendItems,
                 onChange: (e)=>{
                     const { unchecked, name } = e.item;
                     setCheckedLegendItems((prev)=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-chart",
-  "version": "2.1.38",
+  "version": "2.1.41",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [
@@ -24,20 +24,10 @@
     "CHANGELOG.md",
     "README.md"
   ],
-  "scripts": {
-    "build": "rslib build",
-    "dev": "rslib build --watch",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
-  },
   "devDependencies": {
     "@antv/data-set": "^0.11.8",
     "@antv/g-pattern": "^2.0.42",
     "@antv/g2": "^5.3.0",
-    "@publishfx/publish-components": "workspace:^",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.20",
     "@types/react": "^18.3.18",
@@ -55,7 +45,8 @@
     "react-dom": "^18.3.1",
     "styled-components": "^5.3.11",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "@publishfx/publish-components": "^2.1.8"
   },
   "peerDependencies": {
     "@antv/data-set": "^0.11.8",
@@ -71,5 +62,14 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
-}
+}