cats-charts 0.0.73 → 0.0.75
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 +87 -2
- 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
|
@@ -1385,6 +1385,34 @@ class Charts {
|
|
|
1385
1385
|
</div>
|
|
1386
1386
|
`;
|
|
1387
1387
|
}
|
|
1388
|
+
calculateGridTopLineBar(config) {
|
|
1389
|
+
let maxHeight = 0;
|
|
1390
|
+
const label = config?.series?.[0]?.['label'];
|
|
1391
|
+
if ((config?.showLabel !== true && label?.show !== true) ||
|
|
1392
|
+
(config?.labelPosition !== 'top' && label?.position !== 'top')) {
|
|
1393
|
+
return 0;
|
|
1394
|
+
}
|
|
1395
|
+
const font = [
|
|
1396
|
+
label.fontStyle,
|
|
1397
|
+
label.fontWeight,
|
|
1398
|
+
`${label.fontSize ?? 12}px`,
|
|
1399
|
+
label.fontFamily ?? 'sans-serif',
|
|
1400
|
+
]
|
|
1401
|
+
.filter(Boolean)
|
|
1402
|
+
.join(' ');
|
|
1403
|
+
const text = typeof label.formatter === 'string' ? label.formatter : '0';
|
|
1404
|
+
const rect = echarts.format.getTextRect(text, font);
|
|
1405
|
+
const padding = label.padding ?? 0;
|
|
1406
|
+
const verticalPadding = Array.isArray(padding)
|
|
1407
|
+
? padding.length === 1
|
|
1408
|
+
? padding[0] * 2
|
|
1409
|
+
: padding.length === 2
|
|
1410
|
+
? padding[0] * 2
|
|
1411
|
+
: padding[0] + padding[2]
|
|
1412
|
+
: padding * 2;
|
|
1413
|
+
maxHeight = Math.max(maxHeight, rect.height + verticalPadding);
|
|
1414
|
+
return maxHeight + 6;
|
|
1415
|
+
}
|
|
1388
1416
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Charts, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1389
1417
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Charts, providedIn: 'root' });
|
|
1390
1418
|
}
|
|
@@ -1523,7 +1551,7 @@ class LinesChart {
|
|
|
1523
1551
|
left: this.config?.gridLeft ?? 0,
|
|
1524
1552
|
right: this.config?.gridRight ?? 0,
|
|
1525
1553
|
bottom: this.config?.gridBottom ?? 0,
|
|
1526
|
-
top: this.config?.gridTop ?? 0,
|
|
1554
|
+
top: this.config?.gridTop ?? this.chartService.calculateGridTopLineBar(this.config) ?? 0,
|
|
1527
1555
|
},
|
|
1528
1556
|
xAxis: {
|
|
1529
1557
|
show: !this.config?.isTrendChart,
|
|
@@ -1844,6 +1872,25 @@ class LinesChart {
|
|
|
1844
1872
|
}
|
|
1845
1873
|
});
|
|
1846
1874
|
}
|
|
1875
|
+
else if (eventName === 'click') {
|
|
1876
|
+
this.chartInstance.on('click', (params) => {
|
|
1877
|
+
this.chartEvent.emit({
|
|
1878
|
+
type: 'click',
|
|
1879
|
+
data: params,
|
|
1880
|
+
});
|
|
1881
|
+
});
|
|
1882
|
+
const zr = this.chartInstance.getZr();
|
|
1883
|
+
zr.on('click', (zrEvent) => {
|
|
1884
|
+
if (!zrEvent.target) {
|
|
1885
|
+
const nativeEvent = zrEvent.event;
|
|
1886
|
+
nativeEvent.preventDefault();
|
|
1887
|
+
this.chartEvent.emit({
|
|
1888
|
+
type: 'blur',
|
|
1889
|
+
data: { ...zrEvent, type: 'blur' },
|
|
1890
|
+
});
|
|
1891
|
+
}
|
|
1892
|
+
});
|
|
1893
|
+
}
|
|
1847
1894
|
else {
|
|
1848
1895
|
this.chartInstance.on(eventName, (params) => {
|
|
1849
1896
|
this.chartEvent.emit({
|
|
@@ -2057,7 +2104,7 @@ class BarChart {
|
|
|
2057
2104
|
left: this.config.gridLeft ?? 0,
|
|
2058
2105
|
right: this.config.gridRight ?? 0,
|
|
2059
2106
|
bottom: this.config.gridBottom ?? 0,
|
|
2060
|
-
top: this.config.gridTop ?? 0,
|
|
2107
|
+
top: this.config.gridTop ?? this.chartService.calculateGridTopLineBar(this.config) ?? 0,
|
|
2061
2108
|
},
|
|
2062
2109
|
xAxis: {
|
|
2063
2110
|
type: 'category',
|
|
@@ -2407,6 +2454,25 @@ class BarChart {
|
|
|
2407
2454
|
}
|
|
2408
2455
|
});
|
|
2409
2456
|
}
|
|
2457
|
+
else if (eventName === 'click') {
|
|
2458
|
+
this.chartInstance.on('click', (params) => {
|
|
2459
|
+
this.chartEvent.emit({
|
|
2460
|
+
type: 'click',
|
|
2461
|
+
data: params,
|
|
2462
|
+
});
|
|
2463
|
+
});
|
|
2464
|
+
const zr = this.chartInstance.getZr();
|
|
2465
|
+
zr.on('click', (zrEvent) => {
|
|
2466
|
+
if (!zrEvent.target) {
|
|
2467
|
+
const nativeEvent = zrEvent.event;
|
|
2468
|
+
nativeEvent.preventDefault();
|
|
2469
|
+
this.chartEvent.emit({
|
|
2470
|
+
type: 'blur',
|
|
2471
|
+
data: { ...zrEvent, type: 'blur' },
|
|
2472
|
+
});
|
|
2473
|
+
}
|
|
2474
|
+
});
|
|
2475
|
+
}
|
|
2410
2476
|
else {
|
|
2411
2477
|
this.chartInstance.on(eventName, (params) => {
|
|
2412
2478
|
this.chartEvent.emit({
|
|
@@ -2861,6 +2927,25 @@ class DoughnutChart {
|
|
|
2861
2927
|
}
|
|
2862
2928
|
});
|
|
2863
2929
|
}
|
|
2930
|
+
else if (eventName === 'click') {
|
|
2931
|
+
this.chartInstance.on('click', (params) => {
|
|
2932
|
+
this.chartEvent.emit({
|
|
2933
|
+
type: 'click',
|
|
2934
|
+
data: params,
|
|
2935
|
+
});
|
|
2936
|
+
});
|
|
2937
|
+
const zr = this.chartInstance.getZr();
|
|
2938
|
+
zr.on('click', (zrEvent) => {
|
|
2939
|
+
if (!zrEvent.target) {
|
|
2940
|
+
const nativeEvent = zrEvent.event;
|
|
2941
|
+
nativeEvent.preventDefault();
|
|
2942
|
+
this.chartEvent.emit({
|
|
2943
|
+
type: 'blur',
|
|
2944
|
+
data: { ...zrEvent, type: 'blur' },
|
|
2945
|
+
});
|
|
2946
|
+
}
|
|
2947
|
+
});
|
|
2948
|
+
}
|
|
2864
2949
|
else {
|
|
2865
2950
|
this.chartInstance.on(eventName, (params) => {
|
|
2866
2951
|
this.chartEvent.emit({
|