win-chart 2.13.0 → 3.0.0

package/dist/esm/components/EarthChart.js

@@ -0,0 +1,134 @@
+import { jsx } from "react/jsx-runtime";
+import { init } from "echarts";
+import "echarts-gl";
+import { useEffect, useRef, useState } from "react";
+import { ChartWrapper } from "./ChartWrapper.js";
+import { debounce } from "../utils/tool.js";
+const mockPointsData = [];
+for(let i = 0; i < 50; i++)mockPointsData.push({
+    name: `测试${i + 1}`,
+    value: [
+        150 * Math.random(),
+        50 * Math.random()
+    ],
+    symbolSize: 8
+});
+const mockLinesData = [];
+for(let i = 0; i < 10; i++)mockLinesData.push([
+    [
+        150 * Math.random(),
+        50 * Math.random()
+    ],
+    [
+        150 * Math.random(),
+        50 * Math.random()
+    ]
+]);
+const EarthChart = ({ className = '', style = {}, extraOption = {}, lineStyles = {}, pointsStyles = {}, pointsData = [], linesData = [], globeOption = {} })=>{
+    const boxRef = useRef(null);
+    const [eChart, setEChart] = useState();
+    useEffect(()=>{
+        const eChart = init(boxRef.current);
+        setEChart(eChart);
+        const resize = debounce(eChart.resize, 500);
+        const handlerResize = ()=>{
+            resize();
+        };
+        globalThis.addEventListener('resize', handlerResize);
+        return ()=>{
+            globalThis.removeEventListener('resize', handlerResize);
+        };
+    }, []);
+    useEffect(()=>{
+        if (eChart) {
+            const series = [];
+            series.push({
+                type: 'lines3D',
+                name: "lines3D",
+                effect: {
+                    show: true,
+                    trailWidth: 2,
+                    trailLength: 0.15,
+                    trailOpacity: 1,
+                    trailColor: 'rgb(30, 30, 60)'
+                },
+                lineStyle: {
+                    width: 5,
+                    color: 'rgb(50, 50, 150)',
+                    opacity: 0.3
+                },
+                blendMode: 'lighter',
+                data: linesData,
+                ...lineStyles
+            });
+            series.push({
+                type: 'scatter3D',
+                coordinateSystem: 'globe',
+                zlevel: 3,
+                rippleEffect: {
+                    brushType: 'stroke'
+                },
+                label: {
+                    fontSize: 8,
+                    show: true,
+                    position: 'right',
+                    formatter: '{b}'
+                },
+                itemStyle: {
+                    normal: {
+                        color: '#f5f802'
+                    }
+                },
+                data: pointsData,
+                ...pointsStyles
+            });
+            eChart.setOption({
+                backgroundColor: '#000',
+                baseColor: '#000',
+                shading: 'realistic',
+                globe: {
+                    environment: 'https://img.alicdn.com/imgextra/i2/O1CN017x8UE61p6wqej1Y0c_!!6000000005312-0-tps-2048-1024.jpg',
+                    heightTexture: 'https://img.alicdn.com/imgextra/i2/O1CN01BB16kM1ILFttfdYZg_!!6000000000876-0-tps-4096-2048.jpg',
+                    baseTexture: 'https://img.alicdn.com/imgextra/i4/O1CN01fs70Dq25ElSd8mU6C_!!6000000007495-0-tps-5400-2700.jpg',
+                    shading: 'lambert',
+                    light: {
+                        ambient: {
+                            intensity: 1
+                        },
+                        main: {
+                            intensity: 0.1
+                        }
+                    },
+                    viewControl: {
+                        autoRotate: true,
+                        distance: 230
+                    },
+                    left: '20%',
+                    ...globeOption
+                },
+                series: series,
+                ...extraOption
+            });
+            const timer = setTimeout(()=>{
+                eChart.resize();
+            }, 500);
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+    }, [
+        eChart,
+        extraOption,
+        globeOption,
+        lineStyles,
+        linesData,
+        pointsData,
+        pointsStyles
+    ]);
+    return /*#__PURE__*/ jsx(ChartWrapper, {
+        ref: boxRef,
+        className: className,
+        style: style
+    });
+};
+export { EarthChart };

package/dist/esm/components/GanttChart.js

@@ -0,0 +1,268 @@
+import { jsx } from "react/jsx-runtime";
+import { format, graphic, init } from "echarts";
+import { useEffect, useRef, useState } from "react";
+import { ChartWrapper } from "./ChartWrapper.js";
+import { debounce } from "../utils/tool.js";
+import { airportData } from "../utils/data.js";
+const HEIGHT_RATIO = 0.6;
+const DIM_CATEGORY_INDEX = 0;
+const DIM_TIME_ARRIVAL = 1;
+const DIM_TIME_DEPARTURE = 2;
+const _cartesianXBounds = [];
+const _cartesianYBounds = [];
+const _rawData = airportData;
+const GanttChart = ({ className = '', style = {}, extraOption = {} })=>{
+    const boxRef = useRef(null);
+    const [eChart, setEChart] = useState();
+    useEffect(()=>{
+        const eChart = init(boxRef.current);
+        setEChart(eChart);
+        const resize = debounce(eChart.resize, 500);
+        const handlerResize = ()=>{
+            resize();
+        };
+        globalThis.addEventListener('resize', handlerResize);
+        return ()=>{
+            globalThis.removeEventListener('resize', handlerResize);
+        };
+    }, []);
+    useEffect(()=>{
+        if (eChart) {
+            eChart.setOption(makeOption());
+            const timer = setTimeout(()=>{
+                eChart.resize();
+            }, 500);
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+    }, [
+        eChart,
+        extraOption
+    ]);
+    return /*#__PURE__*/ jsx(ChartWrapper, {
+        ref: boxRef,
+        className: className,
+        style: style
+    });
+};
+function makeOption() {
+    return {
+        tooltip: {},
+        animation: false,
+        toolbox: {
+            left: 20,
+            top: 0,
+            itemSize: 20
+        },
+        title: {
+            text: 'Gantt of Airport Flight',
+            left: 'center'
+        },
+        grid: {
+            show: true,
+            top: 70,
+            bottom: 20,
+            left: 100,
+            right: 20,
+            backgroundColor: '#fff',
+            borderWidth: 0
+        },
+        xAxis: {
+            type: 'time',
+            position: 'top',
+            splitLine: {
+                lineStyle: {
+                    color: [
+                        '#E9EDFF'
+                    ]
+                }
+            },
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                lineStyle: {
+                    color: '#929ABA'
+                }
+            },
+            axisLabel: {
+                color: '#929ABA',
+                inside: false,
+                align: 'center'
+            }
+        },
+        yAxis: {
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            },
+            axisLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+            min: 0,
+            max: _rawData.parkingApron.data.length
+        },
+        series: [
+            {
+                id: 'flightData',
+                type: 'custom',
+                renderItem: renderGanttItem,
+                dimensions: _rawData.flight.dimensions,
+                encode: {
+                    x: [
+                        DIM_TIME_ARRIVAL,
+                        DIM_TIME_DEPARTURE
+                    ],
+                    y: DIM_CATEGORY_INDEX,
+                    tooltip: [
+                        DIM_CATEGORY_INDEX,
+                        DIM_TIME_ARRIVAL,
+                        DIM_TIME_DEPARTURE
+                    ]
+                },
+                data: _rawData.flight.data
+            },
+            {
+                type: 'custom',
+                renderItem: renderAxisLabelItem,
+                dimensions: _rawData.parkingApron.dimensions,
+                encode: {
+                    x: -1,
+                    y: 0
+                },
+                data: _rawData.parkingApron.data.map(function(item, index) {
+                    return [
+                        index
+                    ].concat(item);
+                })
+            }
+        ]
+    };
+}
+function renderGanttItem(params, api) {
+    const categoryIndex = api.value(DIM_CATEGORY_INDEX);
+    const timeArrival = api.coord([
+        api.value(DIM_TIME_ARRIVAL),
+        categoryIndex
+    ]);
+    const timeDeparture = api.coord([
+        api.value(DIM_TIME_DEPARTURE),
+        categoryIndex
+    ]);
+    const coordSys = params.coordSys;
+    _cartesianXBounds[0] = coordSys.x;
+    _cartesianXBounds[1] = coordSys.x + coordSys.width;
+    _cartesianYBounds[0] = coordSys.y;
+    _cartesianYBounds[1] = coordSys.y + coordSys.height;
+    const barLength = timeDeparture[0] - timeArrival[0];
+    const barHeight = api.size([
+        0,
+        1
+    ])[1] * HEIGHT_RATIO;
+    const x = timeArrival[0];
+    const y = timeArrival[1] - barHeight;
+    const flightNumber = api.value(3) + '';
+    const flightNumberWidth = format.getTextRect(flightNumber).width;
+    const text = barLength > flightNumberWidth + 40 && x + barLength >= 180 ? flightNumber : '';
+    const rectNormal = clipRectByRect(params, {
+        x: x,
+        y: y,
+        width: barLength,
+        height: barHeight
+    });
+    const rectVIP = clipRectByRect(params, {
+        x: x,
+        y: y,
+        width: barLength / 2,
+        height: barHeight
+    });
+    const rectText = clipRectByRect(params, {
+        x: x,
+        y: y,
+        width: barLength,
+        height: barHeight
+    });
+    return {
+        type: 'group',
+        children: [
+            {
+                type: 'rect',
+                ignore: !rectNormal,
+                shape: rectNormal,
+                style: api.style()
+            },
+            {
+                type: 'rect',
+                ignore: !rectVIP && !api.value(4),
+                shape: rectVIP,
+                style: api.style({
+                    fill: '#ddb30b'
+                })
+            },
+            {
+                type: 'rect',
+                ignore: !rectText,
+                shape: rectText,
+                style: api.style({
+                    fill: 'transparent',
+                    stroke: 'transparent',
+                    text: text,
+                    textFill: '#fff'
+                })
+            }
+        ]
+    };
+}
+function renderAxisLabelItem(params, api) {
+    const y = api.coord([
+        0,
+        api.value(0)
+    ])[1];
+    if (y < params.coordSys.y + 5) return;
+    return {
+        type: 'group',
+        position: [
+            10,
+            y
+        ],
+        children: [
+            {
+                type: 'text',
+                style: {
+                    x: 24,
+                    y: -3,
+                    text: api.value(1),
+                    textVerticalAlign: 'bottom',
+                    textAlign: 'center',
+                    textFill: '#fff'
+                }
+            },
+            {
+                type: 'text',
+                style: {
+                    x: 75,
+                    y: -2,
+                    textVerticalAlign: 'bottom',
+                    textAlign: 'center',
+                    text: api.value(2),
+                    textFill: '#000'
+                }
+            }
+        ]
+    };
+}
+function clipRectByRect(params, rect) {
+    return graphic.clipRectByRect(rect, {
+        x: params.coordSys.x,
+        y: params.coordSys.y,
+        width: params.coordSys.width,
+        height: params.coordSys.height
+    });
+}
+export { GanttChart };

package/dist/esm/components/WinChart.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { ChartWrapper } from "./ChartWrapper.js";
+import { useEffect, useRef, useState } from "react";
+import { getEChartOptions } from "../utils/getChartOptions.js";
+import { init, registerTheme } from "echarts";
+import { commonOpt } from "../utils/const.js";
+import { debounce, mergeSeriesOption } from "../utils/tool.js";
+import win_light from "../theme/win-light.js";
+import win_dark from "../theme/win-dark.js";
+import deepmerge from "deepmerge";
+import { WinChartType } from "../types/index.js";
+registerTheme('light', deepmerge(win_light, commonOpt));
+registerTheme('dark', deepmerge(win_dark, commonOpt));
+const mergeOption = {
+    arrayMerge: (_destinationArray, sourceArray)=>sourceArray
+};
+const WinChart = (props)=>{
+    const boxRef = useRef(null);
+    const [instance, setInstance] = useState();
+    const [refreshTag, setRefreshTag] = useState(1);
+    useEffect(()=>{
+        const chart = init(boxRef.current, props.theme ?? 'light');
+        setInstance(chart);
+        const resize = debounce(chart.resize, 500);
+        const handlerResize = ()=>resize();
+        globalThis.addEventListener('resize', handlerResize);
+        return ()=>{
+            globalThis.removeEventListener('resize', handlerResize);
+        };
+    }, [
+        props.theme
+    ]);
+    useEffect(()=>{
+        if (instance && refreshTag) {
+            const actualChartHeight = instance.getHeight() - 48;
+            const newProps = {
+                ...props,
+                ...props.chartType === WinChartType.CYCLE && !props.cycleCenterConfig && {
+                    cycleCenterConfig: {
+                        title: {
+                            top: actualChartHeight / 2 + 24
+                        },
+                        content: {
+                            top: actualChartHeight / 2 - 8
+                        }
+                    }
+                }
+            };
+            const { extraOption = {}, extraSeriesOption } = newProps;
+            instance.clear();
+            const option = deepmerge(mergeSeriesOption(getEChartOptions(newProps), extraSeriesOption), extraOption, mergeOption);
+            instance.setOption(option);
+            newProps.onLoad?.(instance);
+            const timer = setTimeout(()=>{
+                instance.resize();
+            }, 500);
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+    }, [
+        instance,
+        props,
+        refreshTag
+    ]);
+    useEffect(()=>{
+        if (instance) instance.on('refresh', ()=>{
+            setRefreshTag((refreshTag)=>refreshTag + 1);
+        });
+    }, [
+        instance
+    ]);
+    return /*#__PURE__*/ jsx(ChartWrapper, {
+        ref: boxRef,
+        className: props.className,
+        style: props.style
+    });
+};
+export { WinChart };

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+import { WinChart } from "./components/WinChart.js";
+import { IChartInfo, IWinChartProps, WinChartType } from "./types/index.js";
+import { EarthChart } from "./components/EarthChart.js";
+import * as __rspack_external_echarts from "echarts";
+const src = WinChart;
+export { EarthChart, IChartInfo, IWinChartProps, WinChart, WinChartType, src as default, __rspack_external_echarts as echarts };

package/dist/esm/types/index.js

@@ -0,0 +1,17 @@
+var types_WinChartType = /*#__PURE__*/ function(WinChartType) {
+    WinChartType["MINI_AREA"] = "mini-area";
+    WinChartType["AREA"] = "area";
+    WinChartType["DUAL_LINE_BAR"] = "dual-line-bar";
+    WinChartType["STACK_DUAL_LINE_BAR"] = "stack-dual-line-bar";
+    WinChartType["COLUMN"] = "column";
+    WinChartType["STACK_COLUMN"] = "stack-column";
+    WinChartType["LINE"] = "line";
+    WinChartType["BAR"] = "bar";
+    WinChartType["STACK_BAR"] = "stack-bar";
+    WinChartType["FUNNEL"] = "funnel";
+    WinChartType["PIE"] = "pie";
+    WinChartType["CYCLE"] = "cycle";
+    WinChartType["RADAR"] = "radar";
+    return WinChartType;
+}({});
+export { types_WinChartType as WinChartType };

package/dist/esm/utils/const.js

@@ -0,0 +1,31 @@
+const COLOR_LIST = [
+    '#3D84FF',
+    '#00DCF0',
+    '#FCBC26',
+    '#00DB75',
+    '#BDB8FF',
+    '#40B4FF',
+    '#FFA101',
+    '#90ABE0',
+    '#6EE67A',
+    '#6B84FF',
+    '#FA6B69'
+];
+const commonOpt = {
+    grid: {
+        top: 24,
+        left: 0,
+        right: 12,
+        bottom: 32,
+        containLabel: true
+    },
+    color: COLOR_LIST,
+    legend: {
+        itemWidth: 10,
+        itemHeight: 10,
+        bottom: 0,
+        type: 'scroll',
+        icon: 'circle'
+    }
+};
+export { COLOR_LIST, commonOpt };