@perses-dev/components 0.8.1 → 0.10.0

package/dist/cjs/LineChart/LineChart.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineChart = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,52 +10,61 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const react_1 = require("react");
-const core_1 = require("@perses-dev/core");
-const material_1 = require("@mui/material");
-const core_2 = require("echarts/core");
-const charts_1 = require("echarts/charts");
-const components_1 = require("echarts/components");
-const renderers_1 = require("echarts/renderers");
-const EChart_1 = require("../EChart");
-const graph_1 = require("../model/graph");
-const units_1 = require("../model/units");
-const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
-const Tooltip_1 = require("../Tooltip/Tooltip");
-const utils_1 = require("./utils");
-(0, core_2.use)([
-    charts_1.LineChart,
-    components_1.GridComponent,
-    components_1.DataZoomComponent,
-    components_1.MarkAreaComponent,
-    components_1.MarkLineComponent,
-    components_1.MarkPointComponent,
-    components_1.TitleComponent,
-    components_1.ToolboxComponent,
-    components_1.TooltipComponent,
-    components_1.LegendComponent,
-    components_1.VisualMapComponent,
-    renderers_1.CanvasRenderer,
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LineChart", {
+    enumerable: true,
+    get: ()=>LineChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _core = require("@perses-dev/core");
+const _material = require("@mui/material");
+const _core1 = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _echart = require("../EChart");
+const _graph = require("../model/graph");
+const _units = require("../model/units");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _tooltip = require("../Tooltip/Tooltip");
+const _utils = require("./utils");
+(0, _core1.use)([
+    _charts.LineChart,
+    _components.GridComponent,
+    _components.DataZoomComponent,
+    _components.MarkAreaComponent,
+    _components.MarkLineComponent,
+    _components.MarkPointComponent,
+    _components.TitleComponent,
+    _components.ToolboxComponent,
+    _components.TooltipComponent,
+    _components.LegendComponent,
+    _components.VisualMapComponent,
+    _renderers.CanvasRenderer
 ]);
-function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom, onDoubleClick }) {
-    const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
-    const chartRef = (0, react_1.useRef)();
-    const [showTooltip, setShowTooltip] = (0, react_1.useState)(true);
-    const [pinTooltip, setPinTooltip] = (0, react_1.useState)(false);
-    const handleEvents = (0, react_1.useMemo)(() => {
+function LineChart({ height , data , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const chartRef = (0, _react.useRef)();
+    const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
+    const [pinTooltip, setPinTooltip] = (0, _react.useState)(false);
+    const handleEvents = (0, _react.useMemo)(()=>{
         return {
-            datazoom: (params) => {
-                var _a, _b;
+            datazoom: (params)=>{
                 if (onDataZoom === undefined) {
-                    setTimeout(() => {
+                    setTimeout(()=>{
                         // workaround so unpin happens after click event
                         setPinTooltip(false);
                     }, 10);
                 }
-                if (onDataZoom === undefined || params.batch[0] === undefined)
-                    return;
-                const startIndex = (_a = params.batch[0].startValue) !== null && _a !== void 0 ? _a : 0;
-                const endIndex = (_b = params.batch[0].endValue) !== null && _b !== void 0 ? _b : data.xAxis.length - 1;
+                if (onDataZoom === undefined || params.batch[0] === undefined) return;
+                var _startValue;
+                const startIndex = (_startValue = params.batch[0].startValue) !== null && _startValue !== void 0 ? _startValue : 0;
+                var _endValue;
+                const endIndex = (_endValue = params.batch[0].endValue) !== null && _endValue !== void 0 ? _endValue : data.xAxis.length - 1;
                 const xAxisStartValue = data.xAxis[startIndex];
                 const xAxisEndValue = data.xAxis[endIndex];
                 if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
@@ -67,54 +72,54 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom, on
                         start: xAxisStartValue,
                         end: xAxisEndValue,
                         startIndex,
-                        endIndex,
+                        endIndex
                     };
                     onDataZoom(zoomEvent);
                 }
-            },
-            // TODO: use legendselectchanged event to fix tooltip when legend selected
+            }
         };
-    }, [data, onDataZoom, setPinTooltip]);
+    }, [
+        data,
+        onDataZoom,
+        setPinTooltip
+    ]);
     if (chartRef.current !== undefined) {
-        (0, utils_1.enableDataZoom)(chartRef.current);
+        (0, _utils.enableDataZoom)(chartRef.current);
     }
-    const handleOnClick = () => setPinTooltip((current) => !current);
-    const handleOnDoubleClick = (e) => {
+    const handleOnClick = ()=>setPinTooltip((current)=>!current);
+    const handleOnDoubleClick = (e)=>{
         setPinTooltip(false);
         // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
         if (onDoubleClick === undefined) {
             if (chartRef.current !== undefined) {
-                (0, utils_1.restoreChart)(chartRef.current);
+                (0, _utils.restoreChart)(chartRef.current);
             }
-        }
-        else {
+        } else {
             onDoubleClick(e);
         }
     };
-    const handleOnMouseDown = (e) => {
+    const handleOnMouseDown = (e)=>{
         // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
         if (e.target instanceof HTMLCanvasElement) {
             setShowTooltip(false);
         }
     };
-    const handleOnMouseUp = () => {
+    const handleOnMouseUp = ()=>{
         setShowTooltip(true);
     };
-    const handleOnMouseEnter = () => {
+    const handleOnMouseEnter = ()=>{
         setShowTooltip(true);
     };
-    const handleOnMouseLeave = () => {
+    const handleOnMouseLeave = ()=>{
         setShowTooltip(false);
         setPinTooltip(false);
     };
-    const option = (0, core_1.useDeepMemo)(() => {
-        var _a;
-        if (data.timeSeries === undefined)
-            return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0)
-            return chartsTheme.noDataOption;
-        const showPointsOnHover = data.timeSeries.length < graph_1.PROGRESSIVE_MODE_SERIES_LIMIT;
-        const rangeMs = (_a = data.rangeMs) !== null && _a !== void 0 ? _a : (0, utils_1.getDateRange)(data.xAxis);
+    const option = (0, _core.useDeepMemo)(()=>{
+        if (data.timeSeries === undefined) return {};
+        if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
+        const showPointsOnHover = data.timeSeries.length < _graph.PROGRESSIVE_MODE_SERIES_LIMIT;
+        var _rangeMs;
+        const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
             series: data.timeSeries,
             xAxis: {
@@ -122,19 +127,22 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom, on
                 data: data.xAxis,
                 max: data.xAxisMax,
                 axisLabel: {
-                    formatter: (value) => {
-                        return (0, utils_1.getFormattedDate)(value, rangeMs);
-                    },
-                },
+                    formatter: (value)=>{
+                        return (0, _utils.getFormattedDate)(value, rangeMs);
+                    }
+                }
             },
             yAxis: {
                 type: 'value',
-                boundaryGap: [0, '10%'],
+                boundaryGap: [
+                    0,
+                    '10%'
+                ],
                 axisLabel: {
-                    formatter: (value) => {
-                        return (0, units_1.formatValue)(value, unit);
-                    },
-                },
+                    formatter: (value)=>{
+                        return (0, _units.formatValue)(value, unit);
+                    }
+                }
             },
             animation: false,
             tooltip: {
@@ -142,28 +150,55 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom, on
                 trigger: 'axis',
                 showContent: false,
                 axisPointer: {
-                    type: 'none',
-                },
+                    type: 'none'
+                }
             },
             toolbox: {
                 feature: {
                     dataZoom: {
                         icon: null,
-                        yAxisIndex: 'none',
-                    },
-                },
+                        yAxisIndex: 'none'
+                    }
+                }
             },
             grid,
             legend,
-            visualMap,
+            visualMap
         };
         return option;
-    }, [data, grid, legend, visualMap]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            height,
-        }, onClick: handleOnClick, onDoubleClick: handleOnDoubleClick, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, chartData: data, wrapLabels: true, pinTooltip: pinTooltip })), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+    }, [
+        data,
+        grid,
+        legend,
+        visualMap
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            height
+        },
+        onClick: handleOnClick,
+        onDoubleClick: handleOnDoubleClick,
+        onMouseDown: handleOnMouseDown,
+        onMouseUp: handleOnMouseUp,
+        onMouseLeave: handleOnMouseLeave,
+        onMouseEnter: handleOnMouseEnter,
+        children: [
+            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+                chartRef: chartRef,
+                chartData: data,
+                wrapLabels: true,
+                pinTooltip: pinTooltip
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
                     width: '100%',
-                    height: '100%',
-                }, option: option, theme: chartsTheme.themeName, onEvents: handleEvents, _instance: chartRef })] }));
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.themeName,
+                onEvents: handleEvents,
+                _instance: chartRef
+            })
+        ]
+    });
 }
-exports.LineChart = LineChart;

package/dist/cjs/LineChart/index.js

@@ -1,4 +1,3 @@
-"use strict";
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,19 +10,19 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./LineChart"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./LineChart"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/LineChart/utils.js

@@ -1,4 +1,3 @@
-"use strict";
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,57 +10,59 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFormattedDate = exports.getDateRange = exports.restoreChart = exports.enableDataZoom = void 0;
-// enable dataZoom without requring user to click toolbox icon
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    enableDataZoom: ()=>enableDataZoom,
+    restoreChart: ()=>restoreChart,
+    getDateRange: ()=>getDateRange,
+    getFormattedDate: ()=>getFormattedDate
+});
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
-    if (chartModel === undefined)
-        return;
+    if (chartModel === undefined) return;
     if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {
         // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')
         if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {
             chart.dispatchAction({
                 type: 'takeGlobalCursor',
                 key: 'dataZoomSelect',
-                dataZoomSelectActive: true,
+                dataZoomSelectActive: true
             });
         }
     }
 }
-exports.enableDataZoom = enableDataZoom;
-// restore chart to original state before zoom or other actions were dispatched
-// TODO: support incremental unzoom instead of restore to original state
 function restoreChart(chart) {
     chart.dispatchAction({
-        type: 'restore', // https://echarts.apache.org/en/api.html#events.restore
+        type: 'restore'
     });
 }
-exports.restoreChart = restoreChart;
-// fallback when xAxis time range not passed as prop
 function getDateRange(data) {
     const defaultRange = 3600000; // hour in ms
-    if (data.length === 0)
-        return defaultRange;
+    if (data.length === 0) return defaultRange;
     const lastDatum = data[data.length - 1];
-    if (data[0] === undefined || lastDatum === undefined)
-        return defaultRange;
+    if (data[0] === undefined || lastDatum === undefined) return defaultRange;
     return lastDatum - data[0];
 }
-exports.getDateRange = getDateRange;
-// determines time granularity for axis labels, defaults to hh:mm
 function getFormattedDate(value, rangeMs) {
     const dateFormatOptions = {
         hour: 'numeric',
         minute: 'numeric',
-        hourCycle: 'h23',
+        hourCycle: 'h23'
     };
     const thirtyMinMs = 1800000;
     const dayMs = 86400000;
     if (rangeMs <= thirtyMinMs) {
         dateFormatOptions.second = 'numeric';
-    }
-    else if (rangeMs >= dayMs) {
+    } else if (rangeMs >= dayMs) {
         dateFormatOptions.month = 'numeric';
         dateFormatOptions.day = 'numeric';
     }
@@ -69,4 +70,3 @@ function getFormattedDate(value, rangeMs) {
     // remove comma when month / day present
     return DATE_FORMAT.format(value).replace(/, /g, ' ');
 }
-exports.getFormattedDate = getFormattedDate;

package/dist/cjs/StatChart/StatChart.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatChart = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,53 +10,101 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const lodash_es_1 = require("lodash-es");
-const core_1 = require("echarts/core");
-const charts_1 = require("echarts/charts");
-const charts_2 = require("echarts/charts");
-const components_1 = require("echarts/components");
-const renderers_1 = require("echarts/renderers");
-const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
-const units_1 = require("../model/units");
-const EChart_1 = require("../EChart");
-(0, core_1.use)([
-    charts_1.GaugeChart,
-    charts_2.LineChart,
-    components_1.GridComponent,
-    components_1.DatasetComponent,
-    components_1.TitleComponent,
-    components_1.TooltipComponent,
-    renderers_1.CanvasRenderer,
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "StatChart", {
+    enumerable: true,
+    get: ()=>StatChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _material = require("@mui/material");
+const _lodashEs = require("lodash-es");
+const _core = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _units = require("../model/units");
+const _echart = require("../EChart");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+(0, _core.use)([
+    _charts.GaugeChart,
+    _charts.LineChart,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.TitleComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
 ]);
 const PANEL_PADDING = 32;
 const MIN_VALUE_SIZE = 12;
 const MAX_VALUE_SIZE = 36;
 function StatChart(props) {
-    const { width, height, data, unit, sparkline } = props;
-    const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
-    const formattedValue = data.calculatedValue === undefined ? 'No data' : (0, units_1.formatValue)(data.calculatedValue, unit);
-    const option = (0, react_1.useMemo)(() => {
-        if (data.seriesData === undefined)
-            return chartsTheme.noDataOption;
+    const { width , height , data , unit , sparkline  } = props;
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const formattedValue = data.calculatedValue === undefined ? '' : (0, _units.formatValue)(data.calculatedValue, unit);
+    const option = (0, _react.useMemo)(()=>{
+        if (data.seriesData === undefined) return chartsTheme.noDataOption;
         const series = data.seriesData;
         const statSeries = [];
         if (sparkline !== undefined) {
             const lineSeries = {
                 type: 'line',
-                data: [...series.values],
+                data: [
+                    ...series.values
+                ],
                 zlevel: 1,
                 symbol: 'none',
                 animation: false,
-                silent: true,
+                silent: true
             };
-            const mergedSeries = (0, lodash_es_1.merge)(lineSeries, sparkline);
+            const mergedSeries = (0, _lodashEs.merge)(lineSeries, sparkline);
             statSeries.push(mergedSeries);
         }
         const option = {
             title: {
-                show: false,
+                show: false
             },
             grid: {
                 show: false,
@@ -68,37 +112,54 @@ function StatChart(props) {
                 right: 0,
                 bottom: 0,
                 left: 0,
-                containLabel: false,
+                containLabel: false
             },
             xAxis: {
                 type: 'time',
                 show: false,
-                boundaryGap: false,
+                boundaryGap: false
             },
             yAxis: {
                 type: 'value',
-                show: false,
+                show: false
             },
             tooltip: {
-                show: false,
+                show: false
             },
-            series: statSeries,
+            series: statSeries
         };
         return option;
-    }, [data, chartsTheme, sparkline]);
+    }, [
+        data,
+        chartsTheme,
+        sparkline
+    ]);
     const isLargePanel = width > 250 && height > 180;
     // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
     const charactersAdjust = formattedValue.length;
     const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h3", sx: (theme) => ({
-                    color: theme.palette.text.primary,
-                    fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
-                }), children: formattedValue }), sparkline !== undefined && ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h3",
+                sx: (theme)=>({
+                        color: theme.palette.text.primary,
+                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`
+                    }),
+                children: formattedValue
+            }),
+            sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
                     width: width + PANEL_PADDING,
                     height: height,
                     position: 'absolute',
                     bottom: 0,
-                    left: 0,
-                }, option: option, theme: chartsTheme.themeName, renderer: "svg" }))] }));
+                    left: 0
+                },
+                option: option,
+                theme: chartsTheme.themeName,
+                renderer: "svg"
+            })
+        ]
+    });
 }
-exports.StatChart = StatChart;