@publishfx/publish-chart 1.3.0

package/dist/components/composite/GroupCompare.js

@@ -0,0 +1,620 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { Axis, Chart, Coordinate, Interval, Legend, Line, Tooltip, View } from "bizcharts";
+import lib from "@antv/data-set/lib";
+import { useChartContext } from "../../core/ChartContext.js";
+import { mergeChartConfig } from "../../core/ChartConfig.js";
+import { calTextWidth, calculateBarWidth, createStripePatternCanvas, getAxisFormat, getAxisHorPaddingByText, getChartKey, markerStyle, truncateText } from "../../utils/chartHelpers.js";
+import { transformIndicatorList } from "../../utils/dataTransform.js";
+import { getIndicatorCompareName } from "../../utils/indicatorHelpers.js";
+import AuxiliaryLine from "../shared/AuxiliaryLine.js";
+import XAxisBackground from "../shared/XAxisBackground.js";
+import { NodeDetail } from "../shared/NodeDetail.js";
+import { NodeGeom } from "../shared/NodeGeom.js";
+import { CompareChange } from "@moonton/publish-components";
+const STRIPE_PATTERN_THRESHOLD = 10;
+const GroupCompare = ({ height = 300, data, x = "", y = "", indicatorMap, onChartClick, indicators = [], timeRange, graphType, legend = "", config, nodeSetting = {
+    showType: 0,
+    type: []
+}, auxiliaryLineData, highlightDate = [] })=>{
+    const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const mergedConfig = useMemo(()=>mergeChartConfig(contextConfig, {}), [
+        contextConfig
+    ]);
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const themeColors = mergedConfig.theme.colors;
+    const BAR_PADDING_RIGHT = mergedConfig.layout.barPaddingRight || 10;
+    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({});
+    const isHor = useMemo(()=>("string" == typeof graphType ? graphType.includes("bar") : 100 === graphType) && isHorizontal, [
+        graphType,
+        isHorizontal
+    ]);
+    const chartType = useMemo(()=>{
+        if ("string" == typeof graphType) return graphType.includes("bar") ? 100 : 200;
+        return graphType;
+    }, [
+        graphType
+    ]);
+    const [pointP, setPointP] = useState({
+        x: 0,
+        y: 0
+    });
+    const [pointData, setPointData] = useState({
+        info: [],
+        infosCompare: []
+    });
+    const [chartWidth, setChatWidth] = useState(0);
+    const [chartOffset, setChartOffset] = useState(0);
+    const [padding, setPadding] = useState([
+        10,
+        0
+    ]);
+    let transformData = data;
+    if (isDescend) {
+        const compareData = data.filter((item)=>item["groupType"]?.includes("compare"));
+        const basicData = data.filter((item)=>!item["groupType"]?.includes("compare"));
+        basicData.sort((a, b)=>{
+            if ("" === a["groupValue"]) return isHor ? -1 : 1;
+            if ("" === b["groupValue"]) return isHor ? 1 : -1;
+            return isHor ? a["groupValue"] - b["groupValue"] : b["groupValue"] - a["groupValue"];
+        });
+        transformData = basicData.concat(compareData);
+    }
+    const yAxis = "groupValue";
+    const ds = new lib();
+    const dv = ds.createView().source(transformData);
+    if (legend) {
+        dv.transform({
+            type: "map",
+            callback (row) {
+                row[yAxis] = "" !== row[yAxis] ? +row[yAxis] : "-";
+                row["compareTime"] = row["compareTime"] || "对比时间";
+                return row;
+            }
+        });
+        transformData = dv.rows;
+    } else {
+        legend = "groupType";
+        transformData = transformIndicatorList(indicators, data)[y] || [];
+    }
+    transformData = transformData.map((item)=>{
+        const processedItem = dataTransform.processNodeInfo(item, contextConfig.nodeMap);
+        return {
+            ...item,
+            ...processedItem
+        };
+    });
+    const yValues = useMemo(()=>transformData.filter((item)=>"-" !== item[yAxis] && void 0 !== item[yAxis] && null !== item[yAxis] && "" !== item[yAxis]).map((item)=>Number(item[yAxis])).filter((val)=>!isNaN(val)), [
+        transformData,
+        yAxis
+    ]);
+    let maxY = Math.max(...transformData.filter((item)=>"-" !== item[yAxis]).map((item)=>item[yAxis]));
+    if (auxiliaryLineData?.length) {
+        const maxAuxiliaryLine = Math.max(...auxiliaryLineData.map((item)=>+item.value));
+        if (maxAuxiliaryLine > maxY) maxY = maxAuxiliaryLine;
+    }
+    const horPaddingRight = useMemo(()=>calTextWidth(formatter.formatIndicator(maxY, safeIndicatorMap[y]), 12) - 10, [
+        maxY,
+        formatter,
+        safeIndicatorMap,
+        y
+    ]);
+    const nodeShowType = useMemo(()=>nodeSetting?.showType ?? 0, [
+        nodeSetting?.showType
+    ]);
+    useEffect(()=>{
+        setPointP({
+            x: 0,
+            y: 0
+        });
+        setPointData({
+            info: [],
+            infosCompare: []
+        });
+        const showTypePaddingRight = isHor && isDataTag ? horPaddingRight : HOR_BAR_PADDING_RIGHT;
+        if (nodeShowType) if (2 === nodeShowType && chartWidth / (transformData.length / 2) > 30) if (transformData.some((item)=>item && "nodeLen" in item && item.nodeLen > 2)) setPadding([
+            10,
+            showTypePaddingRight,
+            40,
+            20
+        ]);
+        else transformData.some((item)=>item && "nodeLen" in item && 2 == item.nodeLen) ? setPadding([
+            10,
+            showTypePaddingRight,
+            24,
+            20
+        ]) : setPadding([
+            10,
+            showTypePaddingRight,
+            10,
+            20
+        ]);
+        else setPadding([
+            10,
+            showTypePaddingRight,
+            10,
+            20
+        ]);
+        else setPadding(100 === chartType ? [
+            20,
+            isHor && isDataTag ? horPaddingRight : BAR_PADDING_RIGHT,
+            12,
+            10
+        ] : [
+            20,
+            10,
+            0,
+            10
+        ]);
+    }, [
+        chartWidth,
+        transformData.length,
+        isHor,
+        isDataTag,
+        horPaddingRight,
+        nodeShowType,
+        chartType,
+        BAR_PADDING_RIGHT,
+        HOR_BAR_PADDING_RIGHT
+    ]);
+    const maxYValue = useMemo(()=>yValues.length > 0 ? Math.max(...yValues) : 0, [
+        yValues
+    ]);
+    useEffect(()=>{
+        if (maxY > maxYValue) setPadding((pre)=>[
+                isHor ? 10 : 25,
+                pre[1],
+                pre[2],
+                pre[3]
+            ]);
+    }, [
+        maxY,
+        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
+    ]);
+    const chartInsRef = useRef(null);
+    const stripePatternRef = useRef(null);
+    const themeColor0 = useMemo(()=>themeColors[0], [
+        themeColors
+    ]);
+    useEffect(()=>{
+        const offscreen = document.createElement("canvas");
+        const ctx = offscreen.getContext("2d");
+        if (!ctx) return;
+        const dataCount = transformData.length;
+        const spaceUnit = dataCount > STRIPE_PATTERN_THRESHOLD ? 12 : 24;
+        const sourceCanvas = createStripePatternCanvas(themeColor0, spaceUnit);
+        const pattern = ctx.createPattern(sourceCanvas, "repeat");
+        if (pattern) stripePatternRef.current = pattern;
+    }, [
+        transformData.length,
+        themeColor0
+    ]);
+    return /*#__PURE__*/ jsxs(Chart, {
+        height: height,
+        data: transformData,
+        ...mergedConfig.baseChartConfig,
+        onGetG2Instance: (c)=>{
+            chartInsRef.current = c;
+            setChartInsWidth(c.width);
+        },
+        onPlotClick: (e, chart)=>{
+            const value = chart.getTooltipItems({
+                x: e.x,
+                y: e.y
+            });
+            onChartClick && onChartClick(value[0]);
+        },
+        appendPadding: padding,
+        onPointMouseover: (e, _chart)=>{
+            if (1 == nodeSetting.showType) {
+                setPointP({
+                    x: e.data.x,
+                    y: e.data.y
+                });
+                setPointData(e.data.data.nodeInfos);
+            }
+        },
+        onAfterrender: (_e, chart)=>{
+            if (2 == nodeSetting.showType) {
+                setChatWidth(chart.coordinateBBox.width);
+                setChartOffset(chart.coordinateBBox.x);
+            }
+            const estimatedBarWidth = calculateBarWidth(chart, transformData, x, 0.5);
+            if (void 0 !== estimatedBarWidth) setMainBarSize(estimatedBarWidth);
+            const coordinateHeight = chart.coordinateBBox.height;
+            if (coordinateHeight && coordinateHeight > 0) setBackgroundHeight(coordinateHeight);
+        },
+        scale: {
+            [yAxis]: {
+                type: "linear-strict",
+                max: maxY,
+                nice: true
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx(XAxisBackground, {
+                x: x,
+                data: transformData,
+                isHighlight: isHighlight,
+                filterFn: filterFn,
+                dataLength: transformData.length,
+                mainBarSize: mainBarSize,
+                backgroundHeight: backgroundHeight,
+                isHorizontal: isHorizontal
+            }),
+            100 === chartType ? /*#__PURE__*/ jsx(Interval, {
+                position: `${x}*${yAxis}`,
+                style: [
+                    "groupType",
+                    (groupType)=>{
+                        const isCompareY = groupType === `${y}_compare`;
+                        if (isCompareY && stripePatternRef.current) return {
+                            cursor: "pointer",
+                            fill: stripePatternRef.current
+                        };
+                        return {
+                            cursor: "pointer"
+                        };
+                    }
+                ],
+                color: [
+                    "groupType",
+                    (groupType)=>{
+                        if (!groupType || "string" != typeof groupType) return themeColors[0];
+                        const baseKey = groupType.replace(/_compare.*/, "");
+                        if (baseKey === y) return themeColors[0];
+                        const idx = (indicators || []).indexOf(baseKey);
+                        return themeColors[idx >= 0 ? idx : 1];
+                    }
+                ],
+                adjust: [
+                    {
+                        type: "dodge",
+                        marginRatio: 0
+                    }
+                ],
+                label: [
+                    yAxis,
+                    (v)=>{
+                        const formatted = isDataTag ? formatter.formatIndicator(v, safeIndicatorMap[y]) : void 0;
+                        return {
+                            content: formatted || "",
+                            offset: isHorizontal ? 5 : 10
+                        };
+                    }
+                ]
+            }) : /*#__PURE__*/ jsx(Line, {
+                position: `${x}*${yAxis}`,
+                style: [
+                    "groupType",
+                    (groupType)=>{
+                        if (groupType.includes("_compare")) return {
+                            lineDash: [
+                                4,
+                                4
+                            ]
+                        };
+                    }
+                ],
+                state: {
+                    active: {
+                        style: (element)=>{
+                            if ("dash" === element.getModel().shape) return {
+                                lineDash: [
+                                    4,
+                                    4
+                                ],
+                                lineWidth: 3
+                            };
+                            return {
+                                lineWidth: 3
+                            };
+                        }
+                    }
+                },
+                color: [
+                    "groupType",
+                    (groupType)=>{
+                        if (!groupType || "string" != typeof groupType) return themeColors[0];
+                        const baseKey = groupType.replace(/_compare.*/, "");
+                        if (baseKey === y) return themeColors[0];
+                        const idx = (indicators || []).indexOf(baseKey);
+                        return themeColors[idx >= 0 ? idx : 1];
+                    }
+                ],
+                shape: [
+                    legend,
+                    (groupType)=>{
+                        if (groupType.includes("_compare")) return "dash";
+                        return "line";
+                    }
+                ],
+                label: [
+                    yAxis,
+                    (v)=>{
+                        const formatted = isDataTag ? formatter.formatIndicator(v, safeIndicatorMap[y]) : void 0;
+                        return {
+                            content: formatted || ""
+                        };
+                    }
+                ]
+            }),
+            /*#__PURE__*/ jsx(Coordinate, {
+                transpose: isHor
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                shared: true,
+                showCrosshairs: true,
+                children: (title, items)=>{
+                    let indicatorName = "";
+                    return /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            padding: "10px 0"
+                        },
+                        children: [
+                            title,
+                            items && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        style: {
+                                            margin: "10px 0"
+                                        },
+                                        children: items.map((it, index)=>{
+                                            indicatorName = it.name.split("_")[0];
+                                            return /*#__PURE__*/ jsxs("div", {
+                                                style: {
+                                                    display: "flex",
+                                                    justifyContent: "space-between",
+                                                    marginBottom: "10px"
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("span", {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                style: 100 === chartType ? markerStyle(it.color, it.name.includes("_compare")) : markerStyle(it.color, false)
+                                                            }),
+                                                            it.name.includes("_") ? `${getIndicatorCompareName(safeIndicatorMap, it.name)}（${it.data.compareTime}）` : getIndicatorCompareName(safeIndicatorMap, it.name)
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        style: {
+                                                            fontWeight: "bold",
+                                                            paddingLeft: "10px"
+                                                        },
+                                                        children: formatter.formatIndicator(it.data.groupValue, safeIndicatorMap[it.name.split("_")[0]])
+                                                    })
+                                                ]
+                                            }, index);
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        style: {
+                                            marginLeft: "16px",
+                                            display: "flex",
+                                            justifyContent: "space-between"
+                                        },
+                                        children: [
+                                            `相比变化 `,
+                                            /*#__PURE__*/ jsx("span", {
+                                                style: {
+                                                    fontWeight: "bold"
+                                                },
+                                                children: /*#__PURE__*/ jsx(CompareChange, {
+                                                    value: items[0].data.change,
+                                                    fontSize: 12
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    auxiliaryLineData && auxiliaryLineData.map((item, index)=>/*#__PURE__*/ jsxs("div", {
+                                            style: {
+                                                marginLeft: "16px",
+                                                marginTop: "10px",
+                                                display: "flex",
+                                                justifyContent: "space-between"
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    children: [
+                                                        item.name,
+                                                        ":"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx("div", {
+                                                    children: formatter.formatIndicator(item.value, safeIndicatorMap[indicatorName])
+                                                })
+                                            ]
+                                        }, index))
+                                ]
+                            })
+                        ]
+                    });
+                }
+            }),
+            auxiliaryLineData?.length && auxiliaryLineData?.length > 0 && /*#__PURE__*/ jsxs(View, {
+                data: transformData,
+                scale: {
+                    [yAxis]: {
+                        type: "linear-strict",
+                        max: maxY,
+                        nice: true
+                    }
+                },
+                padding: [
+                    0,
+                    0,
+                    0,
+                    isHor ? 0 : -axisHorPadding
+                ],
+                children: [
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: yAxis,
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: x,
+                        visible: false
+                    }),
+                    100 === chartType ? /*#__PURE__*/ jsx(Interval, {
+                        position: `${x}*${yAxis}`,
+                        tooltip: false,
+                        style: {
+                            fill: "transparent",
+                            fillOpacity: 0,
+                            stroke: "transparent",
+                            strokeOpacity: 0
+                        }
+                    }) : /*#__PURE__*/ jsx(Line, {
+                        position: `${x}*${yAxis}`,
+                        tooltip: false,
+                        style: {
+                            stroke: "transparent",
+                            strokeOpacity: 0
+                        }
+                    }),
+                    auxiliaryLineData?.map((item, index)=>/*#__PURE__*/ jsx(AuxiliaryLine, {
+                            name: item.name,
+                            value: item.value,
+                            isHorizontal: isHor
+                        }, index))
+                ]
+            }, `${axisHorPadding}${isHor}`),
+            /*#__PURE__*/ jsx(Axis, {
+                name: yAxis,
+                visible: true,
+                label: {
+                    formatter (val) {
+                        return getAxisFormat(val, safeIndicatorMap, y);
+                    }
+                }
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                grid: null,
+                name: x,
+                visible: true,
+                label: {
+                    autoEllipsis: true,
+                    formatter: (text)=>isHor ? truncateText(text, chartInsWidth / 5) : text
+                }
+            }),
+            /*#__PURE__*/ jsx(Legend, {
+                items: [
+                    {
+                        value: y,
+                        name: y,
+                        marker: 100 === chartType ? {
+                            symbol: "circle",
+                            style: {
+                                fill: themeColors[0],
+                                r: 5
+                            }
+                        } : {
+                            symbol: "hyphen",
+                            style: {
+                                stroke: themeColors[0],
+                                lineWidth: 2
+                            }
+                        },
+                        unchecked: legendMapRef.current?.[y] === false
+                    },
+                    {
+                        value: `${y}`,
+                        name: `${y}_compare`,
+                        marker: 100 === chartType ? {
+                            symbol: "circle",
+                            style: {
+                                fill: stripePatternRef.current,
+                                r: 5
+                            }
+                        } : {
+                            symbol: "hyphen",
+                            style: {
+                                stroke: themeColors[0],
+                                lineWidth: 2,
+                                lineDash: [
+                                    3,
+                                    1.5,
+                                    3
+                                ]
+                            }
+                        },
+                        unchecked: legendMapRef.current?.[`${y}_compare`] === false
+                    }
+                ],
+                position: 2 == nodeSetting.showType ? "top" : "bottom",
+                offsetY: 100 === chartType ? 0 : 0,
+                maxItemWidth: 1,
+                itemName: {
+                    formatter: (text)=>text.includes("_") ? `${getIndicatorCompareName(safeIndicatorMap, text)}（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : getIndicatorCompareName(safeIndicatorMap, text)
+                },
+                flipPage: false,
+                visible: isLegend,
+                name: legend,
+                custom: true,
+                onChange: (ev)=>{
+                    if (!ev || !ev.item) return;
+                    const { item } = ev;
+                    const legendKey = item.name || item.value;
+                    if (null == legendKey) return;
+                    const checked = !item.unchecked;
+                    if (!legendMapRef.current) legendMapRef.current = {};
+                    legendMapRef.current[legendKey] = checked;
+                    const chart = chartInsRef.current;
+                    if (!chart) return;
+                    const applyFilter = (target)=>{
+                        if (!target) return;
+                        if (!legendMapRef.current) legendMapRef.current = {};
+                        try {
+                            target.filter("groupType", (val)=>{
+                                if (!val || "string" != typeof val) return true;
+                                const mapValue = legendMapRef.current[val];
+                                return false !== mapValue;
+                            });
+                        } catch (error) {}
+                    };
+                    try {
+                        applyFilter(chart);
+                        chart.render(true);
+                    } catch (error) {}
+                }
+            }),
+            transformData.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
+                }) : 2 == nodeSetting.showType && NodeDetail ? 0 == chartOffset || chartOffset ? /*#__PURE__*/ jsx(NodeDetail, {
+                    chartWidth: chartWidth,
+                    chartOffset: chartOffset,
+                    dvRows: transformData,
+                    ratio: 2
+                }) : null : null
+            }) : null
+        ]
+    }, getChartKey({
+        config,
+        nodeSetting
+    }));
+};
+const composite_GroupCompare = /*#__PURE__*/ memo(GroupCompare);
+export { composite_GroupCompare as default };

package/dist/components/shared/AuxiliaryLine.d.ts

@@ -0,0 +1,8 @@
+export interface AuxiliaryLineProps {
+    name?: string;
+    value?: number | string | undefined;
+    isHorizontal?: boolean;
+    axis?: 'left' | 'right';
+}
+declare const _default: import("react").MemoExoticComponent<({ name, axis, value, isHorizontal }: AuxiliaryLineProps) => JSX.Element>;
+export default _default;

package/dist/components/shared/AuxiliaryLine.js

@@ -0,0 +1,64 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Annotation } from "bizcharts";
+import { memo } from "react";
+const AuxiliaryLine = ({ name = '', axis = 'left', value, isHorizontal })=>{
+    if (void 0 === value) return /*#__PURE__*/ jsx(Fragment, {});
+    const splitTextToMultiline = (text, maxLength = 5)=>{
+        let result = '';
+        for(let i = 0; i < text.length; i += maxLength)result += text.substring(i, i + maxLength) + '\n';
+        return result.trim();
+    };
+    const lineProps = {
+        start: [
+            'start',
+            value
+        ],
+        end: [
+            'end',
+            value
+        ],
+        ...!isHorizontal && {
+            text: {
+                position: 'right' === axis ? 'end' : 'start',
+                content: splitTextToMultiline(name),
+                offsetY: -5,
+                offsetX: 'right' === axis ? -65 : 0,
+                style: {
+                    fill: 'rgb(234, 54, 106)',
+                    shadowBlur: 20,
+                    shadowColor: 'red',
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0
+                }
+            }
+        },
+        style: {
+            stroke: 'rgb(234, 54, 106)'
+        }
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Annotation.Line, {
+                ...lineProps
+            }),
+            isHorizontal && /*#__PURE__*/ jsx(Annotation.Text, {
+                position: [
+                    'end',
+                    value
+                ],
+                content: splitTextToMultiline(name),
+                offsetX: 3,
+                offsetY: name.length > 5 ? 12 : 5,
+                style: {
+                    fill: 'rgb(234, 54, 106)',
+                    shadowBlur: 20,
+                    shadowColor: 'red',
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0
+                }
+            })
+        ]
+    });
+};
+const shared_AuxiliaryLine = /*#__PURE__*/ memo(AuxiliaryLine);
+export { shared_AuxiliaryLine as default };