moblor-vue 0.1.39 → 0.1.41

package/dist/moblor-components.esm.js

@@ -1,7 +1,7 @@
 import 'd3-transition';
 import { Component, Vue, Prop, Watch, Mixins, Inject, Provide } from 'vue-property-decorator';
 import { scaleBand, scaleLinear, scalePoint } from 'd3-scale';
-import { axisBottom, axisLeft, axisRight, axisTop } from 'd3-axis';
+import { axisLeft, axisBottom, axisRight, axisTop } from 'd3-axis';
 import { select } from 'd3-selection';
 import { format } from 'd3-format';
 import { max, min, sum, group } from 'd3-array';
@@ -89,7 +89,6 @@ var ChartMixins = /** @class */ (function (_super) {
     return ChartMixins;
 }(Vue));
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 var ChartService = /** @class */ (function () {
     function ChartService() {
     }
@@ -252,6 +251,36 @@ var ChartService = /** @class */ (function () {
         }
         return valueText;
     };
+    /**
+     * 合并占比小于 threshold 的 group 为 Others
+     */
+    ChartService.combineSmallGroups = function (data, threshold, othersLabel) {
+        if (threshold === void 0) { threshold = 0.05; }
+        if (othersLabel === void 0) { othersLabel = 'Others'; }
+        var total = data.reduce(function (sum, d) { return sum + d.values[0]; }, 0);
+        if (total === 0)
+            { return []; }
+        var largeGroups = [];
+        var othersValue = 0;
+        var othersPieces = [];
+        data.forEach(function (d) {
+            var ratio = d.values[0] / total;
+            if (ratio < threshold) {
+                othersValue += d.values[0];
+                if (d.pieces) {
+                    othersPieces = othersPieces.concat(d.pieces);
+                }
+            }
+            else {
+                largeGroups.push(d);
+            }
+        });
+        if (othersValue > 0) {
+            var base = data.find(function (d) { return d.label !== othersLabel; }) || data[0];
+            largeGroups.push(__assign(__assign({}, base), { label: othersLabel, values: [othersValue], pieces: othersPieces.length > 0 ? othersPieces : undefined }));
+        }
+        return largeGroups.filter(function (d) { return d.values[0] > 0; });
+    };
     return ChartService;
 }());
 
@@ -259,6 +288,12 @@ var MoBarChart = /** @class */ (function (_super) {
     __extends(MoBarChart, _super);
     function MoBarChart() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 常量定义
+        _this.ITEM_HEIGHT = 25;
+        _this.TITLE_HEIGHT = 40;
+        _this.SECTION_SPACING = 60;
+        _this.SEPARATOR_HEIGHT = 40;
+        _this.CHART_TO_ANNOTATION_SPACING = 120;
         _this.MIN_WIDTH = 20;
         _this.svgWidth = 0;
         _this.svgHeight = 0;
@@ -277,6 +312,7 @@ var MoBarChart = /** @class */ (function (_super) {
         _this.categories = [];
         _this.needScroll = false;
         _this.additionalHeight = 0;
+        _this.labelGroup = null;
         return _this;
     }
     Object.defineProperty(MoBarChart.prototype, "actualMargin", {
@@ -326,6 +362,23 @@ var MoBarChart = /** @class */ (function (_super) {
             this.renderLine(data);
         }
         this.renderData(data);
+        // 清除现有的标签
+        this.labelGroup.selectAll('*').remove();
+        // 设置注解组的位置
+        var containerWidth = this.getWidth();
+        var isWideScreen = containerWidth >= 694;
+        var isStacked = this.groupType === 'stacked' || this.groupType === 'stacked100';
+        var translateX = this.actualMargin.left;
+        var translateY = this.actualMargin.top;
+        if (isWideScreen && isStacked) {
+            // 宽屏堆叠图：注解在右侧
+            translateX = this.actualMargin.left + this.width + 80;
+        }
+        else {
+            // 窄屏或非堆叠图：注解在底部
+            translateY = this.actualMargin.top + this.height + 180;
+        }
+        this.labelGroup.attr('transform', "translate(" + translateX + ", " + translateY + ")");
         if (this.categories.length > 0) {
             this.renderLabel();
         }
@@ -335,78 +388,153 @@ var MoBarChart = /** @class */ (function (_super) {
     };
     MoBarChart.prototype.init = function () {
         var _this = this;
+        var _a, _b;
         var containerWidth = this.getWidth();
-        // 限制显示的数据数量为前20条
-        var displayData = this.data.slice(0, this.maxDisplayCount);
-        var barCount = displayData.length;
-        // 计算每个柱子的最小宽度和间距
-        var minBarWidth = 40;
-        var minTotalWidth = barCount * minBarWidth;
-        // 计算实际的图表宽度，确保不出现滚动条
-        this.svgWidth = Math.min(containerWidth, Math.max(minTotalWidth, containerWidth));
-        // 计算内部宽度和高度
-        this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
-        this.height = Math.min(containerWidth >= 694 ? containerWidth / 2 : containerWidth, 400) - this.actualMargin.top - this.actualMargin.bottom;
-        // 设置SVG高度
-        this.svgHeight = this.height + this.actualMargin.top + this.actualMargin.bottom;
-        // 更新x轴比例尺，增加柱子间距
+        var isWideScreen = containerWidth >= 694;
+        var isStacked = this.groupType === 'stacked' || this.groupType === 'stacked100';
+        // 设置SVG尺寸
+        this.svgWidth = containerWidth;
+        // 计算最大值
+        var chartMaxValue = 0;
+        if (this.groupType === 'grouped' && this.categories.length > 0) {
+            chartMaxValue = ChartService.getMaxValue(this.data);
+        }
+        else {
+            chartMaxValue = max(this.data, 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);
+        // 计算图表宽度
+        if (isWideScreen && isStacked) {
+            this.width = containerWidth * 0.75 - this.actualMargin.left - this.actualMargin.right;
+        }
+        else {
+            this.width = containerWidth - this.actualMargin.left - this.actualMargin.right;
+        }
+        // 计算图表区域的合适高度
+        var minHeight = 200;
+        var maxHeight = 300;
+        var defaultHeight = this.width * 0.4;
+        this.height = Math.min(maxHeight, Math.max(minHeight, defaultHeight));
+        // 计算注解区域所需的高度
+        var legendsHeight = 0;
+        var measureHeight = 0;
+        // 计算 legends 高度
+        if (this.categories.length > 0) {
+            var hasTitle = Boolean((_b = this.groupings[1]) === null || _b === void 0 ? void 0 : _b.label);
+            var titleHeight = hasTitle ? this.TITLE_HEIGHT : 0;
+            var itemsHeight = this.categories.length * this.ITEM_HEIGHT;
+            legendsHeight = titleHeight + itemsHeight;
+        }
+        // 计算 measure 高度
+        if (this.aggregates.length > 1) {
+            var separatorHeight = this.categories.length > 0 ? this.SEPARATOR_HEIGHT : 0;
+            var itemsHeight = this.aggregates.length * this.ITEM_HEIGHT;
+            measureHeight = this.TITLE_HEIGHT + separatorHeight + itemsHeight;
+        }
+        // 计算注解总高度（包含间距）
+        var totalAnnotationHeight = 0;
+        if (legendsHeight > 0 && measureHeight > 0) {
+            totalAnnotationHeight = legendsHeight + this.SECTION_SPACING + measureHeight + 40;
+        }
+        else {
+            totalAnnotationHeight = legendsHeight + measureHeight;
+        }
+        // 计算SVG总高度
+        if (isWideScreen && isStacked) {
+            // 宽屏堆叠图：使用图表高度和注解高度的较大值
+            var chartHeight = this.height + this.actualMargin.top + this.actualMargin.bottom;
+            var annotationHeight = totalAnnotationHeight + this.actualMargin.top
+                + this.actualMargin.bottom;
+            this.svgHeight = Math.max(chartHeight, annotationHeight);
+        }
+        else {
+            // 窄屏或非堆叠图：图表高度 + 注解高度 + 额外间距
+            this.svgHeight = this.height + this.CHART_TO_ANNOTATION_SPACING + totalAnnotationHeight
+                + this.actualMargin.top + this.actualMargin.bottom;
+        }
+        // 清除现有的SVG
+        select(this.$el).selectAll('svg').remove();
+        // 创建新的SVG
+        var mainSvg = select(this.$el)
+            .append('svg')
+            .attr('width', this.svgWidth)
+            .attr('height', this.svgHeight);
+        // 创建图表组
+        this.svg = mainSvg
+            .append('g')
+            .attr('class', 'chart-group')
+            .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
+        // 创建注解组
+        this.labelGroup = mainSvg
+            .append('g')
+            .attr('class', 'label-group');
+        // 配置x轴比例尺
         this.xAxisScale = scaleBand()
-            .domain(displayData.map(function (d) { return d.label; }))
+            .domain(this.data.slice(0, this.maxDisplayCount).map(function (d) { return d.label; }))
             .range([0, this.width])
             .padding(0.3)
             .round(true);
+        // 配置y轴
+        this.yAxisScale = scaleLinear()
+            .domain([0, chartMaxValue])
+            .range([this.height, 0])
+            .nice();
+        this.yAxis = axisLeft(this.yAxisScale)
+            .tickSize(0)
+            .tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
         // 处理分组数据
         if (this.groupType && this.groupType !== 'none') {
             this.categories = [];
-            displayData.forEach(function (d) {
+            this.data.forEach(function (d) {
                 if (d.pieces && d.pieces.length > _this.categories.length) {
-                    _this.categories = d.pieces.map(function (piece) { return piece.label; });
+                    _this.categories = d.pieces.map(function (p) { return p.label; });
                 }
             });
         }
-        // 计算附加高度（限制最大高度）
+        // 配置分组比例尺
         if (this.categories.length > 0) {
-            this.additionalHeight = Math.min(this.categories.length * 25 + 50, 150);
+            this.xAxisCategories = scaleBand()
+                .domain(this.categories)
+                .range([0, this.xAxisScale.bandwidth()])
+                .padding(0.4)
+                .round(false);
         }
+        // 配置聚合比例尺
         if (this.aggregates.length > 1) {
-            this.additionalHeight += Math.min(this.aggregates.length * 25 + 50, 150);
+            var labels = this.aggregates.map(function (a) { return a.label; });
+            this.xAxisAggregates = scaleBand()
+                .domain(labels)
+                .range([0, this.xAxisScale.bandwidth()])
+                .padding(0.4)
+                .round(false);
         }
-        this.svgHeight += this.additionalHeight;
         // 计算y轴范围
-        var maxValue = 0;
-        var minValue = 0;
+        var maxVal = 0;
+        var minVal = 0;
         var secondYMaxValue = 0;
         var secondYMinValue = 0;
         if (this.groupType === 'grouped') {
-            maxValue = ChartService.getMaxValue(displayData) || 0;
-            minValue = ChartService.getMinValue(displayData) || 0;
+            maxVal = ChartService.getMaxValue(this.data) || 0;
+            minVal = ChartService.getMinValue(this.data) || 0;
         }
         else {
-            maxValue = max(displayData, function (d) { return d.values[0]; }) || 0;
-            minValue = min(displayData, function (d) { return d.values[0]; }) || 0;
+            maxVal = max(this.data, function (d) { return d.values[0]; }) || 0;
+            minVal = min(this.data, 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;
         }
         // 为y轴添加一些边距，确保数值标签不会被截断
-        var yAxisPadding = 0.1;
-        var yAxisMax = maxValue + Math.abs(maxValue - minValue) * yAxisPadding;
+        var yPadding = 0.1;
+        var yMax = maxVal + Math.abs(maxVal - minVal) * yPadding;
         // 只在有负数时才设置负数范围
-        var yAxisMin = minValue < 0 ? minValue - Math.abs(maxValue - minValue) * yAxisPadding : 0;
+        var yMin = minVal < 0 ? minVal - Math.abs(maxVal - minVal) * yPadding : 0;
         // 配置坐标轴
-        this.xAxisCategories = scaleBand()
-            .domain(this.categories)
-            .range([0, this.xAxisScale.bandwidth()])
-            .padding(0.4)
-            .round(false);
-        if (this.aggregates.length > 1) {
-            this.xAxisAggregates = scaleBand()
-                .domain(this.aggregates.map(function (a) { return a.label; }))
-                .range([0, this.xAxisScale.bandwidth()])
-                .padding(0.4)
-                .round(false);
-        }
         this.xAxis = axisBottom(this.xAxisScale)
             .tickSize(0)
             .tickFormat(function (d) { return ChartService
@@ -423,7 +551,7 @@ var MoBarChart = /** @class */ (function (_super) {
         else if (this.hasLineChart) {
             if (this.hasSecondAxis) {
                 this.yAxisScale = scaleLinear()
-                    .domain([yAxisMin, yAxisMax])
+                    .domain([yMin, yMax])
                     .range([this.height, 0])
                     .nice();
                 this.yAxis = axisLeft(this.yAxisScale)
@@ -443,7 +571,7 @@ var MoBarChart = /** @class */ (function (_super) {
             }
             else {
                 this.yAxisScale = scaleLinear()
-                    .domain([yAxisMin, yAxisMax])
+                    .domain([yMin, yMax])
                     .range([this.height, 0])
                     .nice();
                 this.yAxis = axisLeft(this.yAxisScale)
@@ -457,20 +585,13 @@ var MoBarChart = /** @class */ (function (_super) {
         }
         else {
             this.yAxisScale = scaleLinear()
-                .domain([yAxisMin, yAxisMax])
+                .domain([yMin, yMax])
                 .range([this.height, 0])
                 .nice();
             this.yAxis = axisLeft(this.yAxisScale)
                 .tickSize(0)
                 .tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
         }
-        // 创建SVG元素
-        this.svg = select(this.$el)
-            .append('svg')
-            .attr('width', this.svgWidth)
-            .attr('height', this.svgHeight)
-            .append('g')
-            .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
     };
     MoBarChart.prototype.lineValue = function (d) {
         return d.values[this.secondYIndex];
@@ -801,101 +922,98 @@ var MoBarChart = /** @class */ (function (_super) {
         })
             .text(function (d) { return ChartService.formatValue(d.values[0], '', _this.decimal); });
     };
-    MoBarChart.prototype.renderLabel = function () {
+    MoBarChart.prototype.renderMeasure = function () {
         var _this = this;
-        var labelGroup = this.svg.append('g');
-        var containerWidth = this.getWidth();
-        if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
-            && containerWidth >= 694) {
-            labelGroup.attr('transform', "translate( " + this.svgWidth + ",\n        -" + (this.svgHeight - this.additionalHeight - 100) + " )");
+        var _a;
+        if (this.aggregates.length === 0) {
+            return;
         }
-        else {
-            labelGroup.attr('transform', 'translate( 0, 0 )');
-            labelGroup.append('line')
-                .attr('x1', -this.actualMargin.left)
-                .attr('y1', this.actualMargin.top + this.actualMargin.bottom + this.height)
-                .attr('x2', this.width + this.actualMargin.left + this.actualMargin.right)
-                .attr('y2', this.actualMargin.top + this.actualMargin.bottom + this.height)
-                .attr('class', 'mo-label-line');
+        // 计算measure的起始位置
+        var startY = 0;
+        if (this.categories.length > 0) {
+            var hasTitle = Boolean((_a = this.groupings[1]) === null || _a === void 0 ? void 0 : _a.label);
+            var titleHeight = hasTitle ? this.TITLE_HEIGHT : 0;
+            var itemsHeight = this.categories.length * 25;
+            startY = titleHeight + itemsHeight + 40;
         }
-        labelGroup.append('text')
+        // 添加分隔线
+        if (this.categories.length > 0) {
+            this.labelGroup.append('line')
+                .attr('x1', 0)
+                .attr('y1', startY - 20)
+                .attr('x2', 150)
+                .attr('y2', startY - 20)
+                .attr('class', 'mo-label-line')
+                .style('stroke', '#ccc')
+                .style('stroke-width', 1);
+        }
+        // 添加measure标题
+        this.labelGroup.append('text')
             .attr('x', 0)
-            .attr('y', this.actualMargin.top + this.actualMargin.bottom + this.height + 25)
+            .attr('y', startY + 5)
             .attr('class', 'mo-label-title')
-            .text(this.groupings[1].label);
-        var legends = labelGroup.selectAll('.mo-label')
-            .data(this.categories)
-            .enter()
+            .text('Measure');
+        startY += 30;
+        // 添加measure图例
+        var measures = this.labelGroup.selectAll('.mo-measure')
+            .data(this.aggregates);
+        var measuresEnter = measures.enter()
             .append('g')
-            .attr('class', 'mo-label');
-        legends.append('rect')
+            .attr('class', 'mo-measure');
+        // measure矩形
+        measuresEnter.append('rect')
             .attr('width', 15)
             .attr('height', 15)
             .attr('x', 0)
-            // eslint-disable-next-line vue/max-len
-            .attr('y', function (d, i) { return _this.actualMargin.top + _this.actualMargin.bottom + _this.height + 40 + i * 25; })
+            .attr('y', function (d, i) {
+            var y = startY + i * 25;
+            return y;
+        })
             .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
-        legends.append('text')
+        // measure文本
+        measuresEnter.append('text')
             .attr('x', 25)
-            // eslint-disable-next-line vue/max-len
-            .attr('y', function (d, i) { return _this.actualMargin.top + _this.actualMargin.bottom + _this.height + 52 + i * 25; })
+            .attr('y', function (d, i) {
+            var y = startY + 12 + i * 25;
+            return y;
+        })
             .attr('class', 'mo-legend-text')
-            .style('fill', function () { return _this.labelColor || ''; })
-            .text(function (d) { return d; });
+            .text(function (d) { return d.label; });
     };
-    MoBarChart.prototype.renderMeasure = function () {
+    MoBarChart.prototype.renderLabel = function () {
         var _this = this;
-        var marginTop = this.actualMargin.top + this.actualMargin.bottom + this.height;
-        if (this.categories.length > 0) {
-            marginTop += this.categories.length * 25 + 50;
-        }
-        var labelGroup = this.svg.append('g');
-        var containerWidth = this.getWidth();
-        if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
-            && containerWidth >= 694) {
-            labelGroup.attr('transform', "translate( " + this.svgWidth + ",\n        -" + (this.svgHeight - this.additionalHeight - 100) + " )");
-        }
-        else {
-            labelGroup.attr('transform', 'translate( 0, 0 )');
+        var _a;
+        if (this.categories.length === 0)
+            { return; }
+        // 添加标题
+        var currentY = 0;
+        if ((_a = this.groupings[1]) === null || _a === void 0 ? void 0 : _a.label) {
+            this.labelGroup.append('text')
+                .attr('x', 0)
+                .attr('y', 20)
+                .attr('class', 'mo-label-title')
+                .text(this.groupings[1].label);
+            currentY = this.TITLE_HEIGHT;
         }
-        labelGroup.append('line')
-            .attr('x1', -this.actualMargin.left)
-            .attr('y1', marginTop)
-            .attr('x2', this.width + this.actualMargin.left + this.actualMargin.right)
-            .attr('y2', marginTop)
-            .attr('class', 'mo-label-line');
-        labelGroup.append('text')
-            .attr('x', 0)
-            .attr('y', marginTop + 25)
-            .attr('class', 'mo-label-title')
-            .text('Measure');
-        var legends = labelGroup.selectAll('.mo-label')
-            .data((this.hasLineChart && this.categories.length > 0)
-            ? this.aggregates.slice(1, this.aggregates.length)
-            : this.aggregates)
+        // 添加图例
+        var legends = this.labelGroup.selectAll('.mo-legend')
+            .data(this.categories)
             .enter()
             .append('g')
-            .attr('class', 'mo-label');
+            .attr('class', 'mo-legend');
+        // 图例矩形
         legends.append('rect')
             .attr('width', 15)
             .attr('height', 15)
             .attr('x', 0)
-            // eslint-disable-next-line vue/max-len
-            .attr('y', function (d, i) { return marginTop + 40 + i * 25; })
-            // eslint-disable-next-line vue/max-len
-            .attr('fill', function (d, i) {
-            var index = (_this.hasLineChart && _this.categories.length > 0)
-                ? (_this.categories.length || 1)
-                : i;
-            return ChartService.getColor(index, _this.colors);
-        });
+            .attr('y', function (d, i) { return currentY + i * 25; })
+            .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
+        // 图例文本
         legends.append('text')
             .attr('x', 25)
-            // eslint-disable-next-line vue/max-len
-            .attr('y', function (d, i) { return marginTop + 52 + i * 25; })
+            .attr('y', function (d, i) { return currentY + 12 + i * 25; })
             .attr('class', 'mo-legend-text')
-            .style('fill', function () { return _this.labelColor || ''; })
-            .text(function (d) { return d.label; });
+            .text(function (d) { return d; });
     };
     var _a;
     __decorate([
@@ -931,7 +1049,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: 30, bottom: 120, left: 50 }); } }),
+        Prop({ type: Object, default: function () { return ({ top: 20, right: 30, bottom: 20, left: 50 }); } }),
         __metadata("design:type", typeof (_a = typeof ChartMargin !== "undefined" && ChartMargin) === "function" ? _a : Object)
     ], MoBarChart.prototype, "margin", void 0);
     __decorate([
@@ -1090,7 +1208,7 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-398abc06_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: 7.3rem;\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@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-05477153_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: 7.3rem;\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@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 */
@@ -1188,25 +1306,31 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         var barLength = this.data.length;
         var maxValue;
         var containerWidth = this.getWidth();
+        var isWideScreen = containerWidth >= 694;
+        var isStacked = this.groupType === 'stacked' || this.groupType === 'stacked100';
+        if (this.groupType && this.groupType !== 'none') {
+            this.data.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);
         }
         else {
             maxValue = max(this.data, function (d) { return max(d.values); });
         }
+        this.svgWidth = containerWidth;
         var unitSymbol = (((_a = this.aggregates) === null || _a === void 0 ? void 0 : _a[0]) || {}).unitSymbol;
         var maxValueStr = ChartService.formatValue(maxValue || 0, unitSymbol, this.decimal);
         var textWidth = maxValueStr.length * 8;
-        if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
-            && containerWidth >= 694) {
-            this.svgWidth = Math.min(containerWidth / 2 + 150, containerWidth);
+        this.actualMargin.right = Math.max(this.margin.right, textWidth + 20);
+        if (isWideScreen && isStacked) {
+            this.width = containerWidth * 0.8 - this.actualMargin.left - this.actualMargin.right;
         }
         else {
-            this.svgWidth = containerWidth;
-        }
-        this.actualMargin.right = Math.max(this.margin.right, textWidth + 20);
-        if (this.svgWidth) {
-            this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
+            this.width = containerWidth - this.actualMargin.left - this.actualMargin.right;
         }
         if (this.groupType === 'grouped' && this.categories.length > 0) {
             this.height = (this.barHeight * this.categories.length + this.barPadding) * barLength;
@@ -1215,34 +1339,24 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             var multiplier = this.aggregates.length > 1 ? this.aggregates.length : 1;
             this.height = (this.barHeight * multiplier + this.barPadding) * barLength;
         }
-        if (containerWidth >= 694) {
+        if (isWideScreen && isStacked) {
             this.svgHeight = this.height + this.actualMargin.top + this.actualMargin.bottom;
         }
         else {
-            this.svgHeight = this.height + this.actualMargin.top + this.actualMargin.bottom + 100;
-        }
-        if (this.categories.length > 0) {
-            this.additionalHeight = this.categories.length * 25 + 10;
-        }
-        if (this.aggregates.length > 1) {
-            this.additionalHeight = this.aggregates.length * 25 + 10;
-        }
-        this.svgHeight += this.additionalHeight;
-        if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
-            && containerWidth >= 694) {
-            this.svg = select(this.$el)
-                .style('text-align', 'left')
-                .append('svg')
-                .attr('width', this.svgWidth)
-                .attr('height', this.svgHeight)
-                .style('overflow', 'visible');
-        }
-        else {
-            this.svg = select(this.$el)
-                .append('svg')
-                .attr('width', this.svgWidth)
-                .attr('height', this.svgHeight);
+            this.svgHeight = this.height + this.actualMargin.top + this.actualMargin.bottom;
+            if (this.categories.length > 0) {
+                this.additionalHeight = Math.min(this.categories.length * 30 + 80, 200);
+                this.svgHeight += this.additionalHeight;
+            }
+            if (this.aggregates.length > 1) {
+                this.additionalHeight += Math.min(this.aggregates.length * 30 + 80, 200);
+                this.svgHeight += this.additionalHeight;
+            }
         }
+        this.svg = select(this.$el)
+            .append('svg')
+            .attr('width', this.svgWidth)
+            .attr('height', this.svgHeight);
         if (this.groupType === 'stacked100' && this.categories.length > 0) {
             this.xAxisScale = scaleLinear()
                 .domain([0, 1])
@@ -1282,12 +1396,11 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
         this.labelGroup = this.svg.append('g');
         if (this.aggregates.length > 0) {
-            if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
-                && containerWidth >= 694) {
-                this.labelGroup.attr('transform', "translate( " + (this.svgWidth + 50) + ",\n          -" + (this.svgHeight - this.additionalHeight - this.actualMargin.top) + " )");
+            if (isWideScreen && isStacked) {
+                this.labelGroup.attr('transform', "translate(" + (this.width + 100) + ", 0)");
             }
             else {
-                this.labelGroup.attr('transform', 'translate( 0, 40 )');
+                this.labelGroup.attr('transform', 'translate(0, 60)');
             }
         }
     };
@@ -1340,7 +1453,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .style('fill', 'none');
         this.svg.append('text')
             .attr('class', 'mo-axis-label')
-            .attr('x', -this.height / 1.5)
+            .attr('x', -this.height / 1.2)
             .attr('y', 10.5)
             .attr('transform', 'rotate(-90)')
             .text(this.groupings[0].label);
@@ -1445,7 +1558,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .append('g')
             .attr('transform', function (d, i) { return "translate(0,\n        " + (_this.barHeight * _this.categories.length + _this.barPadding) * i + ")"; });
         groupedBar.selectAll('rect')
-            .data(function (d) { return d.pieces; })
+            .data(function (d) { return d.pieces || []; })
             .enter()
             .append('rect')
             .attr('class', 'rect')
@@ -1456,6 +1569,19 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .transition()
             .duration(1000)
             .attr('width', function (d) { return _this.xAxisScale(d.values[0]); });
+        groupedBar.selectAll('.mo-data-text')
+            .data(function (d) { return d.pieces || []; })
+            .enter()
+            .append('text')
+            .attr('class', 'mo-data-text')
+            .attr('x', 0)
+            .attr('y', function (d) { return _this.yAxisCategories(d.label) + _this.barHeight / 2 + 4; })
+            .style('fill', this.valueColor)
+            .attr('text-anchor', 'start')
+            .transition()
+            .duration(1000)
+            .attr('x', function (d) { return _this.xAxisScale(d.values[0]) + 5; })
+            .text(function (d) { return ChartService.formatValue(d.values[0], '', _this.decimal); });
     };
     MoBarChartHorizontal.prototype.renderStackedBar = function (data) {
         var _this = this;
@@ -1499,20 +1625,25 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
     MoBarChartHorizontal.prototype.renderLabel = function () {
         var _this = this;
         var containerWidth = this.getWidth();
-        var canNotAddLine = (this.groupType === 'stacked'
-            || this.groupType === 'stacked100')
-            && containerWidth >= 694;
-        if (!canNotAddLine) {
+        var isWideScreen = containerWidth >= 694;
+        var isStacked = this.groupType === 'stacked' || this.groupType === 'stacked100';
+        if (isWideScreen && isStacked) {
+            this.labelGroup.attr('transform', "translate(" + (this.width + 100) + ", 0)");
+        }
+        else {
+            this.labelGroup.attr('transform', "translate(0, " + (this.height + this.actualMargin.top + 20) + ")");
+        }
+        if (!(isWideScreen && isStacked)) {
             this.labelGroup.append('line')
                 .attr('x1', 0)
-                .attr('y1', this.actualMargin.top + this.height)
-                .attr('x2', this.width + this.actualMargin.left + this.actualMargin.right)
-                .attr('y2', this.actualMargin.top + this.height)
+                .attr('y1', 0)
+                .attr('x2', this.svgWidth)
+                .attr('y2', 0)
                 .attr('class', 'mo-label-line');
         }
         this.labelGroup.append('text')
             .attr('x', 50)
-            .attr('y', this.actualMargin.top + this.height + 25)
+            .attr('y', 30)
             .attr('class', 'mo-label-title')
             .text(this.groupings[1].label);
         var legends = this.labelGroup.selectAll('.mo-label')
@@ -1524,11 +1655,11 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .attr('width', '15')
             .attr('height', '15')
             .attr('x', 50)
-            .attr('y', function (d, i) { return _this.actualMargin.top + _this.height + 40 + i * 25; })
+            .attr('y', function (d, i) { return 50 + i * 30; })
             .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
         legends.append('text')
             .attr('x', 75)
-            .attr('y', function (d, i) { return _this.actualMargin.top + _this.height + 52 + i * 25; })
+            .attr('y', function (d, i) { return 62 + i * 30; })
             .attr('class', 'mo-legend-text')
             .text(function (d) { return d; });
     };
@@ -1639,7 +1770,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   var __vue_inject_styles__$1 = function (inject) {
     if (!inject) { return }
-    inject("data-v-fd84cef6_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: 7.3rem;\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@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-9799e9b6_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: 7.3rem;\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@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 */
@@ -1723,13 +1854,14 @@ var PieChart = /** @class */ (function (_super) {
         var _this = this;
         e.stopPropagation();
         e.preventDefault();
-        if (this.rotation.index < this.data.length - 1) {
+        var chartDataForLegend = this.chartDataForLegend;
+        if (this.rotation.index < chartDataForLegend.length - 1) {
             this.rotation.index += 1;
         }
         else {
             this.rotation.index = 0;
         }
-        var d = this.pieLayout(this.data)[this.rotation.index];
+        var d = this.pieLayout(chartDataForLegend)[this.rotation.index];
         this.rotation.angle = 180 - (((d.startAngle + d.endAngle) / 2) / Math.PI) * 180;
         var offsetY = this.aggregate ? 40 : 0;
         this.arcGroup
@@ -1745,13 +1877,14 @@ var PieChart = /** @class */ (function (_super) {
         var _this = this;
         e.stopPropagation();
         e.preventDefault();
+        var chartDataForLegend = this.chartDataForLegend;
         if (this.rotation.index > 0) {
             this.rotation.index -= 1;
         }
         else {
-            this.rotation.index = this.data.length - 1;
+            this.rotation.index = chartDataForLegend.length - 1;
         }
-        var d = this.pieLayout(this.data)[this.rotation.index];
+        var d = this.pieLayout(chartDataForLegend)[this.rotation.index];
         this.rotation.angle = 180 - (((d.startAngle + d.endAngle) / 2) / Math.PI) * 180;
         var offsetY = this.aggregate ? 40 : 0;
         this.arcGroup
@@ -1764,13 +1897,14 @@ var PieChart = /** @class */ (function (_super) {
         }, 100);
     };
     PieChart.prototype.changeContent = function () {
+        var chartDataForLegend = this.chartDataForLegend;
         if (this.rotation.index === -1) {
             this.rotation.index = 0;
         }
         var currentPercentage = ChartService
-            .getPercentage(this.data[this.rotation.index].values[0], this.total, this.decimal);
+            .getPercentage(chartDataForLegend[this.rotation.index].values[0], this.total, this.decimal);
         var currentValue = ChartService
-            .formatValue(this.data[this.rotation.index].values[0], this.symbol);
+            .formatValue(chartDataForLegend[this.rotation.index].values[0], this.symbol);
         var percentage = this.$el.querySelector('.percentage');
         var label = this.$el.querySelector('.label');
         if (percentage) {
@@ -1780,11 +1914,18 @@ var PieChart = /** @class */ (function (_super) {
         }
         if (label) {
             var selection = select(label);
-            selection.text(this.data[this.rotation.index].label);
+            selection.text(chartDataForLegend[this.rotation.index].label);
         }
     };
     PieChart.prototype.init = function () {
         var _a, _b;
+        var chartDataForLegend;
+        if (this.combineSmallGroups) {
+            chartDataForLegend = ChartService.combineSmallGroups(__spreadArrays(this.data), 0.05, 'Others');
+        }
+        else {
+            chartDataForLegend = __spreadArrays(this.data);
+        }
         this.width = this.area
             && this.area.width
             && this.area.height
@@ -1804,7 +1945,7 @@ var PieChart = /** @class */ (function (_super) {
                 this.height += 60;
             }
             else {
-                this.height += (this.data.length * 25 + 34);
+                this.height += (chartDataForLegend.length * 25 + 34);
             }
             if (this.groupBy && this.aggregate) {
                 this.height += 50;
@@ -1831,7 +1972,7 @@ var PieChart = /** @class */ (function (_super) {
                 axisLabel.text(this.aggregate.label);
             }
         }
-        this.total = sum(this.data, function (p) { return p.values[0]; });
+        this.total = sum(chartDataForLegend, function (p) { return p.values[0]; });
         this.arcLayout = arc()
             .outerRadius(this.radius)
             .innerRadius(this.innerRadius);
@@ -1839,7 +1980,7 @@ var PieChart = /** @class */ (function (_super) {
             .outerRadius(this.innerRadius + 9)
             .innerRadius(this.innerRadius);
         this.pieLayout = pie().value(function (p) { return p.values[0]; });
-        var d = this.pieLayout(this.data)[this.rotation.index];
+        var d = this.pieLayout(chartDataForLegend)[this.rotation.index];
         this.rotation.angle = 180 - (((d.startAngle + d.endAngle) / 2) / Math.PI) * 180;
         // 计算向下偏移的距离
         var offsetY = this.aggregate ? 40 : 0;
@@ -1847,13 +1988,14 @@ var PieChart = /** @class */ (function (_super) {
             .attr('transform', "translate(" + this.width / 2 + ", " + (this.width / 2 + offsetY) + ") rotate(" + this.rotation.angle + ")");
         this.arc = this.arcGroup
             .selectAll('.arc')
-            .data(this.pieLayout(this.data))
+            .data(this.pieLayout(chartDataForLegend))
             .enter()
             .append('g')
             .attr('class', 'arc');
         this.centerGroup = this.svg.append('svg:g')
             .attr('transform', "translate(" + this.width / 2 + ", " + (this.width / 2 + offsetY) + ")");
         this.labelGroup = this.svg.append('svg:g');
+        this.chartDataForLegend = chartDataForLegend;
     };
     PieChart.prototype.renderPie = function () {
         var _this = this;
@@ -1946,8 +2088,9 @@ var PieChart = /** @class */ (function (_super) {
                 .attr('y', this.width + 50)
                 .text(this.groupBy.label);
         }
+        var chartDataForLegend = this.chartDataForLegend;
         var legends = this.labelGroup.selectAll('.mo-label')
-            .data(this.data)
+            .data(chartDataForLegend)
             .enter()
             .append('g');
         if (this.labelMode === 'horizontal') {
@@ -2048,6 +2191,10 @@ var PieChart = /** @class */ (function (_super) {
         Prop({ type: Array, required: true }),
         __metadata("design:type", Array)
     ], PieChart.prototype, "data", void 0);
+    __decorate([
+        Prop({ type: Boolean, default: function () { return false; } }),
+        __metadata("design:type", Boolean)
+    ], PieChart.prototype, "combineSmallGroups", void 0);
     __decorate([
         Prop({ type: Boolean, default: function () { return true; } }),
         __metadata("design:type", Boolean)
@@ -2180,7 +2327,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   var __vue_inject_styles__$2 = function (inject) {
     if (!inject) { return }
-    inject("data-v-7a5cdc78_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: 7.3rem;\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@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-516ad978_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: 7.3rem;\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@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 */
@@ -2312,7 +2459,11 @@ var LineChart = /** @class */ (function (_super) {
         this.xAxis = axisBottom(this.xAxisScale)
             .tickSize(0)
             .tickPadding(6)
-            .tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
+            .tickFormat(function (d) {
+            var text = d.toString();
+            // 如果文本长度超过18个字符，截断并添加省略号
+            return text.length > 18 ? text.slice(0, 15) + "..." : text;
+        });
         this.yAxisScale = scaleLinear()
             .domain([0, this.maxValue || 10])
             .range([this.height, 0])
@@ -2415,7 +2566,7 @@ var LineChart = /** @class */ (function (_super) {
         this.svg.append('text')
             .attr('class', 'mo-axis-label')
             .attr('x', this.width / 2)
-            .attr('y', this.height + this.actualMargin.bottom)
+            .attr('y', this.height + this.actualMargin.bottom + 20)
             .text(this.groupings[0].label);
         this.svg.append('text')
             .attr('class', 'mo-axis-label')
@@ -2690,7 +2841,7 @@ __vue_render__$3._withStripped = true;
   /* style */
   var __vue_inject_styles__$3 = function (inject) {
     if (!inject) { return }
-    inject("data-v-22d38a80_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: 7.3rem;\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@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-176eb6e9_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: 7.3rem;\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@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 */
@@ -2747,8 +2898,16 @@ var FunnelChart = /** @class */ (function (_super) {
         var _this = this;
         this.colorMap.clear();
         this.refactoredData = [];
-        // 对数据进行排序，values[0]大的排在前面
-        var sortedData = __spreadArrays(this.data).sort(function (a, b) { return b.values[0] - a.values[0]; });
+        var chartDataForLegend;
+        if (this.combineSmallGroups) {
+            chartDataForLegend = ChartService.combineSmallGroups(__spreadArrays(this.data), 0.05, 'Others');
+        }
+        else {
+            chartDataForLegend = __spreadArrays(this.data);
+        }
+        // 对数据进行排序，按value占比从大到小排序
+        var totalValue = sum(chartDataForLegend, function (d) { return d.values[0]; });
+        var sortedData = __spreadArrays(chartDataForLegend).sort(function (a, b) { return a.label.localeCompare(b.label); });
         sortedData.forEach(function (d, i) {
             _this.colorMap.set(d.label, ChartService.getColor(i, _this.colors));
         });
@@ -2762,9 +2921,8 @@ var FunnelChart = /** @class */ (function (_super) {
         this.funnelHeight = this.height || this.funnelWidth;
         var dataLength = sortedData.length;
         var height = this.funnelHeight + (this.legendItemHeight * (dataLength + 1));
-        var minHeight = 20; // 最小高度，确保能显示0
-        var totalValue = sum(sortedData, function (d) { return d.values[0]; });
-        var zeroCount = sortedData.filter(function (d) { return d.values[0] === 0; }).length;
+        var minHeight = 20; // 最小高度
+        var zeroCount = sortedData.filter(function (d) { return d.values[0] <= 5; }).length;
         var availableHeight = this.funnelHeight - (minHeight * zeroCount);
         var accumulatedY = 0;
         if (this.groupBy && this.aggregate) {
@@ -2776,9 +2934,7 @@ var FunnelChart = /** @class */ (function (_super) {
         sortedData.forEach(function (d) {
             // 计算当前高度位置占总高度的比例
             var currentRatio = accumulatedY / _this.funnelHeight;
-            var itemHeight = d.values[0] === 0
-                ? minHeight
-                : (d.values[0] / totalValue) * availableHeight;
+            var itemHeight = Math.max((d.values[0] / totalValue) * availableHeight, minHeight);
             var nextRatio = (accumulatedY + itemHeight) / _this.funnelHeight;
             // 计算当前层的上下宽度
             var currentTopWidth = topWidth - (topWidth - bottomWidth) * currentRatio;
@@ -2793,21 +2949,23 @@ var FunnelChart = /** @class */ (function (_super) {
             var x4 = (_this.funnelWidth - currentBottomWidth) / 2;
             var y4 = y3;
             accumulatedY += itemHeight;
-            var temp = JSON.parse(JSON.stringify(d));
-            temp.points = [{
-                    x: x1,
-                    y: y1,
-                }, {
-                    x: x2,
-                    y: y2,
-                }, {
-                    x: x3,
-                    y: y3,
-                }, {
-                    x: x4,
-                    y: y4,
-                }];
-            _this.refactoredData.push(temp);
+            if (d.values[0] > 0) {
+                var temp = JSON.parse(JSON.stringify(d));
+                temp.points = [{
+                        x: x1,
+                        y: y1,
+                    }, {
+                        x: x2,
+                        y: y2,
+                    }, {
+                        x: x3,
+                        y: y3,
+                    }, {
+                        x: x4,
+                        y: y4,
+                    }];
+                _this.refactoredData.push(temp);
+            }
         });
         if (containerWidth < 694) {
             this.svg = select(this.$el)
@@ -2824,6 +2982,7 @@ var FunnelChart = /** @class */ (function (_super) {
                 .style('overflow', 'visible');
         }
         this.total = totalValue;
+        this.chartDataForLegend = chartDataForLegend;
     };
     FunnelChart.prototype.renderFunnel = function () {
         var _this = this;
@@ -2872,7 +3031,7 @@ var FunnelChart = /** @class */ (function (_super) {
             this.svg.append('text')
                 .attr('class', 'mo-axis-label')
                 .attr('x', this.funnelWidth / 2)
-                .attr('y', this.funnelHeight + 25)
+                .attr('y', this.funnelHeight + (this.refactoredData.length * 10))
                 .text(function () {
                 var _a;
                 var label = ((_a = _this.aggregate) === null || _a === void 0 ? void 0 : _a.label) || '';
@@ -2905,6 +3064,7 @@ var FunnelChart = /** @class */ (function (_super) {
             }
             transformY += 65;
         }
+        var legendData = this.chartDataForLegend;
         var legend = this.svg.append('g').attr('class', 'legend');
         if (containerWidth < 694) {
             legend.attr('transform', "translate( 50, " + transformY + " )");
@@ -2913,33 +3073,18 @@ var FunnelChart = /** @class */ (function (_super) {
             legend.attr('transform', "translate( " + (this.funnelWidth + 50) + ", 50 )");
         }
         var legendRect = legend.selectAll('rect')
-            .data(this.refactoredData)
+            .data(legendData)
             .enter()
             .append('rect')
             .attr('width', 15)
             .attr('height', 15)
             .style('fill', function (d) { return _this.colorMap.get(d.label) || '#fff'; });
         var legendText = legend.selectAll('text')
-            .data(this.refactoredData)
+            .data(legendData)
             .enter()
             .append('text')
             .attr('class', 'mo-legend-text')
-            .text(function (d) {
-            var text = ChartService.getBottomText({
-                showValue: _this.showValue,
-                innerValue: _this.valuePosition === 'inner',
-                value: d.values[0],
-                showPercentage: _this.showPercentage,
-                innerPercentage: _this.percentagePosition === 'inner',
-                total: _this.total,
-                decimal: _this.decimal,
-                symbol: '',
-            });
-            if (text !== '') {
-                return d.label + " : " + text;
-            }
-            return d.label;
-        });
+            .text(function (d) { return d.label; });
         if (this.labelMode === 'horizontal') {
             legendRect
                 .attr('x', function (d, i) { return 10 + (i * 100); })
@@ -2962,6 +3107,10 @@ var FunnelChart = /** @class */ (function (_super) {
         Prop({ type: Array, required: true }),
         __metadata("design:type", Array)
     ], FunnelChart.prototype, "data", void 0);
+    __decorate([
+        Prop({ type: Boolean, default: function () { return false; } }),
+        __metadata("design:type", Boolean)
+    ], FunnelChart.prototype, "combineSmallGroups", void 0);
     __decorate([
         Prop({ type: Number }),
         __metadata("design:type", Number)
@@ -3030,7 +3179,7 @@ __vue_render__$4._withStripped = true;
   /* style */
   var __vue_inject_styles__$4 = function (inject) {
     if (!inject) { return }
-    inject("data-v-03e70940_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: 7.3rem;\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@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-a99ac804_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: 7.3rem;\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@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 */
@@ -4234,6 +4383,7 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
         newMetadata.header = metadata.header;
         newMetadata.footer = metadata.footer;
         newMetadata.title = metadata.title;
+        newMetadata.combineSmallGroups = metadata.combineSmallGroups;
         if (properties) {
             if (properties.visualizationType === 'RichText') {
                 newMetadata.content = properties.content.richTextContent;
@@ -4771,9 +4921,10 @@ var ReportDataConvertor = /** @class */ (function (_super) {
                 showPercentages: false,
                 showTotal: false,
                 groupByType: '',
+                combineSmallGroups: false,
             };
         }
-        var groupings = chart.groupings, summaries = chart.summaries, summaryAxisLocations = chart.summaryAxisLocations, summaryVisualizationTypes = chart.summaryVisualizationTypes, chartType = chart.chartType, showChartPercentages = chart.showChartPercentages, showChartTotal = chart.showChartTotal;
+        var groupings = chart.groupings, summaries = chart.summaries, summaryAxisLocations = chart.summaryAxisLocations, summaryVisualizationTypes = chart.summaryVisualizationTypes, chartType = chart.chartType, showChartPercentages = chart.showChartPercentages, showChartTotal = chart.showChartTotal, combineSmallGroups = chart.combineSmallGroups;
         var groupingColumns = groupings.map(function (grouping) {
             var _a = groupingColumnInfo[grouping], label = _a.label, dataType = _a.dataType;
             return {
@@ -4810,6 +4961,7 @@ var ReportDataConvertor = /** @class */ (function (_super) {
             chartType: chartType,
             showPercentages: showChartPercentages,
             showTotal: showChartTotal,
+            combineSmallGroups: combineSmallGroups,
             groupByType: this.getGroupType(chart.chartType),
             plotOnSecondAxis: summaryAxisLocations.length > 1 && summaryAxisLocations[0] !== summaryAxisLocations[1],
             plotAsLineChart: summaryVisualizationTypes.length > 1 && summaryVisualizationTypes[1] === 'Line',
@@ -5875,6 +6027,7 @@ var __vue_render__$b = function () {
           "show-value": _vm.metadata.showValues,
           "group-by": _vm.metadata.groupingColumns[0],
           aggregate: _vm.metadata.aggregateColumns[0],
+          "combine-small-groups": _vm.metadata.combineSmallGroups,
         },
       })
     : _vm._e()
@@ -6294,6 +6447,7 @@ var __vue_render__$g = function () {
           decimal: 2,
           "group-by": _vm.metadata.groupingColumns[0],
           aggregate: _vm.metadata.aggregateColumns[0],
+          "combine-small-groups": _vm.metadata.combineSmallGroups,
           area: _vm.area,
         },
       })