@publishfx/publish-chart 1.4.0 → 1.4.3

package/dist/components/composite/GroupBar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const newThemeColors: string[];
-declare const _default: import("react").MemoExoticComponent<({ height, data, x, y, legend, indicatorMap, config, auxiliaryLineData, nodeSetting, highlightDate, }: any) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ height, data, x, y, legend, indicatorMap, config, auxiliaryLineData, nodeSetting, highlightDate, }: any) => JSX.Element>;
 export default _default;

package/dist/components/composite/GroupBar.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useEffect, useMemo, useState } from "react";
+import react, { memo, useEffect, useMemo, useState } from "react";
 import { Axis, Chart, Coordinate, Interval, Legend, Tooltip, View } from "bizcharts";
 import lib from "@antv/data-set/lib";
 import { formatIndicatorV2 } from "../../utils/formatters.js";
@@ -34,8 +34,8 @@ const GroupBar = ({ height, data, x = 'groupName', y = '', legend = 'groupType',
     const ds = new lib();
     const dv = ds.createView().source(data);
     const tdv = ds.createView().source(data);
+    const [_filterData, setFilterData] = react.useState(dv.rows);
     const [chartInsWidth, setChartInsWidth] = useState(0);
-    const [axisHorPadding, setAxisHorPadding] = useState(0);
     const [padding, setPadding] = useState([
         20,
         10,
@@ -182,6 +182,9 @@ const GroupBar = ({ height, data, x = 'groupName', y = '', legend = 'groupType',
     }, [
         transformData
     ]);
+    const axisHorPadding = useMemo(()=>getAxisHorPaddingByText(maxY, indicatorMap, y) - 25, [
+        maxY
+    ]);
     return /*#__PURE__*/ jsxs(Chart, {
         height: height || 300,
         data: transformData,
@@ -365,6 +368,9 @@ const GroupBar = ({ height, data, x = 'groupName', y = '', legend = 'groupType',
                 maxItemWidth: 1,
                 visible: isLegend,
                 itemHeight: 14,
+                onChange: (ev)=>{
+                    setFilterData(ev.view?.filteredData);
+                },
                 name: legend
             }),
             /*#__PURE__*/ jsx(Legend, {
@@ -375,7 +381,6 @@ const GroupBar = ({ height, data, x = 'groupName', y = '', legend = 'groupType',
                 name: yAxis,
                 label: {
                     formatter (val) {
-                        setAxisHorPadding(getAxisHorPaddingByText(val, indicatorMap, y) - 25);
                         return getAxisFormat(val, indicatorMap, y);
                     }
                 }

package/dist/components/composite/GroupBarLine.js

@@ -202,6 +202,22 @@ const GroupBarLine = ({ height = 300, data, x = "groupName", y = "", legend = "g
     const filterFn = useMemo(()=>(item)=>highlightDate.includes(item.groupName) ?? false, [
         highlightDate
     ]);
+    const nodeViewData = useMemo(()=>{
+        const uniqueMap = new Map();
+        transformData.forEach((item)=>{
+            const hasNode = (item?.nodeInfos?.info?.length || 0) > 0 || (item?.nodeInfos?.infosCompare?.length || 0) > 0;
+            if (hasNode && !uniqueMap.has(item.groupName)) uniqueMap.set(item.groupName, {
+                groupName: item.groupName,
+                node: 0,
+                nodeInfos: item.nodeInfos,
+                color: item.color,
+                [legend]: 'NodeEvent'
+            });
+        });
+        return Array.from(uniqueMap.values());
+    }, [
+        transformData
+    ]);
     return /*#__PURE__*/ jsxs(Chart, {
         height: height,
         padding: [
@@ -496,6 +512,10 @@ const GroupBarLine = ({ height = 300, data, x = "groupName", y = "", legend = "g
                     chartIns.render(true);
                 }
             }),
+            /*#__PURE__*/ jsx(Legend, {
+                name: "color",
+                visible: false
+            }),
             leftAuxi && leftAuxi.length > 0 && /*#__PURE__*/ jsxs(View, {
                 data: leftData,
                 scale: scale,
@@ -526,9 +546,31 @@ const GroupBarLine = ({ height = 300, data, x = "groupName", y = "", legend = "g
                 ]
             }, offsetLeft),
             dv.rows.some((item)=>item?.nodeInfos?.info?.length > 0 || item?.nodeInfos?.infosCompare?.length > 0) ? /*#__PURE__*/ jsx(Fragment, {
-                children: 1 == nodeSetting.showType && NodeGeom ? /*#__PURE__*/ jsx(NodeGeom, {
-                    pointData: pointData,
-                    pointP: pointP
+                children: 1 == nodeSetting.showType && NodeGeom ? /*#__PURE__*/ jsxs(View, {
+                    data: nodeViewData,
+                    scale: {
+                        node: {
+                            min: 0,
+                            max: 1
+                        },
+                        groupName: {
+                            type: 'cat'
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Axis, {
+                            name: "node",
+                            visible: false
+                        }),
+                        /*#__PURE__*/ jsx(Legend, {
+                            name: "color",
+                            visible: false
+                        }),
+                        /*#__PURE__*/ jsx(NodeGeom, {
+                            pointData: pointData,
+                            pointP: pointP
+                        })
+                    ]
                 }) : 2 == nodeSetting.showType && NodeDetail ? 0 == chartOffset || chartOffset ? /*#__PURE__*/ jsx(NodeDetail, {
                     chartWidth: chartWidth,
                     chartOffset: chartOffset,

package/dist/components/composite/GroupCompare.d.ts

@@ -5,6 +5,7 @@ import React from "react";
 import type { BaseChartProps } from "../../core/ChartTypes";
 interface GroupCompareProps extends BaseChartProps {
     legend?: string;
+    indicatorMap?: any;
 }
 declare const _default: React.NamedExoticComponent<GroupCompareProps>;
 export default _default;

package/dist/components/composite/GroupCompare.js

@@ -27,7 +27,6 @@ const GroupCompare = ({ height = 300, data, x = "", y = "", indicatorMap, onChar
     const HOR_BAR_PADDING_RIGHT = mergedConfig.layout.horBarPaddingRight || 50;
     const { isDescend = false, isLegend = true, isHorizontal = false, isDataTag = false, isHighlight = true } = config || {};
     const [chartInsWidth, setChartInsWidth] = useState(0);
-    const [axisHorPadding, setAxisHorPadding] = useState(0);
     const [mainBarSize, setMainBarSize] = useState(void 0);
     const [backgroundHeight, setBackgroundHeight] = useState(1000);
     const legendMapRef = useRef({});
@@ -178,17 +177,6 @@ const GroupCompare = ({ height = 300, data, x = "", y = "", indicatorMap, onChar
         maxYValue,
         isHor
     ]);
-    useEffect(()=>{
-        if (isHorizontal) {
-            const calculatedPadding = getAxisHorPaddingByText(maxY, safeIndicatorMap, y) - 22;
-            setAxisHorPadding(calculatedPadding);
-        }
-    }, [
-        maxY,
-        isHorizontal,
-        safeIndicatorMap,
-        y
-    ]);
     const filterFn = useMemo(()=>(item)=>highlightDate?.includes(item.groupName) ?? false, [
         highlightDate
     ]);
@@ -210,6 +198,9 @@ const GroupCompare = ({ height = 300, data, x = "", y = "", indicatorMap, onChar
         transformData.length,
         themeColor0
     ]);
+    const axisHorPadding = useMemo(()=>getAxisHorPaddingByText(maxY, indicatorMap, y) - 22, [
+        maxY
+    ]);
     return /*#__PURE__*/ jsxs(Chart, {
         height: height,
         data: transformData,

package/dist/components/composite/GroupLine.js

@@ -14,7 +14,6 @@ const GroupLine = ({ height, data, x = 'groupName', y = '', legend = 'groupType'
 }, highlightDate })=>{
     const yAxis = 'groupValue';
     const { isDataTag = true, isLegend = true, isHighlight = true } = config || {};
-    const [axisHorPadding, setAxisHorPadding] = useState(0);
     const [padding, setPadding] = useState([
         20,
         10,
@@ -106,6 +105,9 @@ const GroupLine = ({ height, data, x = 'groupName', y = '', legend = 'groupType'
     }, [
         transformData
     ]);
+    const axisHorPadding = useMemo(()=>getAxisHorPaddingByText(maxY, indicatorMap, y) - 22, [
+        maxY
+    ]);
     return /*#__PURE__*/ jsxs(Chart, {
         height: height || 300,
         data: transformData,
@@ -271,7 +273,6 @@ const GroupLine = ({ height, data, x = 'groupName', y = '', legend = 'groupType'
                 name: yAxis,
                 label: {
                     formatter (val) {
-                        setAxisHorPadding(getAxisHorPaddingByText(val, indicatorMap, y) - 22);
                         return getAxisFormat(val, indicatorMap, y);
                     }
                 }

package/dist/components/composite/GroupLineCompare.js

@@ -56,7 +56,6 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
     const [colorMap, setColorMap] = useState({});
     const [checkedLegendItems, setCheckedLegendItems] = useState(new Set());
     const [legendItems, setLegendItems] = useState([]);
-    const [axisHorPadding, setAxisHorPadding] = useState(0);
     const [padding, setPadding] = useState([
         20,
         10,
@@ -210,6 +209,9 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
     }, [
         transformData
     ]);
+    const axisHorPadding = useMemo(()=>getAxisHorPaddingByText(maxY, indicatorMap, y) - 22, [
+        maxY
+    ]);
     return /*#__PURE__*/ jsxs(Chart, {
         height: height || 300,
         data: transformData,
@@ -451,7 +453,6 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
                 name: yAxis,
                 label: {
                     formatter (val) {
-                        setAxisHorPadding(getAxisHorPaddingByText(val, indicatorMap, y) - 22);
                         return getAxisFormat(val, indicatorMap, y);
                     }
                 }

package/dist/components/composite/MultipleCompareLine.js

@@ -15,7 +15,6 @@ const MultipleCompareLine = ({ height, data, x = 'groupName', legend = 'groupTyp
 }, highlightDate, timeRange })=>{
     const yAxis = 'groupValue';
     const { isDataTag = true, isLegend = true, isHighlight = true } = config || {};
-    const [axisHorPadding, setAxisHorPadding] = useState(0);
     const [padding, setPadding] = useState([
         20,
         10,
@@ -99,6 +98,9 @@ const MultipleCompareLine = ({ height, data, x = 'groupName', legend = 'groupTyp
     }, [
         transformData
     ]);
+    const axisHorPadding = useMemo(()=>getAxisHorPaddingByText(maxY, indicatorMap, '') - 22, [
+        maxY
+    ]);
     return /*#__PURE__*/ jsxs(Chart, {
         height: height || 300,
         data: transformData,
@@ -317,7 +319,6 @@ const MultipleCompareLine = ({ height, data, x = 'groupName', legend = 'groupTyp
                 name: yAxis,
                 label: {
                     formatter (val) {
-                        setAxisHorPadding(getAxisHorPaddingByText(val, indicatorMap, '') - 22);
                         return getAxisFormat(val, indicatorMap, '');
                     }
                 }

package/dist/components/composite/MultipleLine.js

@@ -15,7 +15,6 @@ const MultipleLine = ({ height, data, x = 'groupName', legend = 'groupType', ind
 }, highlightDate })=>{
     const yAxis = 'groupValue';
     const { isDataTag = true, isLegend = true, isHighlight = true } = config || {};
-    const [axisHorPadding, setAxisHorPadding] = useState(0);
     const [padding, setPadding] = useState([
         20,
         10,
@@ -99,6 +98,9 @@ const MultipleLine = ({ height, data, x = 'groupName', legend = 'groupType', ind
     }, [
         transformData
     ]);
+    const axisHorPadding = useMemo(()=>getAxisHorPaddingByText(maxY, indicatorMap, '') - 22, [
+        maxY
+    ]);
     return /*#__PURE__*/ jsxs(Chart, {
         height: height || 300,
         data: transformData,
@@ -274,7 +276,6 @@ const MultipleLine = ({ height, data, x = 'groupName', legend = 'groupType', ind
                 name: yAxis,
                 label: {
                     formatter (val) {
-                        setAxisHorPadding(getAxisHorPaddingByText(val, indicatorMap, '') - 22);
                         return getAxisFormat(val, indicatorMap, '');
                     }
                 }

package/dist/components/shared/NodeGeom.js

@@ -22,6 +22,10 @@ const NodeGeom = ({ pointData, pointP, isLegend = true })=>/*#__PURE__*/ jsxs(Fr
                 name: "node",
                 visible: false
             }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: "groupName",
+                visible: false
+            }),
             isLegend && /*#__PURE__*/ jsx(Legend, {
                 name: "color",
                 visible: false

package/package.json

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