moblor-vue 0.1.37 → 0.1.39

package/dist/moblor-components.esm.js

@@ -229,12 +229,9 @@ var ChartService = /** @class */ (function () {
             valueText += ChartService.formatValue(value, symbol, decimal);
         }
         if (showPercentage && innerPercentage) {
-            if (valueText !== '') {
-                valueText += ' : ';
-            }
             var percentage = ChartService.getPercentage(Number(value), total, decimal);
             if (percentage > 0) {
-                valueText += percentage + "%";
+                valueText += ": " + percentage + "%";
             }
         }
         return valueText;
@@ -1307,7 +1304,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .attr('transform', 'rotate(70, -12, 12)');
         var chartYAxis = this.svg.append('g')
             .attr('class', 'y mo-axis')
-            .attr('transform', "translate(" + this.actualMargin.left + ", " + (this.actualMargin.top + 15) + ")")
+            .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")")
             .call(this.yAxis);
         chartYAxis.selectAll('text')
             .attr('class', 'mo-axis-text')
@@ -1642,7 +1639,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   var __vue_inject_styles__$1 = function (inject) {
     if (!inject) { return }
-    inject("data-v-1e9e42a0_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-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 });
 
   };
   /* scoped */
@@ -2286,18 +2283,19 @@ var LineChart = /** @class */ (function (_super) {
         }
         this.svgHeight = this.height + this.actualMargin.top + this.actualMargin.bottom + 40;
         this.categories = [];
-        this.maxValue = max(this.data, function (d) { return max(d.values); });
+        var limitedData = this.data.slice(-20);
+        this.maxValue = max(limitedData, function (d) { return max(d.values); });
         if (this.groupType === 'grouped' || this.groupType === 'cumulativeGrouped') {
             this.refactorGroupedData();
         }
         if (this.categories.length > 0) {
-            this.svgHeight += this.categories.length * 25 + 50;
-            this.maxValue = ChartService.getMaxValue(this.data);
+            this.svgHeight += this.categories.length * 25 + 80;
+            this.maxValue = ChartService.getMaxValue(limitedData);
         }
         if (this.aggregates.length > 1) {
-            this.svgHeight += this.aggregates.length * 25 + 50;
+            this.svgHeight += this.aggregates.length * 25 + 80;
         }
-        this.refactoredData = JSON.parse(JSON.stringify(this.data));
+        this.refactoredData = JSON.parse(JSON.stringify(limitedData));
         if (this.groupType === 'cumulativeGrouped' || this.groupType === 'cumulative') {
             this.refactorCumulateData();
         }
@@ -2309,7 +2307,8 @@ var LineChart = /** @class */ (function (_super) {
             .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
         this.xAxisScale = scalePoint()
             .domain(this.refactoredData.map(function (d) { return d.label; }))
-            .range([0, this.width - 5]);
+            .range([0, this.width - 5])
+            .padding(0.5);
         this.xAxis = axisBottom(this.xAxisScale)
             .tickSize(0)
             .tickPadding(6)
@@ -2401,9 +2400,9 @@ var LineChart = /** @class */ (function (_super) {
         chartXAxis.selectAll('text')
             .style('text-anchor', 'end')
             .attr('class', 'mo-axis-text')
-            .attr('y', 5)
-            .attr('x', 5)
-            .attr('transform', 'rotate(-70, 0, 15)');
+            .attr('y', 10)
+            .attr('x', -8)
+            .attr('transform', 'rotate(-60)');
         var chartYAxis = this.svg.append('g')
             .attr('class', 'y mo-axis')
             .call(this.yAxis);
@@ -2416,7 +2415,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 + 35)
+            .attr('y', this.height + this.actualMargin.bottom)
             .text(this.groupings[0].label);
         this.svg.append('text')
             .attr('class', 'mo-axis-label')
@@ -2636,7 +2635,7 @@ var LineChart = /** @class */ (function (_super) {
         __metadata("design:type", Boolean)
     ], LineChart.prototype, "showValue", void 0);
     __decorate([
-        Prop({ type: Object, default: function () { return ({ top: 15, right: 0, bottom: 80, left: 60 }); } }),
+        Prop({ type: Object, default: function () { return ({ top: 15, right: 0, bottom: 100, left: 60 }); } }),
         __metadata("design:type", typeof (_a = typeof ChartMargin !== "undefined" && ChartMargin) === "function" ? _a : Object)
     ], LineChart.prototype, "margin", void 0);
     __decorate([
@@ -2691,7 +2690,7 @@ __vue_render__$3._withStripped = true;
   /* style */
   var __vue_inject_styles__$3 = function (inject) {
     if (!inject) { return }
-    inject("data-v-57601b9b_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-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 });
 
   };
   /* scoped */
@@ -2748,7 +2747,9 @@ var FunnelChart = /** @class */ (function (_super) {
         var _this = this;
         this.colorMap.clear();
         this.refactoredData = [];
-        this.data.forEach(function (d, i) {
+        // 对数据进行排序，values[0]大的排在前面
+        var sortedData = __spreadArrays(this.data).sort(function (a, b) { return b.values[0] - a.values[0]; });
+        sortedData.forEach(function (d, i) {
             _this.colorMap.set(d.label, ChartService.getColor(i, _this.colors));
         });
         var containerWidth = this.getWidth();
@@ -2759,26 +2760,39 @@ var FunnelChart = /** @class */ (function (_super) {
             this.funnelWidth = containerWidth / 2 + 150;
         }
         this.funnelHeight = this.height || this.funnelWidth;
-        var dataLength = this.data.length;
+        var dataLength = sortedData.length;
         var height = this.funnelHeight + (this.legendItemHeight * (dataLength + 1));
-        var descendWidth = dataLength <= 1
-            ? this.funnelWidth / 4
-            : this.funnelWidth / (dataLength * 2);
-        var funnelItemHeight = this.funnelHeight / dataLength;
+        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 availableHeight = this.funnelHeight - (minHeight * zeroCount);
+        var accumulatedY = 0;
         if (this.groupBy && this.aggregate) {
             height += 65;
         }
-        this.data.forEach(function (d, i) {
-            var x1 = i * descendWidth;
-            var y1 = i * funnelItemHeight;
-            var x2 = _this.funnelWidth - x1;
+        // 计算顶部和底部的宽度
+        var topWidth = this.funnelWidth;
+        var bottomWidth = this.funnelWidth * 0.3; // 底部宽度为顶部的30%
+        sortedData.forEach(function (d) {
+            // 计算当前高度位置占总高度的比例
+            var currentRatio = accumulatedY / _this.funnelHeight;
+            var itemHeight = d.values[0] === 0
+                ? minHeight
+                : (d.values[0] / totalValue) * availableHeight;
+            var nextRatio = (accumulatedY + itemHeight) / _this.funnelHeight;
+            // 计算当前层的上下宽度
+            var currentTopWidth = topWidth - (topWidth - bottomWidth) * currentRatio;
+            var currentBottomWidth = topWidth - (topWidth - bottomWidth) * nextRatio;
+            // 构建梯形的四个点
+            var x1 = (_this.funnelWidth - currentTopWidth) / 2;
+            var y1 = accumulatedY;
+            var x2 = x1 + currentTopWidth;
             var y2 = y1;
-            var x3 = (i === dataLength - 1 && dataLength > 1)
-                ? x2 : x2 - descendWidth;
-            var y3 = y2 + funnelItemHeight;
-            var x4 = (i === dataLength - 1 && dataLength > 1)
-                ? x1 : x1 + descendWidth;
+            var x3 = (_this.funnelWidth - currentBottomWidth) / 2 + currentBottomWidth;
+            var y3 = y1 + itemHeight;
+            var x4 = (_this.funnelWidth - currentBottomWidth) / 2;
             var y4 = y3;
+            accumulatedY += itemHeight;
             var temp = JSON.parse(JSON.stringify(d));
             temp.points = [{
                     x: x1,
@@ -2809,7 +2823,7 @@ var FunnelChart = /** @class */ (function (_super) {
                 .attr('height', height)
                 .style('overflow', 'visible');
         }
-        this.total = sum(this.refactoredData, function (d) { return d.values[0]; });
+        this.total = totalValue;
     };
     FunnelChart.prototype.renderFunnel = function () {
         var _this = this;
@@ -2862,7 +2876,10 @@ var FunnelChart = /** @class */ (function (_super) {
                 .text(function () {
                 var _a;
                 var label = ((_a = _this.aggregate) === null || _a === void 0 ? void 0 : _a.label) || '';
-                return currency_1 ? label + " (" + currency_1 + ")" : label;
+                var formattedTotal = ChartService.formatValue(_this.total, '', _this.decimal);
+                return currency_1
+                    ? label + " (" + currency_1 + "): " + formattedTotal
+                    : label + ": " + formattedTotal;
             });
             if (containerWidth < 694) {
                 this.svg.append('line')
@@ -3013,7 +3030,7 @@ __vue_render__$4._withStripped = true;
   /* style */
   var __vue_inject_styles__$4 = function (inject) {
     if (!inject) { return }
-    inject("data-v-f43f0a82_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-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 });
 
   };
   /* scoped */
@@ -3486,15 +3503,16 @@ var ScatterChart = /** @class */ (function (_super) {
         this.height = this.width;
         this.svgHeight = this.height + this.margin.top + this.margin.bottom;
         this.categories = [];
-        var xMaxValue = max(this.data, function (d) { return d.values[0]; });
-        var yMaxValue = max(this.data, function (d) { return d.values[1]; });
+        var limitedData = this.data.slice(-20);
+        var xMaxValue = max(limitedData, function (d) { return d.values[0]; });
+        var yMaxValue = max(limitedData, function (d) { return d.values[1]; });
         if (this.groupType === 'grouped') {
             this.refactorGroupedData();
         }
         if (this.categories.length > 0) {
             this.additionalHeight = this.categories.length * 25 + 50;
-            xMaxValue = ChartService.getMaxValue(this.data, 0);
-            yMaxValue = ChartService.getMaxValue(this.data, 1);
+            xMaxValue = ChartService.getMaxValue(limitedData, 0);
+            yMaxValue = ChartService.getMaxValue(limitedData, 1);
         }
         this.svgHeight += this.additionalHeight;
         if (containerWidth < 694) {
@@ -3803,7 +3821,7 @@ __vue_render__$7._withStripped = true;
   /* style */
   var __vue_inject_styles__$7 = function (inject) {
     if (!inject) { return }
-    inject("data-v-69f33464_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-e784c97e_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 */