moblor-vue 0.1.26 → 0.1.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts.js +1 -1
- package/dist/moblor-components.esm.js +195 -85
- package/dist/moblor-components.js +1 -1
- package/dist/moblor-vue.esm.js +195 -85
- package/dist/moblor-vue.js +1 -1
- package/package.json +1 -1
|
@@ -260,6 +260,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
260
260
|
_this.xAxisAggregates = null;
|
|
261
261
|
_this.categories = [];
|
|
262
262
|
_this.needScroll = false;
|
|
263
|
+
_this.additionalHeight = 0;
|
|
263
264
|
return _this;
|
|
264
265
|
}
|
|
265
266
|
Object.defineProperty(MoBarChart.prototype, "actualMargin", {
|
|
@@ -322,20 +323,20 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
322
323
|
MoBarChart.prototype.init = function () {
|
|
323
324
|
var _this = this;
|
|
324
325
|
var containerWidth = this.getWidth();
|
|
325
|
-
if (containerWidth
|
|
326
|
-
this.svgWidth = Math.max(containerWidth, this.data.length * this.MIN_WIDTH);
|
|
326
|
+
if (containerWidth >= 694) {
|
|
327
|
+
this.svgWidth = Math.max(containerWidth, this.data.length * this.MIN_WIDTH) / 2;
|
|
327
328
|
}
|
|
328
329
|
else {
|
|
329
|
-
this.svgWidth = Math.max(containerWidth, this.data.length * this.MIN_WIDTH)
|
|
330
|
+
this.svgWidth = Math.max(containerWidth, this.data.length * this.MIN_WIDTH);
|
|
330
331
|
}
|
|
331
332
|
this.needScroll = this.svgWidth > containerWidth;
|
|
332
333
|
if (this.svgWidth) {
|
|
333
334
|
this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
|
|
334
|
-
if (containerWidth
|
|
335
|
-
this.height = containerWidth - this.actualMargin.left - this.actualMargin.right;
|
|
335
|
+
if (containerWidth >= 694) {
|
|
336
|
+
this.height = containerWidth / 2 - this.actualMargin.left - this.actualMargin.right;
|
|
336
337
|
}
|
|
337
338
|
else {
|
|
338
|
-
this.height = containerWidth
|
|
339
|
+
this.height = containerWidth - this.actualMargin.left - this.actualMargin.right;
|
|
339
340
|
}
|
|
340
341
|
}
|
|
341
342
|
this.svgHeight = this.height + this.actualMargin.top + this.actualMargin.bottom;
|
|
@@ -355,11 +356,12 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
355
356
|
});
|
|
356
357
|
}
|
|
357
358
|
if (this.categories.length > 0) {
|
|
358
|
-
this.
|
|
359
|
+
this.additionalHeight = this.categories.length * 25 + 50;
|
|
359
360
|
}
|
|
360
361
|
if (this.aggregates.length > 1) {
|
|
361
|
-
this.
|
|
362
|
+
this.additionalHeight += this.aggregates.length * 25 + 50;
|
|
362
363
|
}
|
|
364
|
+
this.svgHeight += this.additionalHeight;
|
|
363
365
|
var maxValue;
|
|
364
366
|
var secondYMaxValue;
|
|
365
367
|
if (this.groupType === 'grouped') {
|
|
@@ -441,12 +443,25 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
441
443
|
.tickSize(0)
|
|
442
444
|
.tickFormat(function (d) { return ChartService.formatValue(d, unitSymbol_3, _this.decimal); });
|
|
443
445
|
}
|
|
444
|
-
this.
|
|
445
|
-
|
|
446
|
-
.
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
446
|
+
if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
|
|
447
|
+
&& containerWidth >= 694) {
|
|
448
|
+
this.svg = select(this.$el)
|
|
449
|
+
.style('text-align', 'left')
|
|
450
|
+
.append('svg')
|
|
451
|
+
.attr('width', this.svgWidth)
|
|
452
|
+
.attr('height', this.svgHeight)
|
|
453
|
+
.style('overflow', 'visible')
|
|
454
|
+
.append('g')
|
|
455
|
+
.attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
|
|
456
|
+
}
|
|
457
|
+
else {
|
|
458
|
+
this.svg = select(this.$el)
|
|
459
|
+
.append('svg')
|
|
460
|
+
.attr('width', this.svgWidth)
|
|
461
|
+
.attr('height', this.svgHeight)
|
|
462
|
+
.append('g')
|
|
463
|
+
.attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
|
|
464
|
+
}
|
|
450
465
|
};
|
|
451
466
|
MoBarChart.prototype.lineValue = function (d) {
|
|
452
467
|
return d.values[this.secondYIndex];
|
|
@@ -733,12 +748,20 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
733
748
|
MoBarChart.prototype.renderLabel = function () {
|
|
734
749
|
var _this = this;
|
|
735
750
|
var labelGroup = this.svg.append('g');
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
.attr('
|
|
740
|
-
|
|
741
|
-
|
|
751
|
+
var containerWidth = this.getWidth();
|
|
752
|
+
if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
|
|
753
|
+
&& containerWidth >= 694) {
|
|
754
|
+
labelGroup.attr('transform', "translate( " + (this.svgWidth + 50) + ",\n -" + (this.svgHeight - this.additionalHeight) + " )");
|
|
755
|
+
}
|
|
756
|
+
else {
|
|
757
|
+
labelGroup.attr('transform', 'translate( 0, 0 )');
|
|
758
|
+
labelGroup.append('line')
|
|
759
|
+
.attr('x1', -this.actualMargin.left)
|
|
760
|
+
.attr('y1', this.actualMargin.top + this.actualMargin.bottom + this.height)
|
|
761
|
+
.attr('x2', this.width + this.actualMargin.left + this.actualMargin.right)
|
|
762
|
+
.attr('y2', this.actualMargin.top + this.actualMargin.bottom + this.height)
|
|
763
|
+
.attr('class', 'mo-label-line');
|
|
764
|
+
}
|
|
742
765
|
labelGroup.append('text')
|
|
743
766
|
.attr('x', (this.width - this.actualMargin.left) / 2)
|
|
744
767
|
.attr('y', this.actualMargin.top + this.actualMargin.bottom + this.height + 25)
|
|
@@ -771,6 +794,14 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
771
794
|
marginTop += this.categories.length * 25 + 50;
|
|
772
795
|
}
|
|
773
796
|
var labelGroup = this.svg.append('g');
|
|
797
|
+
var containerWidth = this.getWidth();
|
|
798
|
+
if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
|
|
799
|
+
&& containerWidth >= 694) {
|
|
800
|
+
labelGroup.attr('transform', "translate( " + (this.svgWidth + 50) + ",\n -" + (this.svgHeight - this.additionalHeight - this.actualMargin.top) + " )");
|
|
801
|
+
}
|
|
802
|
+
else {
|
|
803
|
+
labelGroup.attr('transform', 'translate( 0, 0 )');
|
|
804
|
+
}
|
|
774
805
|
labelGroup.append('line')
|
|
775
806
|
.attr('x1', -this.actualMargin.left)
|
|
776
807
|
.attr('y1', marginTop)
|
|
@@ -1015,7 +1046,7 @@ __vue_render__._withStripped = true;
|
|
|
1015
1046
|
/* style */
|
|
1016
1047
|
var __vue_inject_styles__ = function (inject) {
|
|
1017
1048
|
if (!inject) { return }
|
|
1018
|
-
inject("data-v-63d8acaa_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
1049
|
+
inject("data-v-12569a2e_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
1019
1050
|
|
|
1020
1051
|
};
|
|
1021
1052
|
/* scoped */
|
|
@@ -1061,6 +1092,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1061
1092
|
_this.categories = [];
|
|
1062
1093
|
_this.mainChart = null;
|
|
1063
1094
|
_this.labelGroup = null;
|
|
1095
|
+
_this.additionalHeight = 0;
|
|
1064
1096
|
return _this;
|
|
1065
1097
|
}
|
|
1066
1098
|
Object.defineProperty(MoBarChartHorizontal.prototype, "actualMargin", {
|
|
@@ -1110,7 +1142,14 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1110
1142
|
this.categories = [];
|
|
1111
1143
|
var barLength = this.data.length;
|
|
1112
1144
|
var maxValue;
|
|
1113
|
-
|
|
1145
|
+
var containerWidth = this.getWidth();
|
|
1146
|
+
if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
|
|
1147
|
+
&& containerWidth >= 694) {
|
|
1148
|
+
this.svgWidth = containerWidth / 2;
|
|
1149
|
+
}
|
|
1150
|
+
else {
|
|
1151
|
+
this.svgWidth = containerWidth;
|
|
1152
|
+
}
|
|
1114
1153
|
if (this.svgWidth) {
|
|
1115
1154
|
this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
|
|
1116
1155
|
}
|
|
@@ -1139,15 +1178,27 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1139
1178
|
}
|
|
1140
1179
|
this.svgHeight = this.height + this.actualMargin.top + this.actualMargin.bottom;
|
|
1141
1180
|
if (this.categories.length > 0) {
|
|
1142
|
-
this.
|
|
1181
|
+
this.additionalHeight = this.categories.length * 25 + 10;
|
|
1143
1182
|
}
|
|
1144
1183
|
if (this.aggregates.length > 1) {
|
|
1145
|
-
this.
|
|
1184
|
+
this.additionalHeight = this.aggregates.length * 25 + 10;
|
|
1185
|
+
}
|
|
1186
|
+
this.svgHeight += this.additionalHeight;
|
|
1187
|
+
if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
|
|
1188
|
+
&& containerWidth >= 694) {
|
|
1189
|
+
this.svg = select(this.$el)
|
|
1190
|
+
.style('text-align', 'left')
|
|
1191
|
+
.append('svg')
|
|
1192
|
+
.attr('width', this.svgWidth)
|
|
1193
|
+
.attr('height', this.svgHeight)
|
|
1194
|
+
.style('overflow', 'visible');
|
|
1195
|
+
}
|
|
1196
|
+
else {
|
|
1197
|
+
this.svg = select(this.$el)
|
|
1198
|
+
.append('svg')
|
|
1199
|
+
.attr('width', this.svgWidth)
|
|
1200
|
+
.attr('height', this.svgHeight);
|
|
1146
1201
|
}
|
|
1147
|
-
this.svg = select(this.$el)
|
|
1148
|
-
.append('svg')
|
|
1149
|
-
.attr('width', this.svgWidth)
|
|
1150
|
-
.attr('height', this.svgHeight);
|
|
1151
1202
|
if (this.groupType === 'stacked100' && this.categories.length > 0) {
|
|
1152
1203
|
this.xAxisScale = scaleLinear()
|
|
1153
1204
|
.domain([0, 1])
|
|
@@ -1187,7 +1238,13 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1187
1238
|
.attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
|
|
1188
1239
|
this.labelGroup = this.svg.append('g');
|
|
1189
1240
|
if (this.aggregates.length > 0) {
|
|
1190
|
-
this.
|
|
1241
|
+
if ((this.groupType === 'stacked' || this.groupType === 'stacked100')
|
|
1242
|
+
&& containerWidth >= 694) {
|
|
1243
|
+
this.labelGroup.attr('transform', "translate( " + (this.svgWidth + 50) + ",\n -" + (this.svgHeight - this.additionalHeight - this.actualMargin.top) + " )");
|
|
1244
|
+
}
|
|
1245
|
+
else {
|
|
1246
|
+
this.labelGroup.attr('transform', 'translate( 0, 40 )');
|
|
1247
|
+
}
|
|
1191
1248
|
}
|
|
1192
1249
|
};
|
|
1193
1250
|
MoBarChartHorizontal.prototype.renderAxis = function () {
|
|
@@ -1232,7 +1289,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1232
1289
|
.style('fill', 'none');
|
|
1233
1290
|
this.svg.append('text')
|
|
1234
1291
|
.attr('class', 'mo-axis-label')
|
|
1235
|
-
.attr('x', -this.height /
|
|
1292
|
+
.attr('x', -this.height / 1.5)
|
|
1236
1293
|
.attr('y', 15)
|
|
1237
1294
|
.attr('transform', 'rotate(-90)')
|
|
1238
1295
|
.text(this.groupings[0].label);
|
|
@@ -1403,12 +1460,18 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1403
1460
|
};
|
|
1404
1461
|
MoBarChartHorizontal.prototype.renderLabel = function () {
|
|
1405
1462
|
var _this = this;
|
|
1406
|
-
this.
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
.
|
|
1463
|
+
var containerWidth = this.getWidth();
|
|
1464
|
+
var canNotAddLine = (this.groupType === 'stacked'
|
|
1465
|
+
|| this.groupType === 'stacked100')
|
|
1466
|
+
&& containerWidth >= 694;
|
|
1467
|
+
if (!canNotAddLine) {
|
|
1468
|
+
this.labelGroup.append('line')
|
|
1469
|
+
.attr('x1', 0)
|
|
1470
|
+
.attr('y1', this.actualMargin.top + this.height)
|
|
1471
|
+
.attr('x2', this.width + this.actualMargin.left + this.actualMargin.right)
|
|
1472
|
+
.attr('y2', this.actualMargin.top + this.height)
|
|
1473
|
+
.attr('class', 'mo-label-line');
|
|
1474
|
+
}
|
|
1412
1475
|
this.labelGroup.append('text')
|
|
1413
1476
|
.attr('x', this.svgWidth / 2)
|
|
1414
1477
|
.attr('y', this.actualMargin.top + this.height + 25)
|
|
@@ -1538,7 +1601,7 @@ __vue_render__$1._withStripped = true;
|
|
|
1538
1601
|
/* style */
|
|
1539
1602
|
var __vue_inject_styles__$1 = function (inject) {
|
|
1540
1603
|
if (!inject) { return }
|
|
1541
|
-
inject("data-v-dad289de_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
1604
|
+
inject("data-v-3cd122ca_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
1542
1605
|
|
|
1543
1606
|
};
|
|
1544
1607
|
/* scoped */
|
|
@@ -2185,6 +2248,7 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
2185
2248
|
.attr('width', this.svgWidth)
|
|
2186
2249
|
.attr('height', this.svgHeight)
|
|
2187
2250
|
.append('g')
|
|
2251
|
+
.style('overflow', 'visible')
|
|
2188
2252
|
.attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
|
|
2189
2253
|
this.xAxisScale = scalePoint()
|
|
2190
2254
|
.domain(this.refactoredData.map(function (d) { return d.label; }))
|
|
@@ -2330,7 +2394,7 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
2330
2394
|
this.svg.append('text')
|
|
2331
2395
|
.attr('class', 'mo-axis-label')
|
|
2332
2396
|
.attr('x', -this.height / 2)
|
|
2333
|
-
.attr('y', -this.actualMargin.left
|
|
2397
|
+
.attr('y', -this.actualMargin.left - 15)
|
|
2334
2398
|
.attr('transform', 'rotate(-90)')
|
|
2335
2399
|
.text(this.aggregates.map(function (a) { return a.label; }).join(', '));
|
|
2336
2400
|
}
|
|
@@ -2594,7 +2658,7 @@ __vue_render__$3._withStripped = true;
|
|
|
2594
2658
|
/* style */
|
|
2595
2659
|
var __vue_inject_styles__$3 = function (inject) {
|
|
2596
2660
|
if (!inject) { return }
|
|
2597
|
-
inject("data-v-24a1c463_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
2661
|
+
inject("data-v-41fc264b_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
2598
2662
|
|
|
2599
2663
|
};
|
|
2600
2664
|
/* scoped */
|
|
@@ -2653,9 +2717,9 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
2653
2717
|
this.funnelWidth = containerWidth;
|
|
2654
2718
|
}
|
|
2655
2719
|
else {
|
|
2656
|
-
this.funnelWidth = containerWidth /
|
|
2720
|
+
this.funnelWidth = containerWidth / 2;
|
|
2657
2721
|
}
|
|
2658
|
-
this.funnelHeight = this.height || this.funnelWidth
|
|
2722
|
+
this.funnelHeight = this.height || this.funnelWidth;
|
|
2659
2723
|
var dataLength = this.data.length;
|
|
2660
2724
|
var height = this.funnelHeight + (this.legendItemHeight * (dataLength + 1));
|
|
2661
2725
|
var descendWidth = dataLength <= 1
|
|
@@ -2692,10 +2756,20 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
2692
2756
|
}];
|
|
2693
2757
|
_this.refactoredData.push(temp);
|
|
2694
2758
|
});
|
|
2695
|
-
|
|
2696
|
-
.
|
|
2697
|
-
|
|
2698
|
-
|
|
2759
|
+
if (containerWidth < 694) {
|
|
2760
|
+
this.svg = select(this.$el)
|
|
2761
|
+
.append('svg')
|
|
2762
|
+
.attr('width', this.funnelWidth)
|
|
2763
|
+
.attr('height', height);
|
|
2764
|
+
}
|
|
2765
|
+
else {
|
|
2766
|
+
this.svg = select(this.$el)
|
|
2767
|
+
.style('text-align', 'left')
|
|
2768
|
+
.append('svg')
|
|
2769
|
+
.attr('width', this.funnelWidth)
|
|
2770
|
+
.attr('height', height)
|
|
2771
|
+
.style('overflow', 'visible');
|
|
2772
|
+
}
|
|
2699
2773
|
this.total = sum(this.refactoredData, function (d) { return d.values[0]; });
|
|
2700
2774
|
};
|
|
2701
2775
|
FunnelChart.prototype.renderFunnel = function () {
|
|
@@ -2738,6 +2812,7 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
2738
2812
|
};
|
|
2739
2813
|
FunnelChart.prototype.renderLegend = function () {
|
|
2740
2814
|
var _this = this;
|
|
2815
|
+
var containerWidth = this.getWidth();
|
|
2741
2816
|
var transformY = this.funnelHeight + this.legendItemHeight;
|
|
2742
2817
|
if (this.groupBy && this.aggregate) {
|
|
2743
2818
|
this.svg.append('text')
|
|
@@ -2745,21 +2820,37 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
2745
2820
|
.attr('x', this.funnelWidth / 2)
|
|
2746
2821
|
.attr('y', this.funnelHeight + 25)
|
|
2747
2822
|
.text(this.aggregate.label);
|
|
2748
|
-
|
|
2749
|
-
.
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
.
|
|
2758
|
-
|
|
2823
|
+
if (containerWidth < 694) {
|
|
2824
|
+
this.svg.append('line')
|
|
2825
|
+
.attr('x1', 0)
|
|
2826
|
+
.attr('y1', this.funnelHeight + 40)
|
|
2827
|
+
.attr('x2', this.funnelWidth)
|
|
2828
|
+
.attr('y2', this.funnelHeight + 40)
|
|
2829
|
+
.attr('class', 'mo-label-line');
|
|
2830
|
+
}
|
|
2831
|
+
if (containerWidth < 694) {
|
|
2832
|
+
this.svg.append('text')
|
|
2833
|
+
.attr('class', 'mo-axis-label')
|
|
2834
|
+
.attr('x', this.funnelWidth / 2)
|
|
2835
|
+
.attr('y', this.funnelHeight + 65)
|
|
2836
|
+
.text(this.groupBy.label);
|
|
2837
|
+
}
|
|
2838
|
+
else {
|
|
2839
|
+
this.svg.append('text')
|
|
2840
|
+
.attr('class', 'mo-axis-label')
|
|
2841
|
+
.attr('x', this.funnelWidth + 150)
|
|
2842
|
+
.attr('y', 20)
|
|
2843
|
+
.text(this.groupBy.label);
|
|
2844
|
+
}
|
|
2759
2845
|
transformY += 65;
|
|
2760
2846
|
}
|
|
2761
|
-
var legend = this.svg.append('g')
|
|
2762
|
-
|
|
2847
|
+
var legend = this.svg.append('g');
|
|
2848
|
+
if (containerWidth < 694) {
|
|
2849
|
+
legend.attr('transform', "translate( 0, " + transformY + " )");
|
|
2850
|
+
}
|
|
2851
|
+
else {
|
|
2852
|
+
legend.attr('transform', "translate( " + (this.funnelWidth + 50) + ", 50 )");
|
|
2853
|
+
}
|
|
2763
2854
|
var legendRect = legend.selectAll('rect')
|
|
2764
2855
|
.data(this.refactoredData)
|
|
2765
2856
|
.enter()
|
|
@@ -2879,7 +2970,7 @@ __vue_render__$4._withStripped = true;
|
|
|
2879
2970
|
/* style */
|
|
2880
2971
|
var __vue_inject_styles__$4 = function (inject) {
|
|
2881
2972
|
if (!inject) { return }
|
|
2882
|
-
inject("data-v-4d1392ac_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
2973
|
+
inject("data-v-7439c35d_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
2883
2974
|
|
|
2884
2975
|
};
|
|
2885
2976
|
/* scoped */
|
|
@@ -3292,6 +3383,8 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
3292
3383
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3293
3384
|
_this.width = 0;
|
|
3294
3385
|
_this.height = 0;
|
|
3386
|
+
_this.svgWidth = 0;
|
|
3387
|
+
_this.svgHeight = 0;
|
|
3295
3388
|
_this.svg = null;
|
|
3296
3389
|
_this.xAxisScale = null;
|
|
3297
3390
|
_this.xAxis = null;
|
|
@@ -3299,6 +3392,7 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
3299
3392
|
_this.yAxis = null;
|
|
3300
3393
|
_this.line = null;
|
|
3301
3394
|
_this.categories = [];
|
|
3395
|
+
_this.additionalHeight = 0;
|
|
3302
3396
|
return _this;
|
|
3303
3397
|
}
|
|
3304
3398
|
ScatterChart.prototype.onDataChanged = function () {
|
|
@@ -3320,21 +3414,17 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
3320
3414
|
};
|
|
3321
3415
|
ScatterChart.prototype.init = function () {
|
|
3322
3416
|
var _this = this;
|
|
3323
|
-
var
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
else {
|
|
3328
|
-
svgWidth = this.getWidth() / 1.2;
|
|
3329
|
-
}
|
|
3330
|
-
this.width = svgWidth - this.margin.left - this.margin.right;
|
|
3331
|
-
if (this.getWidth() < 694) {
|
|
3332
|
-
this.height = this.width;
|
|
3417
|
+
var containerWidth = this.getWidth();
|
|
3418
|
+
this.svgWidth = containerWidth;
|
|
3419
|
+
if (containerWidth < 694) {
|
|
3420
|
+
this.svgWidth = containerWidth;
|
|
3333
3421
|
}
|
|
3334
3422
|
else {
|
|
3335
|
-
this.
|
|
3423
|
+
this.svgWidth = containerWidth / 2;
|
|
3336
3424
|
}
|
|
3337
|
-
|
|
3425
|
+
this.width = this.svgWidth - this.margin.left - this.margin.right;
|
|
3426
|
+
this.height = this.width;
|
|
3427
|
+
this.svgHeight = this.height + this.margin.top + this.margin.bottom;
|
|
3338
3428
|
this.categories = [];
|
|
3339
3429
|
var xMaxValue = max(this.data, function (d) { return d.values[0]; });
|
|
3340
3430
|
var yMaxValue = max(this.data, function (d) { return d.values[1]; });
|
|
@@ -3342,16 +3432,29 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
3342
3432
|
this.refactorGroupedData();
|
|
3343
3433
|
}
|
|
3344
3434
|
if (this.categories.length > 0) {
|
|
3345
|
-
|
|
3435
|
+
this.additionalHeight = this.categories.length * 25 + 50;
|
|
3346
3436
|
xMaxValue = ChartService.getMaxValue(this.data, 0);
|
|
3347
3437
|
yMaxValue = ChartService.getMaxValue(this.data, 1);
|
|
3348
3438
|
}
|
|
3349
|
-
this.
|
|
3350
|
-
|
|
3351
|
-
.
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3439
|
+
this.svgHeight += this.additionalHeight;
|
|
3440
|
+
if (containerWidth < 694) {
|
|
3441
|
+
this.svg = select(this.$el)
|
|
3442
|
+
.append('svg')
|
|
3443
|
+
.attr('width', this.svgWidth)
|
|
3444
|
+
.attr('height', this.svgHeight)
|
|
3445
|
+
.append('g')
|
|
3446
|
+
.attr('transform', "translate(" + this.margin.left + ", " + this.margin.top + ")");
|
|
3447
|
+
}
|
|
3448
|
+
else {
|
|
3449
|
+
this.svg = select(this.$el)
|
|
3450
|
+
.style('text-align', 'left')
|
|
3451
|
+
.append('svg')
|
|
3452
|
+
.attr('width', this.svgWidth)
|
|
3453
|
+
.attr('height', this.svgHeight)
|
|
3454
|
+
.style('overflow', 'visible')
|
|
3455
|
+
.append('g')
|
|
3456
|
+
.attr('transform', "translate(" + this.margin.left + ", " + this.margin.top + ")");
|
|
3457
|
+
}
|
|
3355
3458
|
this.xAxisScale = scaleLinear()
|
|
3356
3459
|
.domain([0, xMaxValue || 10])
|
|
3357
3460
|
.range([0, this.width - 5])
|
|
@@ -3508,12 +3611,19 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
3508
3611
|
ScatterChart.prototype.renderLabel = function () {
|
|
3509
3612
|
var _this = this;
|
|
3510
3613
|
var labelGroup = this.svg.append('g');
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
.attr('
|
|
3514
|
-
.
|
|
3515
|
-
|
|
3516
|
-
|
|
3614
|
+
var containerWidth = this.getWidth();
|
|
3615
|
+
if (containerWidth < 694) {
|
|
3616
|
+
labelGroup.attr('transform', 'translate( 0, 0 )');
|
|
3617
|
+
labelGroup.append('line')
|
|
3618
|
+
.attr('x1', -this.margin.left)
|
|
3619
|
+
.attr('y1', this.margin.top + this.margin.bottom + this.height)
|
|
3620
|
+
.attr('x2', this.width + this.margin.left + this.margin.right)
|
|
3621
|
+
.attr('y2', this.margin.top + this.margin.bottom + this.height)
|
|
3622
|
+
.attr('class', 'mo-label-line');
|
|
3623
|
+
}
|
|
3624
|
+
else {
|
|
3625
|
+
labelGroup.attr('transform', "translate( " + (this.svgWidth + 50) + ",\n -" + (this.svgHeight - this.additionalHeight) + " )");
|
|
3626
|
+
}
|
|
3517
3627
|
labelGroup.append('text')
|
|
3518
3628
|
.attr('x', (this.width - this.margin.left) / 2)
|
|
3519
3629
|
.attr('y', this.margin.top + this.margin.bottom + this.height + 25)
|
|
@@ -3622,7 +3732,7 @@ __vue_render__$7._withStripped = true;
|
|
|
3622
3732
|
/* style */
|
|
3623
3733
|
var __vue_inject_styles__$7 = function (inject) {
|
|
3624
3734
|
if (!inject) { return }
|
|
3625
|
-
inject("data-v-52956e94_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
3735
|
+
inject("data-v-23679b92_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.6rem;\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 font-size: 1.6rem;\n color: #323233;\n position: relative;\n}\n.mo-metric:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\n display: block;\n z-index: 15;\n transform-origin: 50% 0%;\n left: 0;\n top: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-metric:before {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:before {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:before {\n transform-origin: 33% 0%;\n}\n.mo-metric:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-metric:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-metric:after {\n transform-origin: 33% 66%;\n}\n.mo-metric .mo-metric-inner {\n display: table;\n table-layout: fixed;\n width: 100%;\n height: 40px;\n position: relative;\n}\n.mo-metric .mo-metric-inner:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:before {\n transform-origin: 0% 33%;\n}\n.mo-metric .mo-metric-inner:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #c8cacc;\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-metric .mo-metric-inner:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-metric .mo-metric-inner:after {\n transform-origin: 66% 33%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n display: table-cell;\n vertical-align: middle;\n}\n.mo-metric .mo-metric-label {\n text-align: left;\n padding-left: 5px;\n max-width: 80%;\n width: 80%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-metric .mo-metric-value {\n text-align: right;\n padding-right: 5px;\n max-width: 20%;\n width: 20%;\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: middle;\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 });
|
|
3626
3736
|
|
|
3627
3737
|
};
|
|
3628
3738
|
/* scoped */
|