@publishfx/publish-chart 2.0.2 → 2.1.0

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 };

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

@@ -0,0 +1,9 @@
+/**
+ * G2@5 柱状+折线组合图组件
+ * 基于 G2LineChart / G2BarChart 架构：x 为分类轴，y 为柱状图数值，z 为折线图数值
+ * 支持双 Y 轴（柱左、线右）或共轴，数据标签、图例、Tooltip
+ */
+import React from "react";
+import type { BaseChartProps } from "../../../core/ChartTypes";
+declare const G2CombineChart: React.FC<BaseChartProps>;
+export default G2CombineChart;

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

@@ -0,0 +1,305 @@
+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";
+import { NodePopover } from "../../shared/NodePopover.js";
+import { NodeDetail } from "../../shared/NodeDetail.js";
+import G2CompareTooltip from "../shared/G2CompareTooltip.js";
+import useG2TooltipContainer from "../shared/useG2TooltipContainer.js";
+import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
+import { renderG2CombineChart } from "./g2combine.js";
+import { G2BarLegend } from "./G2BarLegend.js";
+const transformDataToGroupBarLineFormat = (data, x = "groupName", y = "", indicators)=>{
+    if (!data || 0 === data.length) return [];
+    return data.map((item)=>{
+        const indicatorData = item?.indicatorData || {};
+        const baseKeys = indicators && indicators.length ? indicators : Object.keys(indicatorData).filter((key)=>!key.endsWith("_compare") && !key.endsWith("_change") && !key.endsWith("_compare_time"));
+        return baseKeys.flatMap((key, index)=>{
+            const indicatorValue = indicatorData[key];
+            const compareKey = `${key}_compare`;
+            const changeKey = `${key}_change`;
+            const compareTimeKey = `${key}_compare_time`;
+            const compareValue = indicatorData[compareKey];
+            const changeValue = indicatorData[changeKey];
+            const compareTimeValue = indicatorData[compareTimeKey];
+            const isCombineFlag = indicators && indicators.length ? 0 !== index : key !== y;
+            const commonBase = {
+                groupName: item[x],
+                percent: 1,
+                nodeInfos: item.nodeInfos
+            };
+            const rows = [];
+            rows.push({
+                ...commonBase,
+                groupType: key,
+                groupValue: indicatorValue,
+                isCombine: isCombineFlag,
+                total: indicatorValue,
+                change: changeValue
+            });
+            if (null != compareValue) rows.push({
+                ...commonBase,
+                groupType: compareKey,
+                groupValue: compareValue,
+                isCombine: isCombineFlag,
+                total: compareValue,
+                change: changeValue,
+                compareTime: compareTimeValue
+            });
+            return rows;
+        });
+    }).flat();
+};
+const lineColors = [
+    "#FE765E",
+    "#945FB9",
+    "#FF99C3"
+];
+const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
+    showType: 0,
+    type: []
+}, indicators = [], auxiliaryLineData, highlightDate, timeRange })=>{
+    const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const tooltipContainerRef = useG2TooltipContainer();
+    console.log("G2CombineChart props:", data, x, y, z, indicatorMap, indicators, legend, config, nodeSetting);
+    const themeColors = contextConfig?.theme?.colors || [];
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const safeLegend = "groupType" !== legend ? legend || y : y;
+    const safeZ = z;
+    const safeY = "groupValue";
+    const isCompare = timeRange?.compareStartTime !== "";
+    const chartConfig = config || {};
+    const { isDataTag = false, isLegend = true } = chartConfig;
+    const [xyList, setXYList] = useState([]);
+    const [activeIds, setActiveIds] = useState([]);
+    const [legendItems, setLegendItems] = useState([]);
+    const transformedData = useMemo(()=>{
+        if (!legend) {
+            let result = transformDataToGroupBarLineFormat(data, x, y, indicators);
+            data = result;
+        }
+        console.log("G2CombineChart transformedData2:", data);
+        const result = DataAdapter.transform(data, "barLine", {
+            type: "barLine",
+            x,
+            y: safeY,
+            z
+        });
+        return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
+    }, [
+        data,
+        x,
+        safeY,
+        z,
+        dataTransform,
+        contextConfig.nodeMap
+    ]);
+    console.log("G2CombineChart transformedData:", transformedData);
+    const { maxY } = useMemo(()=>{
+        const yValues = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]) || 0);
+        return {
+            maxY: yValues.length > 0 ? Math.max(...yValues) : 0
+        };
+    }, [
+        transformedData,
+        safeY
+    ]);
+    const formatAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeLegend), [
+        safeIndicatorMap,
+        safeLegend
+    ]);
+    const formatLineAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeZ), [
+        safeIndicatorMap,
+        safeZ
+    ]);
+    useEffect(()=>{
+        if (!transformedData.length) {
+            setLegendItems([]);
+            setActiveIds([]);
+            return;
+        }
+        const groupTypes = Array.from(new Set(transformedData.map((d)=>d.groupType.replace("_compare", "") + "_" + d.isCombine).filter((v)=>null != v)));
+        const items = groupTypes.map((id, index)=>{
+            const colorIndex = index;
+            const indicatorId = id.split("_")[0];
+            const color = 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 1];
+            return {
+                id,
+                label: getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) + (String(indicatorId).includes("_compare") ? `（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : ""),
+                color,
+                isCompare: String(indicatorId).includes("_compare"),
+                symbol: 0 === colorIndex ? "square" : "line"
+            };
+        });
+        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.replace("_compare", "") + "_" + d.isCombine)) : true);
+    }, [
+        transformedData,
+        activeIds
+    ]);
+    const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : 16 : 0;
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    const [viewWidth, setViewWidth] = useState(0);
+    const [viewOffset, setViewOffset] = useState(0);
+    useEffect(()=>{
+        if (!containerRef.current || !transformedData.length || !y) return;
+        if (!z) return;
+        if (chartRef.current) {
+            chartRef.current.destroy();
+            chartRef.current = null;
+        }
+        console.log("canvasMarginBottom:", canvasMarginBottom);
+        const chart = renderG2CombineChart(containerRef.current, {
+            data: filteredData,
+            x,
+            y: safeY,
+            z,
+            maxY,
+            themeColors,
+            indicatorMap: safeIndicatorMap,
+            formatAxis,
+            formatLineAxis,
+            isDataTag,
+            isLegend: false,
+            isCompare,
+            height: height - canvasMarginBottom,
+            formatLabel: isDataTag ? (d)=>{
+                const indicatorId = d.groupType.split("_")[0];
+                return "-" === formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]) ? "" : formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]);
+            } : void 0,
+            indicators,
+            tooltipRender: (title, items)=>{
+                const container = tooltipContainerRef.current;
+                if (!container) return null;
+                let safeItems = items.map((i)=>({
+                        ...i,
+                        color: i.color ?? themeColors[0] ?? "#5B8FF9"
+                    }));
+                console.log("safeItems:", safeItems);
+                react_dom.render(/*#__PURE__*/ jsx(G2CompareTooltip, {
+                    title: title,
+                    items: safeItems,
+                    safeIndicatorMap: safeIndicatorMap,
+                    formatter: formatter,
+                    safeLegend: safeLegend,
+                    auxiliaryLineData: auxiliaryLineData
+                }), container);
+                return container;
+            },
+            highlightDate: highlightDate ?? [],
+            timeRange,
+            onNodeListChange: (nodes)=>{
+                setXYList(nodes);
+            },
+            onChartRender: (chartProps)=>{
+                const layout = chartProps?.layout;
+                if (layout) {
+                    setViewWidth(layout.innerWidth ?? 0);
+                    setViewOffset((layout.paddingLeft ?? 0) + (layout.marginLeft ?? 0));
+                }
+            },
+            lineColors
+        });
+        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;
+            }
+        };
+    }, [
+        filteredData,
+        height,
+        x,
+        y,
+        z,
+        maxY,
+        isDataTag,
+        isLegend,
+        themeColors,
+        safeIndicatorMap,
+        formatter,
+        formatAxis,
+        onChartClick
+    ]);
+    if (!z) return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: "100%",
+            color: "#86909c",
+            padding: 16
+        },
+        children: "请传入 z 作为折线指标字段，以展示柱状+折线组合图。"
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            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.filter((item)=>!item.isCombine),
+                ratio: isCompare ? 2 : 1
+            })
+        ]
+    });
+};
+const base_G2CombineChart = G2CombineChart;
+export { base_G2CombineChart as default };

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

@@ -219,7 +219,9 @@ const G2GaugeChart = (props)=>{
             const valueText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
             valueText.setAttribute('x', String(textCenterX));
             valueText.setAttribute('y', String(valueTextY));
-            valueText.setAttribute('fill', colors[0] || '#9596d9');
+            const thresholdIndex = thresholdValues.findIndex((threshold)=>value <= threshold);
+            const thresholdColor = thresholdColorArray[thresholdIndex] || '#9596d9';
+            valueText.setAttribute('fill', thresholdColor);
             valueText.setAttribute('font-size', String(valueFontSize));
             valueText.setAttribute('font-weight', 'bold');
             valueText.setAttribute('text-anchor', 'middle');

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

@@ -0,0 +1,9 @@
+/**
+ * G2@5 堆积图组件
+ * 绘制逻辑复用 g2bar.renderG2BarChart，数据与 React 层（Context、Tooltip）在此组件内处理
+ * 支持单指标柱状、横向/纵向、升序/降序、数据标签、图例、辅助线
+ */
+import React from "react";
+import type { BaseChartProps } from "../../../core/ChartTypes";
+declare const G2GroupBarChart: React.FC<BaseChartProps>;
+export default G2GroupBarChart;