cats-charts 0.0.79 → 0.0.81
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 +343 -22
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +23 -1
- package/package.json +1 -1
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -1453,6 +1453,7 @@ class LinesChart {
|
|
|
1453
1453
|
contextMenuClick = new EventEmitter();
|
|
1454
1454
|
chartEvent = new EventEmitter();
|
|
1455
1455
|
legendEvent = new EventEmitter();
|
|
1456
|
+
chartContainer;
|
|
1456
1457
|
chartOption = {};
|
|
1457
1458
|
chartInstance;
|
|
1458
1459
|
cardPosition = { x: 0, y: 0 };
|
|
@@ -1488,22 +1489,26 @@ class LinesChart {
|
|
|
1488
1489
|
xAxisName: '',
|
|
1489
1490
|
yAxisName: '',
|
|
1490
1491
|
secondaryYAxisName: '',
|
|
1492
|
+
axisNameStyleSignature: '',
|
|
1491
1493
|
};
|
|
1492
1494
|
ngDoCheck() {
|
|
1493
1495
|
if (!this.chartInstance || !this.config)
|
|
1494
1496
|
return;
|
|
1495
1497
|
const updateOption = {};
|
|
1498
|
+
const axisNameStyleSignature = this.resolveAxisNameStyleSignature();
|
|
1496
1499
|
if (this.previousConfig.xAxisName !== this.config.xAxisName) {
|
|
1497
1500
|
this.previousConfig.xAxisName = this.config.xAxisName;
|
|
1498
1501
|
updateOption.xAxis = {
|
|
1499
|
-
name: this.config?.xAxisName
|
|
1502
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
1503
|
+
nameTextStyle: this.resolveAxisNameTextStyle('x'),
|
|
1500
1504
|
};
|
|
1501
1505
|
}
|
|
1502
1506
|
if (this.previousConfig.yAxisName !== this.config.yAxisName) {
|
|
1503
1507
|
this.previousConfig.yAxisName = this.config.yAxisName;
|
|
1504
1508
|
updateOption.yAxis = [
|
|
1505
1509
|
{
|
|
1506
|
-
name: this.config?.yAxisName
|
|
1510
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
1511
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
1507
1512
|
},
|
|
1508
1513
|
];
|
|
1509
1514
|
}
|
|
@@ -1511,16 +1516,22 @@ class LinesChart {
|
|
|
1511
1516
|
this.previousConfig.secondaryYAxisName = this.config.secondaryYAxisName;
|
|
1512
1517
|
updateOption.yAxis = [
|
|
1513
1518
|
{
|
|
1514
|
-
name: this.config?.yAxisName
|
|
1519
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
1520
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
1515
1521
|
},
|
|
1516
1522
|
{
|
|
1517
|
-
name: this.config?.secondaryYAxisName
|
|
1523
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
1524
|
+
nameTextStyle: this.resolveAxisNameTextStyle('secondaryY'),
|
|
1518
1525
|
},
|
|
1519
1526
|
];
|
|
1520
1527
|
}
|
|
1521
1528
|
if (Object.keys(updateOption).length) {
|
|
1522
1529
|
this.chartInstance.setOption(updateOption);
|
|
1523
1530
|
}
|
|
1531
|
+
if (this.previousConfig.axisNameStyleSignature !== axisNameStyleSignature) {
|
|
1532
|
+
this.previousConfig.axisNameStyleSignature = axisNameStyleSignature;
|
|
1533
|
+
this.refreshAxisNameSpace();
|
|
1534
|
+
}
|
|
1524
1535
|
}
|
|
1525
1536
|
/* ------------------ OPTION BUILDER ------------------ */
|
|
1526
1537
|
buildOption() {
|
|
@@ -1564,9 +1575,9 @@ class LinesChart {
|
|
|
1564
1575
|
type: 'category',
|
|
1565
1576
|
// boundaryGap: false,
|
|
1566
1577
|
data: this.config?.xAxisData,
|
|
1567
|
-
name: this.config?.xAxisName || '',
|
|
1568
1578
|
nameLocation: 'center',
|
|
1569
1579
|
...(this.config?.xAxis || {}),
|
|
1580
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
1570
1581
|
axisLine: {
|
|
1571
1582
|
show: this.config?.showXAxisLine ?? true,
|
|
1572
1583
|
...(this.config?.xAxis?.axisLine || {}),
|
|
@@ -1592,6 +1603,8 @@ class LinesChart {
|
|
|
1592
1603
|
color: '#434A51',
|
|
1593
1604
|
fontSize: 14,
|
|
1594
1605
|
fontWeight: 400,
|
|
1606
|
+
overflow: 'truncate',
|
|
1607
|
+
width: this.resolveAxisNameWidth('x'),
|
|
1595
1608
|
...(this.config?.xAxis?.nameTextStyle || {}),
|
|
1596
1609
|
},
|
|
1597
1610
|
splitLine: {
|
|
@@ -1610,7 +1623,7 @@ class LinesChart {
|
|
|
1610
1623
|
show: !this.config?.isTrendChart,
|
|
1611
1624
|
type: 'value',
|
|
1612
1625
|
boundaryGap: this.config?.isTrendChart ? [0.2] : undefined,
|
|
1613
|
-
name: this.config?.yAxisName
|
|
1626
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
1614
1627
|
nameLocation: 'center',
|
|
1615
1628
|
...(this.config?.yAxis || {}),
|
|
1616
1629
|
axisLine: {
|
|
@@ -1630,6 +1643,8 @@ class LinesChart {
|
|
|
1630
1643
|
color: '#434A51',
|
|
1631
1644
|
fontSize: 14,
|
|
1632
1645
|
fontWeight: 400,
|
|
1646
|
+
overflow: 'truncate',
|
|
1647
|
+
width: this.resolveAxisNameWidth('y'),
|
|
1633
1648
|
...(this.config?.yAxis?.nameTextStyle || {}),
|
|
1634
1649
|
},
|
|
1635
1650
|
splitLine: {
|
|
@@ -1686,7 +1701,7 @@ class LinesChart {
|
|
|
1686
1701
|
show: !this.config?.isTrendChart,
|
|
1687
1702
|
type: 'value',
|
|
1688
1703
|
boundaryGap: this.config?.isTrendChart ? [0.2] : undefined,
|
|
1689
|
-
name: this.config?.secondaryYAxisName
|
|
1704
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
1690
1705
|
nameLocation: 'center',
|
|
1691
1706
|
...(this.config?.secondaryYAxisConfig || {}),
|
|
1692
1707
|
axisLine: {
|
|
@@ -1743,6 +1758,8 @@ class LinesChart {
|
|
|
1743
1758
|
color: '#434A51',
|
|
1744
1759
|
fontSize: 14,
|
|
1745
1760
|
fontWeight: 400,
|
|
1761
|
+
overflow: 'truncate',
|
|
1762
|
+
width: this.resolveAxisNameWidth('secondaryY'),
|
|
1746
1763
|
...(this.config?.secondaryYAxisConfig?.nameTextStyle || {}),
|
|
1747
1764
|
},
|
|
1748
1765
|
splitLine: {
|
|
@@ -1830,6 +1847,72 @@ class LinesChart {
|
|
|
1830
1847
|
return symbol;
|
|
1831
1848
|
}
|
|
1832
1849
|
}
|
|
1850
|
+
resolveAxisNameTextStyle(axis) {
|
|
1851
|
+
const customStyle = axis === 'x'
|
|
1852
|
+
? this.config?.xAxis?.nameTextStyle
|
|
1853
|
+
: axis === 'secondaryY'
|
|
1854
|
+
? this.config?.secondaryYAxisConfig?.nameTextStyle
|
|
1855
|
+
: this.config?.yAxis?.nameTextStyle;
|
|
1856
|
+
return {
|
|
1857
|
+
width: this.resolveAxisNameWidth(axis),
|
|
1858
|
+
...(customStyle || {}),
|
|
1859
|
+
};
|
|
1860
|
+
}
|
|
1861
|
+
resolveAxisName(name, axis) {
|
|
1862
|
+
if (!name)
|
|
1863
|
+
return '';
|
|
1864
|
+
const maxWidth = this.resolveAxisNameWidth(axis);
|
|
1865
|
+
const font = this.resolveAxisNameFont(axis);
|
|
1866
|
+
if (echarts.format.getTextRect(name, font).width <= maxWidth)
|
|
1867
|
+
return name;
|
|
1868
|
+
const ellipsis = '...';
|
|
1869
|
+
let low = 0;
|
|
1870
|
+
let high = name.length;
|
|
1871
|
+
let truncated = ellipsis;
|
|
1872
|
+
while (low <= high) {
|
|
1873
|
+
const mid = Math.floor((low + high) / 2);
|
|
1874
|
+
const nextText = `${name.slice(0, mid)}${ellipsis}`;
|
|
1875
|
+
const nextWidth = echarts.format.getTextRect(nextText, font).width;
|
|
1876
|
+
if (nextWidth <= maxWidth) {
|
|
1877
|
+
truncated = nextText;
|
|
1878
|
+
low = mid + 1;
|
|
1879
|
+
}
|
|
1880
|
+
else {
|
|
1881
|
+
high = mid - 1;
|
|
1882
|
+
}
|
|
1883
|
+
}
|
|
1884
|
+
return truncated;
|
|
1885
|
+
}
|
|
1886
|
+
resolveAxisNameFont(axis) {
|
|
1887
|
+
const style = axis === 'x'
|
|
1888
|
+
? this.config?.xAxis?.nameTextStyle
|
|
1889
|
+
: axis === 'secondaryY'
|
|
1890
|
+
? this.config?.secondaryYAxisConfig?.nameTextStyle
|
|
1891
|
+
: this.config?.yAxis?.nameTextStyle;
|
|
1892
|
+
const fontSize = style?.fontSize ?? 14;
|
|
1893
|
+
const fontWeight = style?.fontWeight ?? 400;
|
|
1894
|
+
const fontFamily = style?.fontFamily ?? 'sans-serif';
|
|
1895
|
+
return `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
1896
|
+
}
|
|
1897
|
+
resolveAxisNameWidth(axis) {
|
|
1898
|
+
const chartRect = this.chartContainer?.nativeElement.getBoundingClientRect();
|
|
1899
|
+
const chartWidth = chartRect?.width || this.chartInstance?.getWidth?.() || 360;
|
|
1900
|
+
const chartHeight = chartRect?.height || this.chartInstance?.getHeight?.() || 240;
|
|
1901
|
+
if (axis === 'x') {
|
|
1902
|
+
return Math.max(chartWidth - 240, 80);
|
|
1903
|
+
}
|
|
1904
|
+
return Math.max(chartHeight - 72, 80);
|
|
1905
|
+
}
|
|
1906
|
+
resolveAxisNameStyleSignature() {
|
|
1907
|
+
return JSON.stringify({
|
|
1908
|
+
xAxisName: this.config?.xAxisName,
|
|
1909
|
+
yAxisName: this.config?.yAxisName,
|
|
1910
|
+
secondaryYAxisName: this.config?.secondaryYAxisName,
|
|
1911
|
+
xAxisNameTextStyle: this.config?.xAxis?.nameTextStyle,
|
|
1912
|
+
yAxisNameTextStyle: this.config?.yAxis?.nameTextStyle,
|
|
1913
|
+
secondaryYAxisNameTextStyle: this.config?.secondaryYAxisConfig?.nameTextStyle,
|
|
1914
|
+
});
|
|
1915
|
+
}
|
|
1833
1916
|
enableDataZoom(active) {
|
|
1834
1917
|
if (!this.chartInstance)
|
|
1835
1918
|
return;
|
|
@@ -1853,8 +1936,33 @@ class LinesChart {
|
|
|
1853
1936
|
onChartInit(ec) {
|
|
1854
1937
|
this.chartInstance = ec;
|
|
1855
1938
|
this.buildOption();
|
|
1939
|
+
queueMicrotask(() => this.refreshAxisNameSpace());
|
|
1856
1940
|
this.bindEvents();
|
|
1857
1941
|
}
|
|
1942
|
+
refreshAxisNameSpace() {
|
|
1943
|
+
if (!this.chartInstance)
|
|
1944
|
+
return;
|
|
1945
|
+
this.chartInstance.setOption({
|
|
1946
|
+
xAxis: {
|
|
1947
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
1948
|
+
nameTextStyle: this.resolveAxisNameTextStyle('x'),
|
|
1949
|
+
},
|
|
1950
|
+
yAxis: [
|
|
1951
|
+
{
|
|
1952
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
1953
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
1954
|
+
},
|
|
1955
|
+
...(this.config?.secondaryYAxis
|
|
1956
|
+
? [
|
|
1957
|
+
{
|
|
1958
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
1959
|
+
nameTextStyle: this.resolveAxisNameTextStyle('secondaryY'),
|
|
1960
|
+
},
|
|
1961
|
+
]
|
|
1962
|
+
: []),
|
|
1963
|
+
],
|
|
1964
|
+
});
|
|
1965
|
+
}
|
|
1858
1966
|
/* ------------------ EVENTS ------------------ */
|
|
1859
1967
|
bindEvents() {
|
|
1860
1968
|
if (!this.chartInstance)
|
|
@@ -1956,11 +2064,11 @@ class LinesChart {
|
|
|
1956
2064
|
return { ...(option?.legend?.[0]?.selected ?? {}) };
|
|
1957
2065
|
}
|
|
1958
2066
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LinesChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1959
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LinesChart, isStandalone: true, selector: "lib-line-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"line-chart-shell\"\r\n [class.line-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.line-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.line-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"line-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\
|
|
2067
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LinesChart, isStandalone: true, selector: "lib-line-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "window:resize": "refreshAxisNameSpace()", "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"line-chart-shell\"\r\n [class.line-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.line-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.line-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"line-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\r\n [theme]=\"theme\"\r\n (chartInit)=\"onChartInit($event)\"\r\n class=\"chart-container\"\r\n ></div>\r\n\r\n @if (\r\n !config.hideLegend &&\r\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\r\n ) {\r\n <lib-chart-legend\r\n class=\"line-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n</div>\r\n@if (openCard) {\r\n <lib-right-click-card\r\n [cardOptions]=\"contextMenuOptions\"\r\n (contextMenuClick)=\"onMenuClick($event)\"\r\n [cardPosition]=\"cardPosition\"\r\n ></lib-right-click-card>\r\n}\r\n", styles: [".line-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.line-chart-shell--legend-left,.line-chart-shell--legend-right{flex-direction:row}.line-chart-shell--legend-bottom{flex-direction:column}.line-chart-shell__legend{flex:0 0 auto;min-width:0}.line-chart-shell--legend-left .line-chart-shell__legend,.line-chart-shell--legend-right .line-chart-shell__legend{height:100%;max-width:min(var(--line-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}@media (max-width: 640px){.line-chart-shell,.line-chart-shell--legend-left,.line-chart-shell--legend-right{flex-direction:column}.line-chart-shell--legend-left .line-chart-shell__legend,.line-chart-shell--legend-right .line-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: RightClickCard, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1960
2068
|
}
|
|
1961
2069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LinesChart, decorators: [{
|
|
1962
2070
|
type: Component,
|
|
1963
|
-
args: [{ selector: 'lib-line-chart', standalone: true, imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"line-chart-shell\"\r\n [class.line-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.line-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.line-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"line-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\
|
|
2071
|
+
args: [{ selector: 'lib-line-chart', standalone: true, imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"line-chart-shell\"\r\n [class.line-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.line-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.line-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"line-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\r\n [theme]=\"theme\"\r\n (chartInit)=\"onChartInit($event)\"\r\n class=\"chart-container\"\r\n ></div>\r\n\r\n @if (\r\n !config.hideLegend &&\r\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\r\n ) {\r\n <lib-chart-legend\r\n class=\"line-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n</div>\r\n@if (openCard) {\r\n <lib-right-click-card\r\n [cardOptions]=\"contextMenuOptions\"\r\n (contextMenuClick)=\"onMenuClick($event)\"\r\n [cardPosition]=\"cardPosition\"\r\n ></lib-right-click-card>\r\n}\r\n", styles: [".line-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.line-chart-shell--legend-left,.line-chart-shell--legend-right{flex-direction:row}.line-chart-shell--legend-bottom{flex-direction:column}.line-chart-shell__legend{flex:0 0 auto;min-width:0}.line-chart-shell--legend-left .line-chart-shell__legend,.line-chart-shell--legend-right .line-chart-shell__legend{height:100%;max-width:min(var(--line-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}@media (max-width: 640px){.line-chart-shell,.line-chart-shell--legend-left,.line-chart-shell--legend-right{flex-direction:column}.line-chart-shell--legend-left .line-chart-shell__legend,.line-chart-shell--legend-right .line-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"] }]
|
|
1964
2072
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
1965
2073
|
type: Input
|
|
1966
2074
|
}], theme: [{
|
|
@@ -1977,6 +2085,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1977
2085
|
type: Output
|
|
1978
2086
|
}], legendEvent: [{
|
|
1979
2087
|
type: Output
|
|
2088
|
+
}], chartContainer: [{
|
|
2089
|
+
type: ViewChild,
|
|
2090
|
+
args: ['chartContainer']
|
|
2091
|
+
}], refreshAxisNameSpace: [{
|
|
2092
|
+
type: HostListener,
|
|
2093
|
+
args: ['window:resize']
|
|
1980
2094
|
}], closeCard: [{
|
|
1981
2095
|
type: HostListener,
|
|
1982
2096
|
args: ['document:click']
|
|
@@ -2008,6 +2122,7 @@ class BarChart {
|
|
|
2008
2122
|
contextMenuClick = new EventEmitter();
|
|
2009
2123
|
chartEvent = new EventEmitter();
|
|
2010
2124
|
legendEvent = new EventEmitter();
|
|
2125
|
+
chartContainer;
|
|
2011
2126
|
chartOption;
|
|
2012
2127
|
chartInstance;
|
|
2013
2128
|
cardPosition = { x: 0, y: 0 };
|
|
@@ -2032,22 +2147,26 @@ class BarChart {
|
|
|
2032
2147
|
xAxisName: '',
|
|
2033
2148
|
yAxisName: '',
|
|
2034
2149
|
secondaryYAxisName: '',
|
|
2150
|
+
axisNameStyleSignature: '',
|
|
2035
2151
|
};
|
|
2036
2152
|
ngDoCheck() {
|
|
2037
2153
|
if (!this.chartInstance || !this.config)
|
|
2038
2154
|
return;
|
|
2039
2155
|
const updateOption = {};
|
|
2156
|
+
const axisNameStyleSignature = this.resolveAxisNameStyleSignature();
|
|
2040
2157
|
if (this.previousConfig.xAxisName !== this.config.xAxisName) {
|
|
2041
2158
|
this.previousConfig.xAxisName = this.config.xAxisName;
|
|
2042
2159
|
updateOption.xAxis = {
|
|
2043
|
-
name: this.config?.xAxisName
|
|
2160
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
2161
|
+
nameTextStyle: this.resolveAxisNameTextStyle('x'),
|
|
2044
2162
|
};
|
|
2045
2163
|
}
|
|
2046
2164
|
if (this.previousConfig.yAxisName !== this.config.yAxisName) {
|
|
2047
2165
|
this.previousConfig.yAxisName = this.config.yAxisName;
|
|
2048
2166
|
updateOption.yAxis = [
|
|
2049
2167
|
{
|
|
2050
|
-
name: this.config?.yAxisName
|
|
2168
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
2169
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
2051
2170
|
},
|
|
2052
2171
|
];
|
|
2053
2172
|
}
|
|
@@ -2055,16 +2174,22 @@ class BarChart {
|
|
|
2055
2174
|
this.previousConfig.secondaryYAxisName = this.config.secondaryYAxisName;
|
|
2056
2175
|
updateOption.yAxis = [
|
|
2057
2176
|
{
|
|
2058
|
-
name: this.config?.yAxisName
|
|
2177
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
2178
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
2059
2179
|
},
|
|
2060
2180
|
{
|
|
2061
|
-
name: this.config?.secondaryYAxisName
|
|
2181
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
2182
|
+
nameTextStyle: this.resolveAxisNameTextStyle('secondaryY'),
|
|
2062
2183
|
},
|
|
2063
2184
|
];
|
|
2064
2185
|
}
|
|
2065
2186
|
if (Object.keys(updateOption).length) {
|
|
2066
2187
|
this.chartInstance.setOption(updateOption);
|
|
2067
2188
|
}
|
|
2189
|
+
if (this.previousConfig.axisNameStyleSignature !== axisNameStyleSignature) {
|
|
2190
|
+
this.previousConfig.axisNameStyleSignature = axisNameStyleSignature;
|
|
2191
|
+
this.refreshAxisNameSpace();
|
|
2192
|
+
}
|
|
2068
2193
|
}
|
|
2069
2194
|
moveLeft() {
|
|
2070
2195
|
this.moveZoom(-10);
|
|
@@ -2138,9 +2263,9 @@ class BarChart {
|
|
|
2138
2263
|
xAxis: {
|
|
2139
2264
|
type: 'category',
|
|
2140
2265
|
data: this.config?.xAxisData,
|
|
2141
|
-
name: this.config?.xAxisName || '',
|
|
2142
2266
|
nameLocation: 'center',
|
|
2143
2267
|
...(this.config?.xAxis || {}),
|
|
2268
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
2144
2269
|
axisLine: {
|
|
2145
2270
|
show: this.config?.showXAxisLine ?? true,
|
|
2146
2271
|
...(this.config?.xAxis?.axisLine || {}),
|
|
@@ -2166,6 +2291,8 @@ class BarChart {
|
|
|
2166
2291
|
color: '#434A51',
|
|
2167
2292
|
fontSize: 14,
|
|
2168
2293
|
fontWeight: 400,
|
|
2294
|
+
overflow: 'truncate',
|
|
2295
|
+
width: this.resolveAxisNameWidth('x'),
|
|
2169
2296
|
...(this.config?.xAxis?.nameTextStyle || {}),
|
|
2170
2297
|
},
|
|
2171
2298
|
splitLine: {
|
|
@@ -2182,7 +2309,7 @@ class BarChart {
|
|
|
2182
2309
|
yAxis: [
|
|
2183
2310
|
{
|
|
2184
2311
|
type: 'value',
|
|
2185
|
-
name: this.config?.yAxisName
|
|
2312
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
2186
2313
|
nameLocation: 'center',
|
|
2187
2314
|
...(this.config?.yAxis || {}),
|
|
2188
2315
|
axisLine: {
|
|
@@ -2202,6 +2329,8 @@ class BarChart {
|
|
|
2202
2329
|
color: '#434A51',
|
|
2203
2330
|
fontSize: 14,
|
|
2204
2331
|
fontWeight: 400,
|
|
2332
|
+
overflow: 'truncate',
|
|
2333
|
+
width: this.resolveAxisNameWidth('y'),
|
|
2205
2334
|
...(this.config?.yAxis?.nameTextStyle || {}),
|
|
2206
2335
|
},
|
|
2207
2336
|
axisLabel: {
|
|
@@ -2256,7 +2385,7 @@ class BarChart {
|
|
|
2256
2385
|
? [
|
|
2257
2386
|
{
|
|
2258
2387
|
type: 'value',
|
|
2259
|
-
name: this.config?.secondaryYAxisName
|
|
2388
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
2260
2389
|
nameLocation: 'center',
|
|
2261
2390
|
...(this.config?.secondaryYAxisConfig || {}),
|
|
2262
2391
|
axisLine: {
|
|
@@ -2313,6 +2442,8 @@ class BarChart {
|
|
|
2313
2442
|
color: '#434A51',
|
|
2314
2443
|
fontSize: 14,
|
|
2315
2444
|
fontWeight: 400,
|
|
2445
|
+
overflow: 'truncate',
|
|
2446
|
+
width: this.resolveAxisNameWidth('secondaryY'),
|
|
2316
2447
|
...(this.config?.secondaryYAxisConfig?.nameTextStyle || {}),
|
|
2317
2448
|
},
|
|
2318
2449
|
splitLine: {
|
|
@@ -2433,6 +2564,72 @@ class BarChart {
|
|
|
2433
2564
|
end: 100,
|
|
2434
2565
|
});
|
|
2435
2566
|
}
|
|
2567
|
+
resolveAxisNameTextStyle(axis) {
|
|
2568
|
+
const customStyle = axis === 'x'
|
|
2569
|
+
? this.config?.xAxis?.nameTextStyle
|
|
2570
|
+
: axis === 'secondaryY'
|
|
2571
|
+
? this.config?.secondaryYAxisConfig?.nameTextStyle
|
|
2572
|
+
: this.config?.yAxis?.nameTextStyle;
|
|
2573
|
+
return {
|
|
2574
|
+
width: this.resolveAxisNameWidth(axis),
|
|
2575
|
+
...(customStyle || {}),
|
|
2576
|
+
};
|
|
2577
|
+
}
|
|
2578
|
+
resolveAxisName(name, axis) {
|
|
2579
|
+
if (!name)
|
|
2580
|
+
return '';
|
|
2581
|
+
const maxWidth = this.resolveAxisNameWidth(axis);
|
|
2582
|
+
const font = this.resolveAxisNameFont(axis);
|
|
2583
|
+
if (echarts.format.getTextRect(name, font).width <= maxWidth)
|
|
2584
|
+
return name;
|
|
2585
|
+
const ellipsis = '...';
|
|
2586
|
+
let low = 0;
|
|
2587
|
+
let high = name.length;
|
|
2588
|
+
let truncated = ellipsis;
|
|
2589
|
+
while (low <= high) {
|
|
2590
|
+
const mid = Math.floor((low + high) / 2);
|
|
2591
|
+
const nextText = `${name.slice(0, mid)}${ellipsis}`;
|
|
2592
|
+
const nextWidth = echarts.format.getTextRect(nextText, font).width;
|
|
2593
|
+
if (nextWidth <= maxWidth) {
|
|
2594
|
+
truncated = nextText;
|
|
2595
|
+
low = mid + 1;
|
|
2596
|
+
}
|
|
2597
|
+
else {
|
|
2598
|
+
high = mid - 1;
|
|
2599
|
+
}
|
|
2600
|
+
}
|
|
2601
|
+
return truncated;
|
|
2602
|
+
}
|
|
2603
|
+
resolveAxisNameFont(axis) {
|
|
2604
|
+
const style = axis === 'x'
|
|
2605
|
+
? this.config?.xAxis?.nameTextStyle
|
|
2606
|
+
: axis === 'secondaryY'
|
|
2607
|
+
? this.config?.secondaryYAxisConfig?.nameTextStyle
|
|
2608
|
+
: this.config?.yAxis?.nameTextStyle;
|
|
2609
|
+
const fontSize = style?.fontSize ?? 14;
|
|
2610
|
+
const fontWeight = style?.fontWeight ?? 400;
|
|
2611
|
+
const fontFamily = style?.fontFamily ?? 'sans-serif';
|
|
2612
|
+
return `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
2613
|
+
}
|
|
2614
|
+
resolveAxisNameWidth(axis) {
|
|
2615
|
+
const chartRect = this.chartContainer?.nativeElement.getBoundingClientRect();
|
|
2616
|
+
const chartWidth = chartRect?.width || this.chartInstance?.getWidth?.() || 360;
|
|
2617
|
+
const chartHeight = chartRect?.height || this.chartInstance?.getHeight?.() || 240;
|
|
2618
|
+
if (axis === 'x') {
|
|
2619
|
+
return Math.max(chartWidth - 240, 80);
|
|
2620
|
+
}
|
|
2621
|
+
return Math.max(chartHeight - 72, 80);
|
|
2622
|
+
}
|
|
2623
|
+
resolveAxisNameStyleSignature() {
|
|
2624
|
+
return JSON.stringify({
|
|
2625
|
+
xAxisName: this.config?.xAxisName,
|
|
2626
|
+
yAxisName: this.config?.yAxisName,
|
|
2627
|
+
secondaryYAxisName: this.config?.secondaryYAxisName,
|
|
2628
|
+
xAxisNameTextStyle: this.config?.xAxis?.nameTextStyle,
|
|
2629
|
+
yAxisNameTextStyle: this.config?.yAxis?.nameTextStyle,
|
|
2630
|
+
secondaryYAxisNameTextStyle: this.config?.secondaryYAxisConfig?.nameTextStyle,
|
|
2631
|
+
});
|
|
2632
|
+
}
|
|
2436
2633
|
get hasSideLegendWidth() {
|
|
2437
2634
|
return this.isSideLegend && !!this.config.customLegend?.maxWidth;
|
|
2438
2635
|
}
|
|
@@ -2458,8 +2655,33 @@ class BarChart {
|
|
|
2458
2655
|
onChartInit(ec) {
|
|
2459
2656
|
this.chartInstance = ec;
|
|
2460
2657
|
this.buildOption();
|
|
2658
|
+
queueMicrotask(() => this.refreshAxisNameSpace());
|
|
2461
2659
|
this.bindEvents();
|
|
2462
2660
|
}
|
|
2661
|
+
refreshAxisNameSpace() {
|
|
2662
|
+
if (!this.chartInstance)
|
|
2663
|
+
return;
|
|
2664
|
+
this.chartInstance.setOption({
|
|
2665
|
+
xAxis: {
|
|
2666
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
2667
|
+
nameTextStyle: this.resolveAxisNameTextStyle('x'),
|
|
2668
|
+
},
|
|
2669
|
+
yAxis: [
|
|
2670
|
+
{
|
|
2671
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
2672
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
2673
|
+
},
|
|
2674
|
+
...(this.config?.secondaryYAxis
|
|
2675
|
+
? [
|
|
2676
|
+
{
|
|
2677
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
2678
|
+
nameTextStyle: this.resolveAxisNameTextStyle('secondaryY'),
|
|
2679
|
+
},
|
|
2680
|
+
]
|
|
2681
|
+
: []),
|
|
2682
|
+
],
|
|
2683
|
+
});
|
|
2684
|
+
}
|
|
2463
2685
|
/* ------------------ EVENTS ------------------ */
|
|
2464
2686
|
bindEvents() {
|
|
2465
2687
|
if (!this.chartInstance)
|
|
@@ -2551,11 +2773,11 @@ class BarChart {
|
|
|
2551
2773
|
}
|
|
2552
2774
|
}
|
|
2553
2775
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2554
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"bar-chart-shell\"\r\n [class.bar-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.bar-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.bar-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"bar-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\
|
|
2776
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "window:resize": "refreshAxisNameSpace()", "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"bar-chart-shell\"\r\n [class.bar-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.bar-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.bar-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"bar-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\r\n [theme]=\"theme\"\r\n (chartInit)=\"onChartInit($event)\"\r\n class=\"chart-container\"\r\n ></div>\r\n\r\n @if (\r\n !config.hideLegend &&\r\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\r\n ) {\r\n <lib-chart-legend\r\n class=\"bar-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n</div>\r\n@if (config.showZoomSlider) {\r\n <div class=\"zoom-controls\" [style]=\"config.zoomControlButtonStyle\">\r\n <button (click)=\"moveLeft()\"><img src=\"images/leftArrow.svg\" alt=\">\" /></button>\r\n <button (click)=\"moveRight()\"><img src=\"images/rightArrow.svg\" alt=\"<\" /></button>\r\n </div>\r\n}\r\n@if (openCard) {\r\n <lib-right-click-card\r\n [cardOptions]=\"contextMenuOptions\"\r\n (contextMenuClick)=\"onMenuClick($event)\"\r\n [cardPosition]=\"cardPosition\"\r\n ></lib-right-click-card>\r\n}\r\n", styles: [".bar-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.bar-chart-shell--legend-left,.bar-chart-shell--legend-right{flex-direction:row}.bar-chart-shell--legend-bottom{flex-direction:column}.bar-chart-shell__legend{flex:0 0 auto;min-width:0}.bar-chart-shell--legend-left .bar-chart-shell__legend,.bar-chart-shell--legend-right .bar-chart-shell__legend{height:100%;min-height:0}.chart-container{width:100%;height:100%;flex:1 1 auto;min-height:0;min-width:0}.zoom-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none}.zoom-controls button{pointer-events:all;cursor:pointer;border:none;border-radius:2px;width:14px;height:14px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: RightClickCard, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2555
2777
|
}
|
|
2556
2778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
|
|
2557
2779
|
type: Component,
|
|
2558
|
-
args: [{ selector: 'lib-bar-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"bar-chart-shell\"\r\n [class.bar-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.bar-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.bar-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"bar-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\
|
|
2780
|
+
args: [{ selector: 'lib-bar-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"bar-chart-shell\"\r\n [class.bar-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.bar-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.bar-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"bar-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\r\n [theme]=\"theme\"\r\n (chartInit)=\"onChartInit($event)\"\r\n class=\"chart-container\"\r\n ></div>\r\n\r\n @if (\r\n !config.hideLegend &&\r\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\r\n ) {\r\n <lib-chart-legend\r\n class=\"bar-chart-shell__legend\"\r\n [class.line-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--line-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n</div>\r\n@if (config.showZoomSlider) {\r\n <div class=\"zoom-controls\" [style]=\"config.zoomControlButtonStyle\">\r\n <button (click)=\"moveLeft()\"><img src=\"images/leftArrow.svg\" alt=\">\" /></button>\r\n <button (click)=\"moveRight()\"><img src=\"images/rightArrow.svg\" alt=\"<\" /></button>\r\n </div>\r\n}\r\n@if (openCard) {\r\n <lib-right-click-card\r\n [cardOptions]=\"contextMenuOptions\"\r\n (contextMenuClick)=\"onMenuClick($event)\"\r\n [cardPosition]=\"cardPosition\"\r\n ></lib-right-click-card>\r\n}\r\n", styles: [".bar-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.bar-chart-shell--legend-left,.bar-chart-shell--legend-right{flex-direction:row}.bar-chart-shell--legend-bottom{flex-direction:column}.bar-chart-shell__legend{flex:0 0 auto;min-width:0}.bar-chart-shell--legend-left .bar-chart-shell__legend,.bar-chart-shell--legend-right .bar-chart-shell__legend{height:100%;min-height:0}.chart-container{width:100%;height:100%;flex:1 1 auto;min-height:0;min-width:0}.zoom-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none}.zoom-controls button{pointer-events:all;cursor:pointer;border:none;border-radius:2px;width:14px;height:14px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
2559
2781
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
2560
2782
|
type: Input
|
|
2561
2783
|
}], theme: [{
|
|
@@ -2572,6 +2794,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2572
2794
|
type: Output
|
|
2573
2795
|
}], legendEvent: [{
|
|
2574
2796
|
type: Output
|
|
2797
|
+
}], chartContainer: [{
|
|
2798
|
+
type: ViewChild,
|
|
2799
|
+
args: ['chartContainer']
|
|
2800
|
+
}], refreshAxisNameSpace: [{
|
|
2801
|
+
type: HostListener,
|
|
2802
|
+
args: ['window:resize']
|
|
2575
2803
|
}], closeCard: [{
|
|
2576
2804
|
type: HostListener,
|
|
2577
2805
|
args: ['document:click']
|
|
@@ -4333,6 +4561,7 @@ class ScatterChartComp {
|
|
|
4333
4561
|
theme;
|
|
4334
4562
|
chartEvent = new EventEmitter();
|
|
4335
4563
|
legendEvent = new EventEmitter();
|
|
4564
|
+
chartContainer;
|
|
4336
4565
|
chartOption = {};
|
|
4337
4566
|
chartInstance;
|
|
4338
4567
|
constructor(chartService) {
|
|
@@ -4349,6 +4578,16 @@ class ScatterChartComp {
|
|
|
4349
4578
|
}
|
|
4350
4579
|
this.buildOption();
|
|
4351
4580
|
}
|
|
4581
|
+
previousAxisNameStyleSignature = '';
|
|
4582
|
+
ngDoCheck() {
|
|
4583
|
+
if (!this.chartInstance || !this.config)
|
|
4584
|
+
return;
|
|
4585
|
+
const axisNameStyleSignature = this.resolveAxisNameStyleSignature();
|
|
4586
|
+
if (this.previousAxisNameStyleSignature === axisNameStyleSignature)
|
|
4587
|
+
return;
|
|
4588
|
+
this.previousAxisNameStyleSignature = axisNameStyleSignature;
|
|
4589
|
+
this.refreshAxisNameSpace();
|
|
4590
|
+
}
|
|
4352
4591
|
buildOption() {
|
|
4353
4592
|
const selected = this.readLegendSelected();
|
|
4354
4593
|
const selectedMode = this.config?.customLegend?.selectionMode === 'exclusive' ? 'single' : true;
|
|
@@ -4399,12 +4638,13 @@ class ScatterChartComp {
|
|
|
4399
4638
|
color: '#434A51',
|
|
4400
4639
|
fontSize: 12,
|
|
4401
4640
|
},
|
|
4402
|
-
name: this.config?.xAxisName || '',
|
|
4403
4641
|
nameLocation: 'center',
|
|
4404
4642
|
nameTextStyle: {
|
|
4405
4643
|
color: '#434A51',
|
|
4406
4644
|
fontSize: 14,
|
|
4407
4645
|
fontWeight: 400,
|
|
4646
|
+
width: this.resolveAxisNameWidth('x'),
|
|
4647
|
+
...(this.config?.xAxis?.nameTextStyle || {}),
|
|
4408
4648
|
},
|
|
4409
4649
|
splitLine: {
|
|
4410
4650
|
show: true,
|
|
@@ -4415,16 +4655,19 @@ class ScatterChartComp {
|
|
|
4415
4655
|
},
|
|
4416
4656
|
},
|
|
4417
4657
|
...this.config?.xAxis,
|
|
4658
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
4418
4659
|
},
|
|
4419
4660
|
yAxis: [
|
|
4420
4661
|
{
|
|
4421
4662
|
type: 'value',
|
|
4422
|
-
name: this.config?.yAxisName
|
|
4663
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
4423
4664
|
nameLocation: 'center',
|
|
4424
4665
|
nameTextStyle: {
|
|
4425
4666
|
color: '#434A51',
|
|
4426
4667
|
fontSize: 14,
|
|
4427
4668
|
fontWeight: 400,
|
|
4669
|
+
width: this.resolveAxisNameWidth('y'),
|
|
4670
|
+
...(this.config?.yAxis?.nameTextStyle || {}),
|
|
4428
4671
|
},
|
|
4429
4672
|
axisLine: {
|
|
4430
4673
|
show: this.config?.showYAxisLine ?? true,
|
|
@@ -4497,6 +4740,55 @@ class ScatterChartComp {
|
|
|
4497
4740
|
return (this.config.customLegend?.position === 'left' ||
|
|
4498
4741
|
this.config.customLegend?.position === 'right');
|
|
4499
4742
|
}
|
|
4743
|
+
resolveAxisName(name, axis) {
|
|
4744
|
+
if (!name)
|
|
4745
|
+
return '';
|
|
4746
|
+
const maxWidth = this.resolveAxisNameWidth(axis);
|
|
4747
|
+
const font = this.resolveAxisNameFont(axis);
|
|
4748
|
+
if (echarts.format.getTextRect(name, font).width <= maxWidth)
|
|
4749
|
+
return name;
|
|
4750
|
+
const ellipsis = '...';
|
|
4751
|
+
let low = 0;
|
|
4752
|
+
let high = name.length;
|
|
4753
|
+
let truncated = ellipsis;
|
|
4754
|
+
while (low <= high) {
|
|
4755
|
+
const mid = Math.floor((low + high) / 2);
|
|
4756
|
+
const nextText = `${name.slice(0, mid)}${ellipsis}`;
|
|
4757
|
+
const nextWidth = echarts.format.getTextRect(nextText, font).width;
|
|
4758
|
+
if (nextWidth <= maxWidth) {
|
|
4759
|
+
truncated = nextText;
|
|
4760
|
+
low = mid + 1;
|
|
4761
|
+
}
|
|
4762
|
+
else {
|
|
4763
|
+
high = mid - 1;
|
|
4764
|
+
}
|
|
4765
|
+
}
|
|
4766
|
+
return truncated;
|
|
4767
|
+
}
|
|
4768
|
+
resolveAxisNameFont(axis) {
|
|
4769
|
+
const style = axis === 'x' ? this.config?.xAxis?.nameTextStyle : this.config?.yAxis?.nameTextStyle;
|
|
4770
|
+
const fontSize = style?.fontSize ?? 14;
|
|
4771
|
+
const fontWeight = style?.fontWeight ?? 400;
|
|
4772
|
+
const fontFamily = style?.fontFamily ?? 'sans-serif';
|
|
4773
|
+
return `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
4774
|
+
}
|
|
4775
|
+
resolveAxisNameWidth(axis) {
|
|
4776
|
+
const chartRect = this.chartContainer?.nativeElement.getBoundingClientRect();
|
|
4777
|
+
const chartWidth = chartRect?.width || this.chartInstance?.getWidth?.() || 360;
|
|
4778
|
+
const chartHeight = chartRect?.height || this.chartInstance?.getHeight?.() || 240;
|
|
4779
|
+
if (axis === 'x') {
|
|
4780
|
+
return Math.max(chartWidth - 240, 80);
|
|
4781
|
+
}
|
|
4782
|
+
return Math.max(chartHeight - 72, 80);
|
|
4783
|
+
}
|
|
4784
|
+
resolveAxisNameStyleSignature() {
|
|
4785
|
+
return JSON.stringify({
|
|
4786
|
+
xAxisName: this.config?.xAxisName,
|
|
4787
|
+
yAxisName: this.config?.yAxisName,
|
|
4788
|
+
xAxisNameTextStyle: this.config?.xAxis?.nameTextStyle,
|
|
4789
|
+
yAxisNameTextStyle: this.config?.yAxis?.nameTextStyle,
|
|
4790
|
+
});
|
|
4791
|
+
}
|
|
4500
4792
|
onLegendEvent(event) {
|
|
4501
4793
|
this.legendEvent.emit(event);
|
|
4502
4794
|
this.chartEvent.emit({
|
|
@@ -4511,6 +4803,29 @@ class ScatterChartComp {
|
|
|
4511
4803
|
onChartInit(ec) {
|
|
4512
4804
|
this.chartInstance = ec;
|
|
4513
4805
|
this.buildOption();
|
|
4806
|
+
queueMicrotask(() => this.refreshAxisNameSpace());
|
|
4807
|
+
}
|
|
4808
|
+
refreshAxisNameSpace() {
|
|
4809
|
+
if (!this.chartInstance)
|
|
4810
|
+
return;
|
|
4811
|
+
this.chartInstance.setOption({
|
|
4812
|
+
xAxis: {
|
|
4813
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
4814
|
+
nameTextStyle: {
|
|
4815
|
+
width: this.resolveAxisNameWidth('x'),
|
|
4816
|
+
...(this.config?.xAxis?.nameTextStyle || {}),
|
|
4817
|
+
},
|
|
4818
|
+
},
|
|
4819
|
+
yAxis: [
|
|
4820
|
+
{
|
|
4821
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
4822
|
+
nameTextStyle: {
|
|
4823
|
+
width: this.resolveAxisNameWidth('y'),
|
|
4824
|
+
...(this.config?.yAxis?.nameTextStyle || {}),
|
|
4825
|
+
},
|
|
4826
|
+
},
|
|
4827
|
+
],
|
|
4828
|
+
});
|
|
4514
4829
|
}
|
|
4515
4830
|
ngOnDestroy() {
|
|
4516
4831
|
if (this.chartInstance) {
|
|
@@ -4519,11 +4834,11 @@ class ScatterChartComp {
|
|
|
4519
4834
|
}
|
|
4520
4835
|
}
|
|
4521
4836
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ScatterChartComp, deps: [{ token: Charts }], target: i0.ɵɵFactoryTarget.Component });
|
|
4522
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ScatterChartComp, isStandalone: true, selector: "lib-scatter-chart", inputs: { config: "config", theme: "theme" }, outputs: { chartEvent: "chartEvent", legendEvent: "legendEvent" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"scatter-chart-shell\"\r\n [class.scatter-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.scatter-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.scatter-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"scatter-chart-shell__legend\"\r\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\
|
|
4837
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ScatterChartComp, isStandalone: true, selector: "lib-scatter-chart", inputs: { config: "config", theme: "theme" }, outputs: { chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "window:resize": "refreshAxisNameSpace()" } }, providers: [provideEchartsCore({ echarts })], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"scatter-chart-shell\"\r\n [class.scatter-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.scatter-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.scatter-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"scatter-chart-shell__legend\"\r\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\r\n [theme]=\"theme\"\r\n (chartInit)=\"onChartInit($event)\"\r\n class=\"chart-container\"\r\n ></div>\r\n\r\n @if (\r\n !config.hideLegend &&\r\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\r\n ) {\r\n <lib-chart-legend\r\n class=\"scatter-chart-shell__legend\"\r\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n</div>\r\n", styles: [".scatter-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.scatter-chart-shell--legend-left,.scatter-chart-shell--legend-right{flex-direction:row}.scatter-chart-shell--legend-bottom{flex-direction:column}.scatter-chart-shell__legend{flex:0 0 auto;min-width:0}.scatter-chart-shell--legend-left .scatter-chart-shell__legend,.scatter-chart-shell--legend-right .scatter-chart-shell__legend{height:100%;max-width:min(var(--scatter-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4523
4838
|
}
|
|
4524
4839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ScatterChartComp, decorators: [{
|
|
4525
4840
|
type: Component,
|
|
4526
|
-
args: [{ selector: 'lib-scatter-chart', imports: [NgxEchartsDirective, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"scatter-chart-shell\"\r\n [class.scatter-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.scatter-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.scatter-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"scatter-chart-shell__legend\"\r\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\
|
|
4841
|
+
args: [{ selector: 'lib-scatter-chart', imports: [NgxEchartsDirective, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"scatter-chart-shell\"\r\n [class.scatter-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\r\n [class.scatter-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\r\n [class.scatter-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\r\n>\r\n @if (\r\n !config.hideLegend &&\r\n config.customLegend?.position !== 'bottom' &&\r\n config.customLegend?.position !== 'right'\r\n ) {\r\n <lib-chart-legend\r\n class=\"scatter-chart-shell__legend\"\r\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n\r\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\r\n [theme]=\"theme\"\r\n (chartInit)=\"onChartInit($event)\"\r\n class=\"chart-container\"\r\n ></div>\r\n\r\n @if (\r\n !config.hideLegend &&\r\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\r\n ) {\r\n <lib-chart-legend\r\n class=\"scatter-chart-shell__legend\"\r\n [class.scatter-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\r\n [style.--scatter-chart-legend-max-width]=\"legendShellMaxWidth\"\r\n [chart]=\"chartInstance\"\r\n [series]=\"config.series\"\r\n [colors]=\"config.colors || deafultColors\"\r\n [config]=\"config.customLegend || {}\"\r\n (legendEvent)=\"onLegendEvent($event)\"\r\n ></lib-chart-legend>\r\n }\r\n</div>\r\n", styles: [".scatter-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.scatter-chart-shell--legend-left,.scatter-chart-shell--legend-right{flex-direction:row}.scatter-chart-shell--legend-bottom{flex-direction:column}.scatter-chart-shell__legend{flex:0 0 auto;min-width:0}.scatter-chart-shell--legend-left .scatter-chart-shell__legend,.scatter-chart-shell--legend-right .scatter-chart-shell__legend{height:100%;max-width:min(var(--scatter-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}\n"] }]
|
|
4527
4842
|
}], ctorParameters: () => [{ type: Charts }], propDecorators: { config: [{
|
|
4528
4843
|
type: Input
|
|
4529
4844
|
}], theme: [{
|
|
@@ -4532,6 +4847,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4532
4847
|
type: Output
|
|
4533
4848
|
}], legendEvent: [{
|
|
4534
4849
|
type: Output
|
|
4850
|
+
}], chartContainer: [{
|
|
4851
|
+
type: ViewChild,
|
|
4852
|
+
args: ['chartContainer']
|
|
4853
|
+
}], refreshAxisNameSpace: [{
|
|
4854
|
+
type: HostListener,
|
|
4855
|
+
args: ['window:resize']
|
|
4535
4856
|
}] } });
|
|
4536
4857
|
|
|
4537
4858
|
const DEFAULT_COLORS = ['#2f8f3a', '#d0a020', '#dc8a1f', '#a43b35', '#d9dde1'];
|