@publishfx/publish-chart 2.1.17 → 2.1.19

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

@@ -15,7 +15,7 @@ import { G2BarLegend } from "./G2BarLegend.js";
 const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
     showType: 0,
     type: []
-}, auxiliaryLineData, highlightDate = [], indicators = [], timeRange })=>{
+}, auxiliaryLineData, highlightDate = [], indicators = [], timeRange, isTooltipContent })=>{
     const { formatter, dataTransform, config: contextConfig } = useChartContext();
     const tooltipContainerRef = useG2TooltipContainer();
     const themeColors = contextConfig?.theme?.colors || [];
@@ -99,7 +99,10 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
         transformedData,
         activeIds
     ]);
-    const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : 16 : 0;
+    const vizBottom = useMemo(()=>isTooltipContent ? 26 : 16, [
+        isTooltipContent
+    ]);
+    const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : vizBottom : 0;
     useEffect(()=>{
         if (!containerRef.current || !transformedData.length) return;
         if (chartRef.current) {
@@ -164,6 +167,16 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
                 title: tooltipTitle
             });
         });
+        const handleWindowResize = ()=>{
+            setTimeout(()=>{
+                if (chartRef.current && containerRef.current) {
+                    const width = containerRef.current.clientWidth;
+                    const height = containerRef.current.clientHeight;
+                    chartRef.current.changeSize(width, height);
+                }
+            }, 20);
+        };
+        window.addEventListener("resize", handleWindowResize);
         return ()=>{
             if (chartRef.current) {
                 chartRef.current.off("plot:click");

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

@@ -79,8 +79,10 @@ const G2BarLegend = ({ items, activeIds, onChange, pageSize: pageSizeProp, maxLa
                     display: "flex",
                     flexWrap: "nowrap",
                     gap: 8,
-                    maxWidth: "100%",
-                    overflow: "hidden"
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    justifyContent: "center"
                 },
                 children: visibleItems.map((item)=>{
                     const isActive = activeIds.includes(item.id);
@@ -121,13 +123,20 @@ const G2BarLegend = ({ items, activeIds, onChange, pageSize: pageSizeProp, maxLa
                             borderRadius: 4,
                             cursor: "pointer",
                             userSelect: "none",
+                            minWidth: 0,
                             opacity: isActive ? 1 : 0.5
                         },
                         children: [
                             marker,
                             /*#__PURE__*/ jsx(Tooltip, {
-                                content: item.label,
+                                content: /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        color: "rgb(80, 89, 104)"
+                                    },
+                                    children: item.label
+                                }),
                                 disabled: false,
+                                color: "white",
                                 children: /*#__PURE__*/ jsx("span", {
                                     style: {
                                         maxWidth: 300,
@@ -148,7 +157,8 @@ const G2BarLegend = ({ items, activeIds, onChange, pageSize: pageSizeProp, maxLa
                     alignItems: "center",
                     gap: 4,
                     marginLeft: 8,
-                    whiteSpace: "nowrap"
+                    whiteSpace: "nowrap",
+                    flexShrink: 0
                 },
                 children: [
                     /*#__PURE__*/ jsx("button", {

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

@@ -143,7 +143,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         const lineGroupTypeArr = sortedGroupTypes.filter((v)=>"true" === v.split("_")[1]);
         const items = sortedGroupTypes.map((id, index)=>{
             const colorIndex = index;
-            const indicatorId = isGroupRef.current ? id : id.split("_")[0];
+            const indicatorId = id.split("_").slice(0, -1).join("_");
             const isCombine = "true" === id.split("_")[1];
             const lineGroupTypeIndex = lineGroupTypeArr.indexOf(id);
             const color = isGroupRef.current ? isCombine ? lineColors[lineGroupTypeIndex] || lineColors[0] : themeColors[colorIndex] || themeColors[0] : 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 1];
@@ -226,7 +226,10 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         filterLeftData,
         filterRightData
     ]);
-    const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : 16 : 0;
+    const vizBottom = useMemo(()=>isTooltipContent ? 26 : 16, [
+        isTooltipContent
+    ]);
+    const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : vizBottom : 0;
     const containerRef = useRef(null);
     const chartRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(0);
@@ -311,12 +314,23 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                 title: tooltipTitle
             });
         });
+        const handleWindowResize = ()=>{
+            setTimeout(()=>{
+                if (chartRef.current && containerRef.current) {
+                    const width = containerRef.current.clientWidth;
+                    const height = containerRef.current.clientHeight;
+                    chartRef.current.changeSize(width, height);
+                }
+            }, 20);
+        };
+        window.addEventListener("resize", handleWindowResize);
         return ()=>{
             if (chartRef.current) {
                 chartRef.current.off("plot:click");
                 chartRef.current.destroy();
                 chartRef.current = null;
             }
+            window.removeEventListener("resize", handleWindowResize);
         };
     }, [
         filteredData,

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

@@ -16,7 +16,7 @@ import { renderG2LineChart } from "./g2line.js";
 const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, timeRange, legend = "", config, nodeSetting = {
     showType: 0,
     type: []
-}, auxiliaryLineData, highlightDate, indicators = [] })=>{
+}, auxiliaryLineData, highlightDate, indicators = [], isTooltipContent })=>{
     const { formatter, dataTransform, config: contextConfig } = useChartContext();
     const tooltipContainerRef = useG2TooltipContainer();
     const themeColors = contextConfig?.theme?.colors || [];
@@ -121,7 +121,10 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         transformedData,
         activeIds
     ]);
-    const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : 16 : 0;
+    const vizBottom = useMemo(()=>isTooltipContent ? 26 : 16, [
+        isTooltipContent
+    ]);
+    const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : vizBottom : 0;
     useEffect(()=>{
         if (!containerRef.current || !filteredData.length) return;
         if (chartRef.current) {
@@ -191,6 +194,16 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             });
             chart.on("plot:pointerenter:", (event)=>{});
         }
+        const handleWindowResize = ()=>{
+            setTimeout(()=>{
+                if (chartRef.current && containerRef.current) {
+                    const width = containerRef.current.clientWidth;
+                    const height = containerRef.current.clientHeight;
+                    chartRef.current.changeSize(width, height);
+                }
+            }, 20);
+        };
+        window.addEventListener("resize", handleWindowResize);
         return ()=>{
             if (chartRef.current) {
                 chartRef.current.off("plot:click");

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

@@ -298,13 +298,15 @@ export interface GetColorByGroupTypeOptions {
 export declare function getColorByGroupType(groupType: string, options: GetColorByGroupTypeOptions): string;
 export declare function applyHighlightDate(view: any, x: string, data: any, highlightDate: string[], isHighlight: boolean): void;
 export declare function applyNodeData(view: any, nodeData: any[], x: string, y: string): {
-    pointP: {
-        x: number;
-        y: number;
-    };
-    pointData: any;
-    color: string;
-}[];
+    getNodeList: () => {
+        pointP: {
+            x: number;
+            y: number;
+        };
+        pointData: any;
+        color: string;
+    }[];
+};
 export declare function adjustDomainMax(domainMin: number, domainMax: number): number;
 export declare const sortByIndicators: (arr: string[], indicators: string[]) => string[];
 export declare function intervalSort(a: any, b: any): number;

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

@@ -249,7 +249,9 @@ function applyNodeData(view, nodeData, x, y) {
             }
         });
     });
-    return nodeList;
+    return {
+        getNodeList: ()=>nodeList
+    };
 }
 function adjustDomainMax(domainMin, domainMax) {
     return domainMax === domainMin ? domainMin > 0 ? 1.1 * domainMax : domainMax + 1000 : domainMax;

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

@@ -1,7 +1,6 @@
 import { lines } from "@antv/g-pattern";
 import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyNodeData, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
 const Y_AXIS_FIELD = 'groupValue';
-const CLOSE_NODE_DEBUG = false;
 const CLOSE_HIGHLIGHT_DEBUG = false;
 function renderG2BarChart(container, options) {
     const { data, nodeData, x, y, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight = true, isCompare = false, isClickable = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, onChartRender } = options;
@@ -143,10 +142,7 @@ function renderG2BarChart(container, options) {
         bounding: tooltipBounding
     });
     applyAuxiliaryLineY(view, auxiliaryLineData);
-    if (!CLOSE_NODE_DEBUG) {
-        const nodeList = applyNodeData(view, nodeData, x, y);
-        onNodeListChange?.(nodeList);
-    }
+    const nodeResult = applyNodeData(view, nodeData, x, y);
     if (isDataTag && formatLabel) interval.label({
         style: {
             fontWeight: 600
@@ -172,6 +168,7 @@ function renderG2BarChart(container, options) {
         if (onChartRender && viewCoordinate) onChartRender({
             layout: viewCoordinate
         });
+        onNodeListChange?.(nodeResult.getNodeList());
         hasEmittedNodeList = true;
     });
     return chart;

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

@@ -390,8 +390,7 @@ function renderG2CombineChart(container, options) {
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
     applyAuxiliaryLineY(view, auxiliaryLineData);
-    const nodeList = applyNodeData(view, nodeData, x, 'groupValue');
-    onNodeListChange?.(nodeList);
+    const nodeResult = applyNodeData(view, nodeData, x, 'groupValue');
     if (formatLabel) {
         if (isDataTag) {
             const groupedByX = intervalData.reduce((acc, item)=>{
@@ -442,11 +441,11 @@ function renderG2CombineChart(container, options) {
     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
         });
+        onNodeListChange?.(nodeResult.getNodeList());
         hasEmittedNodeList = true;
     });
     return chart;

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

@@ -126,8 +126,7 @@ function renderG2LineChart(container, options) {
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
     applyAuxiliaryLineY(view, auxiliaryLineData);
-    const nodeList = applyNodeData(view, nodeData, x, y);
-    onNodeListChange?.(nodeList);
+    const nodeResult = applyNodeData(view, nodeData, x, y);
     if (isDataTag && formatLabel) {
         line.label({
             dy: -10,
@@ -161,11 +160,11 @@ function renderG2LineChart(container, options) {
     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
         });
+        onNodeListChange?.(nodeResult.getNodeList());
         hasEmittedNodeList = true;
     });
     return chart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-chart",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [