@c8y/ngx-components 1023.14.102 → 1023.14.103
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/echart/index.d.ts +5 -2
- package/echart/index.d.ts.map +1 -1
- package/fesm2022/c8y-ngx-components-echart.mjs +96 -42
- package/fesm2022/c8y-ngx-components-echart.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs +55 -51
- package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs.map +1 -1
- package/package.json +1 -1
- package/widgets/implementations/datapoints-graph/index.d.ts +6 -3
- package/widgets/implementations/datapoints-graph/index.d.ts.map +1 -1
|
@@ -307,7 +307,6 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
307
307
|
this.isLoading$ = new BehaviorSubject(false);
|
|
308
308
|
this.isSliderBeingDragged$ = new BehaviorSubject(false);
|
|
309
309
|
this.chartViewContext = CHART_VIEW_CONTEXT.WIDGET_VIEW;
|
|
310
|
-
this.globalContextState = null;
|
|
311
310
|
/** Combined number of datapoints, alarms, and events */
|
|
312
311
|
this.totalLegendItems = 0;
|
|
313
312
|
/** Selectable items for the datapoints, alarms, events dropdown */
|
|
@@ -357,6 +356,7 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
357
356
|
?.widgetControls || {};
|
|
358
357
|
}
|
|
359
358
|
onGlobalContextChange(event) {
|
|
359
|
+
this.invalidateHiddenItemsCache();
|
|
360
360
|
const { context, diff } = event;
|
|
361
361
|
const { dateTimeContext } = context;
|
|
362
362
|
const { dateFrom, dateTo, interval } = dateTimeContext;
|
|
@@ -369,12 +369,8 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
369
369
|
...structuredClone(context),
|
|
370
370
|
dateFrom: new Date(dateFrom),
|
|
371
371
|
dateTo: new Date(dateTo),
|
|
372
|
-
interval
|
|
373
|
-
|
|
374
|
-
this.globalContextState = {
|
|
375
|
-
...this.displayConfig,
|
|
376
|
-
realtime: isRealtimeEnabled,
|
|
377
|
-
dateTimeContext: { ...this.displayConfig.dateTimeContext }
|
|
372
|
+
interval,
|
|
373
|
+
realtime: isRealtimeEnabled
|
|
378
374
|
};
|
|
379
375
|
if (this.isSliderBeingDragged$.value === true) {
|
|
380
376
|
this.isSliderBeingDragged$.next(false);
|
|
@@ -391,13 +387,10 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
391
387
|
dateTo: new Date(dateTo),
|
|
392
388
|
interval
|
|
393
389
|
});
|
|
394
|
-
// Update global context state when realtime state changes
|
|
395
|
-
this.globalContextState = merge({}, this.globalContextState, this.displayConfig);
|
|
396
390
|
this.displayConfig = {
|
|
397
391
|
...this.displayConfig,
|
|
398
392
|
realtime: isRealtimeEnabled
|
|
399
393
|
};
|
|
400
|
-
this.globalContextState = { ...this.globalContextState, realtime: isRealtimeEnabled };
|
|
401
394
|
}
|
|
402
395
|
// Realtime is a special case, we need to block "automatic" emissions from the global context
|
|
403
396
|
// GC in auto mode emits every 5 seconds. We only want to react to user changes.
|
|
@@ -412,7 +405,6 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
412
405
|
dateTo: new Date(dateTo),
|
|
413
406
|
interval
|
|
414
407
|
});
|
|
415
|
-
this.globalContextState = merge({}, this.globalContextState, this.displayConfig);
|
|
416
408
|
return;
|
|
417
409
|
}
|
|
418
410
|
this.displayConfig = {
|
|
@@ -422,10 +414,6 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
422
414
|
dateTo: new Date(dateTo),
|
|
423
415
|
interval
|
|
424
416
|
};
|
|
425
|
-
this.globalContextState = {
|
|
426
|
-
...this.displayConfig,
|
|
427
|
-
dateTimeContext: { ...this.displayConfig.dateTimeContext }
|
|
428
|
-
};
|
|
429
417
|
if (context.source === GLOBAL_CONTEXT_SOURCE.DASHBOARD &&
|
|
430
418
|
this.displayConfig.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
|
|
431
419
|
this.widgetTimeContextDateRangeService.updateInitialTimeRange(null);
|
|
@@ -438,7 +426,10 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
438
426
|
updateDashboardTimeContext(timeProps) {
|
|
439
427
|
const chartOptions = this.chartComponent?.echartsInstance?.getOption();
|
|
440
428
|
const isEndZoomChanged = chartOptions?.dataZoom[0]?.end !== 100;
|
|
441
|
-
if
|
|
429
|
+
// Check if widget is linked to global context
|
|
430
|
+
const linkStatus = this.wrapper?.globalContextInlineComponent?.controlLinkStatus();
|
|
431
|
+
const isLinked = !linkStatus || Object.values(linkStatus).every(v => v !== false);
|
|
432
|
+
if (this.displayConfig.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD && isLinked) {
|
|
442
433
|
const dateTimeContext = isEndZoomChanged
|
|
443
434
|
? {
|
|
444
435
|
dateFrom: new Date(timeProps.dateFrom).toISOString(),
|
|
@@ -476,10 +467,6 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
476
467
|
interval: timeProps.interval,
|
|
477
468
|
isAutoRefreshEnabled: false
|
|
478
469
|
};
|
|
479
|
-
this.globalContextState = {
|
|
480
|
-
...this.displayConfig,
|
|
481
|
-
dateTimeContext: { ...dateTimeContext }
|
|
482
|
-
};
|
|
483
470
|
// Trigger wrapper to update its internal state
|
|
484
471
|
this.wrapper.pauseAutoRefresh();
|
|
485
472
|
this.wrapper.updateDateTimeContext(dateTimeContext);
|
|
@@ -546,12 +533,17 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
546
533
|
datapoint.__active = !datapoint.__active;
|
|
547
534
|
this.hasAtLeastOneDatapointActive = true;
|
|
548
535
|
this.updateSelectedItems();
|
|
549
|
-
|
|
536
|
+
const getDatapointId = (dp) => `${dp.__target?.id}${dp.fragment}${dp.series}`;
|
|
537
|
+
const isLoaded = this.loadedDatapoints.find(dp => getDatapointId(dp) === getDatapointId(datapoint));
|
|
538
|
+
if (datapoint.__active && !isLoaded) {
|
|
539
|
+
// Datapoint being shown but not loaded (or data is stale) - trigger full reload
|
|
550
540
|
this.loadedDatapoints.push(datapoint);
|
|
551
541
|
this.displayConfig = { ...this.displayConfig };
|
|
552
|
-
return;
|
|
553
542
|
}
|
|
554
|
-
|
|
543
|
+
else {
|
|
544
|
+
// Datapoint already loaded with fresh data OR being hidden - just toggle visibility in echarts
|
|
545
|
+
this.chartComponent.toggleDatapointSeriesVisibility(datapoint);
|
|
546
|
+
}
|
|
555
547
|
}
|
|
556
548
|
handleDatapointOutOfSync(dpOutOfSync) {
|
|
557
549
|
const key = (dp) => dp.__target?.id + dp.fragment + dp.series;
|
|
@@ -571,36 +563,40 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
571
563
|
this.chartComponent.onChartClick(params);
|
|
572
564
|
}
|
|
573
565
|
toggleAlarmEventType(alarmOrEvent) {
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
566
|
+
const type = alarmOrEvent.filters.type;
|
|
567
|
+
const deviceId = alarmOrEvent.__target?.id;
|
|
568
|
+
const newHiddenState = !alarmOrEvent.__hidden;
|
|
569
|
+
const isBeingShown = !newHiddenState;
|
|
570
|
+
// Match by both type AND device to distinguish alarms from different devices
|
|
571
|
+
const isSameAlarmConfig = (ae) => ae.filters.type === type && ae.__target?.id === deviceId;
|
|
572
|
+
// Update __hidden in all locations
|
|
573
|
+
alarmOrEvent.__hidden = newHiddenState;
|
|
574
|
+
this.displayConfig.alarmsEventsConfigs?.forEach(ae => {
|
|
575
|
+
if (isSameAlarmConfig(ae)) {
|
|
576
|
+
ae.__hidden = newHiddenState;
|
|
577
|
+
}
|
|
578
|
+
});
|
|
579
|
+
this.alarms.forEach(alarm => {
|
|
580
|
+
if (isSameAlarmConfig(alarm)) {
|
|
581
|
+
alarm.__hidden = newHiddenState;
|
|
582
|
+
}
|
|
583
|
+
});
|
|
584
|
+
this.events.forEach(event => {
|
|
585
|
+
if (isSameAlarmConfig(event)) {
|
|
586
|
+
event.__hidden = newHiddenState;
|
|
587
|
+
}
|
|
588
|
+
});
|
|
590
589
|
this.updateSelectedItems();
|
|
591
|
-
|
|
590
|
+
const isLoaded = this.loadedAlarmsOrEvents.find(aOrE => isSameAlarmConfig(aOrE));
|
|
591
|
+
if (isBeingShown && !isLoaded) {
|
|
592
|
+
// Showing but not loaded - trigger pipeline to fetch data
|
|
592
593
|
this.loadedAlarmsOrEvents.push(alarmOrEvent);
|
|
593
|
-
this.displayConfig.alarmsEventsConfigs.map(ae => {
|
|
594
|
-
if (ae.filters.type === alarmOrEvent.filters.type) {
|
|
595
|
-
ae.__active = !ae.__active;
|
|
596
|
-
ae.__hidden = !alarmOrEvent.__hidden;
|
|
597
|
-
}
|
|
598
|
-
});
|
|
599
|
-
this.updateSelectedItems();
|
|
600
594
|
this.displayConfig = { ...this.displayConfig };
|
|
601
|
-
return;
|
|
602
595
|
}
|
|
603
|
-
|
|
596
|
+
else {
|
|
597
|
+
// Hiding OR showing already-loaded - just toggle visibility in echarts
|
|
598
|
+
this.chartComponent.toggleAlarmEventSeriesVisibility(alarmOrEvent);
|
|
599
|
+
}
|
|
604
600
|
}
|
|
605
601
|
updateAlarmsAndEvents(alarmsEventsConfigs) {
|
|
606
602
|
this.alarms = alarmsEventsConfigs.filter(alarm => alarm.timelineType === 'ALARM');
|
|
@@ -659,8 +655,16 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
659
655
|
dpOrAlarmOrEvent.__target = { name, id };
|
|
660
656
|
}
|
|
661
657
|
}
|
|
658
|
+
/**
|
|
659
|
+
* Remove hidden items from loaded cache so they will be reloaded when toggled visible.
|
|
660
|
+
* Called when context changes (time range, aggregation, etc.) to mark hidden items data as stale.
|
|
661
|
+
*/
|
|
662
|
+
invalidateHiddenItemsCache() {
|
|
663
|
+
this.loadedDatapoints = this.loadedDatapoints.filter(dp => dp.__active);
|
|
664
|
+
this.loadedAlarmsOrEvents = this.loadedAlarmsOrEvents.filter(aOrE => aOrE.__active && !aOrE.__hidden);
|
|
665
|
+
}
|
|
662
666
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsGraphWidgetViewComponent, deps: [{ token: i1$1.TranslateService }, { token: i1.ContextDashboardComponent, optional: true }, { token: i2.DynamicComponentService }, { token: i4$1.WidgetConfigMigrationService }, { token: i2.WidgetTimeContextDateRangeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
663
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], viewQueries: [{ propertyName: "wrapper", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }, { propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], ngImport: i0, template: "@if (widgetControls) {\n <c8y-global-context-widget-wrapper\n [widgetControls]=\"widgetControls\"\n [isLoading]=\"isLoading$ | async\"\n [config]=\"displayConfig\"\n [disableRefreshEmits]=\"true\"\n (globalContextChange)=\"onGlobalContextChange($event)\"\n ></c8y-global-context-widget-wrapper>\n}\n<div\n class=\"p-l-16 p-r-16\"\n style=\"min-height: 34px\"\n>\n <div class=\"d-flex gap-16 a-i-center\">\n @if (hasAtLeastOneAlarmActive) {\n <c8y-alarms-filter\n class=\"d-contents form-group-sm min-width-0\"\n (onFilterApplied)=\"filterSeverity($event)\"\n ></c8y-alarms-filter>\n }\n @if (displayConfig?.datapoints.length > 0) {\n <div class=\"d-flex a-i-center min-width-0\">\n @if (\n displayConfig.dataPointLegendDisplay === 'dropdown' ||\n (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n ) {\n <c8y-select\n class=\"min-width-0 c8y-select-v2--sm\"\n aria-label=\"Select datapoints, alarms or events\"\n [placeholder]=\"'Select datapoints, alarms or events' | translate\"\n [multi]=\"true\"\n [filterItems]=\"true\"\n [(ngModel)]=\"selectedItems\"\n (onSelect)=\"onItemSelected($event)\"\n (onDeselect)=\"onItemDeselected($event)\"\n >\n @for (item of selectableItems; track item.value) {\n <div\n class=\"d-flex a-i-center gap-4\"\n *c8ySelectItem=\"item.value; label: item.label\"\n >\n @if (\n !hasAtLeastOneDatapointActive &&\n item.value.type === 'DATAPOINT' &&\n item.value.original.__active\n ) {\n <i\n class=\"text-warning m-r-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n @if (item.value.type === 'DATAPOINT') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [style.background-color]=\"item.value.original.color\"\n ></span>\n }\n @if (item.value.type === 'ALARM') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [style.background-color]=\"item.value.original.color\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n }\n @if (item.value.type === 'EVENT') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n }\n <span class=\"text-truncate d-col\">\n <small class=\"text-truncate\">{{ item.value.original.label }}</small>\n <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n </span>\n </div>\n }\n <span\n class=\"tag tag--info chip\"\n title=\"{{ selectedItem.label }}\"\n *c8ySelectedItems=\"let selectedItem\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ selectedItem.label }}\"\n type=\"button\"\n (click)=\"\n $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n \"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n @if (isLastActiveDatapoint(selectedItem)) {\n <i\n class=\"text-warning a-s-start\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n @if (selectedItem.value.type === 'DATAPOINT') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [style.background-color]=\"selectedItem.value?.original.color || ''\"\n ></span>\n }\n @if (selectedItem.value?.type === 'ALARM') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [style.background-color]=\"selectedItem.value?.original.color || ''\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n }\n @if (selectedItem.value?.type === 'EVENT') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [ngStyle]=\"{\n 'background-color': selectedItem.value?.original.color || ''\n }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n }\n </span>\n </c8y-select>\n } @else {\n <div class=\"inner-scroll\">\n <div class=\"p-t-4 d-flex a-i-start gap-8\">\n @for (datapoint of displayConfig.datapoints; track datapoint) {\n @if (datapoint.retrievalError) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'Data point no longer exists.' | translate\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n } @else {\n <div\n class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n [ngClass]=\"{ active: datapoint.__active }\"\n >\n @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n <button\n class=\"c8y-datapoint-pill__btn\"\n title=\"{{\n (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n }} \"\n type=\"button\"\n data-cy=\"datapoint-toggle-visibility-btn\"\n (click)=\"toggleChart(datapoint)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n ></i>\n </button>\n <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n <i\n class=\"m-r-4 icon-14\"\n c8yIcon=\"circle\"\n [ngStyle]=\"{\n color: datapoint.color\n }\"\n ></i>\n <span\n class=\"text-truncate\"\n [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n >\n <span class=\"text-truncate text-bold\">\n {{ datapoint.label }}\n </span>\n <small class=\"text-muted text-10\">\n {{ datapoint.__target.name }}\n </small>\n </span>\n @if (datapointsOutOfSync.get(datapoint)) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"\n 'Measurements received for this data point may be out of sync.'\n | translate\n \"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n </div>\n </div>\n }\n }\n\n @for (alarm of alarms; track alarm) {\n <div\n class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n title=\"{{ alarm.filters.type }} \"\n >\n @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"\n 'Alarm of this type is currently active and outside of the selected time range'\n | translate\n \"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n <button\n class=\"c8y-alarm-pill__btn\"\n title=\"{{ alarm.filters.type }} \"\n type=\"button\"\n (click)=\"toggleAlarmEventType(alarm)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"\n alarm.__hidden || !alarm.__active\n ? 'eye-slash text-muted'\n : 'eye text-primary'\n \"\n ></i>\n </button>\n <button\n class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n (click)=\"toggleMarkedArea(alarm)\"\n [ngClass]=\"{\n active:\n !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n }\"\n >\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n [style.background-color]=\"alarm.color\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n <span\n class=\"text-truncate\"\n [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n >\n <span class=\"text-truncate text-bold\">\n {{ alarm.label || alarm.filters.type }}\n </span>\n <small class=\"text-muted text-10\">\n {{ alarm.__target.name }}\n </small>\n </span>\n </button>\n </div>\n }\n\n @for (event of events; track event) {\n <div\n class=\"c8y-event-pill pill--sm flex-no-shrink\"\n title=\"{{ event.filters.type }}\"\n >\n <button\n class=\"c8y-event-pill__btn\"\n title=\"{{ event.filters.type }} \"\n type=\"button\"\n (click)=\"toggleAlarmEventType(event)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"\n event.__hidden || !event.__active\n ? 'eye-slash text-muted'\n : 'eye text-primary'\n \"\n ></i>\n </button>\n <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n [ngStyle]=\"{ 'background-color': event.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n <span\n class=\"text-truncate text-bold\"\n [ngClass]=\"{ 'text-muted': event.__hidden }\"\n >\n <span class=\"text-truncate\">\n {{ event.label || event.filters.type }}\n </span>\n <small class=\"text-muted text-10\">\n {{ event.__target.name }}\n </small>\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n <button\n class=\"btn-help btn-help--sm m-r-8\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"legendHelpTemplate\"\n placement=\"left\"\n triggers=\"focus\"\n container=\"body\"\n [adaptivePosition]=\"true\"\n ></button>\n }\n </div>\n }\n <button\n class=\"btn btn-default btn-sm flex-no-shrink m-l-auto\"\n [attr.aria-label]=\"'Save as image' | translate\"\n tooltip=\"{{ 'Save as image' | translate }}\"\n container=\"body\"\n type=\"button\"\n (click)=\"chartComponent.saveAsImage()\"\n [adaptivePosition]=\"false\"\n >\n <i\n class=\"icon-14\"\n c8yIcon=\"image-file-checked\"\n ></i>\n </button>\n </div>\n</div>\n\n@if (globalContextState !== null) {\n <c8y-charts\n #chart\n [config]=\"globalContextState\"\n [alerts]=\"alerts\"\n [chartViewContext]=\"chartViewContext\"\n (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n (finishLoading)=\"this.isLoading$.next($event)\"\n (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: i2.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "directive", type: i2.SelectItemDirective, selector: "[c8ySelectItem]", inputs: ["c8ySelectItem", "c8ySelectItemLabel"] }, { kind: "directive", type: i2.SelectedItemsDirective, selector: "[c8ySelectedItems]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: i9.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
|
|
667
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], viewQueries: [{ propertyName: "wrapper", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }, { propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], ngImport: i0, template: "@if (widgetControls) {\n <c8y-global-context-widget-wrapper\n [widgetControls]=\"widgetControls\"\n [isLoading]=\"isLoading$ | async\"\n [config]=\"displayConfig\"\n [disableRefreshEmits]=\"true\"\n (globalContextChange)=\"onGlobalContextChange($event)\"\n ></c8y-global-context-widget-wrapper>\n}\n<div\n class=\"p-l-16 p-r-16\"\n style=\"min-height: 34px\"\n>\n <div class=\"d-flex gap-16 a-i-center\">\n @if (hasAtLeastOneAlarmActive) {\n <c8y-alarms-filter\n class=\"d-contents form-group-sm min-width-0\"\n (onFilterApplied)=\"filterSeverity($event)\"\n ></c8y-alarms-filter>\n }\n @if (displayConfig?.datapoints.length > 0) {\n <div class=\"d-flex a-i-center min-width-0\">\n @if (\n displayConfig.dataPointLegendDisplay === 'dropdown' ||\n (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n ) {\n <c8y-select\n class=\"min-width-0 c8y-select-v2--sm\"\n aria-label=\"Select datapoints, alarms or events\"\n [placeholder]=\"'Select datapoints, alarms or events' | translate\"\n [multi]=\"true\"\n [filterItems]=\"true\"\n [(ngModel)]=\"selectedItems\"\n (onSelect)=\"onItemSelected($event)\"\n (onDeselect)=\"onItemDeselected($event)\"\n >\n @for (item of selectableItems; track item.value) {\n <div\n class=\"d-flex a-i-center gap-4\"\n *c8ySelectItem=\"item.value; label: item.label\"\n >\n @if (\n !hasAtLeastOneDatapointActive &&\n item.value.type === 'DATAPOINT' &&\n item.value.original.__active\n ) {\n <i\n class=\"text-warning m-r-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n @if (item.value.type === 'DATAPOINT') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [style.background-color]=\"item.value.original.color\"\n ></span>\n }\n @if (item.value.type === 'ALARM') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [style.background-color]=\"item.value.original.color\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n }\n @if (item.value.type === 'EVENT') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n }\n <span class=\"text-truncate d-col\">\n <small class=\"text-truncate\">{{ item.value.original.label }}</small>\n <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n </span>\n </div>\n }\n <span\n class=\"tag tag--info chip\"\n title=\"{{ selectedItem.label }}\"\n *c8ySelectedItems=\"let selectedItem\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ selectedItem.label }}\"\n type=\"button\"\n (click)=\"\n $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n \"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n @if (isLastActiveDatapoint(selectedItem)) {\n <i\n class=\"text-warning a-s-start\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n @if (selectedItem.value.type === 'DATAPOINT') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [style.background-color]=\"selectedItem.value?.original.color || ''\"\n ></span>\n }\n @if (selectedItem.value?.type === 'ALARM') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [style.background-color]=\"selectedItem.value?.original.color || ''\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n }\n @if (selectedItem.value?.type === 'EVENT') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [ngStyle]=\"{\n 'background-color': selectedItem.value?.original.color || ''\n }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n }\n </span>\n </c8y-select>\n } @else {\n <div class=\"inner-scroll\">\n <div class=\"p-t-4 d-flex a-i-start gap-8\">\n @for (datapoint of displayConfig.datapoints; track datapoint) {\n @if (datapoint.retrievalError) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'Data point no longer exists.' | translate\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n } @else {\n <div\n class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n [ngClass]=\"{ active: datapoint.__active }\"\n >\n @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n <button\n class=\"c8y-datapoint-pill__btn\"\n title=\"{{\n (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n }} \"\n type=\"button\"\n data-cy=\"datapoint-toggle-visibility-btn\"\n (click)=\"toggleChart(datapoint)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n ></i>\n </button>\n <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n <i\n class=\"m-r-4 icon-14\"\n c8yIcon=\"circle\"\n [ngStyle]=\"{\n color: datapoint.color\n }\"\n ></i>\n <span\n class=\"text-truncate\"\n [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n >\n <span class=\"text-truncate text-bold\">\n {{ datapoint.label }}\n </span>\n <small class=\"text-muted text-10\">\n {{ datapoint.__target.name }}\n </small>\n </span>\n @if (datapointsOutOfSync.get(datapoint)) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"\n 'Measurements received for this data point may be out of sync.'\n | translate\n \"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n </div>\n </div>\n }\n }\n\n @for (alarm of alarms; track alarm) {\n <div\n class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n title=\"{{ alarm.filters.type }} \"\n >\n @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"\n 'Alarm of this type is currently active and outside of the selected time range'\n | translate\n \"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n <button\n class=\"c8y-alarm-pill__btn\"\n title=\"{{ alarm.filters.type }} \"\n type=\"button\"\n (click)=\"toggleAlarmEventType(alarm)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"\n alarm.__hidden || !alarm.__active\n ? 'eye-slash text-muted'\n : 'eye text-primary'\n \"\n ></i>\n </button>\n <button\n class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n (click)=\"toggleMarkedArea(alarm)\"\n [ngClass]=\"{\n active:\n !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n }\"\n >\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n [style.background-color]=\"alarm.color\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n <span\n class=\"text-truncate\"\n [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n >\n <span class=\"text-truncate text-bold\">\n {{ alarm.label || alarm.filters.type }}\n </span>\n <small class=\"text-muted text-10\">\n {{ alarm.__target.name }}\n </small>\n </span>\n </button>\n </div>\n }\n\n @for (event of events; track event) {\n <div\n class=\"c8y-event-pill pill--sm flex-no-shrink\"\n title=\"{{ event.filters.type }}\"\n >\n <button\n class=\"c8y-event-pill__btn\"\n title=\"{{ event.filters.type }} \"\n type=\"button\"\n (click)=\"toggleAlarmEventType(event)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"\n event.__hidden || !event.__active\n ? 'eye-slash text-muted'\n : 'eye text-primary'\n \"\n ></i>\n </button>\n <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n [ngStyle]=\"{ 'background-color': event.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n <span\n class=\"text-truncate text-bold\"\n [ngClass]=\"{ 'text-muted': event.__hidden }\"\n >\n <span class=\"text-truncate\">\n {{ event.label || event.filters.type }}\n </span>\n <small class=\"text-muted text-10\">\n {{ event.__target.name }}\n </small>\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n <button\n class=\"btn-help btn-help--sm m-r-8\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"legendHelpTemplate\"\n placement=\"left\"\n triggers=\"focus\"\n container=\"body\"\n [adaptivePosition]=\"true\"\n ></button>\n }\n </div>\n }\n <button\n class=\"btn btn-default btn-sm flex-no-shrink m-l-auto\"\n [attr.aria-label]=\"'Save as image' | translate\"\n tooltip=\"{{ 'Save as image' | translate }}\"\n container=\"body\"\n type=\"button\"\n (click)=\"chartComponent.saveAsImage()\"\n [adaptivePosition]=\"false\"\n >\n <i\n class=\"icon-14\"\n c8yIcon=\"image-file-checked\"\n ></i>\n </button>\n </div>\n</div>\n\n@if (displayConfig !== null) {\n <c8y-charts\n #chart\n [config]=\"displayConfig\"\n [alerts]=\"alerts\"\n [chartViewContext]=\"chartViewContext\"\n (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n (finishLoading)=\"this.isLoading$.next($event)\"\n (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: i2.SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "directive", type: i2.SelectItemDirective, selector: "[c8ySelectItem]", inputs: ["c8ySelectItem", "c8ySelectItemLabel"] }, { kind: "directive", type: i2.SelectedItemsDirective, selector: "[c8ySelectedItems]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: i9.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
|
|
664
668
|
}
|
|
665
669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsGraphWidgetViewComponent, decorators: [{
|
|
666
670
|
type: Component,
|
|
@@ -677,7 +681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
677
681
|
SelectComponent,
|
|
678
682
|
SelectItemDirective,
|
|
679
683
|
SelectedItemsDirective
|
|
680
|
-
], providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], template: "@if (widgetControls) {\n <c8y-global-context-widget-wrapper\n [widgetControls]=\"widgetControls\"\n [isLoading]=\"isLoading$ | async\"\n [config]=\"displayConfig\"\n [disableRefreshEmits]=\"true\"\n (globalContextChange)=\"onGlobalContextChange($event)\"\n ></c8y-global-context-widget-wrapper>\n}\n<div\n class=\"p-l-16 p-r-16\"\n style=\"min-height: 34px\"\n>\n <div class=\"d-flex gap-16 a-i-center\">\n @if (hasAtLeastOneAlarmActive) {\n <c8y-alarms-filter\n class=\"d-contents form-group-sm min-width-0\"\n (onFilterApplied)=\"filterSeverity($event)\"\n ></c8y-alarms-filter>\n }\n @if (displayConfig?.datapoints.length > 0) {\n <div class=\"d-flex a-i-center min-width-0\">\n @if (\n displayConfig.dataPointLegendDisplay === 'dropdown' ||\n (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n ) {\n <c8y-select\n class=\"min-width-0 c8y-select-v2--sm\"\n aria-label=\"Select datapoints, alarms or events\"\n [placeholder]=\"'Select datapoints, alarms or events' | translate\"\n [multi]=\"true\"\n [filterItems]=\"true\"\n [(ngModel)]=\"selectedItems\"\n (onSelect)=\"onItemSelected($event)\"\n (onDeselect)=\"onItemDeselected($event)\"\n >\n @for (item of selectableItems; track item.value) {\n <div\n class=\"d-flex a-i-center gap-4\"\n *c8ySelectItem=\"item.value; label: item.label\"\n >\n @if (\n !hasAtLeastOneDatapointActive &&\n item.value.type === 'DATAPOINT' &&\n item.value.original.__active\n ) {\n <i\n class=\"text-warning m-r-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n @if (item.value.type === 'DATAPOINT') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [style.background-color]=\"item.value.original.color\"\n ></span>\n }\n @if (item.value.type === 'ALARM') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [style.background-color]=\"item.value.original.color\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n }\n @if (item.value.type === 'EVENT') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n }\n <span class=\"text-truncate d-col\">\n <small class=\"text-truncate\">{{ item.value.original.label }}</small>\n <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n </span>\n </div>\n }\n <span\n class=\"tag tag--info chip\"\n title=\"{{ selectedItem.label }}\"\n *c8ySelectedItems=\"let selectedItem\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ selectedItem.label }}\"\n type=\"button\"\n (click)=\"\n $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n \"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n @if (isLastActiveDatapoint(selectedItem)) {\n <i\n class=\"text-warning a-s-start\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n @if (selectedItem.value.type === 'DATAPOINT') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [style.background-color]=\"selectedItem.value?.original.color || ''\"\n ></span>\n }\n @if (selectedItem.value?.type === 'ALARM') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [style.background-color]=\"selectedItem.value?.original.color || ''\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n }\n @if (selectedItem.value?.type === 'EVENT') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [ngStyle]=\"{\n 'background-color': selectedItem.value?.original.color || ''\n }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n }\n </span>\n </c8y-select>\n } @else {\n <div class=\"inner-scroll\">\n <div class=\"p-t-4 d-flex a-i-start gap-8\">\n @for (datapoint of displayConfig.datapoints; track datapoint) {\n @if (datapoint.retrievalError) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'Data point no longer exists.' | translate\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n } @else {\n <div\n class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n [ngClass]=\"{ active: datapoint.__active }\"\n >\n @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n <button\n class=\"c8y-datapoint-pill__btn\"\n title=\"{{\n (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n }} \"\n type=\"button\"\n data-cy=\"datapoint-toggle-visibility-btn\"\n (click)=\"toggleChart(datapoint)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n ></i>\n </button>\n <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n <i\n class=\"m-r-4 icon-14\"\n c8yIcon=\"circle\"\n [ngStyle]=\"{\n color: datapoint.color\n }\"\n ></i>\n <span\n class=\"text-truncate\"\n [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n >\n <span class=\"text-truncate text-bold\">\n {{ datapoint.label }}\n </span>\n <small class=\"text-muted text-10\">\n {{ datapoint.__target.name }}\n </small>\n </span>\n @if (datapointsOutOfSync.get(datapoint)) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"\n 'Measurements received for this data point may be out of sync.'\n | translate\n \"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n </div>\n </div>\n }\n }\n\n @for (alarm of alarms; track alarm) {\n <div\n class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n title=\"{{ alarm.filters.type }} \"\n >\n @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"\n 'Alarm of this type is currently active and outside of the selected time range'\n | translate\n \"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n <button\n class=\"c8y-alarm-pill__btn\"\n title=\"{{ alarm.filters.type }} \"\n type=\"button\"\n (click)=\"toggleAlarmEventType(alarm)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"\n alarm.__hidden || !alarm.__active\n ? 'eye-slash text-muted'\n : 'eye text-primary'\n \"\n ></i>\n </button>\n <button\n class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n (click)=\"toggleMarkedArea(alarm)\"\n [ngClass]=\"{\n active:\n !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n }\"\n >\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n [style.background-color]=\"alarm.color\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n <span\n class=\"text-truncate\"\n [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n >\n <span class=\"text-truncate text-bold\">\n {{ alarm.label || alarm.filters.type }}\n </span>\n <small class=\"text-muted text-10\">\n {{ alarm.__target.name }}\n </small>\n </span>\n </button>\n </div>\n }\n\n @for (event of events; track event) {\n <div\n class=\"c8y-event-pill pill--sm flex-no-shrink\"\n title=\"{{ event.filters.type }}\"\n >\n <button\n class=\"c8y-event-pill__btn\"\n title=\"{{ event.filters.type }} \"\n type=\"button\"\n (click)=\"toggleAlarmEventType(event)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"\n event.__hidden || !event.__active\n ? 'eye-slash text-muted'\n : 'eye text-primary'\n \"\n ></i>\n </button>\n <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n [ngStyle]=\"{ 'background-color': event.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n <span\n class=\"text-truncate text-bold\"\n [ngClass]=\"{ 'text-muted': event.__hidden }\"\n >\n <span class=\"text-truncate\">\n {{ event.label || event.filters.type }}\n </span>\n <small class=\"text-muted text-10\">\n {{ event.__target.name }}\n </small>\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n <button\n class=\"btn-help btn-help--sm m-r-8\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"legendHelpTemplate\"\n placement=\"left\"\n triggers=\"focus\"\n container=\"body\"\n [adaptivePosition]=\"true\"\n ></button>\n }\n </div>\n }\n <button\n class=\"btn btn-default btn-sm flex-no-shrink m-l-auto\"\n [attr.aria-label]=\"'Save as image' | translate\"\n tooltip=\"{{ 'Save as image' | translate }}\"\n container=\"body\"\n type=\"button\"\n (click)=\"chartComponent.saveAsImage()\"\n [adaptivePosition]=\"false\"\n >\n <i\n class=\"icon-14\"\n c8yIcon=\"image-file-checked\"\n ></i>\n </button>\n </div>\n</div>\n\n@if (globalContextState !== null) {\n <c8y-charts\n #chart\n [config]=\"globalContextState\"\n [alerts]=\"alerts\"\n [chartViewContext]=\"chartViewContext\"\n (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n (finishLoading)=\"this.isLoading$.next($event)\"\n (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n" }]
|
|
684
|
+
], providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], template: "@if (widgetControls) {\n <c8y-global-context-widget-wrapper\n [widgetControls]=\"widgetControls\"\n [isLoading]=\"isLoading$ | async\"\n [config]=\"displayConfig\"\n [disableRefreshEmits]=\"true\"\n (globalContextChange)=\"onGlobalContextChange($event)\"\n ></c8y-global-context-widget-wrapper>\n}\n<div\n class=\"p-l-16 p-r-16\"\n style=\"min-height: 34px\"\n>\n <div class=\"d-flex gap-16 a-i-center\">\n @if (hasAtLeastOneAlarmActive) {\n <c8y-alarms-filter\n class=\"d-contents form-group-sm min-width-0\"\n (onFilterApplied)=\"filterSeverity($event)\"\n ></c8y-alarms-filter>\n }\n @if (displayConfig?.datapoints.length > 0) {\n <div class=\"d-flex a-i-center min-width-0\">\n @if (\n displayConfig.dataPointLegendDisplay === 'dropdown' ||\n (displayConfig.dataPointLegendDisplay === 'auto' && totalLegendItems > 5)\n ) {\n <c8y-select\n class=\"min-width-0 c8y-select-v2--sm\"\n aria-label=\"Select datapoints, alarms or events\"\n [placeholder]=\"'Select datapoints, alarms or events' | translate\"\n [multi]=\"true\"\n [filterItems]=\"true\"\n [(ngModel)]=\"selectedItems\"\n (onSelect)=\"onItemSelected($event)\"\n (onDeselect)=\"onItemDeselected($event)\"\n >\n @for (item of selectableItems; track item.value) {\n <div\n class=\"d-flex a-i-center gap-4\"\n *c8ySelectItem=\"item.value; label: item.label\"\n >\n @if (\n !hasAtLeastOneDatapointActive &&\n item.value.type === 'DATAPOINT' &&\n item.value.original.__active\n ) {\n <i\n class=\"text-warning m-r-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n @if (item.value.type === 'DATAPOINT') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [style.background-color]=\"item.value.original.color\"\n ></span>\n }\n @if (item.value.type === 'ALARM') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [style.background-color]=\"item.value.original.color\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n }\n @if (item.value.type === 'EVENT') {\n <span\n class=\"circle-icon-wrapper a-s-start circle-icon-wrapper--small\"\n [ngStyle]=\"{ 'background-color': item.value.original.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n }\n <span class=\"text-truncate d-col\">\n <small class=\"text-truncate\">{{ item.value.original.label }}</small>\n <span class=\"text-muted text-10\">{{ item.value.original.__target?.name }}</span>\n </span>\n </div>\n }\n <span\n class=\"tag tag--info chip\"\n title=\"{{ selectedItem.label }}\"\n *c8ySelectedItems=\"let selectedItem\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10\"\n title=\"{{ selectedItem.label }}\"\n type=\"button\"\n (click)=\"\n $event.preventDefault(); $event.stopPropagation(); onItemDeselected(selectedItem)\n \"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n @if (isLastActiveDatapoint(selectedItem)) {\n <i\n class=\"text-warning a-s-start\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n @if (selectedItem.value.type === 'DATAPOINT') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [style.background-color]=\"selectedItem.value?.original.color || ''\"\n ></span>\n }\n @if (selectedItem.value?.type === 'ALARM') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [style.background-color]=\"selectedItem.value?.original.color || ''\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n }\n @if (selectedItem.value?.type === 'EVENT') {\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n [ngStyle]=\"{\n 'background-color': selectedItem.value?.original.color || ''\n }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n }\n </span>\n </c8y-select>\n } @else {\n <div class=\"inner-scroll\">\n <div class=\"p-t-4 d-flex a-i-start gap-8\">\n @for (datapoint of displayConfig.datapoints; track datapoint) {\n @if (datapoint.retrievalError) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'Data point no longer exists.' | translate\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n } @else {\n <div\n class=\"c8y-datapoint-pill pill--sm flex-no-shrink\"\n title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n [ngClass]=\"{ active: datapoint.__active }\"\n >\n @if (!hasAtLeastOneDatapointActive && datapoint.__active) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"'At least 1 data point must be active.' | translate\"\n container=\"body\"\n data-cy=\"datapoint-warning-icon\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n <button\n class=\"c8y-datapoint-pill__btn\"\n title=\"{{\n (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n }} \"\n type=\"button\"\n data-cy=\"datapoint-toggle-visibility-btn\"\n (click)=\"toggleChart(datapoint)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n ></i>\n </button>\n <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n <i\n class=\"m-r-4 icon-14\"\n c8yIcon=\"circle\"\n [ngStyle]=\"{\n color: datapoint.color\n }\"\n ></i>\n <span\n class=\"text-truncate\"\n [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n >\n <span class=\"text-truncate text-bold\">\n {{ datapoint.label }}\n </span>\n <small class=\"text-muted text-10\">\n {{ datapoint.__target.name }}\n </small>\n </span>\n @if (datapointsOutOfSync.get(datapoint)) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"\n 'Measurements received for this data point may be out of sync.'\n | translate\n \"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n </div>\n </div>\n }\n }\n\n @for (alarm of alarms; track alarm) {\n <div\n class=\"c8y-alarm-pill pill--sm flex-no-shrink\"\n title=\"{{ alarm.filters.type }} \"\n >\n @if (displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)) {\n <i\n class=\"text-warning m-l-4\"\n c8yIcon=\"exclamation-triangle\"\n [tooltip]=\"\n 'Alarm of this type is currently active and outside of the selected time range'\n | translate\n \"\n container=\"body\"\n [adaptivePosition]=\"false\"\n ></i>\n }\n <button\n class=\"c8y-alarm-pill__btn\"\n title=\"{{ alarm.filters.type }} \"\n type=\"button\"\n (click)=\"toggleAlarmEventType(alarm)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"\n alarm.__hidden || !alarm.__active\n ? 'eye-slash text-muted'\n : 'eye text-primary'\n \"\n ></i>\n </button>\n <button\n class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n (click)=\"toggleMarkedArea(alarm)\"\n [ngClass]=\"{\n active:\n !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n }\"\n >\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n [style.background-color]=\"alarm.color\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"bell\"\n ></i>\n </span>\n <span\n class=\"text-truncate\"\n [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n >\n <span class=\"text-truncate text-bold\">\n {{ alarm.label || alarm.filters.type }}\n </span>\n <small class=\"text-muted text-10\">\n {{ alarm.__target.name }}\n </small>\n </span>\n </button>\n </div>\n }\n\n @for (event of events; track event) {\n <div\n class=\"c8y-event-pill pill--sm flex-no-shrink\"\n title=\"{{ event.filters.type }}\"\n >\n <button\n class=\"c8y-event-pill__btn\"\n title=\"{{ event.filters.type }} \"\n type=\"button\"\n (click)=\"toggleAlarmEventType(event)\"\n >\n <i\n class=\"icon-14\"\n [c8yIcon]=\"\n event.__hidden || !event.__active\n ? 'eye-slash text-muted'\n : 'eye text-primary'\n \"\n ></i>\n </button>\n <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n <span\n class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n [ngStyle]=\"{ 'background-color': event.color }\"\n >\n <i\n class=\"stroked-icon\"\n c8yIcon=\"online1\"\n ></i>\n </span>\n <span\n class=\"text-truncate text-bold\"\n [ngClass]=\"{ 'text-muted': event.__hidden }\"\n >\n <span class=\"text-truncate\">\n {{ event.label || event.filters.type }}\n </span>\n <small class=\"text-muted text-10\">\n {{ event.__target.name }}\n </small>\n </span>\n </div>\n </div>\n }\n </div>\n </div>\n <button\n class=\"btn-help btn-help--sm m-r-8\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"legendHelpTemplate\"\n placement=\"left\"\n triggers=\"focus\"\n container=\"body\"\n [adaptivePosition]=\"true\"\n ></button>\n }\n </div>\n }\n <button\n class=\"btn btn-default btn-sm flex-no-shrink m-l-auto\"\n [attr.aria-label]=\"'Save as image' | translate\"\n tooltip=\"{{ 'Save as image' | translate }}\"\n container=\"body\"\n type=\"button\"\n (click)=\"chartComponent.saveAsImage()\"\n [adaptivePosition]=\"false\"\n >\n <i\n class=\"icon-14\"\n c8yIcon=\"image-file-checked\"\n ></i>\n </button>\n </div>\n</div>\n\n@if (displayConfig !== null) {\n <c8y-charts\n #chart\n [config]=\"displayConfig\"\n [alerts]=\"alerts\"\n [chartViewContext]=\"chartViewContext\"\n (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n (finishLoading)=\"this.isLoading$.next($event)\"\n (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n ></c8y-charts>\n}\n\n<ng-template #legendHelpTemplate>\n <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n" }]
|
|
681
685
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i1.ContextDashboardComponent, decorators: [{
|
|
682
686
|
type: Optional
|
|
683
687
|
}] }, { type: i2.DynamicComponentService }, { type: i4$1.WidgetConfigMigrationService }, { type: i2.WidgetTimeContextDateRangeService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|