cats-charts 0.0.79 → 0.0.80
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 +293 -22
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +18 -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 };
|
|
@@ -1496,14 +1497,16 @@ class LinesChart {
|
|
|
1496
1497
|
if (this.previousConfig.xAxisName !== this.config.xAxisName) {
|
|
1497
1498
|
this.previousConfig.xAxisName = this.config.xAxisName;
|
|
1498
1499
|
updateOption.xAxis = {
|
|
1499
|
-
name: this.config?.xAxisName
|
|
1500
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
1501
|
+
nameTextStyle: this.resolveAxisNameTextStyle('x'),
|
|
1500
1502
|
};
|
|
1501
1503
|
}
|
|
1502
1504
|
if (this.previousConfig.yAxisName !== this.config.yAxisName) {
|
|
1503
1505
|
this.previousConfig.yAxisName = this.config.yAxisName;
|
|
1504
1506
|
updateOption.yAxis = [
|
|
1505
1507
|
{
|
|
1506
|
-
name: this.config?.yAxisName
|
|
1508
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
1509
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
1507
1510
|
},
|
|
1508
1511
|
];
|
|
1509
1512
|
}
|
|
@@ -1511,10 +1514,12 @@ class LinesChart {
|
|
|
1511
1514
|
this.previousConfig.secondaryYAxisName = this.config.secondaryYAxisName;
|
|
1512
1515
|
updateOption.yAxis = [
|
|
1513
1516
|
{
|
|
1514
|
-
name: this.config?.yAxisName
|
|
1517
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
1518
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
1515
1519
|
},
|
|
1516
1520
|
{
|
|
1517
|
-
name: this.config?.secondaryYAxisName
|
|
1521
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
1522
|
+
nameTextStyle: this.resolveAxisNameTextStyle('secondaryY'),
|
|
1518
1523
|
},
|
|
1519
1524
|
];
|
|
1520
1525
|
}
|
|
@@ -1564,9 +1569,9 @@ class LinesChart {
|
|
|
1564
1569
|
type: 'category',
|
|
1565
1570
|
// boundaryGap: false,
|
|
1566
1571
|
data: this.config?.xAxisData,
|
|
1567
|
-
name: this.config?.xAxisName || '',
|
|
1568
1572
|
nameLocation: 'center',
|
|
1569
1573
|
...(this.config?.xAxis || {}),
|
|
1574
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
1570
1575
|
axisLine: {
|
|
1571
1576
|
show: this.config?.showXAxisLine ?? true,
|
|
1572
1577
|
...(this.config?.xAxis?.axisLine || {}),
|
|
@@ -1592,6 +1597,8 @@ class LinesChart {
|
|
|
1592
1597
|
color: '#434A51',
|
|
1593
1598
|
fontSize: 14,
|
|
1594
1599
|
fontWeight: 400,
|
|
1600
|
+
overflow: 'truncate',
|
|
1601
|
+
width: this.resolveAxisNameWidth('x'),
|
|
1595
1602
|
...(this.config?.xAxis?.nameTextStyle || {}),
|
|
1596
1603
|
},
|
|
1597
1604
|
splitLine: {
|
|
@@ -1610,7 +1617,7 @@ class LinesChart {
|
|
|
1610
1617
|
show: !this.config?.isTrendChart,
|
|
1611
1618
|
type: 'value',
|
|
1612
1619
|
boundaryGap: this.config?.isTrendChart ? [0.2] : undefined,
|
|
1613
|
-
name: this.config?.yAxisName
|
|
1620
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
1614
1621
|
nameLocation: 'center',
|
|
1615
1622
|
...(this.config?.yAxis || {}),
|
|
1616
1623
|
axisLine: {
|
|
@@ -1630,6 +1637,8 @@ class LinesChart {
|
|
|
1630
1637
|
color: '#434A51',
|
|
1631
1638
|
fontSize: 14,
|
|
1632
1639
|
fontWeight: 400,
|
|
1640
|
+
overflow: 'truncate',
|
|
1641
|
+
width: this.resolveAxisNameWidth('y'),
|
|
1633
1642
|
...(this.config?.yAxis?.nameTextStyle || {}),
|
|
1634
1643
|
},
|
|
1635
1644
|
splitLine: {
|
|
@@ -1686,7 +1695,7 @@ class LinesChart {
|
|
|
1686
1695
|
show: !this.config?.isTrendChart,
|
|
1687
1696
|
type: 'value',
|
|
1688
1697
|
boundaryGap: this.config?.isTrendChart ? [0.2] : undefined,
|
|
1689
|
-
name: this.config?.secondaryYAxisName
|
|
1698
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
1690
1699
|
nameLocation: 'center',
|
|
1691
1700
|
...(this.config?.secondaryYAxisConfig || {}),
|
|
1692
1701
|
axisLine: {
|
|
@@ -1743,6 +1752,8 @@ class LinesChart {
|
|
|
1743
1752
|
color: '#434A51',
|
|
1744
1753
|
fontSize: 14,
|
|
1745
1754
|
fontWeight: 400,
|
|
1755
|
+
overflow: 'truncate',
|
|
1756
|
+
width: this.resolveAxisNameWidth('secondaryY'),
|
|
1746
1757
|
...(this.config?.secondaryYAxisConfig?.nameTextStyle || {}),
|
|
1747
1758
|
},
|
|
1748
1759
|
splitLine: {
|
|
@@ -1830,6 +1841,62 @@ class LinesChart {
|
|
|
1830
1841
|
return symbol;
|
|
1831
1842
|
}
|
|
1832
1843
|
}
|
|
1844
|
+
resolveAxisNameTextStyle(axis) {
|
|
1845
|
+
const customStyle = axis === 'x'
|
|
1846
|
+
? this.config?.xAxis?.nameTextStyle
|
|
1847
|
+
: axis === 'secondaryY'
|
|
1848
|
+
? this.config?.secondaryYAxisConfig?.nameTextStyle
|
|
1849
|
+
: this.config?.yAxis?.nameTextStyle;
|
|
1850
|
+
return {
|
|
1851
|
+
width: this.resolveAxisNameWidth(axis),
|
|
1852
|
+
...(customStyle || {}),
|
|
1853
|
+
};
|
|
1854
|
+
}
|
|
1855
|
+
resolveAxisName(name, axis) {
|
|
1856
|
+
if (!name)
|
|
1857
|
+
return '';
|
|
1858
|
+
const maxWidth = this.resolveAxisNameWidth(axis);
|
|
1859
|
+
const font = this.resolveAxisNameFont(axis);
|
|
1860
|
+
if (echarts.format.getTextRect(name, font).width <= maxWidth)
|
|
1861
|
+
return name;
|
|
1862
|
+
const ellipsis = '...';
|
|
1863
|
+
let low = 0;
|
|
1864
|
+
let high = name.length;
|
|
1865
|
+
let truncated = ellipsis;
|
|
1866
|
+
while (low <= high) {
|
|
1867
|
+
const mid = Math.floor((low + high) / 2);
|
|
1868
|
+
const nextText = `${name.slice(0, mid)}${ellipsis}`;
|
|
1869
|
+
const nextWidth = echarts.format.getTextRect(nextText, font).width;
|
|
1870
|
+
if (nextWidth <= maxWidth) {
|
|
1871
|
+
truncated = nextText;
|
|
1872
|
+
low = mid + 1;
|
|
1873
|
+
}
|
|
1874
|
+
else {
|
|
1875
|
+
high = mid - 1;
|
|
1876
|
+
}
|
|
1877
|
+
}
|
|
1878
|
+
return truncated;
|
|
1879
|
+
}
|
|
1880
|
+
resolveAxisNameFont(axis) {
|
|
1881
|
+
const style = axis === 'x'
|
|
1882
|
+
? this.config?.xAxis?.nameTextStyle
|
|
1883
|
+
: axis === 'secondaryY'
|
|
1884
|
+
? this.config?.secondaryYAxisConfig?.nameTextStyle
|
|
1885
|
+
: this.config?.yAxis?.nameTextStyle;
|
|
1886
|
+
const fontSize = style?.fontSize ?? 14;
|
|
1887
|
+
const fontWeight = style?.fontWeight ?? 400;
|
|
1888
|
+
const fontFamily = style?.fontFamily ?? 'sans-serif';
|
|
1889
|
+
return `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
1890
|
+
}
|
|
1891
|
+
resolveAxisNameWidth(axis) {
|
|
1892
|
+
const chartRect = this.chartContainer?.nativeElement.getBoundingClientRect();
|
|
1893
|
+
const chartWidth = chartRect?.width || this.chartInstance?.getWidth?.() || 360;
|
|
1894
|
+
const chartHeight = chartRect?.height || this.chartInstance?.getHeight?.() || 240;
|
|
1895
|
+
if (axis === 'x') {
|
|
1896
|
+
return Math.max(chartWidth - 240, 80);
|
|
1897
|
+
}
|
|
1898
|
+
return Math.max(chartHeight - 72, 80);
|
|
1899
|
+
}
|
|
1833
1900
|
enableDataZoom(active) {
|
|
1834
1901
|
if (!this.chartInstance)
|
|
1835
1902
|
return;
|
|
@@ -1853,8 +1920,33 @@ class LinesChart {
|
|
|
1853
1920
|
onChartInit(ec) {
|
|
1854
1921
|
this.chartInstance = ec;
|
|
1855
1922
|
this.buildOption();
|
|
1923
|
+
queueMicrotask(() => this.refreshAxisNameSpace());
|
|
1856
1924
|
this.bindEvents();
|
|
1857
1925
|
}
|
|
1926
|
+
refreshAxisNameSpace() {
|
|
1927
|
+
if (!this.chartInstance)
|
|
1928
|
+
return;
|
|
1929
|
+
this.chartInstance.setOption({
|
|
1930
|
+
xAxis: {
|
|
1931
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
1932
|
+
nameTextStyle: this.resolveAxisNameTextStyle('x'),
|
|
1933
|
+
},
|
|
1934
|
+
yAxis: [
|
|
1935
|
+
{
|
|
1936
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
1937
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
1938
|
+
},
|
|
1939
|
+
...(this.config?.secondaryYAxis
|
|
1940
|
+
? [
|
|
1941
|
+
{
|
|
1942
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
1943
|
+
nameTextStyle: this.resolveAxisNameTextStyle('secondaryY'),
|
|
1944
|
+
},
|
|
1945
|
+
]
|
|
1946
|
+
: []),
|
|
1947
|
+
],
|
|
1948
|
+
});
|
|
1949
|
+
}
|
|
1858
1950
|
/* ------------------ EVENTS ------------------ */
|
|
1859
1951
|
bindEvents() {
|
|
1860
1952
|
if (!this.chartInstance)
|
|
@@ -1956,11 +2048,11 @@ class LinesChart {
|
|
|
1956
2048
|
return { ...(option?.legend?.[0]?.selected ?? {}) };
|
|
1957
2049
|
}
|
|
1958
2050
|
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\
|
|
2051
|
+
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
2052
|
}
|
|
1961
2053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LinesChart, decorators: [{
|
|
1962
2054
|
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\
|
|
2055
|
+
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
2056
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
1965
2057
|
type: Input
|
|
1966
2058
|
}], theme: [{
|
|
@@ -1977,6 +2069,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1977
2069
|
type: Output
|
|
1978
2070
|
}], legendEvent: [{
|
|
1979
2071
|
type: Output
|
|
2072
|
+
}], chartContainer: [{
|
|
2073
|
+
type: ViewChild,
|
|
2074
|
+
args: ['chartContainer']
|
|
2075
|
+
}], refreshAxisNameSpace: [{
|
|
2076
|
+
type: HostListener,
|
|
2077
|
+
args: ['window:resize']
|
|
1980
2078
|
}], closeCard: [{
|
|
1981
2079
|
type: HostListener,
|
|
1982
2080
|
args: ['document:click']
|
|
@@ -2008,6 +2106,7 @@ class BarChart {
|
|
|
2008
2106
|
contextMenuClick = new EventEmitter();
|
|
2009
2107
|
chartEvent = new EventEmitter();
|
|
2010
2108
|
legendEvent = new EventEmitter();
|
|
2109
|
+
chartContainer;
|
|
2011
2110
|
chartOption;
|
|
2012
2111
|
chartInstance;
|
|
2013
2112
|
cardPosition = { x: 0, y: 0 };
|
|
@@ -2040,14 +2139,16 @@ class BarChart {
|
|
|
2040
2139
|
if (this.previousConfig.xAxisName !== this.config.xAxisName) {
|
|
2041
2140
|
this.previousConfig.xAxisName = this.config.xAxisName;
|
|
2042
2141
|
updateOption.xAxis = {
|
|
2043
|
-
name: this.config?.xAxisName
|
|
2142
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
2143
|
+
nameTextStyle: this.resolveAxisNameTextStyle('x'),
|
|
2044
2144
|
};
|
|
2045
2145
|
}
|
|
2046
2146
|
if (this.previousConfig.yAxisName !== this.config.yAxisName) {
|
|
2047
2147
|
this.previousConfig.yAxisName = this.config.yAxisName;
|
|
2048
2148
|
updateOption.yAxis = [
|
|
2049
2149
|
{
|
|
2050
|
-
name: this.config?.yAxisName
|
|
2150
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
2151
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
2051
2152
|
},
|
|
2052
2153
|
];
|
|
2053
2154
|
}
|
|
@@ -2055,10 +2156,12 @@ class BarChart {
|
|
|
2055
2156
|
this.previousConfig.secondaryYAxisName = this.config.secondaryYAxisName;
|
|
2056
2157
|
updateOption.yAxis = [
|
|
2057
2158
|
{
|
|
2058
|
-
name: this.config?.yAxisName
|
|
2159
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
2160
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
2059
2161
|
},
|
|
2060
2162
|
{
|
|
2061
|
-
name: this.config?.secondaryYAxisName
|
|
2163
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
2164
|
+
nameTextStyle: this.resolveAxisNameTextStyle('secondaryY'),
|
|
2062
2165
|
},
|
|
2063
2166
|
];
|
|
2064
2167
|
}
|
|
@@ -2138,9 +2241,9 @@ class BarChart {
|
|
|
2138
2241
|
xAxis: {
|
|
2139
2242
|
type: 'category',
|
|
2140
2243
|
data: this.config?.xAxisData,
|
|
2141
|
-
name: this.config?.xAxisName || '',
|
|
2142
2244
|
nameLocation: 'center',
|
|
2143
2245
|
...(this.config?.xAxis || {}),
|
|
2246
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
2144
2247
|
axisLine: {
|
|
2145
2248
|
show: this.config?.showXAxisLine ?? true,
|
|
2146
2249
|
...(this.config?.xAxis?.axisLine || {}),
|
|
@@ -2166,6 +2269,8 @@ class BarChart {
|
|
|
2166
2269
|
color: '#434A51',
|
|
2167
2270
|
fontSize: 14,
|
|
2168
2271
|
fontWeight: 400,
|
|
2272
|
+
overflow: 'truncate',
|
|
2273
|
+
width: this.resolveAxisNameWidth('x'),
|
|
2169
2274
|
...(this.config?.xAxis?.nameTextStyle || {}),
|
|
2170
2275
|
},
|
|
2171
2276
|
splitLine: {
|
|
@@ -2182,7 +2287,7 @@ class BarChart {
|
|
|
2182
2287
|
yAxis: [
|
|
2183
2288
|
{
|
|
2184
2289
|
type: 'value',
|
|
2185
|
-
name: this.config?.yAxisName
|
|
2290
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
2186
2291
|
nameLocation: 'center',
|
|
2187
2292
|
...(this.config?.yAxis || {}),
|
|
2188
2293
|
axisLine: {
|
|
@@ -2202,6 +2307,8 @@ class BarChart {
|
|
|
2202
2307
|
color: '#434A51',
|
|
2203
2308
|
fontSize: 14,
|
|
2204
2309
|
fontWeight: 400,
|
|
2310
|
+
overflow: 'truncate',
|
|
2311
|
+
width: this.resolveAxisNameWidth('y'),
|
|
2205
2312
|
...(this.config?.yAxis?.nameTextStyle || {}),
|
|
2206
2313
|
},
|
|
2207
2314
|
axisLabel: {
|
|
@@ -2256,7 +2363,7 @@ class BarChart {
|
|
|
2256
2363
|
? [
|
|
2257
2364
|
{
|
|
2258
2365
|
type: 'value',
|
|
2259
|
-
name: this.config?.secondaryYAxisName
|
|
2366
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
2260
2367
|
nameLocation: 'center',
|
|
2261
2368
|
...(this.config?.secondaryYAxisConfig || {}),
|
|
2262
2369
|
axisLine: {
|
|
@@ -2313,6 +2420,8 @@ class BarChart {
|
|
|
2313
2420
|
color: '#434A51',
|
|
2314
2421
|
fontSize: 14,
|
|
2315
2422
|
fontWeight: 400,
|
|
2423
|
+
overflow: 'truncate',
|
|
2424
|
+
width: this.resolveAxisNameWidth('secondaryY'),
|
|
2316
2425
|
...(this.config?.secondaryYAxisConfig?.nameTextStyle || {}),
|
|
2317
2426
|
},
|
|
2318
2427
|
splitLine: {
|
|
@@ -2433,6 +2542,62 @@ class BarChart {
|
|
|
2433
2542
|
end: 100,
|
|
2434
2543
|
});
|
|
2435
2544
|
}
|
|
2545
|
+
resolveAxisNameTextStyle(axis) {
|
|
2546
|
+
const customStyle = axis === 'x'
|
|
2547
|
+
? this.config?.xAxis?.nameTextStyle
|
|
2548
|
+
: axis === 'secondaryY'
|
|
2549
|
+
? this.config?.secondaryYAxisConfig?.nameTextStyle
|
|
2550
|
+
: this.config?.yAxis?.nameTextStyle;
|
|
2551
|
+
return {
|
|
2552
|
+
width: this.resolveAxisNameWidth(axis),
|
|
2553
|
+
...(customStyle || {}),
|
|
2554
|
+
};
|
|
2555
|
+
}
|
|
2556
|
+
resolveAxisName(name, axis) {
|
|
2557
|
+
if (!name)
|
|
2558
|
+
return '';
|
|
2559
|
+
const maxWidth = this.resolveAxisNameWidth(axis);
|
|
2560
|
+
const font = this.resolveAxisNameFont(axis);
|
|
2561
|
+
if (echarts.format.getTextRect(name, font).width <= maxWidth)
|
|
2562
|
+
return name;
|
|
2563
|
+
const ellipsis = '...';
|
|
2564
|
+
let low = 0;
|
|
2565
|
+
let high = name.length;
|
|
2566
|
+
let truncated = ellipsis;
|
|
2567
|
+
while (low <= high) {
|
|
2568
|
+
const mid = Math.floor((low + high) / 2);
|
|
2569
|
+
const nextText = `${name.slice(0, mid)}${ellipsis}`;
|
|
2570
|
+
const nextWidth = echarts.format.getTextRect(nextText, font).width;
|
|
2571
|
+
if (nextWidth <= maxWidth) {
|
|
2572
|
+
truncated = nextText;
|
|
2573
|
+
low = mid + 1;
|
|
2574
|
+
}
|
|
2575
|
+
else {
|
|
2576
|
+
high = mid - 1;
|
|
2577
|
+
}
|
|
2578
|
+
}
|
|
2579
|
+
return truncated;
|
|
2580
|
+
}
|
|
2581
|
+
resolveAxisNameFont(axis) {
|
|
2582
|
+
const style = axis === 'x'
|
|
2583
|
+
? this.config?.xAxis?.nameTextStyle
|
|
2584
|
+
: axis === 'secondaryY'
|
|
2585
|
+
? this.config?.secondaryYAxisConfig?.nameTextStyle
|
|
2586
|
+
: this.config?.yAxis?.nameTextStyle;
|
|
2587
|
+
const fontSize = style?.fontSize ?? 14;
|
|
2588
|
+
const fontWeight = style?.fontWeight ?? 400;
|
|
2589
|
+
const fontFamily = style?.fontFamily ?? 'sans-serif';
|
|
2590
|
+
return `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
2591
|
+
}
|
|
2592
|
+
resolveAxisNameWidth(axis) {
|
|
2593
|
+
const chartRect = this.chartContainer?.nativeElement.getBoundingClientRect();
|
|
2594
|
+
const chartWidth = chartRect?.width || this.chartInstance?.getWidth?.() || 360;
|
|
2595
|
+
const chartHeight = chartRect?.height || this.chartInstance?.getHeight?.() || 240;
|
|
2596
|
+
if (axis === 'x') {
|
|
2597
|
+
return Math.max(chartWidth - 240, 80);
|
|
2598
|
+
}
|
|
2599
|
+
return Math.max(chartHeight - 72, 80);
|
|
2600
|
+
}
|
|
2436
2601
|
get hasSideLegendWidth() {
|
|
2437
2602
|
return this.isSideLegend && !!this.config.customLegend?.maxWidth;
|
|
2438
2603
|
}
|
|
@@ -2458,8 +2623,33 @@ class BarChart {
|
|
|
2458
2623
|
onChartInit(ec) {
|
|
2459
2624
|
this.chartInstance = ec;
|
|
2460
2625
|
this.buildOption();
|
|
2626
|
+
queueMicrotask(() => this.refreshAxisNameSpace());
|
|
2461
2627
|
this.bindEvents();
|
|
2462
2628
|
}
|
|
2629
|
+
refreshAxisNameSpace() {
|
|
2630
|
+
if (!this.chartInstance)
|
|
2631
|
+
return;
|
|
2632
|
+
this.chartInstance.setOption({
|
|
2633
|
+
xAxis: {
|
|
2634
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
2635
|
+
nameTextStyle: this.resolveAxisNameTextStyle('x'),
|
|
2636
|
+
},
|
|
2637
|
+
yAxis: [
|
|
2638
|
+
{
|
|
2639
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
2640
|
+
nameTextStyle: this.resolveAxisNameTextStyle('y'),
|
|
2641
|
+
},
|
|
2642
|
+
...(this.config?.secondaryYAxis
|
|
2643
|
+
? [
|
|
2644
|
+
{
|
|
2645
|
+
name: this.resolveAxisName(this.config?.secondaryYAxisName, 'secondaryY'),
|
|
2646
|
+
nameTextStyle: this.resolveAxisNameTextStyle('secondaryY'),
|
|
2647
|
+
},
|
|
2648
|
+
]
|
|
2649
|
+
: []),
|
|
2650
|
+
],
|
|
2651
|
+
});
|
|
2652
|
+
}
|
|
2463
2653
|
/* ------------------ EVENTS ------------------ */
|
|
2464
2654
|
bindEvents() {
|
|
2465
2655
|
if (!this.chartInstance)
|
|
@@ -2551,11 +2741,11 @@ class BarChart {
|
|
|
2551
2741
|
}
|
|
2552
2742
|
}
|
|
2553
2743
|
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\
|
|
2744
|
+
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
2745
|
}
|
|
2556
2746
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
|
|
2557
2747
|
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\
|
|
2748
|
+
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
2749
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
2560
2750
|
type: Input
|
|
2561
2751
|
}], theme: [{
|
|
@@ -2572,6 +2762,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2572
2762
|
type: Output
|
|
2573
2763
|
}], legendEvent: [{
|
|
2574
2764
|
type: Output
|
|
2765
|
+
}], chartContainer: [{
|
|
2766
|
+
type: ViewChild,
|
|
2767
|
+
args: ['chartContainer']
|
|
2768
|
+
}], refreshAxisNameSpace: [{
|
|
2769
|
+
type: HostListener,
|
|
2770
|
+
args: ['window:resize']
|
|
2575
2771
|
}], closeCard: [{
|
|
2576
2772
|
type: HostListener,
|
|
2577
2773
|
args: ['document:click']
|
|
@@ -4333,6 +4529,7 @@ class ScatterChartComp {
|
|
|
4333
4529
|
theme;
|
|
4334
4530
|
chartEvent = new EventEmitter();
|
|
4335
4531
|
legendEvent = new EventEmitter();
|
|
4532
|
+
chartContainer;
|
|
4336
4533
|
chartOption = {};
|
|
4337
4534
|
chartInstance;
|
|
4338
4535
|
constructor(chartService) {
|
|
@@ -4399,12 +4596,13 @@ class ScatterChartComp {
|
|
|
4399
4596
|
color: '#434A51',
|
|
4400
4597
|
fontSize: 12,
|
|
4401
4598
|
},
|
|
4402
|
-
name: this.config?.xAxisName || '',
|
|
4403
4599
|
nameLocation: 'center',
|
|
4404
4600
|
nameTextStyle: {
|
|
4405
4601
|
color: '#434A51',
|
|
4406
4602
|
fontSize: 14,
|
|
4407
4603
|
fontWeight: 400,
|
|
4604
|
+
width: this.resolveAxisNameWidth('x'),
|
|
4605
|
+
...(this.config?.xAxis?.nameTextStyle || {}),
|
|
4408
4606
|
},
|
|
4409
4607
|
splitLine: {
|
|
4410
4608
|
show: true,
|
|
@@ -4415,16 +4613,19 @@ class ScatterChartComp {
|
|
|
4415
4613
|
},
|
|
4416
4614
|
},
|
|
4417
4615
|
...this.config?.xAxis,
|
|
4616
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
4418
4617
|
},
|
|
4419
4618
|
yAxis: [
|
|
4420
4619
|
{
|
|
4421
4620
|
type: 'value',
|
|
4422
|
-
name: this.config?.yAxisName
|
|
4621
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
4423
4622
|
nameLocation: 'center',
|
|
4424
4623
|
nameTextStyle: {
|
|
4425
4624
|
color: '#434A51',
|
|
4426
4625
|
fontSize: 14,
|
|
4427
4626
|
fontWeight: 400,
|
|
4627
|
+
width: this.resolveAxisNameWidth('y'),
|
|
4628
|
+
...(this.config?.yAxis?.nameTextStyle || {}),
|
|
4428
4629
|
},
|
|
4429
4630
|
axisLine: {
|
|
4430
4631
|
show: this.config?.showYAxisLine ?? true,
|
|
@@ -4497,6 +4698,47 @@ class ScatterChartComp {
|
|
|
4497
4698
|
return (this.config.customLegend?.position === 'left' ||
|
|
4498
4699
|
this.config.customLegend?.position === 'right');
|
|
4499
4700
|
}
|
|
4701
|
+
resolveAxisName(name, axis) {
|
|
4702
|
+
if (!name)
|
|
4703
|
+
return '';
|
|
4704
|
+
const maxWidth = this.resolveAxisNameWidth(axis);
|
|
4705
|
+
const font = this.resolveAxisNameFont(axis);
|
|
4706
|
+
if (echarts.format.getTextRect(name, font).width <= maxWidth)
|
|
4707
|
+
return name;
|
|
4708
|
+
const ellipsis = '...';
|
|
4709
|
+
let low = 0;
|
|
4710
|
+
let high = name.length;
|
|
4711
|
+
let truncated = ellipsis;
|
|
4712
|
+
while (low <= high) {
|
|
4713
|
+
const mid = Math.floor((low + high) / 2);
|
|
4714
|
+
const nextText = `${name.slice(0, mid)}${ellipsis}`;
|
|
4715
|
+
const nextWidth = echarts.format.getTextRect(nextText, font).width;
|
|
4716
|
+
if (nextWidth <= maxWidth) {
|
|
4717
|
+
truncated = nextText;
|
|
4718
|
+
low = mid + 1;
|
|
4719
|
+
}
|
|
4720
|
+
else {
|
|
4721
|
+
high = mid - 1;
|
|
4722
|
+
}
|
|
4723
|
+
}
|
|
4724
|
+
return truncated;
|
|
4725
|
+
}
|
|
4726
|
+
resolveAxisNameFont(axis) {
|
|
4727
|
+
const style = axis === 'x' ? this.config?.xAxis?.nameTextStyle : this.config?.yAxis?.nameTextStyle;
|
|
4728
|
+
const fontSize = style?.fontSize ?? 14;
|
|
4729
|
+
const fontWeight = style?.fontWeight ?? 400;
|
|
4730
|
+
const fontFamily = style?.fontFamily ?? 'sans-serif';
|
|
4731
|
+
return `${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
4732
|
+
}
|
|
4733
|
+
resolveAxisNameWidth(axis) {
|
|
4734
|
+
const chartRect = this.chartContainer?.nativeElement.getBoundingClientRect();
|
|
4735
|
+
const chartWidth = chartRect?.width || this.chartInstance?.getWidth?.() || 360;
|
|
4736
|
+
const chartHeight = chartRect?.height || this.chartInstance?.getHeight?.() || 240;
|
|
4737
|
+
if (axis === 'x') {
|
|
4738
|
+
return Math.max(chartWidth - 240, 80);
|
|
4739
|
+
}
|
|
4740
|
+
return Math.max(chartHeight - 72, 80);
|
|
4741
|
+
}
|
|
4500
4742
|
onLegendEvent(event) {
|
|
4501
4743
|
this.legendEvent.emit(event);
|
|
4502
4744
|
this.chartEvent.emit({
|
|
@@ -4511,6 +4753,29 @@ class ScatterChartComp {
|
|
|
4511
4753
|
onChartInit(ec) {
|
|
4512
4754
|
this.chartInstance = ec;
|
|
4513
4755
|
this.buildOption();
|
|
4756
|
+
queueMicrotask(() => this.refreshAxisNameSpace());
|
|
4757
|
+
}
|
|
4758
|
+
refreshAxisNameSpace() {
|
|
4759
|
+
if (!this.chartInstance)
|
|
4760
|
+
return;
|
|
4761
|
+
this.chartInstance.setOption({
|
|
4762
|
+
xAxis: {
|
|
4763
|
+
name: this.resolveAxisName(this.config?.xAxisName, 'x'),
|
|
4764
|
+
nameTextStyle: {
|
|
4765
|
+
width: this.resolveAxisNameWidth('x'),
|
|
4766
|
+
...(this.config?.xAxis?.nameTextStyle || {}),
|
|
4767
|
+
},
|
|
4768
|
+
},
|
|
4769
|
+
yAxis: [
|
|
4770
|
+
{
|
|
4771
|
+
name: this.resolveAxisName(this.config?.yAxisName, 'y'),
|
|
4772
|
+
nameTextStyle: {
|
|
4773
|
+
width: this.resolveAxisNameWidth('y'),
|
|
4774
|
+
...(this.config?.yAxis?.nameTextStyle || {}),
|
|
4775
|
+
},
|
|
4776
|
+
},
|
|
4777
|
+
],
|
|
4778
|
+
});
|
|
4514
4779
|
}
|
|
4515
4780
|
ngOnDestroy() {
|
|
4516
4781
|
if (this.chartInstance) {
|
|
@@ -4519,11 +4784,11 @@ class ScatterChartComp {
|
|
|
4519
4784
|
}
|
|
4520
4785
|
}
|
|
4521
4786
|
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\
|
|
4787
|
+
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
4788
|
}
|
|
4524
4789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ScatterChartComp, decorators: [{
|
|
4525
4790
|
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\
|
|
4791
|
+
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
4792
|
}], ctorParameters: () => [{ type: Charts }], propDecorators: { config: [{
|
|
4528
4793
|
type: Input
|
|
4529
4794
|
}], theme: [{
|
|
@@ -4532,6 +4797,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4532
4797
|
type: Output
|
|
4533
4798
|
}], legendEvent: [{
|
|
4534
4799
|
type: Output
|
|
4800
|
+
}], chartContainer: [{
|
|
4801
|
+
type: ViewChild,
|
|
4802
|
+
args: ['chartContainer']
|
|
4803
|
+
}], refreshAxisNameSpace: [{
|
|
4804
|
+
type: HostListener,
|
|
4805
|
+
args: ['window:resize']
|
|
4535
4806
|
}] } });
|
|
4536
4807
|
|
|
4537
4808
|
const DEFAULT_COLORS = ['#2f8f3a', '#d0a020', '#dc8a1f', '#a43b35', '#d9dde1'];
|