moblor-vue 0.1.49 → 0.1.51

package/dist/moblor-components.esm.js

@@ -319,6 +319,7 @@ var MoBarChart = /** @class */ (function (_super) {
         _this.categories = [];
         _this.additionalHeight = 0;
         _this.labelGroup = null;
+        _this.displayData = [];
         return _this;
     }
     Object.defineProperty(MoBarChart.prototype, "actualMargin", {
@@ -337,6 +338,11 @@ var MoBarChart = /** @class */ (function (_super) {
             if (this.hasSecondAxis) {
                 acutalRight = Math.max(acutalRight, 65);
             }
+            if (this.groupType !== 'grouped'
+                && this.groupType !== 'stacked'
+                && this.groupType !== 'stacked100') {
+                acutalRight = 0;
+            }
             return {
                 top: top,
                 right: acutalRight,
@@ -359,7 +365,7 @@ var MoBarChart = /** @class */ (function (_super) {
         this.renderAxis();
         this.renderAxisLabel();
         this.renderSpaceLine();
-        var data = JSON.parse(JSON.stringify(this.data));
+        var data = JSON.parse(JSON.stringify(this.displayData));
         if (this.groupType === 'stacked' || this.groupType === 'stacked100') {
             data = this.refactorStackedData();
         }
@@ -377,20 +383,15 @@ var MoBarChart = /** @class */ (function (_super) {
     };
     MoBarChart.prototype.init = function () {
         var _this = this;
-        var _a;
+        this.displayData = this.data.slice(0, this.maxDisplayCount);
         // 计算最大值
         var chartMaxValue = 0;
         if (this.groupType === 'grouped' && this.categories.length > 0) {
-            chartMaxValue = ChartService.getMaxValue(this.data);
+            chartMaxValue = ChartService.getMaxValue(this.displayData);
         }
         else {
-            chartMaxValue = max(this.data, function (d) { return max(d.values); }) || 0;
+            chartMaxValue = max(this.displayData, function (d) { return max(d.values); }) || 0;
         }
-        // 计算margin
-        var unitSymbol = (((_a = this.aggregates) === null || _a === void 0 ? void 0 : _a[0]) || {}).unitSymbol;
-        var maxValueStr = ChartService.formatValue(chartMaxValue, unitSymbol, this.decimal);
-        var textWidth = maxValueStr.length * 8;
-        this.actualMargin.right = Math.max(this.margin.right, textWidth + 20);
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
@@ -426,10 +427,9 @@ var MoBarChart = /** @class */ (function (_super) {
             .attr('class', 'label-group');
         // 配置x轴比例尺
         this.xAxisScale = scaleBand()
-            .domain(this.data.slice(0, this.maxDisplayCount).map(function (d) { return d.label; }))
-            .range([0, this.width])
-            .padding(0.3)
-            .round(true);
+            .domain(this.displayData.map(function (d) { return d.label; }))
+            .rangeRound([0, this.width])
+            .padding(0.2);
         // 配置y轴
         this.yAxisScale = scaleLinear()
             .domain([0, chartMaxValue])
@@ -442,7 +442,7 @@ var MoBarChart = /** @class */ (function (_super) {
         // 处理分组数据
         if (this.groupType && this.groupType !== 'none') {
             this.categories = [];
-            this.data.forEach(function (d) {
+            this.displayData.forEach(function (d) {
                 if (d.pieces && d.pieces.length > _this.categories.length) {
                     _this.categories = d.pieces.map(function (p) { return p.label; });
                 }
@@ -453,7 +453,7 @@ var MoBarChart = /** @class */ (function (_super) {
             this.xAxisCategories = scaleBand()
                 .domain(this.categories)
                 .range([0, this.xAxisScale.bandwidth()])
-                .padding(0.4)
+                .padding(0.2)
                 .round(false);
         }
         // 配置聚合比例尺
@@ -462,7 +462,7 @@ var MoBarChart = /** @class */ (function (_super) {
             this.xAxisAggregates = scaleBand()
                 .domain(labels)
                 .range([0, this.xAxisScale.bandwidth()])
-                .padding(0.4)
+                .padding(0.2)
                 .round(false);
         }
         // 计算y轴范围
@@ -471,16 +471,16 @@ var MoBarChart = /** @class */ (function (_super) {
         var secondYMaxValue = 0;
         var secondYMinValue = 0;
         if (this.groupType === 'grouped') {
-            maxVal = ChartService.getMaxValue(this.data) || 0;
-            minVal = ChartService.getMinValue(this.data) || 0;
+            maxVal = ChartService.getMaxValue(this.displayData) || 0;
+            minVal = ChartService.getMinValue(this.displayData) || 0;
         }
         else {
-            maxVal = max(this.data, function (d) { return d.values[0]; }) || 0;
-            minVal = min(this.data, function (d) { return d.values[0]; }) || 0;
+            maxVal = max(this.displayData, function (d) { return d.values[0]; }) || 0;
+            minVal = min(this.displayData, function (d) { return d.values[0]; }) || 0;
         }
         if (this.aggregates.length > 1) {
-            secondYMaxValue = max(this.data, function (d) { return max(d.values); }) || 0;
-            secondYMinValue = min(this.data, function (d) { return min(d.values); }) || 0;
+            secondYMaxValue = max(this.displayData, function (d) { return max(d.values); }) || 0;
+            secondYMinValue = min(this.displayData, function (d) { return min(d.values); }) || 0;
         }
         // 为y轴添加一些边距，确保数值标签不会被截断
         var yPadding = 0.1;
@@ -635,7 +635,7 @@ var MoBarChart = /** @class */ (function (_super) {
                     return '';
                 }
                 var currency = aggregate.dataType === 'currency'
-                    ? (_b = (_a = _this.data[0]) === null || _a === void 0 ? void 0 : _a.reportMetadata) === null || _b === void 0 ? void 0 : _b.currency : '';
+                    ? (_b = (_a = _this.displayData[0]) === null || _a === void 0 ? void 0 : _a.reportMetadata) === null || _b === void 0 ? void 0 : _b.currency : '';
                 return currency ? aggregate.label + " (" + currency + ")" : aggregate.label;
             }).filter(Boolean).join(', ')
             : '');
@@ -653,7 +653,7 @@ var MoBarChart = /** @class */ (function (_super) {
                 var aggregate = _this.aggregates[_this.secondYIndex];
                 if (!aggregate)
                     { return ''; }
-                var currency = ((_b = (_a = _this.data[0]) === null || _a === void 0 ? void 0 : _a.reportMetadata) === null || _b === void 0 ? void 0 : _b.currency) || '';
+                var currency = ((_b = (_a = _this.displayData[0]) === null || _a === void 0 ? void 0 : _a.reportMetadata) === null || _b === void 0 ? void 0 : _b.currency) || '';
                 return currency ? aggregate.label + " (" + currency + ")" : aggregate.label;
             });
         }
@@ -665,13 +665,13 @@ var MoBarChart = /** @class */ (function (_super) {
             .append('line')
             .attr('class', 'mo-space-line')
             .attr('x1', 3)
-            .attr('x2', this.svgWidth)
+            .attr('x2', this.width)
             .attr('y1', this.yAxisScale)
             .attr('y2', this.yAxisScale);
     };
     MoBarChart.prototype.refactorStackedData = function () {
         var _this = this;
-        var data = JSON.parse(JSON.stringify(this.data));
+        var data = JSON.parse(JSON.stringify(this.displayData));
         var getBarY = function (pieces, i, total) {
             if (i === (pieces.length - 1)) {
                 return _this.groupType === 'stacked100'
@@ -722,17 +722,12 @@ var MoBarChart = /** @class */ (function (_super) {
                 return value >= 0 ? _this.yAxisScale(value) : _this.yAxisScale(0);
             })
                 .attr('width', this.xAxisScale.bandwidth())
-                .attr('height', 0)
-                .transition()
-                .duration(1000)
                 .attr('height', function (d) {
                 var value = d.values[0];
                 return Math.abs(_this.yAxisScale(value) - _this.yAxisScale(0));
             })
-                .attr('y', function (d) {
-                var value = d.values[0];
-                return value >= 0 ? _this.yAxisScale(value) : _this.yAxisScale(0);
-            });
+                .transition()
+                .duration(1000);
         }
     };
     MoBarChart.prototype.renderGroupedAggregatesBar = function (pieces) {
@@ -748,14 +743,12 @@ var MoBarChart = /** @class */ (function (_super) {
             .append('rect')
             .attr('class', 'rect')
             .attr('width', this.xAxisAggregates.bandwidth())
+            .attr('height', function (d) { return Math.abs(_this.yAxisScale(d) - _this.yAxisScale(0)); })
             .attr('x', function (d, index) { return _this.xAxisAggregates(_this.aggregates[index].label); })
             .attr('y', function (d) { return (d >= 0 ? _this.yAxisScale(d) : _this.yAxisScale(0)); })
-            .attr('height', 0)
             .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
             .transition()
-            .duration(1000)
-            .attr('y', function (d) { return (d >= 0 ? _this.yAxisScale(d) : _this.yAxisScale(0)); })
-            .attr('height', function (d) { return Math.abs(_this.yAxisScale(d) - _this.yAxisScale(0)); });
+            .duration(1000);
     };
     MoBarChart.prototype.renderGroupedBar = function (pieces) {
         var _this = this;
@@ -770,24 +763,19 @@ var MoBarChart = /** @class */ (function (_super) {
             .enter()
             .append('rect')
             .attr('class', 'rect')
-            .attr('width', this.xAxisCategories.bandwidth())
             .attr('x', function (d) { return _this.xAxisCategories(d.label); })
             .attr('y', function (d) {
             var value = d.values[0];
             return value >= 0 ? _this.yAxisScale(value) : _this.yAxisScale(0);
         })
-            .attr('height', 0)
-            .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
-            .transition()
-            .duration(1000)
-            .attr('y', function (d) {
-            var value = d.values[0];
-            return value >= 0 ? _this.yAxisScale(value) : _this.yAxisScale(0);
-        })
+            .attr('width', this.xAxisCategories.bandwidth())
             .attr('height', function (d) {
             var value = d.values[0];
             return Math.abs(_this.yAxisScale(value) - _this.yAxisScale(0));
-        });
+        })
+            .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
+            .transition()
+            .duration(1000);
     };
     MoBarChart.prototype.renderStackedBar = function (pieces) {
         var _this = this;
@@ -803,25 +791,18 @@ var MoBarChart = /** @class */ (function (_super) {
             .append('rect')
             .attr('class', 'rect')
             .attr('height', 0)
-            .attr('width', this.xAxisScale.bandwidth())
-            .attr('y', function (d) {
-            if (_this.groupType === 'stacked100') {
-                return _this.yAxisScale(0);
-            }
-            var value = d.values[0];
-            return value >= 0 ? _this.yAxisScale(value) : _this.yAxisScale(0);
-        })
-            .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
-            .transition()
-            .duration(1000)
             .attr('y', function (d) { return d.y; })
+            .attr('width', this.xAxisScale.bandwidth())
             .attr('height', function (d) {
             if (_this.groupType === 'stacked100') {
                 return _this.height - _this.yAxisScale(d.percentage);
             }
             var value = d.values[0];
             return Math.abs(_this.yAxisScale(value) - _this.yAxisScale(0));
-        });
+        })
+            .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
+            .transition()
+            .duration(1000);
     };
     MoBarChart.prototype.renderLine = function (pieces) {
         var _this = this;
@@ -944,7 +925,7 @@ var MoBarChart = /** @class */ (function (_super) {
         __metadata("design:type", Array)
     ], MoBarChart.prototype, "colors", void 0);
     __decorate([
-        Prop({ type: Object, default: function () { return ({ top: 20, right: 20, bottom: 20, left: 60 }); } }),
+        Prop({ type: Object, default: function () { return ({ top: 20, right: 20, bottom: 20, left: 70 }); } }),
         __metadata("design:type", typeof (_a = typeof ChartMargin !== "undefined" && ChartMargin) === "function" ? _a : Object)
     ], MoBarChart.prototype, "margin", void 0);
     __decorate([
@@ -1111,7 +1092,7 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-ba451a48_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-1da7c68a_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -1162,6 +1143,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         _this.labelGroup = null;
         _this.additionalHeight = 0;
         _this.barOffsetY = 7;
+        _this.displayData = [];
         return _this;
     }
     Object.defineProperty(MoBarChartHorizontal.prototype, "actualMargin", {
@@ -1187,7 +1169,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         this.renderAxis();
         this.renderAxisLabel();
         this.renderSpaceLine();
-        var data = JSON.parse(JSON.stringify(this.data));
+        var data = JSON.parse(JSON.stringify(this.displayData));
         if (this.groupType === 'stacked' || this.groupType === 'stacked100') {
             data = this.refactorStackedData();
         }
@@ -1208,18 +1190,19 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         var _a;
         this.categories = [];
         var maxValue;
+        this.displayData = this.data.slice(0, this.maxDisplayCount);
         if (this.groupType && this.groupType !== 'none') {
-            this.data.forEach(function (d) {
+            this.displayData.forEach(function (d) {
                 if (d.pieces && d.pieces.length > _this.categories.length) {
                     _this.categories = d.pieces.map(function (piece) { return piece.label; });
                 }
             });
         }
         if (this.groupType === 'grouped' && this.categories.length > 0) {
-            maxValue = ChartService.getMaxValue(this.data);
+            maxValue = ChartService.getMaxValue(this.displayData);
         }
         else {
-            maxValue = max(this.data, function (d) { return max(d.values); });
+            maxValue = max(this.displayData, function (d) { return max(d.values); });
         }
         var unitSymbol = (((_a = this.aggregates) === null || _a === void 0 ? void 0 : _a[0]) || {}).unitSymbol;
         var maxValueStr = ChartService.formatValue(maxValue || 0, unitSymbol, this.decimal);
@@ -1270,9 +1253,9 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
                 .tickFormat(function (domain) { return ChartService.formatValue(domain, '', _this.decimal); });
         }
         this.yAxisScale = scaleBand()
-            .domain(this.data.map(function (d) { return d.label; }))
+            .domain(this.displayData.map(function (d) { return d.label; }))
             .range([0, this.height])
-            .padding(0.1);
+            .padding(0.2);
         this.yAxisCategories = scaleBand()
             .domain(this.categories)
             .range([0, this.height])
@@ -1321,7 +1304,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             var _a, _b, _c;
             var label = _this.aggregates.map(function (a) { return a.label; }).join(', ');
             var currency = ((_a = _this.aggregates[0]) === null || _a === void 0 ? void 0 : _a.dataType) === 'currency'
-                ? (_c = (_b = _this.data[0]) === null || _b === void 0 ? void 0 : _b.reportMetadata) === null || _c === void 0 ? void 0 : _c.currency : '';
+                ? (_c = (_b = _this.displayData[0]) === null || _b === void 0 ? void 0 : _b.reportMetadata) === null || _c === void 0 ? void 0 : _c.currency : '';
             return currency ? label + " (" + currency + ")" : label;
         });
         this.mainSvg.append('text')
@@ -1350,7 +1333,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
     };
     MoBarChartHorizontal.prototype.refactorStackedData = function () {
         var _this = this;
-        var data = JSON.parse(JSON.stringify(this.data));
+        var data = JSON.parse(JSON.stringify(this.displayData));
         var getBarX = function (pieces, i, total) {
             var x = 0;
             pieces.forEach(function (piece, index) {
@@ -1398,11 +1381,10 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
                 .attr('x', 0)
                 .attr('y', function (d) { return _this.yAxisScale(d.label); })
                 .attr('height', this.yAxisScale.bandwidth())
-                .attr('width', 0)
+                .attr('width', function (d) { return _this.xAxisScale(d.values[0]); })
                 .style('fill', ChartService.getColor(0, this.colors))
                 .transition()
-                .duration(1000)
-                .attr('width', function (d) { return _this.xAxisScale(d.values[0]); });
+                .duration(1000);
         }
     };
     MoBarChartHorizontal.prototype.renderGroupedAggregatesBar = function (data) {
@@ -1417,13 +1399,12 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .enter()
             .append('rect')
             .attr('class', 'rect')
-            .attr('width', 0)
+            .attr('width', function (d) { return _this.xAxisScale(d); })
             .attr('height', this.yAxisScale.bandwidth())
             .attr('y', function (d, i) { return _this.yAxisAggregates(_this.aggregates[i].label); })
             .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
             .transition()
-            .duration(1000)
-            .attr('width', function (d) { return _this.xAxisScale(d); });
+            .duration(1000);
     };
     MoBarChartHorizontal.prototype.renderGroupedBar = function (data) {
         var _this = this;
@@ -1437,13 +1418,12 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .enter()
             .append('rect')
             .attr('class', 'rect')
-            .attr('width', 0)
+            .attr('width', function (d) { return _this.xAxisScale(d.values[0]); })
             .attr('height', this.yAxisScale.bandwidth())
             .attr('y', function (d) { return _this.yAxisCategories(d.label); })
             .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
             .transition()
-            .duration(1000)
-            .attr('width', function (d) { return _this.xAxisScale(d.values[0]); });
+            .duration(1000);
         groupedBar.selectAll('.mo-data-text')
             .data(function (d) { return d.pieces || []; })
             .enter()
@@ -1471,16 +1451,14 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .enter()
             .append('rect')
             .attr('class', 'rect')
-            .attr('width', 0)
-            .attr('height', this.yAxisScale.bandwidth())
-            .attr('x', this.xAxisScale(0))
-            .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
-            .transition()
-            .duration(1000)
             .attr('x', function (d) { return d.x; })
             .attr('width', function (d) { return (_this.groupType === 'stacked100'
             ? _this.xAxisScale(d.percentage)
-            : _this.xAxisScale(d.values[0])); });
+            : _this.xAxisScale(d.values[0])); })
+            .attr('height', this.yAxisScale.bandwidth())
+            .style('fill', function (d, i) { return ChartService.getColor(i, _this.colors); })
+            .transition()
+            .duration(1000);
     };
     MoBarChartHorizontal.prototype.renderData = function (data) {
         var _this = this;
@@ -1569,6 +1547,10 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         Prop({ type: String }),
         __metadata("design:type", String)
     ], MoBarChartHorizontal.prototype, "groupType", void 0);
+    __decorate([
+        Prop({ type: Number, default: function () { return 20; } }),
+        __metadata("design:type", Number)
+    ], MoBarChartHorizontal.prototype, "maxDisplayCount", void 0);
     __decorate([
         Watch('data', { deep: true }),
         __metadata("design:type", Function),
@@ -1605,7 +1587,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   var __vue_inject_styles__$1 = function (inject) {
     if (!inject) { return }
-    inject("data-v-399b70b0_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-19548cae_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -2138,7 +2120,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   var __vue_inject_styles__$2 = function (inject) {
     if (!inject) { return }
-    inject("data-v-968dac10_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-968dac10_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -2187,6 +2169,7 @@ var LineChart = /** @class */ (function (_super) {
         _this.area = null;
         _this.maxValue = null;
         _this.refactoredData = [];
+        _this.displayData = [];
         return _this;
     }
     Object.defineProperty(LineChart.prototype, "actualMargin", {
@@ -2225,6 +2208,7 @@ var LineChart = /** @class */ (function (_super) {
     };
     LineChart.prototype.init = function () {
         var _this = this;
+        this.displayData = this.data.slice(0, this.maxDisplayCount);
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
@@ -2252,7 +2236,7 @@ var LineChart = /** @class */ (function (_super) {
             .attr('width', this.legendSvgWidth)
             .attr('height', this.legendSvgHeight);
         this.categories = [];
-        var limitedData = this.data.slice(-20);
+        var limitedData = this.displayData.slice(-20);
         this.maxValue = max(limitedData, function (d) { return max(d.values); });
         if (this.groupType === 'grouped' || this.groupType === 'cumulativeGrouped') {
             this.refactorGroupedData();
@@ -2303,7 +2287,7 @@ var LineChart = /** @class */ (function (_super) {
     };
     LineChart.prototype.refactorGroupedData = function () {
         var pieces = [];
-        this.data.forEach(function (group1) {
+        this.displayData.forEach(function (group1) {
             if (group1.pieces && group1.pieces.length > 0) {
                 group1.pieces.forEach(function (group2) {
                     pieces.push({
@@ -2388,7 +2372,7 @@ var LineChart = /** @class */ (function (_super) {
             ? this.aggregates.map(function (aggregate) {
                 var _a, _b;
                 var currency = aggregate.dataType === 'currency'
-                    ? (_b = (_a = _this.data[0]) === null || _a === void 0 ? void 0 : _a.reportMetadata) === null || _b === void 0 ? void 0 : _b.currency : '';
+                    ? (_b = (_a = _this.displayData[0]) === null || _a === void 0 ? void 0 : _a.reportMetadata) === null || _b === void 0 ? void 0 : _b.currency : '';
                 return currency ? aggregate.label + " (" + currency + ")" : aggregate.label;
             }).join(', ')
             : '');
@@ -2526,7 +2510,7 @@ var LineChart = /** @class */ (function (_super) {
     LineChart.prototype.renderData = function () {
         var _this = this;
         var text = this.mainSvg.selectAll('.line-text')
-            .data(this.data);
+            .data(this.displayData);
         text.enter()
             .append('text')
             .attr('class', 'mo-data-text')
@@ -2553,7 +2537,7 @@ var LineChart = /** @class */ (function (_super) {
         __metadata("design:type", Boolean)
     ], LineChart.prototype, "showValue", void 0);
     __decorate([
-        Prop({ type: Object, default: function () { return ({ top: 20, right: 10, bottom: 105, left: 60 }); } }),
+        Prop({ type: Object, default: function () { return ({ top: 20, right: 10, bottom: 105, left: 70 }); } }),
         __metadata("design:type", typeof (_a = typeof ChartMargin !== "undefined" && ChartMargin) === "function" ? _a : Object)
     ], LineChart.prototype, "margin", void 0);
     __decorate([
@@ -2580,6 +2564,10 @@ var LineChart = /** @class */ (function (_super) {
         Prop({ type: Number, default: function () { return 2; } }),
         __metadata("design:type", Number)
     ], LineChart.prototype, "decimal", void 0);
+    __decorate([
+        Prop({ type: Number, default: function () { return 20; } }),
+        __metadata("design:type", Number)
+    ], LineChart.prototype, "maxDisplayCount", void 0);
     __decorate([
         Watch('data', { deep: true }),
         __metadata("design:type", Function),
@@ -2614,7 +2602,7 @@ __vue_render__$3._withStripped = true;
   /* style */
   var __vue_inject_styles__$3 = function (inject) {
     if (!inject) { return }
-    inject("data-v-86463c58_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-4cbd33e4_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -2707,7 +2695,7 @@ var FunnelChart = /** @class */ (function (_super) {
         this.funnelWidth = this.svgWidth;
         this.funnelHeight = this.svgHeight;
         // 计算顶部和底部的宽度
-        var minHeight = 20; // 最小高度
+        var minHeight = 30; // 最小高度
         var funnelBottomOffset = 50;
         var accumulatedY = 50;
         var availableHeight = this.funnelHeight - accumulatedY - funnelBottomOffset;
@@ -2936,7 +2924,7 @@ __vue_render__$4._withStripped = true;
   /* style */
   var __vue_inject_styles__$4 = function (inject) {
     if (!inject) { return }
-    inject("data-v-e34b3a54_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-314bbc97_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -3266,7 +3254,7 @@ __vue_render__$5._withStripped = true;
   /* style */
   var __vue_inject_styles__$5 = function (inject) {
     if (!inject) { return }
-    inject("data-v-037eb460_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}\n.mo-gauge-chart {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}", map: undefined, media: undefined });
+    inject("data-v-037eb460_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}\n.mo-gauge-chart {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -3348,7 +3336,7 @@ __vue_render__$6._withStripped = true;
   /* style */
   var __vue_inject_styles__$6 = function (inject) {
     if (!inject) { return }
-    inject("data-v-7f06a562_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-7f06a562_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -3395,6 +3383,7 @@ var ScatterChart = /** @class */ (function (_super) {
         _this.line = null;
         _this.categories = [];
         _this.additionalHeight = 0;
+        _this.displayData = [];
         return _this;
     }
     ScatterChart.prototype.onDataChanged = function () {
@@ -3416,6 +3405,7 @@ var ScatterChart = /** @class */ (function (_super) {
     };
     ScatterChart.prototype.init = function () {
         var _this = this;
+        this.displayData = this.data.slice(0, this.maxDisplayCount);
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
@@ -3442,7 +3432,7 @@ var ScatterChart = /** @class */ (function (_super) {
             .append('svg')
             .attr('width', this.legendSvgWidth)
             .attr('height', this.legendSvgHeight);
-        var limitedData = this.data.slice(-20);
+        var limitedData = this.displayData.slice(-20);
         var xMaxValue = max(limitedData, function (d) { return d.values[0]; });
         var yMaxValue = max(limitedData, function (d) { return d.values[1]; });
         if (this.groupType === 'grouped') {
@@ -3495,7 +3485,7 @@ var ScatterChart = /** @class */ (function (_super) {
         var _a, _b, _c, _d;
         if (this.aggregates.length > 0) {
             var currency = this.aggregates[0].dataType === 'currency'
-                ? (_b = (_a = this.data[0]) === null || _a === void 0 ? void 0 : _a.reportMetadata) === null || _b === void 0 ? void 0 : _b.currency : '';
+                ? (_b = (_a = this.displayData[0]) === null || _a === void 0 ? void 0 : _a.reportMetadata) === null || _b === void 0 ? void 0 : _b.currency : '';
             var xLabel = currency
                 ? this.aggregates[0].label + " (" + currency + ")"
                 : this.aggregates[0].label;
@@ -3522,14 +3512,15 @@ var ScatterChart = /** @class */ (function (_super) {
             .style('fill', 'none');
         if (this.aggregates.length > 1) {
             var currency = this.aggregates[1].dataType === 'currency'
-                ? (_d = (_c = this.data[0]) === null || _c === void 0 ? void 0 : _c.reportMetadata) === null || _d === void 0 ? void 0 : _d.currency : '';
+                ? (_d = (_c = this.displayData[0]) === null || _c === void 0 ? void 0 : _c.reportMetadata) === null || _d === void 0 ? void 0 : _d.currency : '';
             var yLabel = currency
                 ? this.aggregates[1].label + " (" + currency + ")"
                 : this.aggregates[1].label;
             this.mainSvg.append('text')
                 .attr('class', 'mo-axis-label')
                 .attr('x', -this.height / 2)
-                .attr('y', -40)
+                .attr('y', -this.margin.left)
+                .attr('dy', '1em')
                 .attr('transform', 'rotate(-90)')
                 .text(yLabel);
         }
@@ -3602,7 +3593,7 @@ var ScatterChart = /** @class */ (function (_super) {
             this.categories.forEach(function (c, i) { return render(c.value, i); });
         }
         else {
-            render(this.data, 0);
+            render(this.displayData, 0);
         }
     };
     ScatterChart.prototype.renderLabel = function () {
@@ -3634,7 +3625,7 @@ var ScatterChart = /** @class */ (function (_super) {
     };
     ScatterChart.prototype.refactorGroupedData = function () {
         var pieces = [];
-        this.data.forEach(function (group1) {
+        this.displayData.forEach(function (group1) {
             if (group1.pieces && group1.pieces.length > 0) {
                 group1.pieces.forEach(function (group2) {
                     pieces.push({
@@ -3664,7 +3655,7 @@ var ScatterChart = /** @class */ (function (_super) {
         __metadata("design:type", Array)
     ], ScatterChart.prototype, "aggregates", void 0);
     __decorate([
-        Prop({ type: Object, default: function () { return ({ top: 20, right: 20, bottom: 85, left: 50 }); } }),
+        Prop({ type: Object, default: function () { return ({ top: 20, right: 20, bottom: 85, left: 70 }); } }),
         __metadata("design:type", typeof (_a = typeof ChartMargin !== "undefined" && ChartMargin) === "function" ? _a : Object)
     ], ScatterChart.prototype, "margin", void 0);
     __decorate([
@@ -3687,6 +3678,10 @@ var ScatterChart = /** @class */ (function (_super) {
         Prop({ type: String }),
         __metadata("design:type", String)
     ], ScatterChart.prototype, "labelColor", void 0);
+    __decorate([
+        Prop({ type: Number, default: function () { return 20; } }),
+        __metadata("design:type", Number)
+    ], ScatterChart.prototype, "maxDisplayCount", void 0);
     __decorate([
         Watch('data', { deep: true }),
         __metadata("design:type", Function),
@@ -3721,7 +3716,7 @@ __vue_render__$7._withStripped = true;
   /* style */
   var __vue_inject_styles__$7 = function (inject) {
     if (!inject) { return }
-    inject("data-v-2890e564_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-19da13ee_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -3831,7 +3826,64 @@ var __vue_render__$8 = function () {
                       },
                     },
                   },
-                  [_vm._v("\n        " + _vm._s(header.label) + "\n      ")]
+                  [
+                    _c(
+                      "div",
+                      {
+                        staticClass: "header-label",
+                        class: { "have-sort": header.sortOrder },
+                      },
+                      [
+                        _vm._v(
+                          "\n          " + _vm._s(header.label) + "\n          "
+                        ),
+                        header.sortOrder
+                          ? _c("span", { staticClass: "sort-icon" }, [
+                              header.sortOrder === "asc"
+                                ? _c(
+                                    "svg",
+                                    {
+                                      staticStyle: {
+                                        width: "14px",
+                                        height: "14px",
+                                      },
+                                      attrs: {
+                                        "aria-hidden": "true",
+                                        viewBox: "0 0 520 520",
+                                      },
+                                    },
+                                    [
+                                      _c("path", {
+                                        attrs: {
+                                          d: "M414 210c8-8 8-19 0-27L264 36a20 20 0 00-28 0L86 183c-8 8-8 19 0 27l28 27c8 8 20 8 28 0l47-46c8-8 22-2 22 9v270c0 10 9 20 20 20h40c11 0 20-11 20-20V200c0-12 14-17 22-9l47 46c8 8 20 8 28 0z",
+                                          fill: "rgb(91, 220, 239)",
+                                        },
+                                      }) ]
+                                  )
+                                : header.sortOrder === "desc"
+                                ? _c(
+                                    "svg",
+                                    {
+                                      staticStyle: {
+                                        width: "14px",
+                                        height: "14px",
+                                      },
+                                      attrs: {
+                                        "aria-hidden": "true",
+                                        viewBox: "0 0 520 520",
+                                      },
+                                    },
+                                    [
+                                      _c("path", {
+                                        attrs: {
+                                          d: "M96 310c-8 8-8 19 0 27l150 147c8 8 20 8 28 0l151-147c8-8 8-19 0-27l-28-27a20 20 0 00-28 0l-47 46c-8 8-22 3-22-9V50c0-10-9-20-20-20h-40c-11 0-20 11-20 20v270c0 12-14 17-22 9l-47-46a20 20 0 00-28 0z",
+                                          fill: "rgb(91, 220, 239)",
+                                        },
+                                      }) ]
+                                  )
+                                : _vm._e() ])
+                          : _vm._e() ]
+                    ) ]
                 )
               }),
               0
@@ -3905,7 +3957,7 @@ __vue_render__$8._withStripped = true;
   /* style */
   var __vue_inject_styles__$8 = function (inject) {
     if (!inject) { return }
-    inject("data-v-44e6dcb5_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 44px;\n  line-height: 44px;\n  text-align: left;\n  padding: 0 10px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 13px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 15rem;\n  height: 100%;\n  overflow: auto;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-2bc2bab2_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  fill: #fff;\n  font-size: 1.6rem;\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n  font-size: 1.8rem;\n}\n.mo-summary-value {\n  fill: #00A383;\n  font-size: 1.8rem;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: 1.4rem;\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: 1.4rem;\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  width: 100%;\n  height: 20px;\n  text-align: center;\n  color: #3e4759;\n  font-size: 1.4rem;\n  clear: both;\n}\n.mo-legend-text {\n  font-size: 1.4rem;\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: 1.4rem;\n  fill: #fff;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  font-size: 4rem;\n  font-weight: 200;\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n.mo-metric .mo-metric-label {\n  padding-left: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: 6rem;\n  font-weight: 500;\n}\n.mo-table {\n  width: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    color: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -4265,6 +4317,7 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
         var tableColumns = visualizationProperties.tableColumns;
         var groupingColumnInfo = reportExtendedMetadata.groupingColumnInfo, aggregateColumnInfo = reportExtendedMetadata.aggregateColumnInfo, detailColumnInfo = reportExtendedMetadata.detailColumnInfo;
         var sortIndex = -1;
+        var sortOrder = '';
         var sortColumnDataType = '';
         var groupLength = propGroupings.length;
         var group1IndexArray = [];
@@ -4274,8 +4327,18 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
         var getTableHeaders = function () {
             table.headers = [];
             tableColumns.forEach(function (column, index) {
+                sortOrder = '';
                 if (sort && sort.column === column.column) {
                     sortIndex = index;
+                    sortOrder = sort.sortOrder.toLowerCase();
+                }
+                else if (groupLength > 0) {
+                    propGroupings.forEach(function (groupingColumn) {
+                        if (groupingColumn && groupingColumn.sortAggregate === column.column) {
+                            sortIndex = index;
+                            sortOrder = groupingColumn.sortOrder.toLowerCase();
+                        }
+                    });
                 }
                 if (column.showTotal) {
                     showTotalIndexArray.push(index);
@@ -4297,6 +4360,9 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
                 else if (detailColumnInfo[column.column]) {
                     header = detailColumnInfo[column.column];
                 }
+                if (sortOrder) {
+                    header.sortOrder = sortOrder;
+                }
                 table.headers.push(header);
             });
         };
@@ -4308,11 +4374,13 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
                     group1IndexArray.forEach(function (group1Index) {
                         row.cells[group1Index] = {
                             label: group1.label,
+                            value: group1.value,
                         };
                     });
                     group2IndexArray.forEach(function (group2Index) {
                         row.cells[group2Index] = {
                             label: group2.label,
+                            value: group2.value,
                         };
                     });
                     var aggregates = factMap[group2.key + "!T"].aggregates;
@@ -4338,12 +4406,16 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
                     group1IndexArray.forEach(function (group1Index) {
                         row.cells[group1Index] = {
                             label: group.label,
+                            value: group.value,
                         };
                     });
                 }
                 else {
                     group2IndexArray.forEach(function (group2Index) {
-                        row.cells[group2Index] = { label: group.label };
+                        row.cells[group2Index] = {
+                            label: group.label,
+                            value: group.value,
+                        };
                     });
                 }
                 var aggregates = factMap[group.key + "!T"].aggregates;
@@ -4368,6 +4440,7 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
                     dataRow.dataCells.forEach(function (dataCell) {
                         row.cells.push({
                             label: dataCell.label,
+                            value: dataCell.value,
                         });
                     });
                     table.rows.push(row);
@@ -4394,12 +4467,20 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
                 var aLabel = (a.cells[sortIndex].label).toLowerCase();
                 var bLabel = (b.cells[sortIndex].label).toLowerCase();
                 if (sortColumnDataType === 'date'
-                    || sortColumnDataType === 'datetime') {
+                    || sortColumnDataType === 'datetime'
+                    || sortColumnDataType === 'time') {
                     aValue = aValue ? new Date(aValue) : aValue;
                     bValue = bValue ? new Date(bValue) : bValue;
                     aLabel = (aLabel && aLabel !== '-') ? new Date(aLabel) : new Date('1/1/1970 00:00 am');
                     bLabel = (bLabel && bLabel !== '-') ? new Date(bLabel) : new Date('1/1/1970 00:00 am');
                 }
+                else if (sortColumnDataType === 'currency'
+                    || sortColumnDataType === 'percent'
+                    || sortColumnDataType === 'double'
+                    || sortColumnDataType === 'int') {
+                    aValue = aValue && aValue.amount ? aValue.amount : aValue;
+                    bValue = bValue && bValue.amount ? bValue.amount : bValue;
+                }
                 if (sort.sortOrder === 'desc') {
                     if (bValue) {
                         return bValue > aValue ? 1 : -1;
@@ -5925,7 +6006,7 @@ var SFHorizontalBarChart = /** @class */ (function (_super) {
                     && this.metadata.groupByType === 'grouped')) {
                 return 20;
             }
-            return 15;
+            return 17;
         },
         enumerable: false,
         configurable: true
@@ -6694,7 +6775,7 @@ var __vue_script__$k = SFDashboardChart;
   /* style */
   var __vue_inject_styles__$k = function (inject) {
     if (!inject) { return }
-    inject("data-v-f74e543c_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.sf-analytics-chart {\n  width: 100%;\n  padding: 10px;\n  background-color: #fff;\n  transform: translate3d(0, 0, 0);\n}\n.sf-analytics-chart .sf-analytics-text {\n  width: 100%;\n  height: 100%;\n  font-size: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.sf-analytics-chart .sf-analytics-error {\n  width: 100%;\n  height: 100%;\n  font-size: 1.4rem;\n  color: #d74c3b;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.sf-analytics-chart.sf-metric-chart {\n  padding: 20px 10px;\n  height: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n.sf-analytics-chart {\n    background-color: #1c1c1e;\n}\n.sf-analytics-chart .sf-analytics-text {\n    color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-f74e543c_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.sf-analytics-chart {\n  width: 100%;\n  padding: 10px;\n  background-color: #fff;\n  transform: translate3d(0, 0, 0);\n}\n.sf-analytics-chart .sf-analytics-text {\n  width: 100%;\n  height: 100%;\n  font-size: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.sf-analytics-chart .sf-analytics-error {\n  width: 100%;\n  height: 100%;\n  font-size: 1.4rem;\n  color: #d74c3b;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n@media (prefers-color-scheme: dark) {\n.sf-analytics-chart {\n    background-color: #1c1c1e;\n}\n.sf-analytics-chart .sf-analytics-text {\n    color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -6866,7 +6947,7 @@ var __vue_script__$l = SFReportChart;
   /* style */
   var __vue_inject_styles__$l = function (inject) {
     if (!inject) { return }
-    inject("data-v-6f6bdd71_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.sf-analytics-chart {\n  width: 100%;\n  padding: 10px;\n  background-color: #fff;\n  transform: translate3d(0, 0, 0);\n}\n.sf-analytics-chart .sf-analytics-text {\n  width: 100%;\n  height: 100%;\n  font-size: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.sf-analytics-chart .sf-analytics-error {\n  width: 100%;\n  height: 100%;\n  font-size: 1.4rem;\n  color: #d74c3b;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.sf-analytics-chart.sf-metric-chart {\n  padding: 20px 10px;\n  height: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n.sf-analytics-chart {\n    background-color: #1c1c1e;\n}\n.sf-analytics-chart .sf-analytics-text {\n    color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-6f6bdd71_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.sf-analytics-chart {\n  width: 100%;\n  padding: 10px;\n  background-color: #fff;\n  transform: translate3d(0, 0, 0);\n}\n.sf-analytics-chart .sf-analytics-text {\n  width: 100%;\n  height: 100%;\n  font-size: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.sf-analytics-chart .sf-analytics-error {\n  width: 100%;\n  height: 100%;\n  font-size: 1.4rem;\n  color: #d74c3b;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n@media (prefers-color-scheme: dark) {\n.sf-analytics-chart {\n    background-color: #1c1c1e;\n}\n.sf-analytics-chart .sf-analytics-text {\n    color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */