@publishfx/publish-chart 1.3.0

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

@@ -0,0 +1,9 @@
+import React from 'react';
+type NodeDetailProps = {
+    chartWidth: number;
+    chartOffset: number;
+    dvRows: any[];
+    ratio?: number;
+};
+export declare const NodeDetail: React.FC<NodeDetailProps>;
+export {};

package/dist/components/shared/NodeDetail.js

@@ -0,0 +1,110 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Popover } from "@arco-design/web-react";
+import { nodeMap } from "../../core/ChartConfig.js";
+import { NodePopoverContent } from "./NodePopoverContent.js";
+const NodeDetail = ({ chartWidth, chartOffset, dvRows, ratio = 1 })=>{
+    console.log(dvRows, 'dvRows');
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            display: 'flex',
+            justifyContent: 'space-around',
+            width: chartWidth,
+            lineHeight: '14px',
+            cursor: 'pointer',
+            position: 'absolute',
+            bottom: -20,
+            left: chartOffset
+        },
+        children: dvRows.length > 0 && dvRows.filter((item)=>!item?.groupType?.includes('_compare') && !item?.indicatorType?.includes('_compare')).map((item, index)=>{
+            const infos = [].concat(item.nodeInfos?.info || [], item.nodeInfos?.infosCompare || []);
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: chartWidth / (dvRows.length / ratio) > 30 ? /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: chartWidth / (dvRows.length / ratio),
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        textAlign: 'center',
+                        transform: "translateY(-10px)"
+                    },
+                    children: infos.length > 0 ? /*#__PURE__*/ jsxs(Popover, {
+                        blurToHide: true,
+                        unmountOnExit: true,
+                        position: "right",
+                        style: {
+                            maxWidth: 'auto'
+                        },
+                        content: /*#__PURE__*/ jsx(NodePopoverContent, {
+                            nodeInfos: infos
+                        }),
+                        children: [
+                            infos.map((_info, _index)=>_index <= 1 ? /*#__PURE__*/ jsxs("div", {
+                                    style: {
+                                        whiteSpace: 'nowrap',
+                                        width: chartWidth / (dvRows.length / ratio),
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        textAlign: 'center',
+                                        color: _info?.type !== void 0 ? nodeMap.get(_info.type)?.color : void 0,
+                                        margin: '0 auto'
+                                    },
+                                    children: [
+                                        _info?.name,
+                                        _info?.flag ? '·结束' : ''
+                                    ]
+                                }, `index${_index}`) : null),
+                            infos.length > 2 ? /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    whiteSpace: 'nowrap',
+                                    width: chartWidth / (dvRows.length / ratio),
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    textAlign: 'center',
+                                    color: '#6549f2',
+                                    margin: '0 auto'
+                                },
+                                children: 0 == item.node && `>>${infos.length}`
+                            }) : null
+                        ]
+                    }) : null
+                }, index) : /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 10,
+                        transform: 'translateY(-14px)'
+                    },
+                    children: infos.length > 0 && /*#__PURE__*/ jsx(Popover, {
+                        blurToHide: true,
+                        unmountOnExit: true,
+                        position: "right",
+                        style: {
+                            maxWidth: 'auto'
+                        },
+                        content: /*#__PURE__*/ jsx(NodePopoverContent, {
+                            nodeInfos: infos
+                        }),
+                        children: /*#__PURE__*/ jsx("div", {
+                            style: 1 == infos.length ? {
+                                width: 6,
+                                height: 6,
+                                border: `2px solid ${item.color}`,
+                                borderRadius: '50%',
+                                margin: '0 auto'
+                            } : {
+                                width: 6,
+                                height: 6,
+                                margin: '0 auto',
+                                border: "2px solid",
+                                borderRadius: '50%',
+                                borderColor: "transparent",
+                                backgroundImage: "linear-gradient(to right, #fff, #fff), linear-gradient(0deg, rgb(50, 197, 255) 0px, rgb(182, 32, 224) 44%, rgb(247, 181, 0) 99%)",
+                                backgroundClip: "padding-box, border-box",
+                                backgroundOrigin: "padding-box, border-box"
+                            }
+                        })
+                    })
+                }, index)
+            });
+        })
+    });
+};
+export { NodeDetail };

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

@@ -0,0 +1,23 @@
+import React from 'react';
+type NodeInfoItem = {
+    area: string;
+    description: string;
+    endDate: string;
+    flag: number;
+    name: string;
+    startDate: string;
+    type: number;
+};
+type NodeGeomProps = {
+    pointData: {
+        info: Array<NodeInfoItem>;
+        infosCompare: Array<NodeInfoItem>;
+    };
+    pointP: {
+        x: number;
+        y: number;
+    };
+    isLegend?: boolean;
+};
+export declare const NodeGeom: React.FC<NodeGeomProps>;
+export {};

package/dist/components/shared/NodeGeom.js

@@ -0,0 +1,35 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Axis, Geom, Legend } from "bizcharts";
+import { NodePopover } from "./NodePopover.js";
+const NodeGeom = ({ pointData, pointP, isLegend = true })=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Geom, {
+                type: "point",
+                position: "groupName*node",
+                size: 4,
+                shape: 'hollow-circle',
+                color: [
+                    'color',
+                    (color)=>color
+                ],
+                style: {
+                    lineWidth: 3
+                },
+                tooltip: false
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: "node",
+                visible: false
+            }),
+            isLegend && /*#__PURE__*/ jsx(Legend, {
+                name: "color",
+                visible: false
+            }),
+            /*#__PURE__*/ jsx(NodePopover, {
+                pointData: pointData,
+                pointP: pointP
+            })
+        ]
+    });
+export { NodeGeom };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+type NodeInfoItem = {
+    area: string;
+    description: string;
+    endDate: string;
+    flag: number;
+    name: string;
+    startDate: string;
+    type: number;
+};
+type NodePopoverProps = {
+    pointData: {
+        info: Array<NodeInfoItem>;
+        infosCompare: Array<NodeInfoItem>;
+    };
+    pointP: {
+        x: number;
+        y: number;
+    };
+};
+export declare const NodePopover: React.FC<NodePopoverProps>;
+export {};

package/dist/components/shared/NodePopover.js

@@ -0,0 +1,41 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Popover } from "@arco-design/web-react";
+import { NodePopoverContent } from "./NodePopoverContent.js";
+const NodePopover = ({ pointData, pointP })=>{
+    const [nodeInfos, setNodeInfos] = useState([]);
+    useEffect(()=>{
+        setNodeInfos([
+            ...pointData.info,
+            ...pointData.infosCompare
+        ]);
+    }, [
+        pointData
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Popover, {
+            blurToHide: true,
+            unmountOnExit: true,
+            position: "right",
+            style: {
+                maxWidth: 'auto'
+            },
+            content: /*#__PURE__*/ jsx(Fragment, {
+                children: /*#__PURE__*/ jsx(NodePopoverContent, {
+                    nodeInfos: nodeInfos
+                })
+            }),
+            children: /*#__PURE__*/ jsx("div", {
+                style: {
+                    position: 'absolute',
+                    top: pointP.y - 10,
+                    left: pointP.x - 10,
+                    zIndex: 999,
+                    width: 20,
+                    height: 20
+                }
+            })
+        })
+    });
+};
+export { NodePopover };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+type NodeInfoItem = {
+    area: string;
+    description: string;
+    endDate: string;
+    flag: number;
+    name: string;
+    startDate: string;
+    type: number;
+};
+type NodePopoverContentProps = {
+    nodeInfos: Array<NodeInfoItem>;
+};
+export declare const NodePopoverContent: React.FC<NodePopoverContentProps>;
+export {};

package/dist/components/shared/NodePopoverContent.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Tag } from "@arco-design/web-react";
+import { nodeMap } from "../../core/ChartConfig.js";
+const NodePopoverContent = ({ nodeInfos })=>/*#__PURE__*/ jsx("div", {
+        style: {
+            maxHeight: 'calc(100vh - 200px)',
+            overflowY: 'auto'
+        },
+        children: nodeInfos.length > 0 && nodeInfos.map((item, index)=>{
+            const info = nodeMap.get(item.type);
+            return /*#__PURE__*/ jsxs("div", {
+                style: {
+                    width: 540,
+                    padding: 8,
+                    background: (index + 1) % 2 === 1 ? '#fff' : '#f7f8fa',
+                    ...index < nodeInfos.length - 1 ? {
+                        borderBottom: '1px solid #e5e6eb'
+                    } : {}
+                },
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            justifyContent: 'space-between'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                style: {
+                                    display: 'flex'
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx(Tag, {
+                                        color: info?.bgc,
+                                        style: {
+                                            color: info?.color
+                                        },
+                                        children: info?.des
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        style: {
+                                            fontSize: 14,
+                                            fontWeight: 'bold',
+                                            color: '#1d2129',
+                                            marginLeft: 4
+                                        },
+                                        children: [
+                                            item.name,
+                                            item?.flag ? '·结束' : ''
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                style: {
+                                    fontSize: 12,
+                                    color: '#86909c',
+                                    lineHeight: '28px'
+                                },
+                                children: [
+                                    item.startDate,
+                                    item?.endDate ? `~${item?.endDate}` : ''
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        style: {
+                            fontSize: 12,
+                            color: '#1d2129'
+                        },
+                        children: item.description
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        style: {
+                            fontSize: 12,
+                            color: '#4e5969'
+                        },
+                        children: item.area
+                    })
+                ]
+            }, index);
+        })
+    });
+export { NodePopoverContent };

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

@@ -0,0 +1,31 @@
+/**
+ * X轴灰色背景组件
+ * 用于在图表中为指定的 x 轴数据点添加灰色背景
+ */
+import React from 'react';
+export interface XAxisBackgroundProps {
+    /** x 轴字段名 */
+    x: string;
+    /** 原始数据 */
+    data: any[];
+    /** 是否渲染背景 */
+    isHighlight: boolean;
+    /** 筛选函数，返回 true 表示该数据点需要显示背景 */
+    filterFn: (item: any) => boolean;
+    /** 主图柱状图的宽度（可选，用于精确控制背景宽度） */
+    mainBarSize?: number;
+    /** 数据长度（可选，用于动态调整背景宽度） */
+    dataLength?: number;
+    /** 背景高度（可选，默认 1000） */
+    backgroundHeight?: number;
+    /** 背景颜色（可选，默认 '#cccccc'） */
+    backgroundColor?: string;
+    /** 背景透明度（可选，默认 0.8） */
+    backgroundOpacity?: number;
+    /** 背景宽度倍数（可选，默认 1.2，表示比主图宽 20%） */
+    sizeMultiplier?: number;
+    /** 是否水平布局 */
+    isHorizontal?: boolean;
+}
+declare const XAxisBackground: React.FC<XAxisBackgroundProps>;
+export default XAxisBackground;

package/dist/components/shared/XAxisBackground.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { Axis, Coordinate, Interval, View } from "bizcharts";
+const STRIPE_PATTERN_THRESHOLD = 10;
+const XAxisBackground = ({ x, data, isHighlight, filterFn, mainBarSize, dataLength, backgroundHeight = 1000, backgroundColor = '#f1f1f1', backgroundOpacity = 0.8, sizeMultiplier = 1.2, isHorizontal = false })=>{
+    const backgroundPatternRef = useRef(null);
+    const createBackgroundPattern = (color)=>{
+        const patternCanvas = document.createElement('canvas');
+        patternCanvas.width = 20;
+        patternCanvas.height = 20;
+        const patternCtx = patternCanvas.getContext('2d');
+        if (!patternCtx) return patternCanvas;
+        patternCtx.fillStyle = color;
+        patternCtx.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
+        return patternCanvas;
+    };
+    useEffect(()=>{
+        const offscreen = document.createElement('canvas');
+        const ctx = offscreen.getContext('2d');
+        if (!ctx) return;
+        const sourceCanvas = createBackgroundPattern(backgroundColor);
+        const pattern = ctx.createPattern(sourceCanvas, 'repeat');
+        if (pattern) backgroundPatternRef.current = pattern;
+    }, [
+        backgroundColor
+    ]);
+    const backgroundData = useMemo(()=>{
+        const allXValues = new Set();
+        const filteredXValues = new Set();
+        data.forEach((item)=>{
+            if (item[x]) {
+                allXValues.add(item[x]);
+                if (filterFn(item)) filteredXValues.add(item[x]);
+            }
+        });
+        return Array.from(allXValues).map((xValue)=>({
+                [x]: xValue,
+                indicatorValue: filteredXValues.has(xValue) ? backgroundHeight : 0,
+                isBackground: true
+            }));
+    }, [
+        data,
+        x,
+        filterFn,
+        backgroundHeight
+    ]);
+    const backgroundSize = useMemo(()=>{
+        if (mainBarSize) return mainBarSize * sizeMultiplier * (isHorizontal ? 0.5 : 1);
+        const length = dataLength || data.length;
+        return length > STRIPE_PATTERN_THRESHOLD ? 50 : 80;
+    }, [
+        mainBarSize,
+        dataLength,
+        data.length,
+        sizeMultiplier
+    ]);
+    if (0 === backgroundData.length || !isHighlight) return null;
+    return /*#__PURE__*/ jsxs(View, {
+        data: backgroundData,
+        scale: {
+            indicatorValue: {
+                type: 'linear',
+                max: backgroundHeight
+            }
+        },
+        padding: 0,
+        children: [
+            /*#__PURE__*/ jsx(Interval, {
+                position: `${x}*indicatorValue`,
+                style: {
+                    fill: backgroundPatternRef.current || backgroundColor,
+                    fillOpacity: backgroundPatternRef.current ? backgroundOpacity : 1,
+                    cursor: 'default'
+                },
+                tooltip: false,
+                size: backgroundSize
+            }),
+            /*#__PURE__*/ jsx(Coordinate, {
+                transpose: isHorizontal
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: "indicatorValue",
+                visible: false
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: x,
+                visible: false
+            })
+        ]
+    });
+};
+const shared_XAxisBackground = XAxisBackground;
+export { shared_XAxisBackground as default };

package/dist/core/ChartConfig.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 图表配置接口
+ */
+export interface ChartConfig {
+    /** 基础图表配置 */
+    baseChartConfig: {
+        appendPadding?: number[];
+        padding?: string | number[];
+        autoFit?: boolean;
+        limitInPlot?: boolean;
+        forceUpdate?: boolean;
+        animate?: {
+            leave?: boolean;
+        };
+    };
+    /** 主题配置 */
+    theme: {
+        colors: string[];
+        combineColors?: string[];
+    };
+    /** 布局配置 */
+    layout: {
+        barPaddingRight?: number;
+        horBarPaddingRight?: number;
+    };
+}
+/**
+ * 默认图表配置
+ */
+export declare const defaultChartConfig: ChartConfig;
+/**
+ * 从 bizcharts 主题获取颜色（如果可用）
+ */
+export declare const getThemeColors: () => string[];
+/**
+ * 合并配置
+ */
+export declare const mergeChartConfig: (defaultConfig: ChartConfig, userConfig: Partial<ChartConfig>) => ChartConfig;
+export declare const nodeMap: Map<number, {
+    des: string;
+    color: string;
+    bgc: string;
+}>;
+export declare const nodeTextMap: Map<string, {
+    type: number;
+    color: string;
+    bgc: string;
+}>;

package/dist/core/ChartConfig.js

@@ -0,0 +1,152 @@
+import { getTheme } from "bizcharts";
+const defaultChartConfig = {
+    baseChartConfig: {
+        appendPadding: [
+            20,
+            0,
+            10,
+            0
+        ],
+        padding: 'auto',
+        autoFit: true,
+        limitInPlot: false,
+        forceUpdate: false,
+        animate: {
+            leave: false
+        }
+    },
+    theme: {
+        colors: [
+            '#5B8FF9',
+            '#5AD8A6',
+            '#5D7092',
+            '#F6BD16',
+            '#6F5EF9',
+            '#6DC8EC',
+            '#945FB9',
+            '#FF9845',
+            '#1E9493',
+            '#FF99C3',
+            '#8CD85A',
+            '#FE765E',
+            '#67A1FF',
+            '#D85ACB',
+            '#F95B8F'
+        ],
+        combineColors: [
+            '#FF8C00',
+            '#FFD700'
+        ]
+    },
+    layout: {
+        barPaddingRight: 10,
+        horBarPaddingRight: 50
+    }
+};
+const getThemeColors = ()=>{
+    try {
+        const theme = getTheme();
+        return theme.colors10 || defaultChartConfig.theme.colors;
+    } catch  {
+        return defaultChartConfig.theme.colors;
+    }
+};
+const mergeChartConfig = (defaultConfig, userConfig)=>({
+        baseChartConfig: {
+            ...defaultConfig.baseChartConfig,
+            ...userConfig.baseChartConfig
+        },
+        theme: {
+            ...defaultConfig.theme,
+            ...userConfig.theme
+        },
+        layout: {
+            ...defaultConfig.layout,
+            ...userConfig.layout
+        }
+    });
+const nodeMap = new Map([
+    [
+        1,
+        {
+            des: '版本信息',
+            color: '#F5319D',
+            bgc: '#FFE8F1'
+        }
+    ],
+    [
+        2,
+        {
+            des: '市场信息',
+            color: '#0FC6C2',
+            bgc: '#E8FFFB'
+        }
+    ],
+    [
+        3,
+        {
+            des: '投放信息',
+            color: '#F77234',
+            bgc: '#FFF3E8'
+        }
+    ],
+    [
+        4,
+        {
+            des: '节假日信息',
+            color: '#7816FF',
+            bgc: '#F5E8FF'
+        }
+    ],
+    [
+        5,
+        {
+            des: '地区突发事件',
+            color: '#F53F3F',
+            bgc: '#FFECE8'
+        }
+    ]
+]);
+const nodeTextMap = new Map([
+    [
+        '版本信息',
+        {
+            type: 1,
+            color: '#F5319D',
+            bgc: '#FFE8F1'
+        }
+    ],
+    [
+        '市场信息',
+        {
+            type: 2,
+            color: '#0FC6C2',
+            bgc: '#E8FFFB'
+        }
+    ],
+    [
+        '投放信息',
+        {
+            type: 3,
+            color: '#F77234',
+            bgc: '#FFF3E8'
+        }
+    ],
+    [
+        '节假日信息',
+        {
+            type: 4,
+            color: '#7816FF',
+            bgc: '#F5E8FF'
+        }
+    ],
+    [
+        '地区突发事件',
+        {
+            type: 5,
+            color: '#F53F3F',
+            bgc: '#FFECE8'
+        }
+    ]
+]);
+export { defaultChartConfig, getThemeColors, mergeChartConfig, nodeMap, nodeTextMap };