moblor-vue 0.1.76 → 0.1.78
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 +57 -12
- package/dist/moblor-components.js +1 -1
- package/dist/moblor-vue.esm.js +57 -12
- package/dist/moblor-vue.js +1 -1
- package/package.json +1 -1
|
@@ -1911,7 +1911,7 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
1911
1911
|
.append('svg')
|
|
1912
1912
|
.attr('width', this.legendSvgWidth)
|
|
1913
1913
|
.attr('height', this.legendSvgHeight);
|
|
1914
|
-
this.radius = this.width / 2 - 30;
|
|
1914
|
+
this.radius = Math.max(0, this.width / 2 - Math.min(30, this.width * 0.1));
|
|
1915
1915
|
this.innerRadius = this.donut ? this.radius * 0.43 : 0;
|
|
1916
1916
|
this.rotation = {
|
|
1917
1917
|
index: 0,
|
|
@@ -1928,7 +1928,6 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
1928
1928
|
var axisLabel = mainSvg.append('text')
|
|
1929
1929
|
.attr('class', 'mo-axis-label')
|
|
1930
1930
|
.attr('x', this.svgWidth / 2)
|
|
1931
|
-
.style('font-size', Math.min(16, this.svgWidth * 0.04) + "px")
|
|
1932
1931
|
.attr('y', 40);
|
|
1933
1932
|
if (currency) {
|
|
1934
1933
|
axisLabel.text(ChartService
|
|
@@ -1993,7 +1992,6 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
1993
1992
|
.attr('x', 10)
|
|
1994
1993
|
.attr('y', 40)
|
|
1995
1994
|
.attr('class', 'mo-label-title')
|
|
1996
|
-
.style('font-size', Math.min(16, this.svgWidth * 0.04) + "px")
|
|
1997
1995
|
.text(ChartService.formatDomainValue(this.groupBy.label, this.legendSvgWidth, false));
|
|
1998
1996
|
currentY = 65;
|
|
1999
1997
|
}
|
|
@@ -2015,7 +2013,6 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2015
2013
|
.attr('x', 35)
|
|
2016
2014
|
.attr('y', function (d, i) { return currentY + 12 + i * 25; })
|
|
2017
2015
|
.attr('class', 'mo-legend-text')
|
|
2018
|
-
.style('font-size', Math.min(16, this.svgWidth * 0.04) + "px")
|
|
2019
2016
|
.text(function (d) { return ChartService
|
|
2020
2017
|
.formatDomainValue(d.label, _this.legendSvgWidth - 5, false); });
|
|
2021
2018
|
};
|
|
@@ -2035,26 +2032,30 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2035
2032
|
});
|
|
2036
2033
|
};
|
|
2037
2034
|
PieChart.prototype.renderTotal = function () {
|
|
2035
|
+
var fontSize = Math.min(18, this.svgWidth * 0.06);
|
|
2036
|
+
var valueOffset = Math.max(10, Math.min(18, fontSize * 1.2));
|
|
2038
2037
|
this.centerGroup.append('svg:text')
|
|
2039
2038
|
.style('text-anchor', 'middle')
|
|
2040
2039
|
.attr('class', 'mo-summary-label')
|
|
2041
2040
|
.transition()
|
|
2042
2041
|
.delay(500)
|
|
2043
2042
|
.text(this.totalLabel)
|
|
2044
|
-
.style('font-size',
|
|
2043
|
+
.style('font-size', fontSize + "px");
|
|
2045
2044
|
this.centerGroup.append('svg:text')
|
|
2046
|
-
.attr('y',
|
|
2045
|
+
.attr('y', valueOffset)
|
|
2047
2046
|
.style('text-anchor', 'middle')
|
|
2048
2047
|
.attr('class', 'mo-summary-value')
|
|
2049
2048
|
.transition()
|
|
2050
2049
|
.delay(500)
|
|
2051
2050
|
.text(ChartService.formatValue(this.total, this.symbol, 1))
|
|
2052
|
-
.style('font-size',
|
|
2051
|
+
.style('font-size', fontSize + "px");
|
|
2053
2052
|
};
|
|
2054
2053
|
PieChart.prototype.renderInnerLabel = function () {
|
|
2055
2054
|
var _this = this;
|
|
2056
2055
|
var pieChartTotal = this.chartDataForLegend.reduce(function (sumNum, d) { return sumNum
|
|
2057
2056
|
+ d.values[0]; }, 0);
|
|
2057
|
+
var fontSize = Math.max(10, Math.min(16, this.svgWidth * 0.035));
|
|
2058
|
+
var canRenderLabels = this.width >= 160;
|
|
2058
2059
|
this.arc.each(function (d, i, nodes) {
|
|
2059
2060
|
var node = nodes[i];
|
|
2060
2061
|
var container = select(node);
|
|
@@ -2072,6 +2073,12 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2072
2073
|
var lines = textContent.indexOf('\n') > 0
|
|
2073
2074
|
? textContent.split('\n')
|
|
2074
2075
|
: ["" + textContent];
|
|
2076
|
+
var availableArcLength = (d.endAngle - d.startAngle) * _this.radius;
|
|
2077
|
+
var longestLineLength = Math.max.apply(Math, lines.map(function (line) { return line.length; }));
|
|
2078
|
+
var requiredArcLength = longestLineLength * fontSize * 0.6 + 12;
|
|
2079
|
+
// The legend remains available when an inner label cannot fit cleanly.
|
|
2080
|
+
if (!canRenderLabels || availableArcLength < requiredArcLength)
|
|
2081
|
+
{ return; }
|
|
2075
2082
|
var textElement = container
|
|
2076
2083
|
.append('text')
|
|
2077
2084
|
.attr('class', 'mo-inner-text')
|
|
@@ -2081,7 +2088,7 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2081
2088
|
var colorString = ChartService.getColor(i, _this.colors);
|
|
2082
2089
|
return ChartService.isLightColor(colorString) ? '#000000' : '#ffffff';
|
|
2083
2090
|
})
|
|
2084
|
-
.style('font-size',
|
|
2091
|
+
.style('font-size', fontSize + "px");
|
|
2085
2092
|
textElement
|
|
2086
2093
|
.transition()
|
|
2087
2094
|
.duration(750)
|
|
@@ -2205,7 +2212,7 @@ __vue_render__$2._withStripped = true;
|
|
|
2205
2212
|
/* style */
|
|
2206
2213
|
var __vue_inject_styles__$2 = function (inject) {
|
|
2207
2214
|
if (!inject) { return }
|
|
2208
|
-
inject("data-v-5b5b2cd6_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 font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\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: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\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: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.chart-container .chart-legends {\n width: 33%;\n height: 100%;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\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 fill: #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 });
|
|
2215
|
+
inject("data-v-08807cf6_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 font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\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: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\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: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.chart-container .chart-legends {\n width: 33%;\n height: 100%;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\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 fill: #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 });
|
|
2209
2216
|
|
|
2210
2217
|
};
|
|
2211
2218
|
/* scoped */
|
|
@@ -4375,6 +4382,7 @@ var DataConvertor = /** @class */ (function () {
|
|
|
4375
4382
|
if (level2GroupingLabels.length === 0) {
|
|
4376
4383
|
return pieces;
|
|
4377
4384
|
}
|
|
4385
|
+
level2GroupingLabels.sort();
|
|
4378
4386
|
var refactoredPieces = [];
|
|
4379
4387
|
pieces.forEach(function (piece) {
|
|
4380
4388
|
var refactoredPiece = JSON.parse(JSON.stringify(piece));
|
|
@@ -6229,6 +6237,15 @@ var SFHorizontalBarChart = /** @class */ (function (_super) {
|
|
|
6229
6237
|
function SFHorizontalBarChart() {
|
|
6230
6238
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
6231
6239
|
}
|
|
6240
|
+
Object.defineProperty(SFHorizontalBarChart.prototype, "sortedData", {
|
|
6241
|
+
get: function () {
|
|
6242
|
+
return __spreadArrays(this.data).sort(
|
|
6243
|
+
// eslint-disable-next-line comma-dangle
|
|
6244
|
+
function (a, b) { return (b.values[0] || 0) - (a.values[0] || 0); });
|
|
6245
|
+
},
|
|
6246
|
+
enumerable: false,
|
|
6247
|
+
configurable: true
|
|
6248
|
+
});
|
|
6232
6249
|
Object.defineProperty(SFHorizontalBarChart.prototype, "isGrouped", {
|
|
6233
6250
|
get: function () {
|
|
6234
6251
|
return this.data.length > 0
|
|
@@ -6293,7 +6310,7 @@ var __vue_render__$d = function () {
|
|
|
6293
6310
|
return _vm.data.length > 0
|
|
6294
6311
|
? _c("bar-chart-horizontal", {
|
|
6295
6312
|
attrs: {
|
|
6296
|
-
data: _vm.
|
|
6313
|
+
data: _vm.sortedData,
|
|
6297
6314
|
"x-axis-mode": "vertical",
|
|
6298
6315
|
decimal: 1,
|
|
6299
6316
|
"value-position": "inner",
|
|
@@ -7081,14 +7098,42 @@ var SFReportChart = /** @class */ (function (_super) {
|
|
|
7081
7098
|
enumerable: false,
|
|
7082
7099
|
configurable: true
|
|
7083
7100
|
});
|
|
7101
|
+
Object.defineProperty(SFReportChart.prototype, "hasError", {
|
|
7102
|
+
get: function () {
|
|
7103
|
+
return this.data
|
|
7104
|
+
&& this.data.status
|
|
7105
|
+
&& this.data.status.errorCode;
|
|
7106
|
+
},
|
|
7107
|
+
enumerable: false,
|
|
7108
|
+
configurable: true
|
|
7109
|
+
});
|
|
7110
|
+
Object.defineProperty(SFReportChart.prototype, "isNegative", {
|
|
7111
|
+
get: function () {
|
|
7112
|
+
return (this.chartType === 'Pie'
|
|
7113
|
+
|| this.chartType === 'Donut'
|
|
7114
|
+
|| this.chartType === 'Funnel'
|
|
7115
|
+
|| this.chartType.includes('Stacked'))
|
|
7116
|
+
&& Array.isArray(this.refactoredData)
|
|
7117
|
+
&& !this.refactoredData.some(function (item) { return item.values[0] > 0; });
|
|
7118
|
+
},
|
|
7119
|
+
enumerable: false,
|
|
7120
|
+
configurable: true
|
|
7121
|
+
});
|
|
7084
7122
|
SFReportChart.prototype.render = function (createElement) {
|
|
7085
7123
|
var convertor = new ReportDataConvertor(this.data);
|
|
7086
7124
|
this.refactoredData = convertor.data;
|
|
7087
7125
|
this.refactoredMetadata = convertor.metadata;
|
|
7088
7126
|
var children = [];
|
|
7089
|
-
if (this.
|
|
7127
|
+
if (this.hasError) {
|
|
7128
|
+
var errorMessage = this.data.status.errorSeverity + ": " + this.data.status.errorMessage;
|
|
7129
|
+
children.push(this.renderError(createElement, errorMessage));
|
|
7130
|
+
}
|
|
7131
|
+
else if (this.isEmpty) {
|
|
7090
7132
|
children.push(this.renderPrompt(createElement, this.noDataText));
|
|
7091
7133
|
}
|
|
7134
|
+
else if (this.isNegative) {
|
|
7135
|
+
children.push(this.renderPrompt(createElement, this.negativeDataText));
|
|
7136
|
+
}
|
|
7092
7137
|
else {
|
|
7093
7138
|
children.push(this.renderChart(createElement));
|
|
7094
7139
|
}
|
|
@@ -7198,7 +7243,7 @@ var __vue_script__$l = SFReportChart;
|
|
|
7198
7243
|
/* style */
|
|
7199
7244
|
var __vue_inject_styles__$l = function (inject) {
|
|
7200
7245
|
if (!inject) { return }
|
|
7201
|
-
inject("data-v-
|
|
7246
|
+
inject("data-v-488a1915_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.sf-analytics-chart {\n width: 100%;\n padding: 10px;\n background-color: #fff;\n transform: translate3d(0, 0, 0);\n}\n.sf-analytics-chart .sf-analytics-text {\n width: 100%;\n height: 100%;\n min-height: 35rem;\n font-size: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.sf-analytics-chart .sf-analytics-error {\n width: 100%;\n height: 100%;\n min-height: 35rem;\n font-size: 1.4rem;\n color: #d74c3b;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n@media (prefers-color-scheme: dark) {\n.sf-analytics-chart {\n background-color: #1c1c1e;\n}\n.sf-analytics-chart .sf-analytics-text {\n color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
|
|
7202
7247
|
|
|
7203
7248
|
};
|
|
7204
7249
|
/* scoped */
|