win-chart 3.0.1 → 3.0.3

package/dist/esm/stories/WinChart.stories.js

@@ -0,0 +1,466 @@
+import { jsx } from "react/jsx-runtime";
+import { WinChart } from "../components/WinChart.js";
+import { WinChartType } from "../types/index.js";
+const meta = {
+    title: '图表组件/WinChart',
+    component: WinChart,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        chartType: {
+            control: 'select',
+            options: Object.values(WinChartType),
+            description: '图表类型',
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: 'line'
+                }
+            }
+        },
+        theme: {
+            control: 'radio',
+            options: [
+                'light',
+                'dark'
+            ],
+            description: '主题',
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: 'light'
+                }
+            }
+        },
+        data: {
+            description: '图表数据'
+        },
+        extraOption: {
+            description: 'ECharts 扩展配置'
+        },
+        color: {
+            description: '颜色列表'
+        }
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ jsx("div", {
+                style: {
+                    width: '800px',
+                    height: '500px'
+                },
+                children: /*#__PURE__*/ jsx(Story, {})
+            })
+    ]
+};
+const WinChart_stories = meta;
+const LineChart = {
+    args: {
+        chartType: WinChartType.LINE,
+        data: [
+            {
+                label: '1961',
+                value: 0,
+                type: '统考认可州数(个)'
+            },
+            {
+                label: '2000',
+                value: 0,
+                type: '统考认可州数(个)'
+            },
+            {
+                label: '2019',
+                value: 5,
+                type: '统考认可州数(个)'
+            },
+            {
+                label: '2025',
+                value: 5,
+                type: '统考认可州数(个)'
+            },
+            {
+                label: '1961',
+                value: 22,
+                type: '国中华语开课率(%)'
+            },
+            {
+                label: '2000',
+                value: 40,
+                type: '国中华语开课率(%)'
+            },
+            {
+                label: '2019',
+                value: 65,
+                type: '国中华语开课率(%)'
+            },
+            {
+                label: '2025',
+                value: 88,
+                type: '国中华语开课率(%)'
+            }
+        ],
+        color: [
+            '#ff4d4f',
+            '#52c41a'
+        ],
+        extraOption: {
+            title: {
+                text: '中文政策核心指标增长趋势',
+                left: 'center'
+            }
+        }
+    }
+};
+const BarChart = {
+    args: {
+        chartType: WinChartType.BAR,
+        data: [
+            {
+                label: '政府经费依赖度',
+                value: 0,
+                type: '华文独立体系（独中）(%)'
+            },
+            {
+                label: '非华裔参与率',
+                value: 12,
+                type: '华文独立体系（独中）(%)'
+            },
+            {
+                label: '政府经费依赖度',
+                value: 85,
+                type: '国民教育体系（国中）(%)'
+            },
+            {
+                label: '非华裔参与率',
+                value: 38,
+                type: '国民教育体系（国中）(%)'
+            }
+        ],
+        extraOption: {
+            title: {
+                text: '双轨体系核心数据对比',
+                left: 'center'
+            }
+        }
+    }
+};
+const ColumnChart = {
+    args: {
+        chartType: WinChartType.COLUMN,
+        data: [
+            {
+                label: 'Jan',
+                value: 100,
+                type: 'Sales'
+            },
+            {
+                label: 'Feb',
+                value: 120,
+                type: 'Sales'
+            },
+            {
+                label: 'Mar',
+                value: 150,
+                type: 'Sales'
+            },
+            {
+                label: 'Jan',
+                value: 80,
+                type: 'Profit'
+            },
+            {
+                label: 'Feb',
+                value: 90,
+                type: 'Profit'
+            },
+            {
+                label: 'Mar',
+                value: 110,
+                type: 'Profit'
+            }
+        ],
+        extraOption: {
+            title: {
+                text: 'Monthly Sales & Profit',
+                left: 'center'
+            }
+        }
+    }
+};
+const StackColumnChart = {
+    args: {
+        chartType: WinChartType.STACK_COLUMN,
+        data: [
+            {
+                label: 'Mon',
+                value: 120,
+                type: 'Email'
+            },
+            {
+                label: 'Tue',
+                value: 132,
+                type: 'Email'
+            },
+            {
+                label: 'Wed',
+                value: 101,
+                type: 'Email'
+            },
+            {
+                label: 'Mon',
+                value: 220,
+                type: 'Ad'
+            },
+            {
+                label: 'Tue',
+                value: 182,
+                type: 'Ad'
+            },
+            {
+                label: 'Wed',
+                value: 191,
+                type: 'Ad'
+            }
+        ],
+        extraOption: {
+            title: {
+                text: 'Traffic Sources',
+                left: 'center'
+            }
+        }
+    }
+};
+const PieChart = {
+    args: {
+        chartType: WinChartType.PIE,
+        data: [
+            {
+                label: 'Search Engine',
+                value: 1048,
+                type: 'Search Engine'
+            },
+            {
+                label: 'Direct',
+                value: 735,
+                type: 'Direct'
+            },
+            {
+                label: 'Email',
+                value: 580,
+                type: 'Email'
+            },
+            {
+                label: 'Union Ads',
+                value: 484,
+                type: 'Union Ads'
+            },
+            {
+                label: 'Video Ads',
+                value: 300,
+                type: 'Video Ads'
+            }
+        ],
+        extraOption: {
+            title: {
+                text: 'Referer of a Website',
+                left: 'center'
+            }
+        }
+    }
+};
+const RadarChart = {
+    args: {
+        chartType: WinChartType.RADAR,
+        data: [
+            {
+                label: 'Sales',
+                value: 4200,
+                type: 'Allocated Budget'
+            },
+            {
+                label: 'Administration',
+                value: 3000,
+                type: 'Allocated Budget'
+            },
+            {
+                label: 'IT',
+                value: 20000,
+                type: 'Allocated Budget'
+            },
+            {
+                label: 'Customer Support',
+                value: 35000,
+                type: 'Allocated Budget'
+            },
+            {
+                label: 'Development',
+                value: 50000,
+                type: 'Allocated Budget'
+            },
+            {
+                label: 'Marketing',
+                value: 18000,
+                type: 'Allocated Budget'
+            },
+            {
+                label: 'Sales',
+                value: 5000,
+                type: 'Actual Spending'
+            },
+            {
+                label: 'Administration',
+                value: 14000,
+                type: 'Actual Spending'
+            },
+            {
+                label: 'IT',
+                value: 28000,
+                type: 'Actual Spending'
+            },
+            {
+                label: 'Customer Support',
+                value: 26000,
+                type: 'Actual Spending'
+            },
+            {
+                label: 'Development',
+                value: 42000,
+                type: 'Actual Spending'
+            },
+            {
+                label: 'Marketing',
+                value: 21000,
+                type: 'Actual Spending'
+            }
+        ],
+        extraOption: {
+            title: {
+                text: 'Budget vs Spending',
+                left: 'center'
+            }
+        }
+    }
+};
+const FunnelChart = {
+    args: {
+        chartType: WinChartType.FUNNEL,
+        data: [
+            {
+                label: 'Visit',
+                value: 60,
+                type: 'Visit'
+            },
+            {
+                label: 'Inquiry',
+                value: 40,
+                type: 'Inquiry'
+            },
+            {
+                label: 'Order',
+                value: 20,
+                type: 'Order'
+            },
+            {
+                label: 'Click',
+                value: 80,
+                type: 'Click'
+            },
+            {
+                label: 'Show',
+                value: 100,
+                type: 'Show'
+            }
+        ],
+        extraOption: {
+            title: {
+                text: 'Funnel',
+                left: 'center'
+            }
+        }
+    }
+};
+const DualAxisChart = {
+    args: {
+        chartType: WinChartType.DUAL_LINE_BAR,
+        data: [
+            {
+                label: '2015',
+                value: 2.0,
+                type: 'Evaporation'
+            },
+            {
+                label: '2016',
+                value: 4.9,
+                type: 'Evaporation'
+            },
+            {
+                label: '2017',
+                value: 7.0,
+                type: 'Evaporation'
+            },
+            {
+                label: '2018',
+                value: 23.2,
+                type: 'Evaporation'
+            }
+        ],
+        extraData: [
+            {
+                label: '2015',
+                value: 2.6,
+                type: 'Temperature'
+            },
+            {
+                label: '2016',
+                value: 5.9,
+                type: 'Temperature'
+            },
+            {
+                label: '2017',
+                value: 9.0,
+                type: 'Temperature'
+            },
+            {
+                label: '2018',
+                value: 26.4,
+                type: 'Temperature'
+            }
+        ],
+        extraOption: {
+            title: {
+                text: 'Rainfall vs Evaporation',
+                left: 'center'
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    name: 'Evaporation',
+                    min: 0,
+                    max: 250,
+                    interval: 50,
+                    axisLabel: {
+                        formatter: '{value} ml'
+                    }
+                },
+                {
+                    type: 'value',
+                    name: 'Temperature',
+                    min: 0,
+                    max: 25,
+                    interval: 5,
+                    axisLabel: {
+                        formatter: '{value} °C'
+                    }
+                }
+            ]
+        }
+    }
+};
+export { BarChart, ColumnChart, DualAxisChart, FunnelChart, LineChart, PieChart, RadarChart, StackColumnChart, WinChart_stories as default };

package/dist/esm/utils/const.js

@@ -28,4 +28,19 @@ const commonOpt = {
         icon: 'circle'
     }
 };
-export { COLOR_LIST, commonOpt };
+const COMMON_TOOLTIP_OPT = {
+    trigger: 'axis',
+    axisPointer: {
+        type: 'cross',
+        crossStyle: {
+            color: '#999'
+        },
+        label: {
+            backgroundColor: '#999'
+        }
+    }
+};
+const ITEM_TOOLTIP_OPT = {
+    trigger: 'item'
+};
+export { COLOR_LIST, COMMON_TOOLTIP_OPT, ITEM_TOOLTIP_OPT, commonOpt };

package/dist/esm/utils/getAreaSpec.js

@@ -1,4 +1,4 @@
-import { COLOR_LIST } from "./const.js";
+import { COLOR_LIST, COMMON_TOOLTIP_OPT } from "./const.js";
 import { getDataTypes, getGradientColor, getMainAxisLabels, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt } from "./tool.js";
 const getMiniAreaOpt = (winChartProps)=>{
     const areaTypeList = getDataTypes(winChartProps);
@@ -12,15 +12,7 @@ const getMiniAreaOpt = (winChartProps)=>{
             bottom: 0,
             containLabel: true
         },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             show: false
         },
@@ -61,15 +53,7 @@ const getMiniAreaOpt = (winChartProps)=>{
 const getAreaOpt = (winChartProps)=>{
     const areaTypeList = getDataTypes(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'

package/dist/esm/utils/getBarSpec.js

@@ -1,14 +1,7 @@
-import { aggregateStackData, arraySum, getDataTypes, getMainAxisLabels, getSeriesDataByType, getSeriesLabelConfig, handleMainAxisLabel } from "./tool.js";
+import { aggregateStackData, getDataTypes, getMainAxisLabels, getSeriesDataByType, getSeriesLabelConfig, handleMainAxisLabel } from "./tool.js";
+import { COMMON_TOOLTIP_OPT } from "./const.js";
 const getBarOpt = (winChartProps)=>({
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'
@@ -53,21 +46,14 @@ const getBarOpt = (winChartProps)=>({
     });
 const getStackBarOpt = (winChartProps)=>{
     const barTypeList = getDataTypes(winChartProps);
+    const axisLabels = getMainAxisLabels(winChartProps);
     return {
         grid: {
             ...winChartProps.showStackTotal && {
                 right: 32
             }
         },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll',
@@ -75,7 +61,7 @@ const getStackBarOpt = (winChartProps)=>{
         },
         xAxis: {},
         yAxis: {
-            data: getMainAxisLabels(winChartProps),
+            data: axisLabels,
             axisTick: {
                 alignWithLabel: true
             },
@@ -124,9 +110,9 @@ const getStackBarOpt = (winChartProps)=>{
                         position: 'right',
                         color: '#000'
                     },
-                    formatter: (params)=>String(Number(arraySum(winChartProps.data?.filter((item)=>item.label === params.name).map((item)=>item.value)).toFixed(2)))
+                    formatter: '{c}'
                 },
-                data: aggregateStackData(winChartProps.data ?? [])
+                data: aggregateStackData(winChartProps.data ?? [], axisLabels)
             }
         ]
     };

package/dist/esm/utils/getColumnSpec.js

@@ -1,16 +1,9 @@
 import { getDataTypes, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt } from "./tool.js";
+import { COMMON_TOOLTIP_OPT } from "./const.js";
 const getColumnOpt = (winChartProps)=>{
     const barTypeList = getDataTypes(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'
@@ -53,15 +46,7 @@ const getColumnOpt = (winChartProps)=>{
 const getColumnStackOpt = (winChartProps)=>{
     const barTypeList = getDataTypes(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'

package/dist/esm/utils/getDualSpec.js

@@ -1,20 +1,10 @@
 import { getDataTypes, getExtraDataTypes, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt } from "./tool.js";
+import { COMMON_TOOLTIP_OPT } from "./const.js";
 const getDualOpt = (winChartProps)=>{
     const barTypeList = getDataTypes(winChartProps);
     const lineTypeList = getExtraDataTypes(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                crossStyle: {
-                    color: '#999'
-                },
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'
@@ -76,18 +66,7 @@ const getStackDualOpt = (winChartProps)=>{
     const barTypeList = getDataTypes(winChartProps);
     const lineTypeList = getExtraDataTypes(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                crossStyle: {
-                    color: '#999'
-                },
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'

package/dist/esm/utils/getFunnelSpec.js

@@ -1,4 +1,5 @@
 import { dataDescOrder, handleToPercent } from "./tool.js";
+import { ITEM_TOOLTIP_OPT } from "./const.js";
 const getFunnelOpt = (winChartProps)=>{
     const data = dataDescOrder(winChartProps.data)?.map((item)=>({
             value: item.value ?? 0,
@@ -14,9 +15,7 @@ const getFunnelOpt = (winChartProps)=>{
         data
     };
     return {
-        tooltip: {
-            trigger: 'item'
-        },
+        tooltip: ITEM_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'

package/dist/esm/utils/getLineSpec.js

@@ -1,16 +1,9 @@
 import { getDataTypes, getSeriesDataByType, getSeriesLabelConfig, getXAxisOpt } from "./tool.js";
+import { COMMON_TOOLTIP_OPT } from "./const.js";
 const getLineOpt = (winChartProps)=>{
     const typeList = getDataTypes(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'