cats-charts 0.0.91 → 0.0.93
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 +102 -21
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +11 -2
- package/package.json +1 -1
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -7,6 +7,7 @@ import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, Toolb
|
|
|
7
7
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
8
8
|
import * as i2 from '@angular/common';
|
|
9
9
|
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
10
|
+
import { RightClickCard as RightClickCard$1 } from 'charts-lib';
|
|
10
11
|
|
|
11
12
|
class RightClickCard {
|
|
12
13
|
cardPosition;
|
|
@@ -1447,6 +1448,19 @@ class Charts {
|
|
|
1447
1448
|
return Math.max(...levelMap.values());
|
|
1448
1449
|
}
|
|
1449
1450
|
sankeyTooltipFormatter(params, config) {
|
|
1451
|
+
const showPercentage = config.styling?.labels?.showPercentage === true;
|
|
1452
|
+
const targetNames = new Set((config.links ?? []).map((link) => link.target));
|
|
1453
|
+
const sourceTotal = (config.links ?? [])
|
|
1454
|
+
.filter((link) => !targetNames.has(link.source))
|
|
1455
|
+
.reduce((sum, link) => sum + Number(link.value || 0), 0);
|
|
1456
|
+
const totalValue = sourceTotal || (config.links ?? []).reduce((sum, link) => sum + Number(link.value || 0), 0);
|
|
1457
|
+
const percentageRow = (item) => {
|
|
1458
|
+
const value = Number(item);
|
|
1459
|
+
if (!showPercentage || !Number.isFinite(value))
|
|
1460
|
+
return '';
|
|
1461
|
+
const percentage = totalValue ? ((value / totalValue) * 100).toFixed(1) : '0.0';
|
|
1462
|
+
return `${percentage}%`;
|
|
1463
|
+
};
|
|
1450
1464
|
if (params.dataType === 'edge') {
|
|
1451
1465
|
const { source, target, value, tooltip } = params.data;
|
|
1452
1466
|
const escape = (item) => String(item ?? '').replace(/[&<>"']/g, (char) => ({
|
|
@@ -1481,7 +1495,7 @@ class Charts {
|
|
|
1481
1495
|
/>
|
|
1482
1496
|
<span>${escape(target)}</span>
|
|
1483
1497
|
</div>
|
|
1484
|
-
<div style="font-size:12px;font-weight:600"
|
|
1498
|
+
<div style="font-size:12px;font-weight:600">${formatKey(config?.activeMetric ?? '') || 'Value'}: <span style="font-size:12px;font-weight:400">${showPercentage ? '(' : ''}${escape(typeof value === 'number' ? this.formatTooltipValue(value, config.tooltipCompactValue) : value)}${showPercentage ? ')' : ''} ${showPercentage ? percentageRow(value) : ''}</span></div>
|
|
1485
1499
|
${tooltipRows}
|
|
1486
1500
|
</div>
|
|
1487
1501
|
`;
|
|
@@ -1493,7 +1507,8 @@ class Charts {
|
|
|
1493
1507
|
border-radius: 8px;
|
|
1494
1508
|
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
|
|
1495
1509
|
">
|
|
1496
|
-
${params.name}: <b>${typeof params.value === 'number' ? this.formatTooltipValue(params.value, config.tooltipCompactValue) : params.value}</b>
|
|
1510
|
+
${params.name}: <b>${showPercentage ? '(' : ''}${typeof params.value === 'number' ? this.formatTooltipValue(params.value, config.tooltipCompactValue) : params.value}${showPercentage ? ')' : ''}</b>
|
|
1511
|
+
${percentageRow(params.value)}
|
|
1497
1512
|
</div>
|
|
1498
1513
|
`;
|
|
1499
1514
|
}
|
|
@@ -3954,8 +3969,12 @@ class SankeyChart {
|
|
|
3954
3969
|
config;
|
|
3955
3970
|
theme;
|
|
3956
3971
|
events = [];
|
|
3972
|
+
contextMenuOptions = [];
|
|
3957
3973
|
chartEvent = new EventEmitter();
|
|
3958
3974
|
legendEvent = new EventEmitter();
|
|
3975
|
+
contextMenuClick = new EventEmitter();
|
|
3976
|
+
cardPosition = { x: 0, y: 0 };
|
|
3977
|
+
openCard = false;
|
|
3959
3978
|
constructor(chartService, cdr, hostElement) {
|
|
3960
3979
|
this.chartService = chartService;
|
|
3961
3980
|
this.cdr = cdr;
|
|
@@ -4042,14 +4061,14 @@ class SankeyChart {
|
|
|
4042
4061
|
bottom: legendEnabled && legendConfig?.position === 'bottom' ? 32 : 16,
|
|
4043
4062
|
...this.config.seriesOption,
|
|
4044
4063
|
type: 'sankey',
|
|
4045
|
-
...(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth
|
|
4064
|
+
...((styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth)
|
|
4046
4065
|
? {
|
|
4047
|
-
nodeWidth: this.clamp(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth, 1, 50)
|
|
4066
|
+
nodeWidth: this.clamp(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth, 1, 50),
|
|
4048
4067
|
}
|
|
4049
4068
|
: {}),
|
|
4050
|
-
...(styling?.node?.padding ?? this.config.seriesOption?.nodeGap
|
|
4069
|
+
...((styling?.node?.padding ?? this.config.seriesOption?.nodeGap)
|
|
4051
4070
|
? {
|
|
4052
|
-
nodeGap: this.clamp(styling?.node?.padding ?? this.config.seriesOption?.nodeGap, 0, 100)
|
|
4071
|
+
nodeGap: this.clamp(styling?.node?.padding ?? this.config.seriesOption?.nodeGap, 0, 100),
|
|
4053
4072
|
}
|
|
4054
4073
|
: {}),
|
|
4055
4074
|
data: visibleNodes.map((n, index) => {
|
|
@@ -4105,8 +4124,16 @@ class SankeyChart {
|
|
|
4105
4124
|
color: fontColor,
|
|
4106
4125
|
fontFamily: labelTypography?.reset ? undefined : labelTypography?.fontFamily,
|
|
4107
4126
|
fontSize: this.clamp(labelTypography?.reset ? undefined : labelTypography?.fontSize, 8, 40),
|
|
4108
|
-
fontWeight: labelTypography?.reset
|
|
4109
|
-
|
|
4127
|
+
fontWeight: labelTypography?.reset
|
|
4128
|
+
? undefined
|
|
4129
|
+
: labelTypography?.bold
|
|
4130
|
+
? 'bold'
|
|
4131
|
+
: undefined,
|
|
4132
|
+
fontStyle: labelTypography?.reset
|
|
4133
|
+
? undefined
|
|
4134
|
+
: labelTypography?.italic
|
|
4135
|
+
? 'italic'
|
|
4136
|
+
: undefined,
|
|
4110
4137
|
textDecoration: labelTypography?.reset
|
|
4111
4138
|
? undefined
|
|
4112
4139
|
: labelTypography?.underline
|
|
@@ -4123,6 +4150,13 @@ class SankeyChart {
|
|
|
4123
4150
|
}
|
|
4124
4151
|
this.cdr.markForCheck();
|
|
4125
4152
|
}
|
|
4153
|
+
onMenuClick(item) {
|
|
4154
|
+
this.contextMenuClick.emit(item);
|
|
4155
|
+
this.closeCard();
|
|
4156
|
+
}
|
|
4157
|
+
closeCard() {
|
|
4158
|
+
this.openCard = false;
|
|
4159
|
+
}
|
|
4126
4160
|
get showNodeToggles() {
|
|
4127
4161
|
return this.config?.styling?.nodesOff?.showControls === true;
|
|
4128
4162
|
}
|
|
@@ -4287,8 +4321,8 @@ class SankeyChart {
|
|
|
4287
4321
|
? styling.individualColors?.source
|
|
4288
4322
|
: meta.role === 'destination'
|
|
4289
4323
|
? styling.individualColors?.destination
|
|
4290
|
-
: styling.individualColors?.middle?.[meta.depth] ??
|
|
4291
|
-
styling.individualColors?.middle?.[String(meta.depth)];
|
|
4324
|
+
: (styling.individualColors?.middle?.[meta.depth] ??
|
|
4325
|
+
styling.individualColors?.middle?.[String(meta.depth)]);
|
|
4292
4326
|
if (colorStop?.color) {
|
|
4293
4327
|
return this.withOpacity(colorStop.color, this.percentToRatio(colorStop.opacity, 100));
|
|
4294
4328
|
}
|
|
@@ -4302,9 +4336,13 @@ class SankeyChart {
|
|
|
4302
4336
|
return {
|
|
4303
4337
|
itemStyle: {
|
|
4304
4338
|
...(nodeStyle.color
|
|
4305
|
-
? {
|
|
4339
|
+
? {
|
|
4340
|
+
color: this.withOpacity(nodeStyle.color, this.percentToRatio(nodeStyle.opacity, 100)),
|
|
4341
|
+
}
|
|
4342
|
+
: {}),
|
|
4343
|
+
...(nodeStyle.opacity !== undefined
|
|
4344
|
+
? { opacity: this.percentToRatio(nodeStyle.opacity, 100) }
|
|
4306
4345
|
: {}),
|
|
4307
|
-
...(nodeStyle.opacity !== undefined ? { opacity: this.percentToRatio(nodeStyle.opacity, 100) } : {}),
|
|
4308
4346
|
...(nodeStyle.itemStyle || {}),
|
|
4309
4347
|
},
|
|
4310
4348
|
label: nodeStyle.label,
|
|
@@ -4348,14 +4386,16 @@ class SankeyChart {
|
|
|
4348
4386
|
const text = this.applyCase(name, labels?.typography?.reset ? 'none' : labels?.typography?.case);
|
|
4349
4387
|
const stats = [];
|
|
4350
4388
|
if (labels?.showNumbers)
|
|
4351
|
-
stats.push(String(meta?.value ?? 0));
|
|
4389
|
+
stats.push(String(`${labels?.showPercentage ? `(${meta?.value ?? 0})` : (meta?.value ?? 0)}`));
|
|
4352
4390
|
if (labels?.showPercentage) {
|
|
4353
4391
|
const percentage = totalValue ? (((meta?.value ?? 0) / totalValue) * 100).toFixed(1) : '0.0';
|
|
4354
4392
|
stats.push(`${percentage}%`);
|
|
4355
4393
|
}
|
|
4356
4394
|
if (!stats.length)
|
|
4357
4395
|
return text;
|
|
4358
|
-
return labels?.splitLabelsAndStats
|
|
4396
|
+
return labels?.splitLabelsAndStats
|
|
4397
|
+
? `${text}\n${stats.join(' ')}`
|
|
4398
|
+
: `${text} ${stats.join(' ')}`;
|
|
4359
4399
|
}
|
|
4360
4400
|
resolveLabelPosition() {
|
|
4361
4401
|
const alignment = this.config.styling?.labels?.alignment;
|
|
@@ -4520,13 +4560,47 @@ class SankeyChart {
|
|
|
4520
4560
|
this.bindSankeyDragBounds();
|
|
4521
4561
|
this.events.forEach((eventName) => {
|
|
4522
4562
|
this.chartInstance.on(eventName, (params) => {
|
|
4523
|
-
|
|
4563
|
+
const event = params?.event?.event;
|
|
4564
|
+
if (eventName === 'contextmenu' && event) {
|
|
4524
4565
|
params.event.event.preventDefault();
|
|
4566
|
+
const container = this.chartInstance.getDom();
|
|
4567
|
+
const rect = container.getBoundingClientRect();
|
|
4568
|
+
this.cardPosition = {
|
|
4569
|
+
x: event.clientX - rect.left,
|
|
4570
|
+
y: event.clientY - rect.top,
|
|
4571
|
+
};
|
|
4572
|
+
this.openCard = true;
|
|
4573
|
+
this.cdr.markForCheck();
|
|
4574
|
+
this.chartEvent.emit({
|
|
4575
|
+
type: eventName,
|
|
4576
|
+
data: params,
|
|
4577
|
+
});
|
|
4578
|
+
}
|
|
4579
|
+
else if (eventName === 'click') {
|
|
4580
|
+
this.chartInstance.on('click', (params) => {
|
|
4581
|
+
this.chartEvent.emit({
|
|
4582
|
+
type: 'click',
|
|
4583
|
+
data: params,
|
|
4584
|
+
});
|
|
4585
|
+
});
|
|
4586
|
+
const zr = this.chartInstance.getZr();
|
|
4587
|
+
zr.on('click', (zrEvent) => {
|
|
4588
|
+
if (!zrEvent.target) {
|
|
4589
|
+
const nativeEvent = zrEvent.event;
|
|
4590
|
+
nativeEvent.preventDefault();
|
|
4591
|
+
this.chartEvent.emit({
|
|
4592
|
+
type: 'blur',
|
|
4593
|
+
data: { ...zrEvent, type: 'blur' },
|
|
4594
|
+
});
|
|
4595
|
+
}
|
|
4596
|
+
});
|
|
4597
|
+
}
|
|
4598
|
+
else {
|
|
4599
|
+
this.chartEvent.emit({
|
|
4600
|
+
type: eventName,
|
|
4601
|
+
data: params,
|
|
4602
|
+
});
|
|
4525
4603
|
}
|
|
4526
|
-
this.chartEvent.emit({
|
|
4527
|
-
type: eventName,
|
|
4528
|
-
data: params,
|
|
4529
|
-
});
|
|
4530
4604
|
});
|
|
4531
4605
|
});
|
|
4532
4606
|
}
|
|
@@ -4573,21 +4647,28 @@ class SankeyChart {
|
|
|
4573
4647
|
}
|
|
4574
4648
|
}
|
|
4575
4649
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SankeyChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4576
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SankeyChart, isStandalone: true, selector: "lib-sankey-chart", inputs: { config: "config", theme: "theme", events: "events" }, outputs: { chartEvent: "chartEvent", legendEvent: "legendEvent" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"sankey-chart-shell\"\n [class.sankey-chart-shell--legend-left]=\"legendPosition === 'left'\"\n [class.sankey-chart-shell--legend-right]=\"legendPosition === 'right'\"\n [class.sankey-chart-shell--legend-bottom]=\"legendPosition === 'bottom'\"\n [class.sankey-chart-shell--with-toggles]=\"showNodeToggles\"\n>\n @if (showNodeToggles && sourceToggleItems.length) {\n <div class=\"sankey-node-toggles\" aria-label=\"Sankey source visibility\">\n @for (item of sourceToggleItems; track item.name) {\n <label class=\"sankey-node-toggle\">\n <input\n type=\"checkbox\"\n [checked]=\"!item.hidden\"\n (change)=\"toggleSourceNode(item.name, $any($event.target).checked)\"\n />\n <span>{{ item.name }}</span>\n </label>\n }\n </div>\n }\n\n @if (showLegend && legendPosition !== 'bottom' && legendPosition !== 'right') {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (showLegend && (legendPosition === 'bottom' || legendPosition === 'right')) {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n", styles: [".sankey-chart-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;gap:8px}.sankey-chart-shell--legend-left,.sankey-chart-shell--legend-right{flex-direction:row}.sankey-chart-shell--legend-bottom{flex-direction:column}.chart-container{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.sankey-chart-shell__legend{flex:0 0 auto}.sankey-chart-shell--legend-left .sankey-chart-shell__legend,.sankey-chart-shell--legend-right .sankey-chart-shell__legend{max-width:min(320px,40%)}.sankey-node-toggles{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.sankey-node-toggle{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid #d7d9dd;border-radius:6px;box-sizing:border-box;background:#fff;color:#252a31;font-family:inherit;font-size:12px;line-height:1;cursor:pointer}.sankey-node-toggle input{width:14px;height:14px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 });
|
|
4650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SankeyChart, isStandalone: true, selector: "lib-sankey-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions" }, outputs: { chartEvent: "chartEvent", legendEvent: "legendEvent", contextMenuClick: "contextMenuClick" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"sankey-chart-shell\"\n [class.sankey-chart-shell--legend-left]=\"legendPosition === 'left'\"\n [class.sankey-chart-shell--legend-right]=\"legendPosition === 'right'\"\n [class.sankey-chart-shell--legend-bottom]=\"legendPosition === 'bottom'\"\n [class.sankey-chart-shell--with-toggles]=\"showNodeToggles\"\n>\n @if (showNodeToggles && sourceToggleItems.length) {\n <div class=\"sankey-node-toggles\" aria-label=\"Sankey source visibility\">\n @for (item of sourceToggleItems; track item.name) {\n <label class=\"sankey-node-toggle\">\n <input\n type=\"checkbox\"\n [checked]=\"!item.hidden\"\n (change)=\"toggleSourceNode(item.name, $any($event.target).checked)\"\n />\n <span>{{ item.name }}</span>\n </label>\n }\n </div>\n }\n\n @if (showLegend && legendPosition !== 'bottom' && legendPosition !== 'right') {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (showLegend && (legendPosition === 'bottom' || legendPosition === 'right')) {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".sankey-chart-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;gap:8px}.sankey-chart-shell--legend-left,.sankey-chart-shell--legend-right{flex-direction:row}.sankey-chart-shell--legend-bottom{flex-direction:column}.chart-container{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.sankey-chart-shell__legend{flex:0 0 auto}.sankey-chart-shell--legend-left .sankey-chart-shell__legend,.sankey-chart-shell--legend-right .sankey-chart-shell__legend{max-width:min(320px,40%)}.sankey-node-toggles{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.sankey-node-toggle{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid #d7d9dd;border-radius:6px;box-sizing:border-box;background:#fff;color:#252a31;font-family:inherit;font-size:12px;line-height:1;cursor:pointer}.sankey-node-toggle input{width:14px;height:14px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }, { kind: "component", type: RightClickCard$1, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4577
4651
|
}
|
|
4578
4652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SankeyChart, decorators: [{
|
|
4579
4653
|
type: Component,
|
|
4580
|
-
args: [{ selector: 'lib-sankey-chart', imports: [CommonModule, NgxEchartsDirective, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sankey-chart-shell\"\n [class.sankey-chart-shell--legend-left]=\"legendPosition === 'left'\"\n [class.sankey-chart-shell--legend-right]=\"legendPosition === 'right'\"\n [class.sankey-chart-shell--legend-bottom]=\"legendPosition === 'bottom'\"\n [class.sankey-chart-shell--with-toggles]=\"showNodeToggles\"\n>\n @if (showNodeToggles && sourceToggleItems.length) {\n <div class=\"sankey-node-toggles\" aria-label=\"Sankey source visibility\">\n @for (item of sourceToggleItems; track item.name) {\n <label class=\"sankey-node-toggle\">\n <input\n type=\"checkbox\"\n [checked]=\"!item.hidden\"\n (change)=\"toggleSourceNode(item.name, $any($event.target).checked)\"\n />\n <span>{{ item.name }}</span>\n </label>\n }\n </div>\n }\n\n @if (showLegend && legendPosition !== 'bottom' && legendPosition !== 'right') {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (showLegend && (legendPosition === 'bottom' || legendPosition === 'right')) {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n", styles: [".sankey-chart-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;gap:8px}.sankey-chart-shell--legend-left,.sankey-chart-shell--legend-right{flex-direction:row}.sankey-chart-shell--legend-bottom{flex-direction:column}.chart-container{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.sankey-chart-shell__legend{flex:0 0 auto}.sankey-chart-shell--legend-left .sankey-chart-shell__legend,.sankey-chart-shell--legend-right .sankey-chart-shell__legend{max-width:min(320px,40%)}.sankey-node-toggles{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.sankey-node-toggle{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid #d7d9dd;border-radius:6px;box-sizing:border-box;background:#fff;color:#252a31;font-family:inherit;font-size:12px;line-height:1;cursor:pointer}.sankey-node-toggle input{width:14px;height:14px;margin:0}\n"] }]
|
|
4654
|
+
args: [{ selector: 'lib-sankey-chart', imports: [CommonModule, NgxEchartsDirective, ChartLegendComponent, RightClickCard$1], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sankey-chart-shell\"\n [class.sankey-chart-shell--legend-left]=\"legendPosition === 'left'\"\n [class.sankey-chart-shell--legend-right]=\"legendPosition === 'right'\"\n [class.sankey-chart-shell--legend-bottom]=\"legendPosition === 'bottom'\"\n [class.sankey-chart-shell--with-toggles]=\"showNodeToggles\"\n>\n @if (showNodeToggles && sourceToggleItems.length) {\n <div class=\"sankey-node-toggles\" aria-label=\"Sankey source visibility\">\n @for (item of sourceToggleItems; track item.name) {\n <label class=\"sankey-node-toggle\">\n <input\n type=\"checkbox\"\n [checked]=\"!item.hidden\"\n (change)=\"toggleSourceNode(item.name, $any($event.target).checked)\"\n />\n <span>{{ item.name }}</span>\n </label>\n }\n </div>\n }\n\n @if (showLegend && legendPosition !== 'bottom' && legendPosition !== 'right') {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n ></div>\n\n @if (showLegend && (legendPosition === 'bottom' || legendPosition === 'right')) {\n <lib-chart-legend\n class=\"sankey-chart-shell__legend\"\n [chart]=\"chartInstance\"\n [series]=\"legendSeries\"\n [colors]=\"config.colors || []\"\n [config]=\"legendConfig\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n</div>\n@if (openCard) {\n <lib-right-click-card\n [cardOptions]=\"contextMenuOptions\"\n (contextMenuClick)=\"onMenuClick($event)\"\n [cardPosition]=\"cardPosition\"\n ></lib-right-click-card>\n}\n", styles: [".sankey-chart-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;gap:8px}.sankey-chart-shell--legend-left,.sankey-chart-shell--legend-right{flex-direction:row}.sankey-chart-shell--legend-bottom{flex-direction:column}.chart-container{flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.sankey-chart-shell__legend{flex:0 0 auto}.sankey-chart-shell--legend-left .sankey-chart-shell__legend,.sankey-chart-shell--legend-right .sankey-chart-shell__legend{max-width:min(320px,40%)}.sankey-node-toggles{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.sankey-node-toggle{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid #d7d9dd;border-radius:6px;box-sizing:border-box;background:#fff;color:#252a31;font-family:inherit;font-size:12px;line-height:1;cursor:pointer}.sankey-node-toggle input{width:14px;height:14px;margin:0}\n"] }]
|
|
4581
4655
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { config: [{
|
|
4582
4656
|
type: Input
|
|
4583
4657
|
}], theme: [{
|
|
4584
4658
|
type: Input
|
|
4585
4659
|
}], events: [{
|
|
4586
4660
|
type: Input
|
|
4661
|
+
}], contextMenuOptions: [{
|
|
4662
|
+
type: Input
|
|
4587
4663
|
}], chartEvent: [{
|
|
4588
4664
|
type: Output
|
|
4589
4665
|
}], legendEvent: [{
|
|
4590
4666
|
type: Output
|
|
4667
|
+
}], contextMenuClick: [{
|
|
4668
|
+
type: Output
|
|
4669
|
+
}], closeCard: [{
|
|
4670
|
+
type: HostListener,
|
|
4671
|
+
args: ['document:click']
|
|
4591
4672
|
}] } });
|
|
4592
4673
|
|
|
4593
4674
|
echarts.use([
|