cats-charts 0.0.89 → 0.0.90
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 +107 -24
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +28 -5
- package/package.json +1 -1
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -7,7 +7,6 @@ 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 { ChartLegendComponent as ChartLegendComponent$1 } from 'charts-lib';
|
|
11
10
|
|
|
12
11
|
class RightClickCard {
|
|
13
12
|
cardPosition;
|
|
@@ -1086,7 +1085,7 @@ class Charts {
|
|
|
1086
1085
|
font-size: 12px;
|
|
1087
1086
|
color: #434A51;
|
|
1088
1087
|
">
|
|
1089
|
-
${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : this.
|
|
1088
|
+
${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : this.formatTooltipValue(value, config.tooltipCompactValue)}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
|
|
1090
1089
|
</span>
|
|
1091
1090
|
</div>
|
|
1092
1091
|
${extraTooltipDataTemplate}
|
|
@@ -1136,7 +1135,7 @@ class Charts {
|
|
|
1136
1135
|
display:inline-block;
|
|
1137
1136
|
"></span>
|
|
1138
1137
|
|
|
1139
|
-
<span>${name}: <b style="color:#111;font-weight:600;">${this.
|
|
1138
|
+
<span>${name}: <b style="color:#111;font-weight:600;">${this.formatTooltipValue(value, config?.tooltipCompactValue)}</b></span>
|
|
1140
1139
|
</div>
|
|
1141
1140
|
`;
|
|
1142
1141
|
});
|
|
@@ -1165,13 +1164,43 @@ class Charts {
|
|
|
1165
1164
|
color:#434A51;
|
|
1166
1165
|
padding-top: 0.5rem;
|
|
1167
1166
|
">
|
|
1168
|
-
Total: <b style="color:#111;font-weight:600;">${this.
|
|
1167
|
+
Total: <b style="color:#111;font-weight:600;">${this.formatTooltipValue(total, config?.tooltipCompactValue)}</b>
|
|
1169
1168
|
${extraTooltipDataTemplate}
|
|
1170
1169
|
</div>
|
|
1171
1170
|
|
|
1172
1171
|
</div>
|
|
1173
1172
|
`;
|
|
1174
1173
|
}
|
|
1174
|
+
compactValueFormat(value) {
|
|
1175
|
+
if (!Number.isFinite(value))
|
|
1176
|
+
return String(value);
|
|
1177
|
+
if (Object.is(value, -0) || value === 0)
|
|
1178
|
+
return '0';
|
|
1179
|
+
const units = [
|
|
1180
|
+
{ divisor: 1_000_000_000_000_000, suffix: 'Q' },
|
|
1181
|
+
{ divisor: 1_000_000_000_000, suffix: 'T' },
|
|
1182
|
+
{ divisor: 1_000_000_000, suffix: 'B' },
|
|
1183
|
+
{ divisor: 1_000_000, suffix: 'M' },
|
|
1184
|
+
{ divisor: 1_000, suffix: 'K' },
|
|
1185
|
+
];
|
|
1186
|
+
const absoluteValue = Math.abs(value);
|
|
1187
|
+
let unitIndex = units.findIndex(({ divisor }) => absoluteValue >= divisor);
|
|
1188
|
+
// Keep values below one thousand unchanged, including decimal values.
|
|
1189
|
+
if (unitIndex === -1)
|
|
1190
|
+
return String(value);
|
|
1191
|
+
let scaled = Math.round((value / units[unitIndex].divisor) * 10) / 10;
|
|
1192
|
+
// For example, 999_950 should display as 1M rather than 1000K after
|
|
1193
|
+
// rounding to one decimal place.
|
|
1194
|
+
if (Math.abs(scaled) >= 1_000 && unitIndex > 0) {
|
|
1195
|
+
unitIndex -= 1;
|
|
1196
|
+
scaled = Math.round((value / units[unitIndex].divisor) * 10) / 10;
|
|
1197
|
+
}
|
|
1198
|
+
return `${scaled}${units[unitIndex].suffix}`;
|
|
1199
|
+
}
|
|
1200
|
+
formatTooltipValue(value, compact = false) {
|
|
1201
|
+
const roundedValue = this.toMaxDecimals(value);
|
|
1202
|
+
return compact ? this.compactValueFormat(roundedValue) : roundedValue;
|
|
1203
|
+
}
|
|
1175
1204
|
formatGanttDate(value, config) {
|
|
1176
1205
|
const date = value instanceof Date ? value : new Date(value);
|
|
1177
1206
|
if (Number.isNaN(date.getTime()))
|
|
@@ -1226,7 +1255,7 @@ class Charts {
|
|
|
1226
1255
|
extraTooltipDataTemplate += `<div style="
|
|
1227
1256
|
color:#434A51;
|
|
1228
1257
|
">
|
|
1229
|
-
${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
|
|
1258
|
+
${data[0]}: <b style="color:#111;font-weight:600;">${typeof data[1] === 'number' ? this.formatTooltipValue(data[1], config?.tooltipCompactValue) : data[1]}</b>
|
|
1230
1259
|
</div>`;
|
|
1231
1260
|
});
|
|
1232
1261
|
}
|
|
@@ -1250,6 +1279,8 @@ class Charts {
|
|
|
1250
1279
|
<div style="padding: 0.5rem 1rem; display: flex; flex-direction: column; gap: 6px">
|
|
1251
1280
|
Start: ${this.formatGanttDate(data.start, config)}<br/>
|
|
1252
1281
|
End: ${this.formatGanttDate(data.end, config)}
|
|
1282
|
+
${data.duration ? `<br/>Duration: ${typeof data.duration === 'number' ? this.formatTooltipValue(data.duration, config?.tooltipCompactValue) : data.duration}` : ''}
|
|
1283
|
+
|
|
1253
1284
|
<div>
|
|
1254
1285
|
${extraTooltipDataTemplate
|
|
1255
1286
|
? `<div style="
|
|
@@ -1429,7 +1460,12 @@ class Charts {
|
|
|
1429
1460
|
const tooltipRows = tooltip && typeof tooltip === 'object'
|
|
1430
1461
|
? Object.entries(tooltip)
|
|
1431
1462
|
.map(([key, item]) => {
|
|
1432
|
-
const
|
|
1463
|
+
const displayValue = typeof item === 'number'
|
|
1464
|
+
? this.formatTooltipValue(item, config.tooltipCompactValue)
|
|
1465
|
+
: item;
|
|
1466
|
+
const value = Array.isArray(displayValue)
|
|
1467
|
+
? displayValue.map(escape).join(', ')
|
|
1468
|
+
: escape(displayValue);
|
|
1433
1469
|
return `<div style="font-size:12px;font-weight:600">${escape(formatKey(key))}: <span style="font-size:12px;font-weight:400">${value}</span></div>`;
|
|
1434
1470
|
})
|
|
1435
1471
|
.join('')
|
|
@@ -1445,7 +1481,7 @@ class Charts {
|
|
|
1445
1481
|
/>
|
|
1446
1482
|
<span>${escape(target)}</span>
|
|
1447
1483
|
</div>
|
|
1448
|
-
<div style="font-size:12px;font-weight:600"">${formatKey(config?.activeMetric) || 'Value'}: <span style="font-size:12px;font-weight:400">${escape(value)}</span></div>
|
|
1484
|
+
<div style="font-size:12px;font-weight:600"">${formatKey(config?.activeMetric ?? '') || 'Value'}: <span style="font-size:12px;font-weight:400">${escape(typeof value === 'number' ? this.formatTooltipValue(value, config.tooltipCompactValue) : value)}</span></div>
|
|
1449
1485
|
${tooltipRows}
|
|
1450
1486
|
</div>
|
|
1451
1487
|
`;
|
|
@@ -1457,7 +1493,7 @@ class Charts {
|
|
|
1457
1493
|
border-radius: 8px;
|
|
1458
1494
|
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
|
|
1459
1495
|
">
|
|
1460
|
-
${params.name}: <b>${params.value}</b>
|
|
1496
|
+
${params.name}: <b>${typeof params.value === 'number' ? this.formatTooltipValue(params.value, config.tooltipCompactValue) : params.value}</b>
|
|
1461
1497
|
</div>
|
|
1462
1498
|
`;
|
|
1463
1499
|
}
|
|
@@ -4481,6 +4517,7 @@ class SankeyChart {
|
|
|
4481
4517
|
if (!this.chartInstance)
|
|
4482
4518
|
return;
|
|
4483
4519
|
this.chartInstance.off();
|
|
4520
|
+
this.bindSankeyDragBounds();
|
|
4484
4521
|
this.events.forEach((eventName) => {
|
|
4485
4522
|
this.chartInstance.on(eventName, (params) => {
|
|
4486
4523
|
if (eventName === 'contextmenu' && params.event?.event) {
|
|
@@ -4493,6 +4530,40 @@ class SankeyChart {
|
|
|
4493
4530
|
});
|
|
4494
4531
|
});
|
|
4495
4532
|
}
|
|
4533
|
+
/**
|
|
4534
|
+
* ECharts' Sankey drag action stores the node position without applying the
|
|
4535
|
+
* series bounds. Clamp it after every drag so the complete node remains in
|
|
4536
|
+
* the drawable Sankey area (including custom series left/right/top/bottom).
|
|
4537
|
+
*/
|
|
4538
|
+
bindSankeyDragBounds() {
|
|
4539
|
+
this.chartInstance.on('dragnode', (params) => {
|
|
4540
|
+
const chartModel = this.chartInstance.getModel?.();
|
|
4541
|
+
const series = chartModel?.getSeriesByIndex(params.seriesIndex ?? 0);
|
|
4542
|
+
const node = series?.getData?.().getItemGraphicEl(params.dataIndex);
|
|
4543
|
+
const bounds = series?.layoutInfo;
|
|
4544
|
+
if (!node || !bounds)
|
|
4545
|
+
return;
|
|
4546
|
+
// Node shapes are local to ECharts' Sankey group. `layoutInfo.x/y` are
|
|
4547
|
+
// applied to that parent group, so the node itself must be constrained
|
|
4548
|
+
// against (0, 0), not against the page-relative layoutInfo coordinates.
|
|
4549
|
+
const maxX = Math.max(0, bounds.width - node.shape.width);
|
|
4550
|
+
const maxY = Math.max(0, bounds.height - node.shape.height);
|
|
4551
|
+
const x = Math.min(Math.max(node.shape.x, 0), maxX);
|
|
4552
|
+
const y = Math.min(Math.max(node.shape.y, 0), maxY);
|
|
4553
|
+
if (x === node.shape.x && y === node.shape.y)
|
|
4554
|
+
return;
|
|
4555
|
+
this.chartInstance.dispatchAction({
|
|
4556
|
+
type: 'dragNode',
|
|
4557
|
+
seriesId: series.id,
|
|
4558
|
+
dataIndex: params.dataIndex,
|
|
4559
|
+
// ECharts normalizes Sankey node positions against the plot area, not
|
|
4560
|
+
// the whole canvas. Using the canvas size here causes an offset when
|
|
4561
|
+
// the series has left/right/top/bottom margins.
|
|
4562
|
+
localX: x / bounds.width,
|
|
4563
|
+
localY: y / bounds.height,
|
|
4564
|
+
});
|
|
4565
|
+
});
|
|
4566
|
+
}
|
|
4496
4567
|
/* ------------------ DESTROY ------------------ */
|
|
4497
4568
|
ngOnDestroy() {
|
|
4498
4569
|
this.resizeObserver?.disconnect();
|
|
@@ -5219,6 +5290,7 @@ echarts.use([GaugeChart$1, GraphicComponent, TooltipComponent, TitleComponent, C
|
|
|
5219
5290
|
const DEFAULT_GAUGE_CENTER = ['50%', '84%'];
|
|
5220
5291
|
const DEFAULT_GAUGE_RADIUS = '140%';
|
|
5221
5292
|
class GaugeChart {
|
|
5293
|
+
chartService;
|
|
5222
5294
|
config = {};
|
|
5223
5295
|
theme;
|
|
5224
5296
|
events = [];
|
|
@@ -5227,6 +5299,9 @@ class GaugeChart {
|
|
|
5227
5299
|
chartInstance;
|
|
5228
5300
|
chartResizeObserver;
|
|
5229
5301
|
previousReactiveSignature = '';
|
|
5302
|
+
constructor(chartService) {
|
|
5303
|
+
this.chartService = chartService;
|
|
5304
|
+
}
|
|
5230
5305
|
ngOnChanges(changes) {
|
|
5231
5306
|
if (changes['theme'] && this.chartInstance) {
|
|
5232
5307
|
this.chartInstance.dispose();
|
|
@@ -5885,10 +5960,15 @@ class GaugeChart {
|
|
|
5885
5960
|
}
|
|
5886
5961
|
defaultTooltipFormatter(value) {
|
|
5887
5962
|
const rows = Object.entries(this.config.tooltipFields ?? {})
|
|
5888
|
-
.map(([key, fieldValue]) => `${key}: ${fieldValue
|
|
5963
|
+
.map(([key, fieldValue]) => `${key}: ${typeof fieldValue === 'number' && this.config.tooltipCompactValue
|
|
5964
|
+
? this.chartService.compactValueFormat(fieldValue)
|
|
5965
|
+
: (fieldValue ?? '-')}`)
|
|
5889
5966
|
.join('<br/>');
|
|
5890
|
-
const
|
|
5891
|
-
|
|
5967
|
+
const formattedValue = this.config.tooltipCompactValue
|
|
5968
|
+
? this.chartService.compactValueFormat(Number(this.formatNumber(value, false, this.config.style?.decimalPrecision ?? 1)))
|
|
5969
|
+
: this.formatNumber(value, false, this.config.style?.decimalPrecision ?? 1);
|
|
5970
|
+
const tooltipValueRow = `${this.config.name ?? 'Value'}: ${formattedValue}`;
|
|
5971
|
+
return rows ? `${tooltipValueRow}<br/>${rows}` : tooltipValueRow;
|
|
5892
5972
|
}
|
|
5893
5973
|
resolveActiveColor(value, min, max) {
|
|
5894
5974
|
const conditional = this.config.style?.conditionalFormatting;
|
|
@@ -6133,13 +6213,13 @@ class GaugeChart {
|
|
|
6133
6213
|
this.chartInstance.dispose();
|
|
6134
6214
|
}
|
|
6135
6215
|
}
|
|
6136
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GaugeChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6216
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GaugeChart, deps: [{ token: Charts }], target: i0.ɵɵFactoryTarget.Component });
|
|
6137
6217
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GaugeChart, isStandalone: true, selector: "lib-gauge-chart", inputs: { config: "config", theme: "theme", events: "events" }, outputs: { chartEvent: "chartEvent" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n></div>\n", styles: [".chart-container{width:100%;height:100%}\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"] }] });
|
|
6138
6218
|
}
|
|
6139
6219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GaugeChart, decorators: [{
|
|
6140
6220
|
type: Component,
|
|
6141
6221
|
args: [{ selector: 'lib-gauge-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], template: "<div\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n class=\"chart-container\"\n (chartInit)=\"onChartInit($event)\"\n></div>\n", styles: [".chart-container{width:100%;height:100%}\n"] }]
|
|
6142
|
-
}], propDecorators: { config: [{
|
|
6222
|
+
}], ctorParameters: () => [{ type: Charts }], propDecorators: { config: [{
|
|
6143
6223
|
type: Input
|
|
6144
6224
|
}], theme: [{
|
|
6145
6225
|
type: Input
|
|
@@ -6770,12 +6850,12 @@ class GanttChart {
|
|
|
6770
6850
|
if (params.componentType === 'yAxis' &&
|
|
6771
6851
|
params.type === 'click' &&
|
|
6772
6852
|
params.targetType === 'axisLabel') {
|
|
6773
|
-
const
|
|
6774
|
-
const group = (this.config?.groups || []).find((group) => group.name ===
|
|
6853
|
+
const groupName = params.value;
|
|
6854
|
+
const group = (this.config?.groups || []).find((group) => group.name === groupName);
|
|
6775
6855
|
if (!group) {
|
|
6776
6856
|
return;
|
|
6777
6857
|
}
|
|
6778
|
-
group.expanded = !group.expanded;
|
|
6858
|
+
group.expanded = !(group.expanded ?? true);
|
|
6779
6859
|
this.updateChart();
|
|
6780
6860
|
}
|
|
6781
6861
|
else {
|
|
@@ -6844,7 +6924,7 @@ class GanttChart {
|
|
|
6844
6924
|
const deltaX = Number(nativeEvent?.deltaX ?? 0);
|
|
6845
6925
|
const deltaY = Number(nativeEvent?.deltaY ?? -(event?.wheelDelta ?? 0));
|
|
6846
6926
|
const isHorizontalGesture = !!nativeEvent?.shiftKey || Math.abs(deltaX) > Math.abs(deltaY);
|
|
6847
|
-
const delta = isHorizontalGesture ?
|
|
6927
|
+
const delta = isHorizontalGesture ? deltaX || deltaY : deltaY;
|
|
6848
6928
|
if (!Number.isFinite(delta) || delta === 0)
|
|
6849
6929
|
return;
|
|
6850
6930
|
const moved = isHorizontalGesture
|
|
@@ -7015,16 +7095,15 @@ class GanttChart {
|
|
|
7015
7095
|
for (const group of groups) {
|
|
7016
7096
|
rows.push({
|
|
7017
7097
|
type: 'group',
|
|
7018
|
-
id: group.id,
|
|
7019
7098
|
name: group.name,
|
|
7020
|
-
expanded: group.expanded,
|
|
7099
|
+
expanded: group.expanded ?? true,
|
|
7021
7100
|
});
|
|
7022
|
-
if (group.expanded) {
|
|
7101
|
+
if (group.expanded ?? true) {
|
|
7023
7102
|
for (const category of this.sortCategories(group.categories ?? [])) {
|
|
7024
7103
|
rows.push({
|
|
7025
7104
|
type: 'category',
|
|
7026
7105
|
name: category,
|
|
7027
|
-
|
|
7106
|
+
groupName: group.name,
|
|
7028
7107
|
});
|
|
7029
7108
|
}
|
|
7030
7109
|
}
|
|
@@ -7063,7 +7142,11 @@ class GanttChart {
|
|
|
7063
7142
|
else if (left.value === undefined || right.value === undefined) {
|
|
7064
7143
|
// Rows without a numeric value remain after valued rows and retain
|
|
7065
7144
|
// their input order relative to each other.
|
|
7066
|
-
return left.value === right.value
|
|
7145
|
+
return left.value === right.value
|
|
7146
|
+
? left.index - right.index
|
|
7147
|
+
: left.value === undefined
|
|
7148
|
+
? 1
|
|
7149
|
+
: -1;
|
|
7067
7150
|
}
|
|
7068
7151
|
else {
|
|
7069
7152
|
comparison = left.value - right.value;
|
|
@@ -7184,11 +7267,11 @@ class GanttChart {
|
|
|
7184
7267
|
};
|
|
7185
7268
|
}
|
|
7186
7269
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GanttChart, isStandalone: true, selector: "lib-gantt-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()", "window:resize": "refreshAxisNameSpace()" } }, providers: [provideEchartsCore({ echarts })], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"gantt-chart-shell\"\n [class.gantt-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.gantt-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.gantt-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\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: [".gantt-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:row}.gantt-chart-shell--legend-bottom{flex-direction:column}.gantt-chart-shell__legend{flex:0 0 auto;min-width:0}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{height:100%;max-width:min(var(--gantt-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){.gantt-chart-shell,.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:column}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-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
|
|
7270
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GanttChart, isStandalone: true, selector: "lib-gantt-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()", "window:resize": "refreshAxisNameSpace()" } }, providers: [provideEchartsCore({ echarts })], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"gantt-chart-shell\"\n [class.gantt-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.gantt-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.gantt-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\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: [".gantt-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:row}.gantt-chart-shell--legend-bottom{flex-direction:column}.gantt-chart-shell__legend{flex:0 0 auto;min-width:0}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{height:100%;max-width:min(var(--gantt-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){.gantt-chart-shell,.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:column}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-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 });
|
|
7188
7271
|
}
|
|
7189
7272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, decorators: [{
|
|
7190
7273
|
type: Component,
|
|
7191
|
-
args: [{ selector: 'lib-gantt-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent
|
|
7274
|
+
args: [{ selector: 'lib-gantt-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"gantt-chart-shell\"\n [class.gantt-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n [class.gantt-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n [class.gantt-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n @if (\n !config.hideLegend &&\n config.customLegend?.position !== 'bottom' &&\n config.customLegend?.position !== 'right'\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\n (legendEvent)=\"onLegendEvent($event)\"\n ></lib-chart-legend>\n }\n\n <div\n #chartContainer\n echarts\n [options]=\"chartOption\"\n [theme]=\"theme\"\n (chartInit)=\"onChartInit($event)\"\n class=\"chart-container\"\n ></div>\n\n @if (\n !config.hideLegend &&\n (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n ) {\n <lib-chart-legend\n class=\"gantt-chart-shell__legend\"\n [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n [chart]=\"chartInstance\"\n [series]=\"config.series\"\n [colors]=\"config.colors || deafultColors\"\n [config]=\"config.customLegend || {}\"\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: [".gantt-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:row}.gantt-chart-shell--legend-bottom{flex-direction:column}.gantt-chart-shell__legend{flex:0 0 auto;min-width:0}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{height:100%;max-width:min(var(--gantt-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){.gantt-chart-shell,.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:column}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"] }]
|
|
7192
7275
|
}], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
7193
7276
|
type: Input
|
|
7194
7277
|
}], theme: [{
|