@publishfx/publish-chart 1.3.0

package/dist/components/base/BarChart.lazy.js

@@ -0,0 +1,2 @@
+import BarChart from "./BarChart.js";
+export { BarChart as default };

package/dist/components/base/LineChart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 基础折线图组件
+ */
+import React from 'react';
+import type { BaseChartProps } from '../../core/ChartTypes';
+declare const _default: React.NamedExoticComponent<BaseChartProps>;
+export default _default;

package/dist/components/base/LineChart.js

@@ -0,0 +1,321 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Axis, Chart, Line, Tooltip, View } from "bizcharts";
+import { useChartContext } from "../../core/ChartContext.js";
+import { mergeChartConfig } from "../../core/ChartConfig.js";
+import { calculateBarWidth, getAxisFormat, getAxisHorPaddingByText, getChartKey } from "../../utils/chartHelpers.js";
+import AuxiliaryLine from "../shared/AuxiliaryLine.js";
+import XAxisBackground from "../shared/XAxisBackground.js";
+import { DataAdapter } from "../../adapters/DataAdapter.js";
+import { NodeDetail } from "../shared/NodeDetail.js";
+import { NodeGeom } from "../shared/NodeGeom.js";
+const LineChart = ({ height = 300, data, x = '', y = '', indicatorMap, onChartClick, 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 safeLegend = legend || y;
+    const chartConfig = config || {};
+    const { isDataTag = false, isHighlight = true } = chartConfig;
+    const transformedData = useMemo(()=>{
+        const result = DataAdapter.transform(data, 'line', {
+            type: 'line',
+            x,
+            y
+        });
+        return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
+    }, [
+        data,
+        x,
+        y,
+        dataTransform,
+        contextConfig.nodeMap
+    ]);
+    const [chartWidth, setChartWidth] = useState(0);
+    const [chartOffset, setChartOffset] = useState(0);
+    const [padding, setPadding] = useState([
+        10,
+        0
+    ]);
+    const [axisHorPadding, setAxisHorPadding] = useState(0);
+    const [pointP, setPointP] = useState({
+        x: 0,
+        y: 0
+    });
+    const [pointData, setPointData] = useState({
+        info: [],
+        infosCompare: []
+    });
+    const [mainBarSize, setMainBarSize] = useState(void 0);
+    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);
+    }, [
+        transformedData,
+        y,
+        auxiliaryLineData
+    ]);
+    useEffect(()=>{
+        if (nodeSetting?.showType === 2 && chartWidth / transformedData.length > 30) if (transformedData.some((item)=>item?.nodeLen > 2)) setPadding([
+            10,
+            10,
+            40,
+            0
+        ]);
+        else transformedData.some((item)=>item?.nodeLen === 2) ? setPadding([
+            10,
+            10,
+            24,
+            0
+        ]) : setPadding([
+            20,
+            10,
+            10,
+            0
+        ]);
+        else setPadding([
+            20,
+            10,
+            10,
+            0
+        ]);
+    }, [
+        chartWidth,
+        transformedData
+    ]);
+    useEffect(()=>{
+        if (maxY > Math.max(...transformedData.filter((item)=>'-' !== item[y]).map((item)=>item[y]))) setPadding((pre)=>[
+                25,
+                pre[1],
+                pre[2],
+                pre[3]
+            ]);
+    }, [
+        maxY,
+        transformedData,
+        y
+    ]);
+    const filterFn = useMemo(()=>(item)=>highlightDate?.includes(item.groupName) ?? false, [
+        highlightDate
+    ]);
+    const formatAxis = useCallback((val)=>{
+        setAxisHorPadding(getAxisHorPaddingByText(val, safeIndicatorMap, safeLegend) - 22);
+        return getAxisFormat(val, safeIndicatorMap, safeLegend);
+    }, [
+        safeIndicatorMap,
+        safeLegend
+    ]);
+    return /*#__PURE__*/ jsxs(Chart, {
+        height: height,
+        data: transformedData,
+        ...mergedConfig.baseChartConfig,
+        appendPadding: padding,
+        onClick: (e, chart)=>{
+            const value = chart.getTooltipItems({
+                x: e.x,
+                y: e.y
+            });
+            onChartClick && onChartClick(value[0]);
+        },
+        scale: {
+            [y]: {
+                type: 'linear-strict',
+                max: maxY,
+                nice: true
+            }
+        },
+        onPointMouseover: (e)=>{
+            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) {
+                setChartWidth(chart.coordinateBBox.width);
+                setChartOffset(chart.coordinateBBox.x);
+            }
+            const estimatedBarWidth = calculateBarWidth(chart, transformedData, x, 0.5);
+            if (void 0 !== estimatedBarWidth) setMainBarSize(estimatedBarWidth);
+        },
+        children: [
+            /*#__PURE__*/ jsx(XAxisBackground, {
+                x: x,
+                data: transformedData,
+                isHighlight: isHighlight,
+                filterFn: filterFn,
+                dataLength: transformedData.length,
+                mainBarSize: mainBarSize
+            }),
+            /*#__PURE__*/ jsx(Line, {
+                position: `${x}*${y}`,
+                style: {
+                    cursor: 'pointer'
+                },
+                shape: "smooth",
+                label: [
+                    y,
+                    (v)=>{
+                        const content = isDataTag ? formatter.formatIndicator(v, safeIndicatorMap[safeLegend]) : void 0;
+                        return {
+                            content: content || ''
+                        };
+                    }
+                ]
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                shared: true,
+                showCrosshairs: true,
+                children: (title, items)=>/*#__PURE__*/ jsxs("div", {
+                        style: {
+                            padding: '10px 0'
+                        },
+                        children: [
+                            title,
+                            items && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        style: {
+                                            marginTop: '10px'
+                                        },
+                                        children: items.map((it, index)=>/*#__PURE__*/ jsxs("div", {
+                                                style: {
+                                                    display: 'flex',
+                                                    justifyContent: 'space-between'
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("span", {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                style: {
+                                                                    width: '8px',
+                                                                    height: '8px',
+                                                                    backgroundColor: it.color,
+                                                                    display: 'inline-block',
+                                                                    borderRadius: '50%',
+                                                                    marginRight: '8px'
+                                                                }
+                                                            }),
+                                                            safeIndicatorMap[safeLegend]?.indicatorName || '',
+                                                            ":"
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        style: {
+                                                            fontWeight: 'bold',
+                                                            paddingLeft: '10px'
+                                                        },
+                                                        children: formatter.formatIndicator(it.value, safeIndicatorMap[safeLegend])
+                                                    })
+                                                ]
+                                            }, index))
+                                    }),
+                                    auxiliaryLineData && auxiliaryLineData.map((item, index)=>/*#__PURE__*/ jsxs("div", {
+                                            style: {
+                                                marginLeft: '16px',
+                                                marginTop: '10px',
+                                                display: 'flex',
+                                                justifyContent: 'space-between'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    style: {
+                                                        marginRight: '8px'
+                                                    },
+                                                    children: [
+                                                        item.name,
+                                                        ":"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx("div", {
+                                                    children: formatter.formatIndicator(item.value, safeIndicatorMap[safeLegend])
+                                                })
+                                            ]
+                                        }, index))
+                                ]
+                            })
+                        ]
+                    })
+            }),
+            auxiliaryLineData && auxiliaryLineData.length > 0 && /*#__PURE__*/ jsxs(View, {
+                data: transformedData,
+                scale: {
+                    [y]: {
+                        type: 'linear-strict',
+                        max: maxY,
+                        nice: true
+                    }
+                },
+                padding: [
+                    0,
+                    0,
+                    0,
+                    -axisHorPadding
+                ],
+                children: [
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: y,
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: x,
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Line, {
+                        position: `${x}*${y}`,
+                        visible: false
+                    }),
+                    auxiliaryLineData.map((item, index)=>/*#__PURE__*/ jsx(AuxiliaryLine, {
+                            name: item.name,
+                            value: item.value
+                        }, index))
+                ]
+            }, axisHorPadding),
+            /*#__PURE__*/ jsx(Axis, {
+                name: y,
+                label: {
+                    formatter: formatAxis
+                }
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                grid: null,
+                name: x,
+                label: {
+                    autoEllipsis: true
+                }
+            }),
+            transformedData.some((item)=>item?.nodeInfos?.info?.length > 0 || item?.nodeInfos?.infosCompare?.length > 0) && /*#__PURE__*/ jsxs(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: transformedData
+                    })
+                ]
+            })
+        ]
+    }, getChartKey({
+        config,
+        nodeSetting
+    }));
+};
+const base_LineChart = /*#__PURE__*/ memo(LineChart);
+export { base_LineChart as default };

package/dist/components/base/LineChart.lazy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * LineChart Lazy Loading 入口
+ * 提供默认导出，支持 lazy() 直接使用
+ */
+export { default } from './LineChart';

package/dist/components/base/LineChart.lazy.js

@@ -0,0 +1,2 @@
+import LineChart from "./LineChart.js";
+export { LineChart as default };

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

@@ -0,0 +1,22 @@
+/**
+ * 组合图（不带对比时间）
+ * barLine 到 groupBarLine 的数据适配器组件
+ */
+import React from 'react';
+import type { BaseChartProps } from '../../core/ChartTypes';
+interface BarLineAdapterProps extends Omit<BaseChartProps, 'legend'> {
+    x?: string;
+    y?: string;
+    z?: string;
+    config?: {
+        isDataTag?: boolean;
+        isLegend?: boolean;
+        isCombineDataTag?: boolean;
+        isDescend?: boolean;
+        isClickable?: boolean;
+    };
+    highlightDate?: string[];
+    indicators?: string[];
+}
+declare const BarLineAdapter: React.FC<BarLineAdapterProps>;
+export default BarLineAdapter;

package/dist/components/composite/BarLineAdapter.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import GroupBarLine from "./GroupBarLine.js";
+const transformDataToGroupBarLineFormat = (data, x = 'groupName', y = '', indicators)=>{
+    if (!data || 0 === data.length) return [];
+    return data.map((item)=>{
+        const indicatorData = item?.indicatorData || {};
+        return indicators && indicators?.length > 0 ? indicators?.map((key, index)=>{
+            const indicatorItem = indicatorData[key];
+            return {
+                groupName: item[x],
+                groupType: key,
+                groupValue: indicatorItem,
+                isCombine: 0 !== index,
+                percent: 1,
+                nodeInfos: item.nodeInfos,
+                total: indicatorItem
+            };
+        }) : Object.keys(indicatorData).map((key)=>{
+            const indicatorItem = indicatorData[key];
+            return {
+                groupName: item[x],
+                groupType: key,
+                groupValue: indicatorItem,
+                isCombine: key !== y,
+                percent: 1,
+                nodeInfos: item.nodeInfos,
+                total: indicatorItem
+            };
+        });
+    }).flat();
+};
+const BarLineAdapter = ({ height, data, x = 'groupName', y = '', z: _z = '', indicatorMap, config = {
+    isLegend: true,
+    isDataTag: false,
+    isCombineDataTag: false,
+    isDescend: false,
+    isClickable: true
+}, auxiliaryLineData, onChartClick = ()=>{}, highlightDate = [], nodeSetting, indicators = [] })=>{
+    const transformedData = useMemo(()=>transformDataToGroupBarLineFormat(data, x, y, indicators), [
+        data,
+        x,
+        y,
+        indicators
+    ]);
+    return /*#__PURE__*/ jsx(GroupBarLine, {
+        height: height,
+        data: transformedData,
+        x: x,
+        y: y,
+        legend: "groupType",
+        indicatorMap: indicatorMap,
+        config: config,
+        auxiliaryLineData: auxiliaryLineData,
+        onChartClick: onChartClick,
+        highlightDate: highlightDate,
+        nodeSetting: nodeSetting
+    });
+};
+const composite_BarLineAdapter = BarLineAdapter;
+export { composite_BarLineAdapter as default };

package/dist/components/composite/BarLineAdapter.lazy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * BarLineAdapter Lazy Loading 入口
+ * 提供默认导出，支持 lazy() 直接使用
+ */
+export { default } from './BarLineAdapter';

package/dist/components/composite/BarLineAdapter.lazy.js

@@ -0,0 +1,2 @@
+import BarLineAdapter from "./BarLineAdapter.js";
+export { BarLineAdapter as default };

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

@@ -0,0 +1,7 @@
+/**
+ * 柱状折线组合图组件
+ */
+import React from 'react';
+import type { BaseChartProps } from '../../core/ChartTypes';
+declare const _default: React.NamedExoticComponent<BaseChartProps>;
+export default _default;