@publishfx/publish-chart 2.0.2 → 2.1.0

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

@@ -1,150 +1,253 @@
-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, splitTextToMultiline } from "../../../utils/chartHelpers.js";
+import { getAxisFormat } from "../../../utils/chartHelpers.js";
 import { DataAdapter } from "../../../adapters/DataAdapter.js";
-const G2LineChart = ({ height = 300, data, x = '', y = '', indicatorMap, onChartClick, legend = '', config, nodeSetting = {
+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 { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
+import { G2BarLegend } from "./G2BarLegend.js";
+import { renderG2LineChart } from "./g2line.js";
+const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick: _onChartClick, timeRange, legend = "", config, nodeSetting = {
     showType: 0,
     type: []
-}, auxiliaryLineData })=>{
+}, auxiliaryLineData, highlightDate, indicators = [] })=>{
+    console.log("props data: G2LineChart", data, nodeSetting, config, "x, y, z", x, y, z, "highlightDate:", highlightDate);
     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 } = chartConfig;
+    const { isDataTag = false, isHighlight = true, isLegend = true } = chartConfig;
+    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);
     const transformedData = useMemo(()=>{
-        const result = DataAdapter.transform(data, 'line', {
-            type: 'line',
+        if (!legend) {
+            let result = transformIndicatorList(indicators, data);
+            data = result[y] || [];
+        }
+        const result = DataAdapter.transform(data, "line", {
+            type: "line",
             x,
-            y
+            y: safeY
         });
         return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
     }, [
         data,
         x,
-        y,
+        safeY,
         dataTransform,
         contextConfig.nodeMap
     ]);
-    const maxY = useMemo(()=>{
-        const values = transformedData.filter((item)=>'-' !== item[y] && void 0 !== item[y] && null !== item[y]).map((item)=>Number(item[y]));
-        const maxData = Math.max(...values.length > 0 ? values : [
-            0
-        ]);
-        const maxAuxiliary = auxiliaryLineData?.length ? Math.max(...auxiliaryLineData.map((item)=>item.value)) : 0;
-        return Math.max(maxData, maxAuxiliary);
+    const { minY, maxY } = useMemo(()=>{
+        const dataValues = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]));
+        const compareValues = transformedData.filter((item)=>"-" !== item["subGroupValue"] && null != item["subGroupValue"]).map((item)=>Number(item["subGroupValue"]));
+        const values = [
+            ...dataValues,
+            ...compareValues
+        ];
+        const dataMin = values.length > 0 ? Math.min(...values) : 0;
+        const dataMax = values.length > 0 ? Math.max(...values) : 0;
+        const auxValues = auxiliaryLineData?.length ? auxiliaryLineData.map((item)=>item.value) : [];
+        const minAux = auxValues.length ? Math.min(...auxValues) : dataMin;
+        const maxAux = auxValues.length ? Math.max(...auxValues) : dataMax;
+        return {
+            minY: Math.min(dataMin, minAux),
+            maxY: Math.max(dataMax, maxAux)
+        };
     }, [
         transformedData,
-        y,
+        safeY,
         auxiliaryLineData
     ]);
-    const formatAxis = (val)=>getAxisFormat(val, safeIndicatorMap, safeLegend);
-    const containerRef = useRef(null);
-    const chartRef = useRef(null);
+    const formatAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeLegend), [
+        safeIndicatorMap,
+        safeLegend
+    ]);
     useEffect(()=>{
-        if (!containerRef.current || !transformedData.length) return;
-        if (chartRef.current) chartRef.current.destroy();
-        const chart = new Chart({
-            container: containerRef.current,
-            height,
-            autoFit: true
-        });
-        chart.data(transformedData);
-        const line = chart.line().encode('x', x).encode('y', y).encode('shape', 'smooth').style({
-            lineWidth: 2
-        });
-        chart.axis('y', {
-            title: false,
-            grid: true,
-            gridStroke: '#e6e6e6',
-            gridLineWidth: 2,
-            gridStrokeOpacity: 0.7,
-            gridLineDash: [
-                0,
-                0
-            ],
-            labelFormatter: (val)=>formatAxis(val)
-        });
-        chart.axis('x', {
-            title: false,
-            labelAutoHide: 'greedy'
-        });
-        chart.scale({
-            y: {
-                type: 'linear',
-                domainMax: maxY,
-                nice: true
-            }
-        });
-        line.interaction('tooltip', {
-            render: (_event, { title, items })=>`<div>
-        <div>${title}</div>
-        ${items?.map(({ color, name, value })=>`
-              <div style="display:flex;justify-content:space-between;line-height:12px;margin-top:5px;">
-                <div>
-                  <span
-                    style="display:inline-block;width:8px;height:8px;margin-right:5px;background-color:${color};border-radius:50%;"
-                  ></span>
-                  ${safeIndicatorMap[name]?.indicatorName || ''}:
-                </div>
-                <div style="padding-left:10px;font-weight:bold;">
-                  ${formatter.formatIndicator(value, safeIndicatorMap[name])}
-                </div>
-              </div>
-            `).join('')}
-        ${auxiliaryLineData?.map(({ name, value })=>`<div
-              style="display:flex;justify-content:space-between;line-height:12px;margin-top:10px;margin-left:16px;"
-            >
-              <div style="margin-right:8px">${name}:</div>
-              <div>${formatter.formatIndicator(value, safeIndicatorMap[safeLegend])}</div>
-            </div>`).join('')}
-      </div>`
+        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)=>{
+            const colorIndex = isCompare ? Math.floor(index / 2) : index;
+            return {
+                id: String(id),
+                label: getIndicatorCompareName(safeIndicatorMap, String(id)) + (id.includes("_compare") ? `（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : ""),
+                color: themeColors[colorIndex % themeColors.length] ?? themeColors[0] ?? "#5B8FF9",
+                isCompare: String(id).includes("_compare"),
+                symbol: "line"
+            };
         });
-        if (auxiliaryLineData && auxiliaryLineData.length > 0) auxiliaryLineData.forEach((auxLine)=>{
-            chart.lineY().encode('y', auxLine.value).style('stroke', '#F4664A').style('strokeOpacity', 1).label({
-                dy: -3,
-                text: splitTextToMultiline(auxLine.name),
-                position: 'bottom-left',
-                style: {
-                    fill: '#F4664A'
+        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 || !filteredData.length) return;
+        if (chartRef.current) {
+            chartRef.current.destroy();
+            chartRef.current = null;
+        }
+        console.log("G2LineChart", x, y, minY, maxY);
+        const chart = renderG2LineChart(containerRef.current, {
+            data: filteredData,
+            x,
+            y: safeY,
+            minY,
+            maxY,
+            themeColors,
+            indicators,
+            indicatorMap: safeIndicatorMap,
+            formatAxis,
+            highlightDate: highlightDate ?? [],
+            auxiliaryLineData: auxiliaryLineData ?? [],
+            isDataTag,
+            isLegend: !!isCompare,
+            isHighlight,
+            timeRange,
+            formatLabel: isDataTag ? (d)=>{
+                const indicatorId = d.groupType.split("_")[0];
+                return "-" === formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]) ? "" : formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]);
+            } : 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 ?? 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;
+            },
+            legendSize: 12,
+            useStrictTicks: true,
+            onNodeListChange: (nodes)=>{
+                setXYList(nodes);
+            },
+            onChartRender: (chartProps)=>{
+                const layout = chartProps?.layout;
+                if (layout) {
+                    setViewWidth(layout.innerWidth ?? 0);
+                    setViewOffset((layout.paddingLeft ?? 0) + (layout.marginLeft ?? 0));
                 }
-            });
-        });
-        if (isDataTag) line.label({
-            text: (d)=>formatter.formatIndicator(d[y], safeIndicatorMap[y])
+            }
         });
-        chart.render();
         chartRef.current = chart;
         return ()=>{
             if (chartRef.current) {
-                chartRef.current.off('element:click');
-                chartRef.current.off('element:mouseenter');
-                chartRef.current.off('element:mouseleave');
+                chartRef.current.off("element:click");
+                chartRef.current.off("element:mouseenter");
+                chartRef.current.off("element:mouseleave");
                 chartRef.current.destroy();
                 chartRef.current = null;
             }
         };
     }, [
-        transformedData,
+        filteredData,
         height,
         x,
         y,
         safeLegend,
         isDataTag,
+        isLegend,
+        isHighlight,
         maxY,
         safeIndicatorMap,
         formatter,
-        onChartClick,
-        nodeSetting.showType,
-        formatAxis
+        formatAxis,
+        highlightDate,
+        auxiliaryLineData,
+        themeColors
     ]);
-    return /*#__PURE__*/ jsx("div", {
-        ref: containerRef,
+    console.log("legendItems:", legendItems);
+    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: timeRange?.compareStartTime !== "" ? 2 : 1
+            })
+        ]
     });
 };
 const base_G2LineChart = G2LineChart;

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

@@ -0,0 +1,9 @@
+/**
+ * G2@5 基础饼图组件
+ * 使用 G2@5 的 interval API 实现饼图
+ */
+import React from 'react';
+import type { BaseChartProps } from '../../../core/ChartTypes';
+export declare const newThemeColors: string[];
+declare const G2PieChart: React.FC<BaseChartProps>;
+export default G2PieChart;

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

@@ -0,0 +1,189 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { Chart } from "@antv/g2";
+import { useChartContext } from "../../../core/ChartContext.js";
+import { DataAdapter } from "../../../adapters/DataAdapter.js";
+const newThemeColors = [
+    '#5B8FF9',
+    '#5AD8A6',
+    '#5D7092',
+    '#F6BD16',
+    '#6F5EF9',
+    '#6DC8EC',
+    '#945FB9',
+    '#FF9845',
+    '#1E9493',
+    '#FF99C3',
+    '#8CD85A',
+    '#FE765E',
+    '#67A1FF',
+    '#D85ACB',
+    '#F95B8F'
+];
+const G2PieChart = ({ height = 400, data, x = '', y = '', indicatorMap, onChartClick, config })=>{
+    const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const chartConfig = config || {};
+    const { innerRadius = 0.6, outerRadius = 0.7, minLabelPercentage = 3 } = chartConfig || {};
+    const transformedData = useMemo(()=>{
+        if (!data || 0 === data.length) return [];
+        const result = DataAdapter.transform(data, 'line', {
+            type: 'line',
+            x,
+            y
+        });
+        return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap)).filter((item)=>{
+            const value = item[y];
+            return '-' !== value && null != value && !isNaN(Number(value));
+        });
+    }, [
+        data,
+        x,
+        y,
+        dataTransform,
+        contextConfig.nodeMap
+    ]);
+    const totalValue = useMemo(()=>transformedData.reduce((sum, item)=>{
+            const value = Number(item[y]) || 0;
+            return sum + value;
+        }, 0), [
+        transformedData,
+        y
+    ]);
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    const centerTextRef = useRef(null);
+    useEffect(()=>{
+        if (!containerRef.current || !transformedData.length) return;
+        if (chartRef.current) chartRef.current.destroy();
+        if (centerTextRef.current && centerTextRef.current.parentNode) centerTextRef.current.parentNode.removeChild(centerTextRef.current);
+        const chart = new Chart({
+            container: containerRef.current,
+            autoFit: true,
+            height: height
+        });
+        if (containerRef.current) containerRef.current.style.position = 'relative';
+        chart.data(transformedData);
+        chart.coordinate({
+            type: 'theta',
+            innerRadius: innerRadius,
+            outerRadius: outerRadius,
+            startAngle: -Math.PI / 2
+        });
+        chart.scale({
+            [y]: {
+                nice: true
+            },
+            [x]: {
+                type: 'cat'
+            }
+        });
+        chart.legend('color', {
+            position: 'bottom',
+            itemHeight: 14,
+            maxItemWidth: 1,
+            gridRow: 1
+        });
+        chart.interaction('poptip', true);
+        const interval = chart.interval().encode('y', y).encode('color', x).scale('color', {
+            type: 'ordinal',
+            range: newThemeColors
+        }).transform({
+            type: 'stackY'
+        });
+        const currentTotalValue = totalValue;
+        interval.label({
+            text: (d)=>{
+                const value = Number(d[y]) || 0;
+                const percentage = currentTotalValue > 0 ? value / currentTotalValue * 100 : 0;
+                const percentageStr = percentage.toFixed(2);
+                const indicatorInfo = safeIndicatorMap[y];
+                const formattedValue = formatter.formatIndicator(value, indicatorInfo);
+                const categoryName = safeIndicatorMap[d[x]]?.indicatorName || d[x] || '';
+                const maxCategoryLength = percentage >= 10 ? 20 : percentage >= 5 ? 15 : 12;
+                const truncatedCategory = categoryName.length > maxCategoryLength ? categoryName.substring(0, maxCategoryLength - 3) + '...' : categoryName;
+                return `${percentageStr}%(${formattedValue})\n${truncatedCategory}`;
+            },
+            position: 'spider',
+            offset: 20,
+            connector: true,
+            connectorDistance: 0,
+            labelHeight: 32,
+            connectorStroke: (_d, index)=>{
+                const color = newThemeColors[index];
+                return color;
+            },
+            fontSize: (d, _index)=>{
+                const value = Number(d[y]) || 0;
+                const percentage = currentTotalValue > 0 ? value / currentTotalValue * 100 : 0;
+                if (percentage >= 10) return 12;
+                return 12;
+            },
+            transform: [
+                {
+                    type: 'dodgeY'
+                }
+            ]
+        });
+        chart.render();
+        const visibleTotalValue = transformedData.reduce((sum, item)=>{
+            const value = Number(item[y]) || 0;
+            return sum + value;
+        }, 0);
+        const indicatorInfo = safeIndicatorMap[y];
+        const formattedTotal = formatter.formatIndicator(visibleTotalValue, indicatorInfo);
+        const centerTextContainer = document.createElement('div');
+        centerTextContainer.style.position = 'absolute';
+        centerTextContainer.style.left = '50%';
+        centerTextContainer.style.top = '50%';
+        centerTextContainer.style.transform = 'translate(-50%, -50%)';
+        centerTextContainer.style.textAlign = 'center';
+        centerTextContainer.style.pointerEvents = 'none';
+        const totalLabelEl = document.createElement('div');
+        totalLabelEl.textContent = 'total';
+        totalLabelEl.style.fontSize = '14px';
+        totalLabelEl.style.color = '#86909c';
+        totalLabelEl.style.marginBottom = '5px';
+        const totalValueEl = document.createElement('div');
+        totalValueEl.textContent = formattedTotal;
+        totalValueEl.style.fontSize = '20px';
+        totalValueEl.style.color = '#1d2129';
+        totalValueEl.style.fontWeight = 'bold';
+        centerTextContainer.appendChild(totalLabelEl);
+        centerTextContainer.appendChild(totalValueEl);
+        containerRef.current?.appendChild(centerTextContainer);
+        centerTextRef.current = centerTextContainer;
+        chartRef.current = chart;
+        if (onChartClick) chart.on('element:click', (e)=>{
+            const data = e.data?.data;
+            if (data) onChartClick(data);
+        });
+        return ()=>{
+            if (chartRef.current) {
+                chartRef.current.destroy();
+                chartRef.current = null;
+            }
+        };
+    }, [
+        transformedData,
+        height,
+        x,
+        y,
+        innerRadius,
+        outerRadius,
+        minLabelPercentage,
+        totalValue,
+        safeIndicatorMap,
+        formatter,
+        onChartClick
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        style: {
+            width: '100%',
+            height: `${height}px`
+        }
+    });
+};
+const base_G2PieChart = G2PieChart;
+export { base_G2PieChart as default, newThemeColors };