@publishfx/publish-chart 1.3.1 → 1.4.0

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

@@ -0,0 +1,3 @@
+export declare const newThemeColors: string[];
+declare const _default: import("react").MemoExoticComponent<({ height, data, x, y, legend, indicatorMap, config, auxiliaryLineData, nodeSetting, highlightDate, }: any) => JSX.Element>;
+export default _default;

package/dist/components/composite/GroupBar.js

@@ -0,0 +1,421 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from "react";
+import { Axis, Chart, Coordinate, Interval, Legend, Tooltip, View } from "bizcharts";
+import lib from "@antv/data-set/lib";
+import { formatIndicatorV2 } from "../../utils/formatters.js";
+import { calTextWidth, calculateBarWidth, getAxisFormat, getAxisHorPaddingByText, truncateText } from "../../utils/chartHelpers.js";
+import { defaultChartConfig, nodeMap } from "../../core/ChartConfig.js";
+import AuxiliaryLine from "../shared/AuxiliaryLine.js";
+import { NodeGeom } from "../shared/NodeGeom.js";
+import XAxisBackground from "../shared/XAxisBackground.js";
+const newThemeColors = [
+    '#5B8FF9',
+    '#5AD8A6',
+    '#5D7092',
+    '#F6BD16',
+    '#6F5EF9',
+    '#6DC8EC',
+    '#945FB9',
+    '#FF9845',
+    '#1E9493',
+    '#FF99C3',
+    '#8CD85A',
+    '#FE765E',
+    '#67A1FF',
+    '#D85ACB',
+    '#F95B8F'
+];
+const GroupBar = ({ height, data, x = 'groupName', y = '', legend = 'groupType', indicatorMap, config, auxiliaryLineData, nodeSetting = {
+    showType: 0,
+    type: []
+}, highlightDate })=>{
+    const yAxis = 'groupValue';
+    const { isDataTag = true, isLegend = true, isDescend = false, isHorizontal = false, isHighlight = true } = config || {};
+    const ds = new lib();
+    const dv = ds.createView().source(data);
+    const tdv = ds.createView().source(data);
+    const [chartInsWidth, setChartInsWidth] = useState(0);
+    const [axisHorPadding, setAxisHorPadding] = useState(0);
+    const [padding, setPadding] = useState([
+        20,
+        10,
+        10,
+        0
+    ]);
+    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) {
+            return !row.groupValue || '-' !== row.groupValue;
+        }
+    });
+    tdv.transform({
+        type: 'aggregate',
+        fields: [
+            yAxis
+        ],
+        groupBy: [
+            x
+        ],
+        operations: [
+            'sum'
+        ],
+        as: [
+            'total'
+        ]
+    });
+    tdv.transform({
+        type: 'sort',
+        callback (a, b) {
+            return b.total - a.total;
+        }
+    });
+    const sortData = tdv.rows.map((item)=>item[x]);
+    if ('' !== y) {
+        if (isDescend) dv.transform({
+            type: 'sort',
+            callback (a, b) {
+                if (-1 === sortData.indexOf(a[x])) return isHorizontal ? -1 : 1;
+                if (-1 === sortData.indexOf(b[x])) return isHorizontal ? 1 : -1;
+                return isHorizontal ? sortData.indexOf(b[x]) - sortData.indexOf(a[x]) : sortData.indexOf(a[x]) - sortData.indexOf(b[x]);
+            }
+        });
+    }
+    const transformData = dv.rows;
+    let maxY = Math.max(...dv.rows.filter((item)=>'-' !== item['total']).map((item)=>item['total']));
+    if (auxiliaryLineData?.length) {
+        const maxAuxiliaryLine = Math.max(...auxiliaryLineData.map((item)=>+item.value));
+        if (maxAuxiliaryLine > maxY) maxY = maxAuxiliaryLine;
+    }
+    const horPaddingRight = useMemo(()=>calTextWidth(formatIndicatorV2(maxY, indicatorMap[y]), 12) - 10, [
+        maxY
+    ]);
+    useEffect(()=>{
+        maxY > Math.max(...dv.rows.filter((item)=>'-' !== item['total']).map((item)=>item['total'])) ? setPadding((pre)=>[
+                isHorizontal ? 20 : 25,
+                isHorizontal ? isDataTag ? horPaddingRight : defaultChartConfig.layout.horBarPaddingRight || 50 : pre[1],
+                pre[2],
+                pre[3]
+            ]) : setPadding((pre)=>[
+                pre[0],
+                isHorizontal && isDataTag ? horPaddingRight : defaultChartConfig.layout.barPaddingRight || 10,
+                pre[2],
+                pre[3]
+            ]);
+    }, [
+        maxY,
+        data,
+        isHorizontal,
+        isDataTag,
+        horPaddingRight
+    ]);
+    const scale = {
+        [yAxis]: {
+            min: 0,
+            max: maxY,
+            type: 'linear-strict',
+            nice: true
+        }
+    };
+    const topLabel = {};
+    dv.rows.forEach((item)=>{
+        const infos = [
+            ...item?.nodeInfos?.info || [],
+            ...item?.nodeInfos?.infosCompare || []
+        ];
+        const len = infos.length || 0;
+        item.nodeLen = len;
+        if (0 === len) return;
+        item.node = 0;
+        item.color = 1 == len ? nodeMap.get(infos[0].type)?.color : 'l (0) 0:#32C5FF 0.44:#B620E0 0.99:#F7B500';
+    });
+    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
+    ]);
+    const nodeViewData = useMemo(()=>{
+        const uniqueMap = new Map();
+        transformData.forEach((item)=>{
+            const hasNode = (item?.nodeInfos?.info?.length || 0) > 0 || (item?.nodeInfos?.infosCompare?.length || 0) > 0;
+            if (hasNode && !uniqueMap.has(item.groupName)) uniqueMap.set(item.groupName, {
+                groupName: item.groupName,
+                node: 0,
+                nodeInfos: item.nodeInfos,
+                color: item.color,
+                [legend]: 'NodeEvent'
+            });
+        });
+        return Array.from(uniqueMap.values());
+    }, [
+        transformData
+    ]);
+    return /*#__PURE__*/ jsxs(Chart, {
+        height: height || 300,
+        data: transformData,
+        ...defaultChartConfig.baseChartConfig,
+        appendPadding: padding,
+        onGetG2Instance: (c)=>{
+            setChartInsWidth(c.width);
+        },
+        scale: scale,
+        onPointMouseover: (e)=>{
+            if (1 == nodeSetting.showType) {
+                setPointP({
+                    x: e.data.x,
+                    y: e.data.y
+                });
+                setPointData(e.data.data.nodeInfos);
+            }
+        },
+        onAfterrender: (chart)=>{
+            const estimatedBarWidth = calculateBarWidth(chart, transformData, x, 0.5);
+            if (void 0 !== estimatedBarWidth) setMainBarSize(estimatedBarWidth);
+        },
+        children: [
+            /*#__PURE__*/ jsx(XAxisBackground, {
+                x: x,
+                data: transformData,
+                isHighlight: isHighlight,
+                filterFn: filterFn,
+                dataLength: transformData.length,
+                mainBarSize: mainBarSize,
+                isHorizontal: isHorizontal
+            }),
+            /*#__PURE__*/ jsx(Coordinate, {
+                transpose: isHorizontal
+            }),
+            /*#__PURE__*/ jsx(Interval, {
+                adjust: [
+                    {
+                        type: 'stack',
+                        reverseOrder: true
+                    }
+                ],
+                color: [
+                    legend,
+                    newThemeColors
+                ],
+                position: `${x}*${yAxis}`,
+                style: {
+                    cursor: 'pointer'
+                },
+                label: [
+                    `${legend}*total*${x}`,
+                    (_v, total, x)=>{
+                        let renderFlag = false;
+                        if (!topLabel[x]) {
+                            renderFlag = true;
+                            topLabel[x] = true;
+                        }
+                        return {
+                            content: isDataTag && renderFlag ? formatIndicatorV2(total, indicatorMap[y]) : '',
+                            position: isHorizontal ? 'right' : 'top',
+                            offset: 5,
+                            style: {
+                                fontWeight: 'bold'
+                            }
+                        };
+                    }
+                ]
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                shared: true,
+                showCrosshairs: true,
+                children: (title, items)=>{
+                    items?.sort((a, b)=>{
+                        if ('-' === a.value || '-' === b.value) return '-' === a.value ? 1 : -1;
+                        return b.value - a.value;
+                    });
+                    return /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            padding: '10px 0'
+                        },
+                        children: [
+                            title,
+                            items && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        children: items.map((it, index)=>/*#__PURE__*/ jsxs("div", {
+                                                style: {
+                                                    display: 'flex',
+                                                    justifyContent: 'space-between',
+                                                    marginTop: '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,
+                                                            ":"
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("span", {
+                                                        style: {
+                                                            fontWeight: 'bold',
+                                                            paddingLeft: '10px'
+                                                        },
+                                                        children: [
+                                                            formatIndicatorV2(it.value, indicatorMap[y]),
+                                                            "（",
+                                                            (100 * Number(it.data.percent)).toFixed(2),
+                                                            "%）"
+                                                        ]
+                                                    })
+                                                ]
+                                            }, index))
+                                    }),
+                                    auxiliaryLineData && auxiliaryLineData.map((item, index)=>/*#__PURE__*/ jsxs("div", {
+                                            style: {
+                                                marginLeft: '16px',
+                                                marginTop: '10px',
+                                                display: 'flex',
+                                                justifyContent: 'space-between'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    children: [
+                                                        item.name,
+                                                        ":"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx("div", {
+                                                    children: formatIndicatorV2(item.value, indicatorMap[y])
+                                                })
+                                            ]
+                                        }, index))
+                                ]
+                            })
+                        ]
+                    });
+                }
+            }),
+            auxiliaryLineData?.length > 0 && /*#__PURE__*/ jsxs(View, {
+                data: transformData,
+                scale: scale,
+                padding: [
+                    0,
+                    0,
+                    0,
+                    isHorizontal ? 0 : -axisHorPadding
+                ],
+                children: [
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: yAxis,
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: x,
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Interval, {
+                        position: `${x}*${yAxis}`,
+                        visible: false
+                    }),
+                    auxiliaryLineData.map((item, index)=>/*#__PURE__*/ jsx(AuxiliaryLine, {
+                            name: item.name,
+                            value: item.value,
+                            isHorizontal: isHorizontal
+                        }, index))
+                ]
+            }, `${axisHorPadding}${isHorizontal}`),
+            /*#__PURE__*/ jsx(Legend, {
+                position: "bottom-left",
+                maxItemWidth: 1,
+                visible: isLegend,
+                itemHeight: 14,
+                name: legend
+            }),
+            /*#__PURE__*/ jsx(Legend, {
+                name: "color",
+                visible: false
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: yAxis,
+                label: {
+                    formatter (val) {
+                        setAxisHorPadding(getAxisHorPaddingByText(val, indicatorMap, y) - 25);
+                        return getAxisFormat(val, indicatorMap, y);
+                    }
+                }
+            }),
+            /*#__PURE__*/ jsx(Axis, {
+                name: x,
+                label: {
+                    autoEllipsis: true,
+                    formatter: (text)=>isHorizontal ? truncateText(text, chartInsWidth / 5) : text
+                }
+            }),
+            nodeViewData.length > 0 && 1 == nodeSetting.showType && /*#__PURE__*/ jsxs(View, {
+                data: nodeViewData,
+                scale: {
+                    node: {
+                        min: 0,
+                        max: 1
+                    },
+                    groupName: {
+                        type: 'cat'
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Axis, {
+                        name: "node",
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(Legend, {
+                        name: "color",
+                        visible: false
+                    }),
+                    /*#__PURE__*/ jsx(NodeGeom, {
+                        pointData: pointData,
+                        pointP: pointP,
+                        isLegend: isLegend
+                    })
+                ]
+            })
+        ]
+    }, nodeSetting?.showType + JSON.stringify(config));
+};
+const composite_GroupBar = /*#__PURE__*/ memo(GroupBar);
+export { composite_GroupBar as default, newThemeColors };

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

@@ -0,0 +1,2 @@
+declare const _default: import("react").MemoExoticComponent<({ height, data, x, y, legend, indicatorMap, config, auxiliaryLineData, nodeSetting, highlightDate, }: any) => JSX.Element>;
+export default _default;