@publishfx/publish-chart 1.3.0

package/dist/components/composite/GroupBarLine.js

@@ -0,0 +1,546 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from "react";
+import { Axis, Chart, Interval, Legend, Line, Tooltip, View } from "bizcharts";
+import lib from "@antv/data-set/lib";
+import { useChartContext } from "../../core/ChartContext.js";
+import { calculateBarWidth, getAxisFormat, getAxisHorPaddingByText, getChartKey } from "../../utils/chartHelpers.js";
+import { getIndicatorName } 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";
+const newThemeColors = [
+    "#5B8FF9",
+    "#5AD8A6",
+    "#5D7092",
+    "#F6BD16",
+    "#6F5EF9",
+    "#6DC8EC",
+    "#945FB9",
+    "#FF9845",
+    "#1E9493",
+    "#FF99C3",
+    "#8CD85A",
+    "#FE765E",
+    "#67A1FF",
+    "#D85ACB",
+    "#F95B8F"
+];
+const GroupBarLine = ({ height = 300, data, x = "groupName", y = "", legend = "groupType", indicatorMap, config, auxiliaryLineData, onChartClick = ()=>{}, highlightDate = [], nodeSetting = {
+    showType: 0,
+    type: []
+} })=>{
+    const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const yAxis = "groupValue";
+    const [paddingBottom, setPaddingBottom] = useState(60);
+    const { isDataTag = true, isLegend = true, isCombineDataTag = true, isDescend = false, isClickable = false, isHighlight = true } = config || {};
+    const ds = new lib();
+    const dv = ds.createView().source(data);
+    const tdv = ds.createView().source(data);
+    const [paddingTop, setPaddingTop] = useState(20);
+    const [mainBarSize, setMainBarSize] = useState(void 0);
+    if ("" !== y) dv.transform({
+        type: "map",
+        callback: (row)=>{
+            row[yAxis] = "" !== row[yAxis] ? +row[yAxis] : "-";
+            return row;
+        }
+    });
+    tdv.transform({
+        type: "map",
+        callback: (row)=>{
+            row[yAxis] = "" !== row[yAxis] ? +row[yAxis] : "-";
+            return row;
+        }
+    });
+    tdv.transform({
+        type: "filter",
+        callback: (row)=>!row.isCombine
+    });
+    tdv.transform({
+        type: "filter",
+        callback: (row)=>"-" !== row[yAxis]
+    });
+    tdv.transform({
+        type: "aggregate",
+        fields: [
+            yAxis
+        ],
+        groupBy: [
+            x
+        ],
+        operations: [
+            "sum"
+        ],
+        as: [
+            "total"
+        ]
+    });
+    if (isDescend) tdv.transform({
+        type: "sort",
+        callback: (a, b)=>b.total - a.total
+    });
+    const sortData = tdv.rows.map((item)=>item[x]);
+    const [chartWidth, setChatWidth] = useState(0);
+    const [chartOffset, setChartOffset] = useState(0);
+    let transformData = dv.rows;
+    const legendMap = {};
+    transformData = transformData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
+    const leftData = transformData.filter((v)=>!v.isCombine);
+    let rightData = transformData.filter((v)=>v.isCombine);
+    const colors = [
+        "#FE765E",
+        "#67A1FF",
+        "#D85ACB"
+    ];
+    if (0 === rightData.length) rightData = [
+        ...leftData
+    ];
+    const rightLegendValues = Array.from(new Set(rightData.map((v)=>v.groupType)));
+    const rightLegendItem = rightLegendValues.map((v, i)=>({
+            id: `${v}_line`,
+            name: getIndicatorName(safeIndicatorMap, v),
+            value: v,
+            marker: {
+                symbol: "hyphen",
+                style: {
+                    stroke: colors[i],
+                    r: 5,
+                    lineWidth: 3
+                }
+            },
+            checked: legendMap[`${v}_line`] || false
+        }));
+    const leftValueArr = leftData.filter((v)=>"-" !== v[yAxis]).map((v)=>v["total"]);
+    const maxLeft = Math.max(...leftValueArr?.length ? leftValueArr : [
+        0
+    ]);
+    const rightValueArr = rightData.filter((v)=>"-" !== v[yAxis]).map((v)=>+v[yAxis]);
+    const maxRight = Math.max(...rightValueArr?.length ? rightValueArr : [
+        0
+    ]);
+    const leftAuxi = auxiliaryLineData?.filter((item)=>"left" === item.axis || !Object.prototype.hasOwnProperty.call(item, "axis"));
+    const rightAuxi = auxiliaryLineData?.filter((item)=>"right" === item.axis);
+    const maxYLeft = Math.max(maxLeft, leftAuxi && Math.max(...leftAuxi.map((item)=>+item.value)) || 0);
+    const maxYRightValue = Math.max(maxRight, rightAuxi && Math.max(...rightAuxi.map((item)=>+item.value)) || 0);
+    const maxYRight = maxYRightValue !== maxRight && rightAuxi && rightAuxi.length > 0 ? 1.2 * Math.max(...rightAuxi.map((item)=>+item.value)) : maxYRightValue;
+    const scale = {
+        groupValue: {
+            type: "linear-strict",
+            min: 0,
+            nice: true,
+            max: maxYLeft
+        }
+    };
+    useEffect(()=>{
+        let oldOffset = maxYLeft > maxYRight ? 35 : 20;
+        if (2 == nodeSetting.showType) oldOffset = 35;
+        setPaddingTop(oldOffset);
+    }, [
+        maxLeft,
+        maxYLeft
+    ]);
+    useEffect(()=>{
+        if (nodeSetting?.showType === 2 && chartWidth / leftData.length > 30) if (leftData.some((item)=>item?.nodeLen > 2)) setPaddingBottom(55);
+        else leftData.some((item)=>item?.nodeLen === 2) ? setPaddingBottom(40) : setPaddingBottom(25);
+        else setPaddingBottom(50);
+    }, [
+        chartWidth,
+        leftData,
+        nodeSetting
+    ]);
+    const offsetLeft = getAxisHorPaddingByText(maxYLeft, safeIndicatorMap, y);
+    const offsetRight = rightData.length > 0 && void 0 !== maxYRight ? getAxisHorPaddingByText(maxYRight, safeIndicatorMap, rightData[0][legend]) : 10;
+    const scaleAuxiliary = {
+        groupValue: {
+            type: "linear-strict",
+            min: 0,
+            nice: true,
+            max: maxYRight
+        }
+    };
+    let chartIns;
+    if (isDescend) {
+        leftData.sort((a, b)=>b["total"] - a["total"]);
+        rightData.sort((a, b)=>sortData.indexOf(a[x]) - sortData.indexOf(b[x]));
+    } else rightData.sort((a, b)=>sortData.indexOf(a[x]) - sortData.indexOf(b[x]));
+    const legendValues = Array.from(new Set(leftData.map((v)=>v.groupType)));
+    const legendItem = legendValues.map((v, i)=>({
+            id: `${v}_bar`,
+            name: v === y ? getIndicatorName(safeIndicatorMap, y) : v,
+            value: v,
+            marker: {
+                symbol: "square",
+                style: {
+                    fill: newThemeColors[i]
+                }
+            },
+            checked: legendMap[`${v}_bar`] || false
+        }));
+    const topLabel = {};
+    const [pointP, setPointP] = useState({
+        x: 0,
+        y: 0
+    });
+    const [pointData, setPointData] = useState({
+        info: [],
+        infosCompare: []
+    });
+    useEffect(()=>{
+        setPointP({
+            x: 0,
+            y: 0
+        });
+        setPointData({
+            info: [],
+            infosCompare: []
+        });
+    }, [
+        data
+    ]);
+    const filterFn = useMemo(()=>(item)=>highlightDate.includes(item.groupName) ?? false, [
+        highlightDate
+    ]);
+    return /*#__PURE__*/ jsxs(Chart, {
+        height: height,
+        padding: [
+            paddingTop,
+            offsetRight,
+            paddingBottom,
+            offsetLeft
+        ],
+        scale: scale,
+        data: leftData,
+        autoFit: true,
+        forceUpdate: false,
+        onGetG2Instance: (chart)=>{
+            chartIns = chart;
+        },
+        onPlotClick: (e, chart)=>{
+            if (onChartClick) {
+                const value = chart.getTooltipItems({
+                    x: e.x,
+                    y: e.y
+                });
+                if (value && value[0]) onChartClick(value[0]);
+            }
+        },
+        onPointMouseover: (e)=>{
+            if (1 === nodeSetting.showType) {
+                setPointP({
+                    x: e.data.x,
+                    y: e.data.y
+                });
+                setPointData(e.data.data.nodeInfos);
+            }
+        },
+        onAfterrender: (chart)=>{
+            if (2 == nodeSetting.showType) {
+                setChatWidth(chart.view?.coordinateBBox?.width || 0);
+                setChartOffset(chart.view?.coordinateBBox?.x || 0);
+            }
+            const estimatedBarWidth = calculateBarWidth(chart, leftData, x, 0.5);
+            if (void 0 !== estimatedBarWidth) setMainBarSize(estimatedBarWidth);
+        },
+        children: [
+            /*#__PURE__*/ jsx(XAxisBackground, {
+                x: x,
+                data: leftData,
+                isHighlight: isHighlight,
+                filterFn: filterFn,
+                dataLength: leftData.length,
+                mainBarSize: mainBarSize
+            }),
+            /*#__PURE__*/ jsx(Interval, {
+                adjust: [
+                    {
+                        type: "stack"
+                    }
+                ],
+                color: [
+                    legend,
+                    newThemeColors
+                ],
+                position: `${x}*${yAxis}`,
+                style: {
+                    cursor: isClickable ? "pointer" : "default"
+                },
+                label: [
+                    `${legend}*total*${x}*${yAxis}`,
+                    (_v, total, xVal, yVal)=>{
+                        let renderFlag = false;
+                        if ("-" === yVal) return null;
+                        if (!topLabel[xVal]) {
+                            renderFlag = true;
+                            topLabel[xVal] = true;
+                        }
+                        return {
+                            content: isDataTag && renderFlag ? formatter.formatIndicator(total, safeIndicatorMap[y]) : "",
+                            style: {
+                                fontWeight: "bold"
+                            }
+                        };
+                    }
+                ]
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                shared: true,
+                showCrosshairs: true,
+                children: (title, items)=>{
+                    const { groupItems, speItems, combineItems } = (items || []).reduce((acc, item)=>{
+                        if (item.data.isCombine) acc.combineItems.push(item);
+                        else if ("-" === item.value) acc.speItems.push(item);
+                        else acc.groupItems.push(item);
+                        return acc;
+                    }, {
+                        groupItems: [],
+                        speItems: [],
+                        combineItems: []
+                    });
+                    const sortItems = [
+                        ...groupItems.sort((a, b)=>Number(b.value) - Number(a.value)),
+                        ...speItems,
+                        ...combineItems
+                    ];
+                    let AuxiIndicatorName = "";
+                    return /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            padding: "10px 0"
+                        },
+                        children: [
+                            title,
+                            sortItems && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        style: {
+                                            marginTop: "10px"
+                                        },
+                                        children: sortItems.map((it, index)=>{
+                                            if (it.data.isCombine) AuxiIndicatorName = it.name;
+                                            return /*#__PURE__*/ jsxs("div", {
+                                                style: {
+                                                    display: "flex",
+                                                    justifyContent: "space-between",
+                                                    marginBottom: "10px"
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("span", {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                style: {
+                                                                    width: "8px",
+                                                                    height: "8px",
+                                                                    backgroundColor: it.color,
+                                                                    display: "inline-block",
+                                                                    borderRadius: "50%",
+                                                                    marginRight: "8px"
+                                                                }
+                                                            }),
+                                                            it.name === y ? getIndicatorName(safeIndicatorMap, y) : it.data.isCombine ? getIndicatorName(safeIndicatorMap, it.name) : it.name,
+                                                            ":"
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("span", {
+                                                        style: {
+                                                            fontWeight: "bold",
+                                                            paddingLeft: "10px"
+                                                        },
+                                                        children: [
+                                                            it.data.isCombine ? formatter.formatIndicator(it.value, safeIndicatorMap[it.name]) : formatter.formatIndicator(it.value, safeIndicatorMap[y]),
+                                                            !it.data.isCombine && !isClickable && /*#__PURE__*/ jsxs(Fragment, {
+                                                                children: [
+                                                                    "（",
+                                                                    (100 * Number(it.data.percent)).toFixed(2),
+                                                                    "%）"
+                                                                ]
+                                                            }),
+                                                            it.data.isCombine && /*#__PURE__*/ jsx(Fragment, {
+                                                                children: "\xa0\xa0"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            }, 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: "left" === item.axis ? formatter.formatIndicator(item.value, safeIndicatorMap[y]) : formatter.formatIndicator(item.value, safeIndicatorMap[AuxiIndicatorName])
+                                                })
+                                            ]
+                                        }, index))
+                                ]
+                            })
+                        ]
+                    });
+                }
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: yAxis,
+                position: "left",
+                label: {
+                    formatter: (val)=>getAxisFormat(val, safeIndicatorMap, y)
+                }
+            }),
+            rightData.length > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs(View, {
+                        data: rightData,
+                        scale: scaleAuxiliary,
+                        padding: 0,
+                        name: "lineview",
+                        children: [
+                            /*#__PURE__*/ jsx(Axis, {
+                                name: yAxis,
+                                position: "right",
+                                label: {
+                                    formatter: (val)=>getAxisFormat(val, safeIndicatorMap, rightData[0][legend])
+                                }
+                            }),
+                            /*#__PURE__*/ jsx(Axis, {
+                                name: x,
+                                visible: false
+                            }),
+                            /*#__PURE__*/ jsx(Line, {
+                                position: `${x}*${yAxis}`,
+                                color: [
+                                    legend,
+                                    colors
+                                ],
+                                label: [
+                                    `${legend}*${yAxis}`,
+                                    (name, value)=>{
+                                        const content = isCombineDataTag ? formatter.formatIndicator(value, safeIndicatorMap[name]) : null;
+                                        return {
+                                            content: content || "",
+                                            style: {
+                                                fontWeight: "bold"
+                                            }
+                                        };
+                                    }
+                                ]
+                            })
+                        ]
+                    }),
+                    rightAuxi && rightAuxi.length > 0 && /*#__PURE__*/ jsxs(View, {
+                        data: rightData,
+                        scale: scaleAuxiliary,
+                        padding: [
+                            0,
+                            -offsetRight,
+                            0,
+                            0
+                        ],
+                        children: [
+                            /*#__PURE__*/ jsx(Axis, {
+                                name: yAxis,
+                                visible: false
+                            }),
+                            /*#__PURE__*/ jsx(Axis, {
+                                name: x,
+                                visible: false
+                            }),
+                            /*#__PURE__*/ jsx(Interval, {
+                                position: `${x}*${yAxis}`,
+                                visible: false
+                            }),
+                            rightAuxi.map((item, index)=>/*#__PURE__*/ jsx(AuxiliaryLine, {
+                                    axis: "right",
+                                    name: item.name,
+                                    value: item.value
+                                }, index))
+                        ]
+                    }, offsetRight)
+                ]
+            }),
+            /*#__PURE__*/ jsx(Legend, {
+                custom: true,
+                name: legend,
+                position: 2 === nodeSetting.showType ? "top" : "bottom",
+                itemHeight: 14,
+                visible: isLegend,
+                items: [
+                    ...legendItem,
+                    ...rightLegendItem
+                ],
+                onChange: (ev)=>{
+                    for(const key in topLabel)topLabel[key] = false;
+                    const { item } = ev;
+                    const { id } = item;
+                    const checked = !item.unchecked;
+                    legendMap[id] = checked;
+                    const chartType = id.split("_")[1];
+                    if ("line" === chartType) {
+                        const view = chartIns.views[1];
+                        view.filter(legend, (val)=>false !== legendMap[`${val}_line`]);
+                        view.render(true);
+                    }
+                    if ("bar" === chartType) chartIns.filter(legend, (val)=>false !== legendMap[`${val}_bar`]);
+                    chartIns.render(true);
+                }
+            }),
+            leftAuxi && leftAuxi.length > 0 && /*#__PURE__*/ jsxs(View, {
+                data: leftData,
+                scale: scale,
+                padding: [
+                    0,
+                    0,
+                    0,
+                    -offsetLeft
+                ],
+                name: "barview",
+                children: [
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: yAxis,
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: x,
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Interval, {
+                        position: `${x}*${yAxis}`,
+                        visible: false
+                    }),
+                    leftAuxi.map((item, index)=>/*#__PURE__*/ jsx(AuxiliaryLine, {
+                            name: item.name,
+                            value: item.value
+                        }, index))
+                ]
+            }, offsetLeft),
+            dv.rows.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: dv.rows.filter((item)=>!item.isCombine),
+                    ratio: 1
+                }) : null : null
+            }) : null
+        ]
+    }, getChartKey({
+        config,
+        nodeSetting
+    }));
+};
+const composite_GroupBarLine = /*#__PURE__*/ memo(GroupBarLine);
+export { composite_GroupBarLine as default, newThemeColors };

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

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

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * 分组（柱状、折线）对比图组件
+ */
+import React from "react";
+import type { BaseChartProps } from "../../core/ChartTypes";
+interface GroupCompareProps extends BaseChartProps {
+    legend?: string;
+}
+declare const _default: React.NamedExoticComponent<GroupCompareProps>;
+export default _default;