@publishfx/publish-chart 1.3.0

package/dist/components/composite/BarLineCompareWeekend.js

@@ -0,0 +1,502 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { Axis, Chart, Interval, Legend, Line, Tooltip, View } from "bizcharts";
+import { useChartContext } from "../../core/ChartContext.js";
+import { mergeChartConfig } from "../../core/ChartConfig.js";
+import { calculateBarWidth, createStripePatternCanvas, getAxisFormat, getAxisHorPaddingByText, markerStyle } from "../../utils/chartHelpers.js";
+import { groupArray, transformIndicatorList } from "../../utils/dataTransform.js";
+import { getIndicatorCompareName } from "../../utils/indicatorHelpers.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 BarLineCompareWeekend = ({ height = 310, data, x = '', y = '', z = '', indicatorMap, onChartClick, indicators = [], timeRange: _timeRange, nodeSetting = {
+    showType: 0,
+    type: []
+}, highlightDate = [] })=>{
+    const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const mergedConfig = useMemo(()=>mergeChartConfig(contextConfig, {}), [
+        contextConfig
+    ]);
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const themeColors = mergedConfig.theme.colors;
+    const combineColors = mergedConfig.theme.combineColors || [
+        '#FF8C00',
+        '#FFD700'
+    ];
+    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
+    ]);
+    const [mainBarSize, setMainBarSize] = useState(void 0);
+    const indicatorSeries = useMemo(()=>transformIndicatorList(indicators || [], data), [
+        indicators,
+        data
+    ]);
+    const transformData = useMemo(()=>{
+        const result = indicatorSeries[y] || [];
+        result.forEach((item)=>{
+            const processedItem = dataTransform.processNodeInfo(item, contextConfig.nodeMap);
+            item.nodeLen = processedItem.nodeLen || 0;
+            item.node = processedItem.node || 0;
+            item.color = processedItem.color;
+        });
+        return result;
+    }, [
+        indicatorSeries,
+        y,
+        dataTransform,
+        contextConfig.nodeMap
+    ]);
+    const lineIndicators = useMemo(()=>[
+            ...indicators
+        ].slice(1) || [], [
+        indicators
+    ]);
+    const lineData = useMemo(()=>{
+        const result = [];
+        lineIndicators.forEach((key)=>{
+            const series = indicatorSeries[key] || [];
+            series.forEach((item)=>{
+                result.push(item);
+            });
+        });
+        return result;
+    }, [
+        indicatorSeries,
+        lineIndicators
+    ]);
+    const backgroundFilterFn = useMemo(()=>(item)=>{
+            const groupName = item.groupName;
+            return highlightDate.includes(groupName);
+        }, [
+        highlightDate
+    ]);
+    const chartInsRef = useRef(null);
+    const stripePatternRef = useRef(null);
+    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(themeColors[0], spaceUnit);
+        const pattern = ctx.createPattern(sourceCanvas, 'repeat');
+        if (pattern) stripePatternRef.current = pattern;
+    }, [
+        transformData.length,
+        themeColors
+    ]);
+    useEffect(()=>{
+        setPointP({
+            x: 0,
+            y: 0
+        });
+        setPointData({
+            info: [],
+            infosCompare: []
+        });
+        const rightValueArr = lineData.filter((v)=>'-' !== v.indicatorValue).map((v)=>v.indicatorValue);
+        const maxRight = Math.max(...rightValueArr?.length ? rightValueArr : [
+            0
+        ]);
+        const offsetRight = getAxisHorPaddingByText(maxRight, safeIndicatorMap || {}, z);
+        if (nodeSetting?.showType) if (nodeSetting?.showType === 2 && chartWidth / (transformData.length / 2) > 30) if (transformData.some((item)=>item?.nodeLen > 2)) setPadding([
+            10,
+            offsetRight,
+            40,
+            20
+        ]);
+        else transformData.some((item)=>item?.nodeLen == 2) ? setPadding([
+            10,
+            offsetRight,
+            24,
+            20
+        ]) : setPadding([
+            10,
+            offsetRight,
+            10,
+            20
+        ]);
+        else setPadding([
+            10,
+            offsetRight,
+            10,
+            20
+        ]);
+        else setPadding([
+            10,
+            offsetRight,
+            10,
+            20
+        ]);
+    }, [
+        chartWidth,
+        transformData,
+        lineData,
+        safeIndicatorMap,
+        z
+    ]);
+    const scale = {
+        indicatorValue: {
+            type: 'linear-strict'
+        }
+    };
+    const legendMapRef = useRef({});
+    const getChartKey = ()=>nodeSetting?.showType + y + z + x;
+    return /*#__PURE__*/ jsxs(Chart, {
+        height: height,
+        data: transformData,
+        ...mergedConfig.baseChartConfig,
+        onPlotClick: (e, chart)=>{
+            const value = chart.getTooltipItems({
+                x: e.x,
+                y: e.y
+            });
+            onChartClick && onChartClick(value[0]);
+        },
+        appendPadding: padding,
+        scale: scale,
+        onGetG2Instance: (c)=>{
+            chartInsRef.current = c;
+        },
+        onPointMouseover: (e, _chart)=>{
+            if (1 == nodeSetting.showType) {
+                setPointP({
+                    x: e.data.x,
+                    y: e.data.y
+                });
+                setPointData(e.data.data.nodeInfos || {
+                    info: [],
+                    infosCompare: []
+                });
+            }
+        },
+        onAfterrender: (_e, chart)=>{
+            if (2 == nodeSetting.showType) {
+                setChatWidth(chart.coordinateBBox.width);
+                setChartOffset(chart.coordinateBBox.x);
+            }
+            const estimatedBarWidth = calculateBarWidth(chart, transformData, x, 0.45);
+            if (void 0 !== estimatedBarWidth) setMainBarSize(estimatedBarWidth);
+        },
+        children: [
+            /*#__PURE__*/ jsx(XAxisBackground, {
+                x: x,
+                isHighlight: true,
+                data: transformData,
+                filterFn: backgroundFilterFn,
+                mainBarSize: mainBarSize,
+                dataLength: transformData.length
+            }),
+            /*#__PURE__*/ jsx(Interval, {
+                position: `${x}*indicatorValue`,
+                style: [
+                    'indicatorType',
+                    (indicatorType)=>{
+                        const isCompareY = indicatorType === `${y}_compare`;
+                        if (isCompareY && stripePatternRef.current) return {
+                            cursor: 'pointer',
+                            fill: stripePatternRef.current
+                        };
+                        return {
+                            cursor: 'pointer'
+                        };
+                    }
+                ],
+                color: [
+                    'indicatorType',
+                    (indicatorType)=>{
+                        if (!indicatorType || 'string' != typeof indicatorType) return themeColors[0];
+                        const baseKey = indicatorType.replace(/_compare.*/, '');
+                        if (baseKey === y) return themeColors[0];
+                        const idx = (indicators || []).indexOf(baseKey);
+                        return themeColors[idx >= 0 ? idx : 1];
+                    }
+                ],
+                adjust: [
+                    {
+                        type: 'dodge',
+                        marginRatio: 0
+                    }
+                ]
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: "indicatorValue",
+                position: "left",
+                label: {
+                    formatter (val) {
+                        return getAxisFormat(val, safeIndicatorMap || {}, y);
+                    }
+                }
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                shared: true,
+                children: (title, items)=>{
+                    const groupCompare = items?.length ? groupArray(items) : [];
+                    return /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            padding: '10px 0'
+                        },
+                        children: [
+                            title,
+                            groupCompare && /*#__PURE__*/ jsx(Fragment, {
+                                children: /*#__PURE__*/ jsx("div", {
+                                    style: {
+                                        margin: '10px 0'
+                                    },
+                                    children: groupCompare.map((v, index)=>/*#__PURE__*/ jsxs("div", {
+                                            children: [
+                                                v.map((it, k)=>/*#__PURE__*/ jsxs("div", {
+                                                        style: {
+                                                            display: 'flex',
+                                                            justifyContent: 'space-between',
+                                                            marginBottom: '10px'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ jsxs("span", {
+                                                                children: [
+                                                                    /*#__PURE__*/ jsx("span", {
+                                                                        style: markerStyle(it.color, it.name.includes('_compare'))
+                                                                    }),
+                                                                    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.indicatorValue, safeIndicatorMap?.[it.name.split('_')[0]])
+                                                            })
+                                                        ]
+                                                    }, `${index}_${k}`)),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    style: {
+                                                        margin: '0 0 10px 16px',
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between'
+                                                    },
+                                                    children: [
+                                                        "相比变化 ",
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            style: {
+                                                                fontWeight: 'bold'
+                                                            },
+                                                            children: /*#__PURE__*/ jsx(CompareChange, {
+                                                                value: v[0].data.change,
+                                                                fontSize: 12
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }, index))
+                                })
+                            })
+                        ]
+                    });
+                }
+            }),
+            /*#__PURE__*/ jsxs(View, {
+                data: lineData,
+                scale: scale,
+                padding: 0,
+                children: [
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: "indicatorValue",
+                        position: "right",
+                        label: {
+                            formatter (val) {
+                                return getAxisFormat(val, safeIndicatorMap || {}, z);
+                            }
+                        }
+                    }),
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: x,
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Line, {
+                        position: `${x}*indicatorValue`,
+                        style: [
+                            "indicatorType",
+                            (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: [
+                            'indicatorType',
+                            (indicatorType)=>{
+                                if (!indicatorType || 'string' != typeof indicatorType) return combineColors[0];
+                                const baseKey = indicatorType.replace(/_compare.*/, '');
+                                const idx = lineIndicators.indexOf(baseKey);
+                                if (0 === idx) return combineColors[0];
+                                const colorIdx = 2 + idx;
+                                return themeColors[colorIdx % themeColors.length];
+                            }
+                        ],
+                        shape: [
+                            'indicatorType',
+                            (indicatorType)=>{
+                                if (indicatorType.includes('_compare')) return 'dash';
+                                return 'line';
+                            }
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                grid: null,
+                name: x,
+                label: {
+                    autoEllipsis: true,
+                    autoHide: true
+                }
+            }),
+            /*#__PURE__*/ jsx(Legend, {
+                position: 2 === nodeSetting.showType ? 'top' : 'bottom',
+                custom: true,
+                allowAllCanceled: true,
+                maxItemWidth: 1,
+                flipPage: false,
+                items: [
+                    {
+                        value: y,
+                        name: getIndicatorCompareName(safeIndicatorMap || {}, y),
+                        unchecked: legendMapRef.current?.[y] === false,
+                        marker: {
+                            symbol: 'circle',
+                            style: {
+                                fill: themeColors[0],
+                                r: 5
+                            }
+                        }
+                    },
+                    ...lineIndicators.map((key, idx)=>{
+                        const isPrimary = key === z;
+                        const baseColor = isPrimary ? combineColors[0] : themeColors[(2 + idx) % themeColors.length];
+                        return {
+                            value: key,
+                            name: getIndicatorCompareName(safeIndicatorMap || {}, key),
+                            unchecked: legendMapRef.current?.[key] === false,
+                            marker: {
+                                symbol: 'hyphen',
+                                style: {
+                                    stroke: baseColor,
+                                    lineWidth: 2
+                                }
+                            }
+                        };
+                    })
+                ],
+                onChange: (ev)=>{
+                    if (!ev || !ev.item) return;
+                    const { item } = ev;
+                    const value = item.value;
+                    if (null == value) return;
+                    const checked = !item.unchecked;
+                    if (!legendMapRef.current) legendMapRef.current = {};
+                    legendMapRef.current[value] = checked;
+                    const chart = chartInsRef.current;
+                    if (!chart) return;
+                    const getLegendKey = (indicatorType)=>{
+                        if (!indicatorType || 'string' != typeof indicatorType) return indicatorType || '';
+                        if (indicatorType === y || indicatorType === `${y}_compare`) return y;
+                        const baseKey = indicatorType.replace(/_compare.*/, '');
+                        if (lineIndicators.includes(baseKey)) return baseKey;
+                        return indicatorType;
+                    };
+                    const applyFilter = (target)=>{
+                        if (!target || 'object' != typeof target) return;
+                        if (!legendMapRef.current) legendMapRef.current = {};
+                        try {
+                            if (target && 'function' == typeof target.filter) target.filter('indicatorType', (val)=>{
+                                if (!val || 'string' != typeof val) return true;
+                                const key = getLegendKey(val);
+                                const mapValue = legendMapRef.current[key];
+                                return false !== mapValue;
+                            });
+                        } catch (error) {
+                            console.warn('Failed to apply filter:', error);
+                        }
+                    };
+                    if (chart && chart.geometries) {
+                        const mainChartGeometries = chart.geometries || [];
+                        const hasIntervalGeom = mainChartGeometries.some((geom)=>geom && 'interval' === geom.type);
+                        if (hasIntervalGeom) applyFilter(chart);
+                    }
+                    if (chart && chart.views && Array.isArray(chart.views) && chart.views.length > 0) {
+                        const validViews = chart.views.filter((view)=>null != view && 'object' == typeof view);
+                        validViews.forEach((view)=>{
+                            if (!view || 'object' != typeof view) return;
+                            try {
+                                const geometries = (view.geometries || []).filter((geom)=>null != geom);
+                                const hasLineGeom = geometries.some((geom)=>geom && 'line' === geom.type);
+                                if (!hasLineGeom) {
+                                    try {
+                                        if (view && 'function' == typeof view.render) view.render(true);
+                                    } catch (error) {}
+                                    return;
+                                }
+                                if (hasLineGeom) {
+                                    applyFilter(view);
+                                    try {
+                                        if (view && 'function' == typeof view.render) view.render(true);
+                                    } catch (error) {}
+                                }
+                            } catch (error) {}
+                        });
+                    }
+                    try {
+                        if (chart && 'function' == typeof chart.render) chart.render(true);
+                    } catch (error) {}
+                }
+            }),
+            data.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());
+};
+const composite_BarLineCompareWeekend = /*#__PURE__*/ memo(BarLineCompareWeekend);
+export { composite_BarLineCompareWeekend as default };

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

@@ -0,0 +1,11 @@
+/**
+ * 分组柱状折线组合图组件
+ */
+import React from "react";
+import type { BaseChartProps } from "../../core/ChartTypes";
+export declare const newThemeColors: string[];
+interface GroupBarLineProps extends BaseChartProps {
+    legend?: string;
+}
+declare const _default: React.NamedExoticComponent<GroupBarLineProps>;
+export default _default;