cats-charts 0.0.74 → 0.0.76
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/fesm2022/cats-charts.mjs +66 -3
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/package.json +1 -1
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -1084,7 +1084,7 @@ class Charts {
|
|
|
1084
1084
|
font-size: 12px;
|
|
1085
1085
|
color: #434A51;
|
|
1086
1086
|
">
|
|
1087
|
-
${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : value}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
|
|
1087
|
+
${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : this.toMaxDecimals(value)}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
|
|
1088
1088
|
</span>
|
|
1089
1089
|
</div>
|
|
1090
1090
|
${extraTooltipDataTemplate}
|
|
@@ -1134,7 +1134,7 @@ class Charts {
|
|
|
1134
1134
|
display:inline-block;
|
|
1135
1135
|
"></span>
|
|
1136
1136
|
|
|
1137
|
-
<span>${name}: <b style="color:#111;font-weight:600;">${value}</b></span>
|
|
1137
|
+
<span>${name}: <b style="color:#111;font-weight:600;">${this.toMaxDecimals(value)}</b></span>
|
|
1138
1138
|
</div>
|
|
1139
1139
|
`;
|
|
1140
1140
|
});
|
|
@@ -1163,7 +1163,7 @@ class Charts {
|
|
|
1163
1163
|
color:#434A51;
|
|
1164
1164
|
padding-top: 0.5rem;
|
|
1165
1165
|
">
|
|
1166
|
-
Total: <b style="color:#111;font-weight:600;">${total}</b>
|
|
1166
|
+
Total: <b style="color:#111;font-weight:600;">${this.toMaxDecimals(total)}</b>
|
|
1167
1167
|
${extraTooltipDataTemplate}
|
|
1168
1168
|
</div>
|
|
1169
1169
|
|
|
@@ -1413,6 +1413,12 @@ class Charts {
|
|
|
1413
1413
|
maxHeight = Math.max(maxHeight, rect.height + verticalPadding);
|
|
1414
1414
|
return maxHeight + 6;
|
|
1415
1415
|
}
|
|
1416
|
+
toMaxDecimals(value, maxDecimal = 2) {
|
|
1417
|
+
if (!Number.isFinite(value)) {
|
|
1418
|
+
return value;
|
|
1419
|
+
}
|
|
1420
|
+
return Number(value.toFixed(maxDecimal));
|
|
1421
|
+
}
|
|
1416
1422
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Charts, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1417
1423
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Charts, providedIn: 'root' });
|
|
1418
1424
|
}
|
|
@@ -1872,6 +1878,25 @@ class LinesChart {
|
|
|
1872
1878
|
}
|
|
1873
1879
|
});
|
|
1874
1880
|
}
|
|
1881
|
+
else if (eventName === 'click') {
|
|
1882
|
+
this.chartInstance.on('click', (params) => {
|
|
1883
|
+
this.chartEvent.emit({
|
|
1884
|
+
type: 'click',
|
|
1885
|
+
data: params,
|
|
1886
|
+
});
|
|
1887
|
+
});
|
|
1888
|
+
const zr = this.chartInstance.getZr();
|
|
1889
|
+
zr.on('click', (zrEvent) => {
|
|
1890
|
+
if (!zrEvent.target) {
|
|
1891
|
+
const nativeEvent = zrEvent.event;
|
|
1892
|
+
nativeEvent.preventDefault();
|
|
1893
|
+
this.chartEvent.emit({
|
|
1894
|
+
type: 'blur',
|
|
1895
|
+
data: { ...zrEvent, type: 'blur' },
|
|
1896
|
+
});
|
|
1897
|
+
}
|
|
1898
|
+
});
|
|
1899
|
+
}
|
|
1875
1900
|
else {
|
|
1876
1901
|
this.chartInstance.on(eventName, (params) => {
|
|
1877
1902
|
this.chartEvent.emit({
|
|
@@ -2435,6 +2460,25 @@ class BarChart {
|
|
|
2435
2460
|
}
|
|
2436
2461
|
});
|
|
2437
2462
|
}
|
|
2463
|
+
else if (eventName === 'click') {
|
|
2464
|
+
this.chartInstance.on('click', (params) => {
|
|
2465
|
+
this.chartEvent.emit({
|
|
2466
|
+
type: 'click',
|
|
2467
|
+
data: params,
|
|
2468
|
+
});
|
|
2469
|
+
});
|
|
2470
|
+
const zr = this.chartInstance.getZr();
|
|
2471
|
+
zr.on('click', (zrEvent) => {
|
|
2472
|
+
if (!zrEvent.target) {
|
|
2473
|
+
const nativeEvent = zrEvent.event;
|
|
2474
|
+
nativeEvent.preventDefault();
|
|
2475
|
+
this.chartEvent.emit({
|
|
2476
|
+
type: 'blur',
|
|
2477
|
+
data: { ...zrEvent, type: 'blur' },
|
|
2478
|
+
});
|
|
2479
|
+
}
|
|
2480
|
+
});
|
|
2481
|
+
}
|
|
2438
2482
|
else {
|
|
2439
2483
|
this.chartInstance.on(eventName, (params) => {
|
|
2440
2484
|
this.chartEvent.emit({
|
|
@@ -2889,6 +2933,25 @@ class DoughnutChart {
|
|
|
2889
2933
|
}
|
|
2890
2934
|
});
|
|
2891
2935
|
}
|
|
2936
|
+
else if (eventName === 'click') {
|
|
2937
|
+
this.chartInstance.on('click', (params) => {
|
|
2938
|
+
this.chartEvent.emit({
|
|
2939
|
+
type: 'click',
|
|
2940
|
+
data: params,
|
|
2941
|
+
});
|
|
2942
|
+
});
|
|
2943
|
+
const zr = this.chartInstance.getZr();
|
|
2944
|
+
zr.on('click', (zrEvent) => {
|
|
2945
|
+
if (!zrEvent.target) {
|
|
2946
|
+
const nativeEvent = zrEvent.event;
|
|
2947
|
+
nativeEvent.preventDefault();
|
|
2948
|
+
this.chartEvent.emit({
|
|
2949
|
+
type: 'blur',
|
|
2950
|
+
data: { ...zrEvent, type: 'blur' },
|
|
2951
|
+
});
|
|
2952
|
+
}
|
|
2953
|
+
});
|
|
2954
|
+
}
|
|
2892
2955
|
else {
|
|
2893
2956
|
this.chartInstance.on(eventName, (params) => {
|
|
2894
2957
|
this.chartEvent.emit({
|