win-chart 3.0.2 → 3.0.3

package/dist/cjs/stories/WinChart.stories.cjs

@@ -0,0 +1,524 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    DualAxisChart: ()=>DualAxisChart,
+    LineChart: ()=>LineChart,
+    FunnelChart: ()=>FunnelChart,
+    default: ()=>WinChart_stories,
+    RadarChart: ()=>RadarChart,
+    PieChart: ()=>PieChart,
+    ColumnChart: ()=>ColumnChart,
+    StackColumnChart: ()=>StackColumnChart,
+    BarChart: ()=>BarChart
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const WinChart_cjs_namespaceObject = require("../components/WinChart.cjs");
+const index_cjs_namespaceObject = require("../types/index.cjs");
+const meta = {
+    title: '图表组件/WinChart',
+    component: WinChart_cjs_namespaceObject.WinChart,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        chartType: {
+            control: 'select',
+            options: Object.values(index_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                style: {
+                    width: '800px',
+                    height: '500px'
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Story, {})
+            })
+    ]
+};
+const WinChart_stories = meta;
+const LineChart = {
+    args: {
+        chartType: index_cjs_namespaceObject.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: index_cjs_namespaceObject.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: index_cjs_namespaceObject.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: index_cjs_namespaceObject.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: index_cjs_namespaceObject.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: index_cjs_namespaceObject.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: index_cjs_namespaceObject.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: index_cjs_namespaceObject.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'
+                    }
+                }
+            ]
+        }
+    }
+};
+exports.BarChart = __webpack_exports__.BarChart;
+exports.ColumnChart = __webpack_exports__.ColumnChart;
+exports.DualAxisChart = __webpack_exports__.DualAxisChart;
+exports.FunnelChart = __webpack_exports__.FunnelChart;
+exports.LineChart = __webpack_exports__.LineChart;
+exports.PieChart = __webpack_exports__.PieChart;
+exports.RadarChart = __webpack_exports__.RadarChart;
+exports.StackColumnChart = __webpack_exports__.StackColumnChart;
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "BarChart",
+    "ColumnChart",
+    "DualAxisChart",
+    "FunnelChart",
+    "LineChart",
+    "PieChart",
+    "RadarChart",
+    "StackColumnChart",
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/utils/const.cjs

@@ -25,6 +25,8 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     COLOR_LIST: ()=>COLOR_LIST,
+    COMMON_TOOLTIP_OPT: ()=>COMMON_TOOLTIP_OPT,
+    ITEM_TOOLTIP_OPT: ()=>ITEM_TOOLTIP_OPT,
     commonOpt: ()=>commonOpt
 });
 const COLOR_LIST = [
@@ -57,10 +59,29 @@ const commonOpt = {
         icon: 'circle'
     }
 };
+const COMMON_TOOLTIP_OPT = {
+    trigger: 'axis',
+    axisPointer: {
+        type: 'cross',
+        crossStyle: {
+            color: '#999'
+        },
+        label: {
+            backgroundColor: '#999'
+        }
+    }
+};
+const ITEM_TOOLTIP_OPT = {
+    trigger: 'item'
+};
 exports.COLOR_LIST = __webpack_exports__.COLOR_LIST;
+exports.COMMON_TOOLTIP_OPT = __webpack_exports__.COMMON_TOOLTIP_OPT;
+exports.ITEM_TOOLTIP_OPT = __webpack_exports__.ITEM_TOOLTIP_OPT;
 exports.commonOpt = __webpack_exports__.commonOpt;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "COLOR_LIST",
+    "COMMON_TOOLTIP_OPT",
+    "ITEM_TOOLTIP_OPT",
     "commonOpt"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

package/dist/cjs/utils/getAreaSpec.cjs

@@ -41,15 +41,7 @@ const getMiniAreaOpt = (winChartProps)=>{
             bottom: 0,
             containLabel: true
         },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: external_const_cjs_namespaceObject.COMMON_TOOLTIP_OPT,
         legend: {
             show: false
         },
@@ -90,15 +82,7 @@ const getMiniAreaOpt = (winChartProps)=>{
 const getAreaOpt = (winChartProps)=>{
     const areaTypeList = (0, external_tool_cjs_namespaceObject.getDataTypes)(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: external_const_cjs_namespaceObject.COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'

package/dist/cjs/utils/getBarSpec.cjs

@@ -28,16 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     getStackBarOpt: ()=>getStackBarOpt
 });
 const external_tool_cjs_namespaceObject = require("./tool.cjs");
+const external_const_cjs_namespaceObject = require("./const.cjs");
 const getBarOpt = (winChartProps)=>({
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: external_const_cjs_namespaceObject.COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'
@@ -82,21 +75,14 @@ const getBarOpt = (winChartProps)=>({
     });
 const getStackBarOpt = (winChartProps)=>{
     const barTypeList = (0, external_tool_cjs_namespaceObject.getDataTypes)(winChartProps);
+    const axisLabels = (0, external_tool_cjs_namespaceObject.getMainAxisLabels)(winChartProps);
     return {
         grid: {
             ...winChartProps.showStackTotal && {
                 right: 32
             }
         },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: external_const_cjs_namespaceObject.COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll',
@@ -104,7 +90,7 @@ const getStackBarOpt = (winChartProps)=>{
         },
         xAxis: {},
         yAxis: {
-            data: (0, external_tool_cjs_namespaceObject.getMainAxisLabels)(winChartProps),
+            data: axisLabels,
             axisTick: {
                 alignWithLabel: true
             },
@@ -153,9 +139,9 @@ const getStackBarOpt = (winChartProps)=>{
                         position: 'right',
                         color: '#000'
                     },
-                    formatter: (params)=>String(Number((0, external_tool_cjs_namespaceObject.arraySum)(winChartProps.data?.filter((item)=>item.label === params.name).map((item)=>item.value)).toFixed(2)))
+                    formatter: '{c}'
                 },
-                data: (0, external_tool_cjs_namespaceObject.aggregateStackData)(winChartProps.data ?? [])
+                data: (0, external_tool_cjs_namespaceObject.aggregateStackData)(winChartProps.data ?? [], axisLabels)
             }
         ]
     };

package/dist/cjs/utils/getColumnSpec.cjs

@@ -28,18 +28,11 @@ __webpack_require__.d(__webpack_exports__, {
     getColumnStackOpt: ()=>getColumnStackOpt
 });
 const external_tool_cjs_namespaceObject = require("./tool.cjs");
+const external_const_cjs_namespaceObject = require("./const.cjs");
 const getColumnOpt = (winChartProps)=>{
     const barTypeList = (0, external_tool_cjs_namespaceObject.getDataTypes)(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: external_const_cjs_namespaceObject.COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'
@@ -82,15 +75,7 @@ const getColumnOpt = (winChartProps)=>{
 const getColumnStackOpt = (winChartProps)=>{
     const barTypeList = (0, external_tool_cjs_namespaceObject.getDataTypes)(winChartProps);
     return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#999'
-                }
-            }
-        },
+        tooltip: external_const_cjs_namespaceObject.COMMON_TOOLTIP_OPT,
         legend: {
             bottom: 0,
             type: 'scroll'