win-chart 2.13.0 → 3.0.0

package/dist/cjs/utils/getFunnelSpec.cjs

@@ -0,0 +1,89 @@
+"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__, {
+    getFunnelOpt: ()=>getFunnelOpt
+});
+const external_tool_cjs_namespaceObject = require("./tool.cjs");
+const getFunnelOpt = (winChartProps)=>{
+    const data = (0, external_tool_cjs_namespaceObject.dataDescOrder)(winChartProps.data)?.map((item)=>({
+            value: item.value ?? 0,
+            name: winChartProps.reserveValueWithLabelType ? item.label : item.type
+        })) ?? [];
+    const seriesConfig = {
+        type: 'funnel',
+        minSize: '20%',
+        left: 10,
+        top: 24,
+        width: '76%',
+        sort: 'descending',
+        data
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        series: [
+            {
+                ...seriesConfig,
+                label: {
+                    show: true,
+                    position: 'outer',
+                    formatter: '{c}'
+                }
+            },
+            {
+                ...seriesConfig,
+                emphasis: {
+                    label: {
+                        fontSize: 20
+                    }
+                },
+                label: {
+                    show: true,
+                    position: 'inner',
+                    color: '#fff',
+                    formatter: (params)=>{
+                        const currentIndex = params.dataIndex;
+                        if (0 === currentIndex) return '100%';
+                        const prevValue = data[currentIndex - 1].value;
+                        return (0, external_tool_cjs_namespaceObject.handleToPercent)(params.value / prevValue);
+                    }
+                }
+            }
+        ]
+    };
+};
+exports.getFunnelOpt = __webpack_exports__.getFunnelOpt;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "getFunnelOpt"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/utils/getLineSpec.cjs

@@ -0,0 +1,72 @@
+"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__, {
+    getLineOpt: ()=>getLineOpt
+});
+const external_tool_cjs_namespaceObject = require("./tool.cjs");
+const getLineOpt = (winChartProps)=>{
+    const typeList = (0, external_tool_cjs_namespaceObject.getDataTypes)(winChartProps);
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#999'
+                }
+            }
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        xAxis: (0, external_tool_cjs_namespaceObject.getXAxisOpt)(winChartProps),
+        yAxis: {
+            min: winChartProps.yStart?.[0]
+        },
+        series: typeList.map((type)=>({
+                name: type,
+                type: 'line',
+                smooth: false,
+                lineStyle: {
+                    width: 2
+                },
+                showSymbol: true,
+                emphasis: {
+                    focus: 'series'
+                },
+                label: (0, external_tool_cjs_namespaceObject.getSeriesLabelConfig)(winChartProps),
+                data: (0, external_tool_cjs_namespaceObject.getSeriesDataByType)(winChartProps, type)
+            }))
+    };
+};
+exports.getLineOpt = __webpack_exports__.getLineOpt;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "getLineOpt"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/utils/getPieSpec.cjs

@@ -0,0 +1,140 @@
+"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__, {
+    getPieCycleOpt: ()=>getPieCycleOpt,
+    getPieOpt: ()=>getPieOpt
+});
+const external_tool_cjs_namespaceObject = require("./tool.cjs");
+const getPieOpt = (winChartProps)=>{
+    const total = (0, external_tool_cjs_namespaceObject.arraySum)(winChartProps.data?.map((item)=>item.value));
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        series: [
+            {
+                top: -30,
+                type: 'pie',
+                radius: '50%',
+                data: (0, external_tool_cjs_namespaceObject.dataDescOrder)(winChartProps.data)?.map((item)=>({
+                        value: item.value,
+                        name: winChartProps.reserveValueWithLabelType ? item.label : item.type
+                    })),
+                label: {
+                    show: true,
+                    fontSize: 12,
+                    color: (0, external_tool_cjs_namespaceObject.getLabelColor)(winChartProps),
+                    position: 'outside',
+                    formatter: (data)=>(0, external_tool_cjs_namespaceObject.handleToPercent)(data.value / (total || 1))
+                },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    };
+};
+const getPieCycleOpt = (winChartProps)=>{
+    const total = (0, external_tool_cjs_namespaceObject.arraySum)(winChartProps.data?.map((item)=>item.value));
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        series: [
+            {
+                top: -30,
+                type: 'pie',
+                radius: [
+                    '60%',
+                    '48%'
+                ],
+                data: (0, external_tool_cjs_namespaceObject.dataDescOrder)(winChartProps.data, winChartProps.sort)?.map((item)=>({
+                        value: item.value,
+                        name: winChartProps.reserveValueWithLabelType ? item.label : item.type
+                    })),
+                label: {
+                    show: true,
+                    fontSize: 12,
+                    color: (0, external_tool_cjs_namespaceObject.getLabelColor)(winChartProps),
+                    position: 'outside',
+                    formatter: (data)=>(0, external_tool_cjs_namespaceObject.handleToPercent)(data.value / (total || 1))
+                },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ],
+        graphic: [
+            {
+                type: 'text',
+                left: 'center',
+                top: winChartProps.cycleCenterConfig?.content?.top ?? 76,
+                style: {
+                    text: winChartProps.cycleCenterConfig?.content?.value ?? Number(total.toFixed(2)).toString(),
+                    fill: 'dark' === winChartProps.theme ? '#fff' : '#12161F',
+                    fontFamily: 'roboto',
+                    fontSize: winChartProps.cycleCenterConfig?.content?.fontSize ?? 28,
+                    fontWeight: 'bold'
+                }
+            },
+            {
+                type: 'text',
+                left: 'center',
+                top: winChartProps.cycleCenterConfig?.title?.top ?? 112,
+                style: {
+                    text: winChartProps.cycleCenterConfig?.title?.value ?? '总计',
+                    fill: 'dark' === winChartProps.theme ? '#fff' : '#394252 ',
+                    fontSize: winChartProps.cycleCenterConfig?.title?.fontSize ?? 14
+                }
+            }
+        ]
+    };
+};
+exports.getPieCycleOpt = __webpack_exports__.getPieCycleOpt;
+exports.getPieOpt = __webpack_exports__.getPieOpt;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "getPieCycleOpt",
+    "getPieOpt"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/utils/getRadarSpec.cjs

@@ -0,0 +1,100 @@
+"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__, {
+    getRadarOpt: ()=>getRadarOpt
+});
+const external_polished_namespaceObject = require("polished");
+const external_const_cjs_namespaceObject = require("./const.cjs");
+const external_tool_cjs_namespaceObject = require("./tool.cjs");
+const getRadarOpt = (winChartProps)=>{
+    const typeList = (0, external_tool_cjs_namespaceObject.arrDeduplication)(winChartProps.data?.map((item)=>winChartProps.reserveValueWithLabelType ? item.label : item.type));
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            bottom: 0,
+            type: 'scroll'
+        },
+        radar: {
+            shape: 'circle',
+            radius: '60%',
+            indicator: (0, external_tool_cjs_namespaceObject.arrDeduplication)(winChartProps.data?.map((item)=>winChartProps.reserveValueWithLabelType ? item.type : item.label)).map((name)=>({
+                    name
+                })),
+            axisName: {
+                color: '#5d677a'
+            },
+            splitArea: {
+                areaStyle: {
+                    color: [
+                        'transparent'
+                    ]
+                }
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(226, 229, 235, .3)'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#e2e5eb',
+                    type: 'dashed',
+                    dashOffset: 1.5
+                }
+            }
+        },
+        series: [
+            {
+                type: 'radar',
+                data: typeList.map((name, index)=>({
+                        name,
+                        value: winChartProps.data?.filter((item)=>winChartProps.reserveValueWithLabelType ? item.label : item.type === name).map((item)=>item.value),
+                        areaStyle: {
+                            color: (0, external_polished_namespaceObject.rgba)(external_const_cjs_namespaceObject.COLOR_LIST[index], 0.2)
+                        },
+                        label: {
+                            show: winChartProps.reserveValueWithLabelType,
+                            formatter: (params)=>params.value?.toString()
+                        }
+                    })),
+                emphasis: {
+                    lineStyle: {
+                        width: 4
+                    }
+                }
+            }
+        ]
+    };
+};
+exports.getRadarOpt = __webpack_exports__.getRadarOpt;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "getRadarOpt"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/utils/tool.cjs

@@ -0,0 +1,240 @@
+"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__, {
+    arraySum: ()=>arraySum,
+    getXAxisOpt: ()=>getXAxisOpt,
+    sortArrayByLabel: ()=>sortArrayByLabel,
+    getMainAxisLabels: ()=>getMainAxisLabels,
+    debounce: ()=>debounce,
+    getGradientColor: ()=>getGradientColor,
+    getLabelColor: ()=>getLabelColor,
+    handleMainAxisLabel: ()=>handleMainAxisLabel,
+    getExtraDataTypes: ()=>getExtraDataTypes,
+    mergeSeriesOption: ()=>mergeSeriesOption,
+    isNonEmptyArray: ()=>isNonEmptyArray,
+    sortArray: ()=>sortArray,
+    handleToPercent: ()=>handleToPercent,
+    dataDescOrder: ()=>dataDescOrder,
+    checkEntityArr: ()=>checkEntityArr,
+    getDataTypes: ()=>getDataTypes,
+    arrDeduplication: ()=>arrDeduplication,
+    getSeriesLabelConfig: ()=>getSeriesLabelConfig,
+    aggregateStackData: ()=>aggregateStackData,
+    handleSort: ()=>handleSort,
+    getSeriesDataByType: ()=>getSeriesDataByType
+});
+const external_echarts_namespaceObject = require("echarts");
+const external_polished_namespaceObject = require("polished");
+function isNonEmptyArray(data) {
+    return Array.isArray(data) && data.length > 0;
+}
+const handleToPercent = (value, num = 2)=>'number' == typeof value ? `${Number((100 * value).toFixed(num))}%` : '-%';
+function arrDeduplication(data) {
+    if (Array.isArray(data)) return [
+        ...new Set(data)
+    ];
+    return [];
+}
+const arraySum = (list)=>{
+    if (Array.isArray(list) && 0 !== list.length) return list.reduce((a, b)=>{
+        const temp = Number(b);
+        return a + (Object.is(temp, NaN) ? 0 : temp);
+    }, 0);
+    return 0;
+};
+const checkEntityArr = (data)=>Array.isArray(data) && data.length > 0;
+const dataDescOrder = (data, order = 'desc')=>{
+    if (Array.isArray(data) && 'asc' === order) {
+        const _data = JSON.parse(JSON.stringify(data));
+        return _data.sort((a, b)=>a.value - b.value);
+    }
+    if (Array.isArray(data) && 'desc' === order) {
+        const _data = JSON.parse(JSON.stringify(data));
+        return _data.sort((a, b)=>b.value - a.value);
+    }
+    return data;
+};
+const getMainAxisLabels = (winChartProps)=>{
+    const data = [
+        ...winChartProps.data ?? [],
+        ...winChartProps.extraData ?? []
+    ];
+    return arrDeduplication(data.map((item)=>item.label));
+};
+const getDataTypes = (winChartProps)=>arrDeduplication(winChartProps.data?.filter((item)=>!!item.type).map((item)=>item.type)) ?? [];
+const getExtraDataTypes = (winChartProps)=>arrDeduplication(winChartProps.extraData?.filter((item)=>!!item.type).map((item)=>item.type)) ?? [];
+const getSeriesDataByType = (winChartProps, type)=>{
+    const data = [
+        ...winChartProps.data ?? [],
+        ...winChartProps.extraData ?? []
+    ];
+    return getMainAxisLabels(winChartProps).map((label)=>data.find((item)=>item.type === type && item.label === label)?.value ?? 0);
+};
+const getSeriesLabelConfig = (winChartProps)=>winChartProps.showLabel ? {
+        show: true,
+        formatter: '{c}',
+        position: 'top',
+        showSymbol: true
+    } : {
+        show: false
+    };
+const handleMainAxisLabel = (winChartProps, name)=>{
+    const configLength = winChartProps.xAxisLabelLength;
+    if ('number' == typeof configLength && name.length > configLength) return `${name.slice(0, configLength)}...`;
+    return name;
+};
+const getXAxisOpt = (winChartProps)=>({
+        boundaryGap: true,
+        axisTick: {
+            alignWithLabel: true
+        },
+        data: getMainAxisLabels(winChartProps),
+        axisLabel: {
+            rotate: winChartProps.xAxisLabelRotate,
+            formatter: (name)=>handleMainAxisLabel(winChartProps, name)
+        }
+    });
+const getGradientColor = (winChartProps, color)=>{
+    const gradientColor = new external_echarts_namespaceObject.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+            offset: 0,
+            color: (0, external_polished_namespaceObject.rgba)(color, 0.5)
+        },
+        {
+            offset: 1,
+            color: 'dark' === winChartProps.theme ? (0, external_polished_namespaceObject.rgba)('gray', 0.1) : '#fff'
+        }
+    ]);
+    return gradientColor;
+};
+const sortArray = (arr, order)=>{
+    if ('asc' === order) arr.sort((a, b)=>a.value - b.value);
+    else if ('desc' === order) arr.sort((a, b)=>b.value - a.value);
+    return arr;
+};
+const sortArrayByLabel = (arr, sortedLabels)=>{
+    arr.sort((a, b)=>{
+        const indexA = sortedLabels.indexOf(a.label);
+        const indexB = sortedLabels.indexOf(b.label);
+        return indexA - indexB;
+    });
+    return arr;
+};
+const handleSort = (winChartProps)=>{
+    const { data, extraData, sort } = winChartProps;
+    if (data && sort) {
+        const sortedData = sortArray([
+            ...data
+        ], sort);
+        const sortedLabels = arrDeduplication(sortedData.map((item)=>item.label));
+        const finalSortData = sortArrayByLabel(sortedData, sortedLabels);
+        const finalSortedExtraData = sortArrayByLabel([
+            ...extraData ?? []
+        ], sortedLabels);
+        return {
+            ...winChartProps,
+            data: finalSortData,
+            extraData: finalSortedExtraData
+        };
+    }
+    return winChartProps;
+};
+function debounce(func, delay) {
+    let timer = null;
+    return function(...args) {
+        clearTimeout(timer);
+        timer = setTimeout(()=>{
+            func.apply(globalThis, args);
+        }, delay);
+    };
+}
+const mergeSeriesOption = (option, seriesOption)=>{
+    if (isNonEmptyArray(option.series) && isNonEmptyArray(seriesOption)) seriesOption.forEach((config)=>{
+        option.series = option.series.map((item)=>({
+                ...item,
+                ...item.name === config.name && config
+            }));
+    });
+    return option;
+};
+const getLabelColor = (opt)=>'dark' === opt.theme ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)';
+function aggregateStackData(data) {
+    const result = data.reduce((acc, item)=>{
+        const { label, value } = item;
+        if (!acc[label]) acc[label] = 0;
+        if (value) acc[label] += Number(value);
+        return acc;
+    }, {});
+    const totals = Object.values(result).map((totalValue)=>parseFloat(totalValue.toFixed(2)));
+    return totals;
+}
+exports.aggregateStackData = __webpack_exports__.aggregateStackData;
+exports.arrDeduplication = __webpack_exports__.arrDeduplication;
+exports.arraySum = __webpack_exports__.arraySum;
+exports.checkEntityArr = __webpack_exports__.checkEntityArr;
+exports.dataDescOrder = __webpack_exports__.dataDescOrder;
+exports.debounce = __webpack_exports__.debounce;
+exports.getDataTypes = __webpack_exports__.getDataTypes;
+exports.getExtraDataTypes = __webpack_exports__.getExtraDataTypes;
+exports.getGradientColor = __webpack_exports__.getGradientColor;
+exports.getLabelColor = __webpack_exports__.getLabelColor;
+exports.getMainAxisLabels = __webpack_exports__.getMainAxisLabels;
+exports.getSeriesDataByType = __webpack_exports__.getSeriesDataByType;
+exports.getSeriesLabelConfig = __webpack_exports__.getSeriesLabelConfig;
+exports.getXAxisOpt = __webpack_exports__.getXAxisOpt;
+exports.handleMainAxisLabel = __webpack_exports__.handleMainAxisLabel;
+exports.handleSort = __webpack_exports__.handleSort;
+exports.handleToPercent = __webpack_exports__.handleToPercent;
+exports.isNonEmptyArray = __webpack_exports__.isNonEmptyArray;
+exports.mergeSeriesOption = __webpack_exports__.mergeSeriesOption;
+exports.sortArray = __webpack_exports__.sortArray;
+exports.sortArrayByLabel = __webpack_exports__.sortArrayByLabel;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "aggregateStackData",
+    "arrDeduplication",
+    "arraySum",
+    "checkEntityArr",
+    "dataDescOrder",
+    "debounce",
+    "getDataTypes",
+    "getExtraDataTypes",
+    "getGradientColor",
+    "getLabelColor",
+    "getMainAxisLabels",
+    "getSeriesDataByType",
+    "getSeriesLabelConfig",
+    "getXAxisOpt",
+    "handleMainAxisLabel",
+    "handleSort",
+    "handleToPercent",
+    "isNonEmptyArray",
+    "mergeSeriesOption",
+    "sortArray",
+    "sortArrayByLabel"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/esm/components/ChartWrapper.js

@@ -0,0 +1,5 @@
+import { styled } from "styled-components";
+const ChartWrapper = styled.div`
+  height: 100%;
+`;
+export { ChartWrapper };