@publishfx/publish-chart 1.3.0

package/dist/components/composite/BarLineChart.js

@@ -0,0 +1,255 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from "react";
+import { Axis, Chart, Interval, Legend, Line, Tooltip } from "bizcharts";
+import { useChartContext } from "../../core/ChartContext.js";
+import { mergeChartConfig } from "../../core/ChartConfig.js";
+import { getAxisFormat } from "../../utils/chartHelpers.js";
+import { getIndicatorName } from "../../utils/indicatorHelpers.js";
+import { DataAdapter } from "../../adapters/DataAdapter.js";
+const BarLineChart = ({ height = 310, data, x = '', y = '', z = '', indicatorMap, onChartClick, nodeSetting = {
+    showType: 0,
+    type: []
+} })=>{
+    const { formatter, dataTransform, config: contextConfig, businessComponents } = useChartContext();
+    const mergedConfig = useMemo(()=>mergeChartConfig(contextConfig, {}), [
+        contextConfig
+    ]);
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const transformedData = useMemo(()=>{
+        const result = DataAdapter.transform(data, 'barLine', {
+            type: 'barLine',
+            x,
+            y,
+            z
+        });
+        return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
+    }, [
+        data,
+        x,
+        y,
+        z,
+        dataTransform,
+        contextConfig.nodeMap
+    ]);
+    const [chartWidth, setChartWidth] = useState(0);
+    const [chartOffset, setChartOffset] = useState(0);
+    const [padding, setPadding] = useState([
+        10,
+        0
+    ]);
+    const [pointP, setPointP] = useState({
+        x: 0,
+        y: 0
+    });
+    const [pointData, setPointData] = useState({
+        info: [],
+        infosCompare: []
+    });
+    let chartIns = null;
+    const scale = useMemo(()=>({
+            [y]: {
+                type: 'linear-strict'
+            },
+            [z]: {
+                type: 'linear-strict'
+            }
+        }), [
+        y,
+        z
+    ]);
+    useEffect(()=>{
+        setPointP({
+            x: 0,
+            y: 0
+        });
+        setPointData({
+            info: [],
+            infosCompare: []
+        });
+        if (nodeSetting?.showType) if (nodeSetting?.showType === 2 && chartWidth / transformedData.length > 30) if (transformedData.some((item)=>item?.nodeLen > 2)) setPadding([
+            10,
+            0,
+            40,
+            0
+        ]);
+        else transformedData.some((item)=>item?.nodeLen === 2) ? setPadding([
+            10,
+            0,
+            24,
+            0
+        ]) : setPadding([
+            20,
+            0,
+            10,
+            0
+        ]);
+        else setPadding([
+            20,
+            0,
+            10,
+            0
+        ]);
+        else setPadding([
+            20,
+            0,
+            10,
+            0
+        ]);
+    }, [
+        chartWidth,
+        transformedData,
+        nodeSetting
+    ]);
+    const getChartKey = ()=>`${nodeSetting?.showType}${y}${z}${x}`;
+    const NodeDetail = businessComponents?.NodeDetail;
+    const NodeGeom = businessComponents?.NodeGeom;
+    return /*#__PURE__*/ jsxs(Chart, {
+        height: height,
+        data: transformedData,
+        ...mergedConfig.baseChartConfig,
+        onPlotClick: (e, chart)=>{
+            const value = chart.getTooltipItems({
+                x: e.x,
+                y: e.y
+            });
+            onChartClick && onChartClick(value[0]);
+        },
+        onGetG2Instance: (chart)=>{
+            chartIns = chart;
+        },
+        scale: scale,
+        appendPadding: padding,
+        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);
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx(Legend, {
+                custom: true,
+                allowAllCanceled: true,
+                position: nodeSetting.showType ? 'top' : 'bottom',
+                items: [
+                    {
+                        value: y,
+                        name: getIndicatorName(safeIndicatorMap, y),
+                        marker: {
+                            symbol: 'circle',
+                            style: {
+                                fill: mergedConfig.theme.colors[0],
+                                r: 5
+                            }
+                        }
+                    },
+                    {
+                        value: z,
+                        name: `${getIndicatorName(safeIndicatorMap, z)} `,
+                        marker: {
+                            symbol: 'hyphen',
+                            style: {
+                                stroke: mergedConfig.theme.combineColors?.[0] || '#FF8C00',
+                                r: 5,
+                                lineWidth: 3
+                            }
+                        }
+                    }
+                ],
+                onChange: (ev)=>{
+                    const item = ev?.item || {};
+                    const value = item.value;
+                    const checked = !item.unchecked;
+                    const geoms = chartIns?.geometries || [];
+                    for(let i = 0; i < geoms.length; i++){
+                        const geom = geoms[i];
+                        if (geom.getYScale().field === value) if (checked) geom.show();
+                        else geom.hide();
+                    }
+                }
+            }),
+            /*#__PURE__*/ jsx(Interval, {
+                position: `${x}*${y}`,
+                style: {
+                    cursor: 'pointer'
+                },
+                tooltip: [
+                    `${x}*${y}`,
+                    (_name, value)=>({
+                            name: getIndicatorName(safeIndicatorMap, y),
+                            value: formatter.formatIndicator(value, safeIndicatorMap[y])
+                        })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Line, {
+                position: `${x}*${z}`,
+                style: {
+                    cursor: 'pointer'
+                },
+                color: mergedConfig.theme.combineColors?.[0] || '#FF8C00',
+                shape: "smooth",
+                tooltip: [
+                    `${x}*${z}`,
+                    (_name, value)=>({
+                            name: getIndicatorName(safeIndicatorMap, z),
+                            value: formatter.formatIndicator(value, safeIndicatorMap[z])
+                        })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                shared: true,
+                showCrosshairs: true,
+                domStyles: {
+                    'g2-tooltip-value': {
+                        fontWeight: 'bold'
+                    }
+                }
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: y,
+                label: {
+                    formatter: (val)=>getAxisFormat(val, safeIndicatorMap, y)
+                }
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: z,
+                label: {
+                    formatter: (val)=>getAxisFormat(val, safeIndicatorMap, z)
+                }
+            }),
+            /*#__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());
+};
+const composite_BarLineChart = /*#__PURE__*/ memo(BarLineChart);
+export { composite_BarLineChart as default };

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

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

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * 柱状折线对比组合图（周末高亮版本）
+ */
+import React from 'react';
+import type { BaseChartProps } from '../../core/ChartTypes';
+interface BarLineCompareWeekendProps extends BaseChartProps {
+    indicators: string[];
+}
+declare const _default: React.NamedExoticComponent<BarLineCompareWeekendProps>;
+export default _default;