@c8y/ngx-components 1023.17.8 → 1023.17.13
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/auth-configuration/index.d.ts +6 -3
- package/auth-configuration/index.d.ts.map +1 -1
- package/echart/index.d.ts.map +1 -1
- package/fesm2022/c8y-ngx-components-auth-configuration.mjs +133 -59
- package/fesm2022/c8y-ngx-components-auth-configuration.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-echart.mjs +14 -5
- package/fesm2022/c8y-ngx-components-echart.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-events-events-timeline.mjs +2 -2
- package/fesm2022/c8y-ngx-components-events-events-timeline.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-operations-operations-timeline.mjs +4 -6
- package/fesm2022/c8y-ngx-components-operations-operations-timeline.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs +2 -2
- package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs.map +1 -1
- package/locales/de.po +50 -70
- package/locales/zh_TW.po +2 -1
- package/operations/operations-timeline/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -20,11 +20,11 @@ class EventsTimelineComponent {
|
|
|
20
20
|
this.propertiesToHide = [];
|
|
21
21
|
}
|
|
22
22
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EventsTimelineComponent, deps: [{ token: i1.EventRealtimeService }, { token: i2.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EventsTimelineComponent, isStandalone: true, selector: "c8y-events-timeline", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null }, sourceId: { classPropertyName: "sourceId", publicName: "sourceId", isSignal: true, isRequired: true, transformFunction: null }, filterPipe: { classPropertyName: "filterPipe", publicName: "filterPipe", isSignal: false, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: false, isRequired: false, transformFunction: null }, footerTemplates: { classPropertyName: "footerTemplates", publicName: "footerTemplates", isSignal: false, isRequired: false, transformFunction: null }, propertiesToHide: { classPropertyName: "propertiesToHide", publicName: "propertiesToHide", isSignal: false, isRequired: false, transformFunction: null } }, providers: [EventRealtimeService], ngImport: i0, template: "@if (!events?.data || !events?.data?.length) {\n <c8y-ui-empty-state\n [icon]=\"'online'\"\n [title]=\"'No recent events found.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n}\n\n<c8y-list-group>\n <c8y-li-timeline\n *c8yFor=\"\n let event of events;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId() }\n \"\n >\n {{ event.creationTime | date: 'medium' }}\n\n <c8y-li>\n <c8y-li-icon>\n <i [c8yIcon]=\"'online'\"></i>\n </c8y-li-icon>\n\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div data-cy=\"c8y-events-timeline--body-template\">\n @if (bodyTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: event }\"\n ></ng-container>\n } @else {\n <small>{{ event.text }}</small>\n }\n </div>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse #collapseEl>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n\n <ul class=\"list-unstyled small\">\n @for (prop of eventsService.getStandardKeys(event) | keyvalue; track prop.key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ event[prop.key] | translate }}\n </span>\n </li>\n }\n\n @for (key of eventsService.getNonStandardKeys(event, propertiesToHide); track key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key | humanize | translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ event[key] | json }}\n </span>\n </li>\n }\n </ul>\n\n @for (footer of footerTemplates; track footer) {\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: event }\"\n ></ng-container>\n }\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i1.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "ngmodule", type: CollapseModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HumanizePipe, name: "humanize" }] }); }
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EventsTimelineComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: 'c8y-events-timeline', imports: [CommonModule, CoreModule, CollapseModule, TooltipModule], providers: [EventRealtimeService], template: "<c8y-ui-empty-state\n
|
|
27
|
+
args: [{ selector: 'c8y-events-timeline', imports: [CommonModule, CoreModule, CollapseModule, TooltipModule], providers: [EventRealtimeService], template: "@if (!events?.data || !events?.data?.length) {\n <c8y-ui-empty-state\n [icon]=\"'online'\"\n [title]=\"'No recent events found.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n}\n\n<c8y-list-group>\n <c8y-li-timeline\n *c8yFor=\"\n let event of events;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId() }\n \"\n >\n {{ event.creationTime | date: 'medium' }}\n\n <c8y-li>\n <c8y-li-icon>\n <i [c8yIcon]=\"'online'\"></i>\n </c8y-li-icon>\n\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div data-cy=\"c8y-events-timeline--body-template\">\n @if (bodyTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: event }\"\n ></ng-container>\n } @else {\n <small>{{ event.text }}</small>\n }\n </div>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse #collapseEl>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n\n <ul class=\"list-unstyled small\">\n @for (prop of eventsService.getStandardKeys(event) | keyvalue; track prop.key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ event[prop.key] | translate }}\n </span>\n </li>\n }\n\n @for (key of eventsService.getNonStandardKeys(event, propertiesToHide); track key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key | humanize | translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ event[key] | json }}\n </span>\n </li>\n }\n </ul>\n\n @for (footer of footerTemplates; track footer) {\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: event }\"\n ></ng-container>\n }\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n" }]
|
|
28
28
|
}], ctorParameters: () => [{ type: i1.EventRealtimeService }, { type: i2.EventsService }], propDecorators: { events: [{
|
|
29
29
|
type: Input
|
|
30
30
|
}], sourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceId", required: true }] }], filterPipe: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"c8y-ngx-components-events-events-timeline.mjs","sources":["../../events/events-timeline/events-timeline.component.ts","../../events/events-timeline/events-timeline.component.html","../../events/events-timeline/c8y-ngx-components-events-events-timeline.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, Input, TemplateRef } from '@angular/core';\nimport { IEvent, IResultList } from '@c8y/client';\nimport { CoreModule, EventRealtimeService, ForOfFilterPipe } from '@c8y/ngx-components';\nimport { EventsService } from '@c8y/ngx-components/events';\nimport { CollapseModule } from 'ngx-bootstrap/collapse';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { pipe } from 'rxjs';\nimport { tap } from 'rxjs/operators';\n\n@Component({\n selector: 'c8y-events-timeline',\n templateUrl: 'events-timeline.component.html',\n imports: [CommonModule, CoreModule, CollapseModule, TooltipModule],\n providers: [EventRealtimeService]\n})\nexport class EventsTimelineComponent<B, F> {\n @Input()\n events: IResultList<IEvent>;\n\n sourceId = input.required<string | number>();\n\n @Input()\n filterPipe: ForOfFilterPipe<IEvent> = pipe(tap());\n\n @Input()\n bodyTemplate: TemplateRef<B>;\n\n @Input()\n footerTemplates: Array<TemplateRef<F>> = [];\n\n @Input()\n propertiesToHide: string[] = [];\n\n constructor(\n public realtime: EventRealtimeService,\n public eventsService: EventsService\n ) {}\n}\n","<c8y-ui-empty-state\n
|
|
1
|
+
{"version":3,"file":"c8y-ngx-components-events-events-timeline.mjs","sources":["../../events/events-timeline/events-timeline.component.ts","../../events/events-timeline/events-timeline.component.html","../../events/events-timeline/c8y-ngx-components-events-events-timeline.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, Input, TemplateRef } from '@angular/core';\nimport { IEvent, IResultList } from '@c8y/client';\nimport { CoreModule, EventRealtimeService, ForOfFilterPipe } from '@c8y/ngx-components';\nimport { EventsService } from '@c8y/ngx-components/events';\nimport { CollapseModule } from 'ngx-bootstrap/collapse';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { pipe } from 'rxjs';\nimport { tap } from 'rxjs/operators';\n\n@Component({\n selector: 'c8y-events-timeline',\n templateUrl: 'events-timeline.component.html',\n imports: [CommonModule, CoreModule, CollapseModule, TooltipModule],\n providers: [EventRealtimeService]\n})\nexport class EventsTimelineComponent<B, F> {\n @Input()\n events: IResultList<IEvent>;\n\n sourceId = input.required<string | number>();\n\n @Input()\n filterPipe: ForOfFilterPipe<IEvent> = pipe(tap());\n\n @Input()\n bodyTemplate: TemplateRef<B>;\n\n @Input()\n footerTemplates: Array<TemplateRef<F>> = [];\n\n @Input()\n propertiesToHide: string[] = [];\n\n constructor(\n public realtime: EventRealtimeService,\n public eventsService: EventsService\n ) {}\n}\n","@if (!events?.data || !events?.data?.length) {\n <c8y-ui-empty-state\n [icon]=\"'online'\"\n [title]=\"'No recent events found.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n}\n\n<c8y-list-group>\n <c8y-li-timeline\n *c8yFor=\"\n let event of events;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId() }\n \"\n >\n {{ event.creationTime | date: 'medium' }}\n\n <c8y-li>\n <c8y-li-icon>\n <i [c8yIcon]=\"'online'\"></i>\n </c8y-li-icon>\n\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div data-cy=\"c8y-events-timeline--body-template\">\n @if (bodyTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: event }\"\n ></ng-container>\n } @else {\n <small>{{ event.text }}</small>\n }\n </div>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse #collapseEl>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n\n <ul class=\"list-unstyled small\">\n @for (prop of eventsService.getStandardKeys(event) | keyvalue; track prop.key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ event[prop.key] | translate }}\n </span>\n </li>\n }\n\n @for (key of eventsService.getNonStandardKeys(event, propertiesToHide); track key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key | humanize | translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ event[key] | json }}\n </span>\n </li>\n }\n </ul>\n\n @for (footer of footerTemplates; track footer) {\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: event }\"\n ></ng-container>\n }\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
+
import { NgClass, NgTemplateOutlet, JsonPipe, KeyValuePipe } from '@angular/common';
|
|
1
2
|
import * as i0 from '@angular/core';
|
|
2
3
|
import { Input, Component, NgModule } from '@angular/core';
|
|
3
4
|
import * as i1 from '@c8y/ngx-components';
|
|
4
5
|
import { EmptyStateComponent, ListGroupComponent, ForOfDirective, ListItemTimelineComponent, ListItemComponent, ListItemIconComponent, IconDirective, ListItemBodyComponent, ListItemCollapseComponent, C8yTranslateDirective, DatePipe, C8yTranslatePipe, HumanizePipe } from '@c8y/ngx-components';
|
|
5
6
|
import * as i2 from '@c8y/ngx-components/operations/shared';
|
|
6
7
|
import { OPERATION_STATUS_OPTIONS_MAP } from '@c8y/ngx-components/operations/shared';
|
|
8
|
+
import { TooltipDirective } from 'ngx-bootstrap/tooltip';
|
|
7
9
|
import { pipe } from 'rxjs';
|
|
8
10
|
import { tap } from 'rxjs/operators';
|
|
9
|
-
import { TooltipDirective } from 'ngx-bootstrap/tooltip';
|
|
10
|
-
import { NgClass, NgIf, NgTemplateOutlet, NgFor, JsonPipe, KeyValuePipe } from '@angular/common';
|
|
11
11
|
|
|
12
12
|
class OperationsTimelineComponent {
|
|
13
13
|
constructor(realtime, operationsService) {
|
|
@@ -19,7 +19,7 @@ class OperationsTimelineComponent {
|
|
|
19
19
|
this.OPERATION_STATUS_OPTIONS_MAP = OPERATION_STATUS_OPTIONS_MAP;
|
|
20
20
|
}
|
|
21
21
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationsTimelineComponent, deps: [{ token: i1.OperationRealtimeService }, { token: i2.OperationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
22
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OperationsTimelineComponent, isStandalone: true, selector: "c8y-operations-timeline", inputs: { operations: "operations", sourceId: "sourceId", filterPipe: "filterPipe", bodyTemplate: "bodyTemplate", footerTemplates: "footerTemplates", propertiesToHide: "propertiesToHide" }, ngImport: i0, template: "@if (!operations?.data || !operations?.data?.length) {\n <c8y-ui-empty-state\n [icon]=\"'c8y-energy'\"\n [title]=\"'No recent operations found.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n}\n\n<c8y-list-group>\n <c8y-li-timeline\n *c8yFor=\"\n let op of operations;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId }\n \"\n >\n {{ op.creationTime | c8yDate: 'medium' }}\n\n <c8y-li>\n <c8y-li-icon>\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n [tooltip]=\"op.status | translate\"\n container=\"body\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n [delay]=\"500\"\n ></i>\n </c8y-li-icon>\n\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div>\n {{ op.status | translate }}\n <br class=\"visible-xs visible-sm\" />\n\n @if (bodyTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n } @else {\n <small>{{ op.description }}</small>\n }\n </div>\n\n @if (op.status === 'PENDING') {\n <div class=\"m-l-auto showOnHover\">\n <button\n class=\"btn btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Cancel operation' | translate\"\n tooltip=\"{{ 'Cancel operation' | translate }}\"\n placement=\"left\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n }\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse #collapseEl>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n\n <ul class=\"list-unstyled small\">\n @for (prop of operationsService.getStandardKeys(op) | keyvalue; track prop.key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ op[prop.key] | translate }}\n </span>\n </li>\n }\n\n @for (key of operationsService.getNonStandardKeys(op, propertiesToHide); track key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key | humanize | translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ op[key] | json }}\n </span>\n </li>\n }\n </ul>\n\n @for (footer of footerTemplates; track footer) {\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n }\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
|
|
23
23
|
}
|
|
24
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OperationsTimelineComponent, decorators: [{
|
|
25
25
|
type: Component,
|
|
@@ -34,17 +34,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
34
34
|
TooltipDirective,
|
|
35
35
|
NgClass,
|
|
36
36
|
ListItemBodyComponent,
|
|
37
|
-
NgIf,
|
|
38
37
|
NgTemplateOutlet,
|
|
39
38
|
ListItemCollapseComponent,
|
|
40
39
|
C8yTranslateDirective,
|
|
41
|
-
NgFor,
|
|
42
40
|
JsonPipe,
|
|
43
41
|
DatePipe,
|
|
44
42
|
KeyValuePipe,
|
|
45
43
|
C8yTranslatePipe,
|
|
46
44
|
HumanizePipe
|
|
47
|
-
], template: "<c8y-ui-empty-state\n
|
|
45
|
+
], template: "@if (!operations?.data || !operations?.data?.length) {\n <c8y-ui-empty-state\n [icon]=\"'c8y-energy'\"\n [title]=\"'No recent operations found.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n}\n\n<c8y-list-group>\n <c8y-li-timeline\n *c8yFor=\"\n let op of operations;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId }\n \"\n >\n {{ op.creationTime | c8yDate: 'medium' }}\n\n <c8y-li>\n <c8y-li-icon>\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n [tooltip]=\"op.status | translate\"\n container=\"body\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n [delay]=\"500\"\n ></i>\n </c8y-li-icon>\n\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div>\n {{ op.status | translate }}\n <br class=\"visible-xs visible-sm\" />\n\n @if (bodyTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n } @else {\n <small>{{ op.description }}</small>\n }\n </div>\n\n @if (op.status === 'PENDING') {\n <div class=\"m-l-auto showOnHover\">\n <button\n class=\"btn btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Cancel operation' | translate\"\n tooltip=\"{{ 'Cancel operation' | translate }}\"\n placement=\"left\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n }\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse #collapseEl>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n\n <ul class=\"list-unstyled small\">\n @for (prop of operationsService.getStandardKeys(op) | keyvalue; track prop.key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ op[prop.key] | translate }}\n </span>\n </li>\n }\n\n @for (key of operationsService.getNonStandardKeys(op, propertiesToHide); track key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key | humanize | translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ op[key] | json }}\n </span>\n </li>\n }\n </ul>\n\n @for (footer of footerTemplates; track footer) {\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n }\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n" }]
|
|
48
46
|
}], ctorParameters: () => [{ type: i1.OperationRealtimeService }, { type: i2.OperationsService }], propDecorators: { operations: [{
|
|
49
47
|
type: Input
|
|
50
48
|
}], sourceId: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"c8y-ngx-components-operations-operations-timeline.mjs","sources":["../../operations/operations-timeline/operations-timeline.component.ts","../../operations/operations-timeline/operations-timeline.component.html","../../operations/operations-timeline/operations-timeline.module.ts","../../operations/operations-timeline/c8y-ngx-components-operations-operations-timeline.ts"],"sourcesContent":["import { Component, Input, TemplateRef } from '@angular/core';\nimport { IOperation, IResultList } from '@c8y/client';\nimport {\n ForOfFilterPipe,\n OperationRealtimeService,\n EmptyStateComponent,\n ListGroupComponent,\n ForOfDirective,\n ListItemTimelineComponent,\n ListItemComponent,\n ListItemIconComponent,\n IconDirective,\n ListItemBodyComponent,\n ListItemCollapseComponent,\n C8yTranslateDirective,\n C8yTranslatePipe,\n DatePipe,\n HumanizePipe\n} from '@c8y/ngx-components';\nimport {\n OPERATION_STATUS_OPTIONS_MAP,\n OperationsService,\n OperationStatusOptionsMapShared\n} from '@c8y/ngx-components/operations/shared';\nimport { pipe } from 'rxjs';\nimport { tap } from 'rxjs/operators';\nimport { TooltipDirective } from 'ngx-bootstrap/tooltip';\nimport { NgClass, NgIf, NgTemplateOutlet, NgFor, JsonPipe, KeyValuePipe } from '@angular/common';\n\n@Component({\n selector: 'c8y-operations-timeline',\n templateUrl: 'operations-timeline.component.html',\n imports: [\n EmptyStateComponent,\n ListGroupComponent,\n ForOfDirective,\n ListItemTimelineComponent,\n ListItemComponent,\n ListItemIconComponent,\n IconDirective,\n TooltipDirective,\n NgClass,\n ListItemBodyComponent,\n NgIf,\n NgTemplateOutlet,\n ListItemCollapseComponent,\n C8yTranslateDirective,\n NgFor,\n JsonPipe,\n DatePipe,\n KeyValuePipe,\n C8yTranslatePipe,\n HumanizePipe\n ]\n})\nexport class OperationsTimelineComponent<B, F> {\n @Input()\n operations: IResultList<IOperation>;\n\n @Input()\n sourceId: string;\n\n @Input()\n filterPipe: ForOfFilterPipe<IOperation> = pipe(tap());\n\n @Input()\n bodyTemplate: TemplateRef<B>;\n\n @Input()\n footerTemplates: Array<TemplateRef<F>> = [];\n\n @Input()\n propertiesToHide: string[] = [];\n\n OPERATION_STATUS_OPTIONS_MAP: OperationStatusOptionsMapShared = OPERATION_STATUS_OPTIONS_MAP;\n\n constructor(\n public realtime: OperationRealtimeService,\n public operationsService: OperationsService\n ) {}\n}\n","<c8y-ui-empty-state\n [icon]=\"'c8y-energy'\"\n [title]=\"'No recent operations found.' | translate\"\n *ngIf=\"!operations?.data || !operations?.data?.length\"\n [horizontal]=\"true\"\n></c8y-ui-empty-state>\n<c8y-list-group>\n <c8y-li-timeline\n *c8yFor=\"\n let op of operations;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId }\n \"\n >\n {{ op.creationTime | c8yDate: 'medium' }}\n <c8y-li\n #li\n (click)=\"li.toggleCollapsed()\"\n >\n <c8y-li-icon>\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n [tooltip]=\"op.status | translate\"\n container=\"body\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n [delay]=\"500\"\n ></i>\n </c8y-li-icon>\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div>\n {{ op.status | translate }}\n <br class=\"visible-xs visible-sm\" />\n <ng-container\n *ngIf=\"bodyTemplate; else defaultBody\"\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n <ng-template #defaultBody>\n <small>{{ op.description }}</small>\n </ng-template>\n </div>\n <div\n class=\"m-l-auto showOnHover\"\n *ngIf=\"op.status === 'PENDING'\"\n >\n <button\n class=\"btn btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Cancel operation' | translate\"\n tooltip=\"{{ 'Cancel operation' | translate }}\"\n placement=\"left\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n <ul class=\"list-unstyled small\">\n <li\n class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n *ngFor=\"let prop of operationsService.getStandardKeys(op) | keyvalue\"\n >\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ op[prop.key] | translate }}\n </span>\n </li>\n <li\n class=\"p-t-4 p-b-4 d-flex separator-bottom\"\n *ngFor=\"let key of operationsService.getNonStandardKeys(op, propertiesToHide)\"\n >\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key | humanize | translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ op[key] | json }}\n </span>\n </li>\n </ul>\n <ng-container\n *ngFor=\"let footer of footerTemplates\"\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n","import { NgModule } from '@angular/core';\nimport { OperationsTimelineComponent } from './operations-timeline.component';\n\n/**\n * @deprecated Use `OperationsTimelineComponent` as a standalone component instead.\n */\n@NgModule({\n imports: [OperationsTimelineComponent],\n exports: [OperationsTimelineComponent]\n})\nexport class OperationsTimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"c8y-ngx-components-operations-operations-timeline.mjs","sources":["../../operations/operations-timeline/operations-timeline.component.ts","../../operations/operations-timeline/operations-timeline.component.html","../../operations/operations-timeline/operations-timeline.module.ts","../../operations/operations-timeline/c8y-ngx-components-operations-operations-timeline.ts"],"sourcesContent":["import { JsonPipe, KeyValuePipe, NgClass, NgTemplateOutlet } from '@angular/common';\nimport { Component, Input, TemplateRef } from '@angular/core';\nimport { IOperation, IResultList } from '@c8y/client';\nimport {\n C8yTranslateDirective,\n C8yTranslatePipe,\n DatePipe,\n EmptyStateComponent,\n ForOfDirective,\n ForOfFilterPipe,\n HumanizePipe,\n IconDirective,\n ListGroupComponent,\n ListItemBodyComponent,\n ListItemCollapseComponent,\n ListItemComponent,\n ListItemIconComponent,\n ListItemTimelineComponent,\n OperationRealtimeService\n} from '@c8y/ngx-components';\nimport {\n OPERATION_STATUS_OPTIONS_MAP,\n OperationsService,\n OperationStatusOptionsMapShared\n} from '@c8y/ngx-components/operations/shared';\nimport { TooltipDirective } from 'ngx-bootstrap/tooltip';\nimport { pipe } from 'rxjs';\nimport { tap } from 'rxjs/operators';\n\n@Component({\n selector: 'c8y-operations-timeline',\n templateUrl: 'operations-timeline.component.html',\n imports: [\n EmptyStateComponent,\n ListGroupComponent,\n ForOfDirective,\n ListItemTimelineComponent,\n ListItemComponent,\n ListItemIconComponent,\n IconDirective,\n TooltipDirective,\n NgClass,\n ListItemBodyComponent,\n NgTemplateOutlet,\n ListItemCollapseComponent,\n C8yTranslateDirective,\n JsonPipe,\n DatePipe,\n KeyValuePipe,\n C8yTranslatePipe,\n HumanizePipe\n ]\n})\nexport class OperationsTimelineComponent<B, F> {\n @Input()\n operations: IResultList<IOperation>;\n\n @Input()\n sourceId: string;\n\n @Input()\n filterPipe: ForOfFilterPipe<IOperation> = pipe(tap());\n\n @Input()\n bodyTemplate: TemplateRef<B>;\n\n @Input()\n footerTemplates: Array<TemplateRef<F>> = [];\n\n @Input()\n propertiesToHide: string[] = [];\n\n OPERATION_STATUS_OPTIONS_MAP: OperationStatusOptionsMapShared = OPERATION_STATUS_OPTIONS_MAP;\n\n constructor(\n public realtime: OperationRealtimeService,\n public operationsService: OperationsService\n ) {}\n}\n","@if (!operations?.data || !operations?.data?.length) {\n <c8y-ui-empty-state\n [icon]=\"'c8y-energy'\"\n [title]=\"'No recent operations found.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n}\n\n<c8y-list-group>\n <c8y-li-timeline\n *c8yFor=\"\n let op of operations;\n pipe: filterPipe;\n realtime: realtime;\n realtimeOptions: { entityOrId: sourceId }\n \"\n >\n {{ op.creationTime | c8yDate: 'medium' }}\n\n <c8y-li>\n <c8y-li-icon>\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].icon\"\n [tooltip]=\"op.status | translate\"\n container=\"body\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass\"\n [delay]=\"500\"\n ></i>\n </c8y-li-icon>\n\n <c8y-li-body>\n <div class=\"d-flex text-break-word\">\n <div>\n {{ op.status | translate }}\n <br class=\"visible-xs visible-sm\" />\n\n @if (bodyTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"bodyTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n } @else {\n <small>{{ op.description }}</small>\n }\n </div>\n\n @if (op.status === 'PENDING') {\n <div class=\"m-l-auto showOnHover\">\n <button\n class=\"btn btn-dot btn-dot--danger\"\n [attr.aria-label]=\"'Cancel operation' | translate\"\n tooltip=\"{{ 'Cancel operation' | translate }}\"\n placement=\"left\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"$event.stopPropagation(); operationsService.cancel(op)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n }\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse #collapseEl>\n <div\n class=\"legend form-block\"\n translate\n >\n Details\n </div>\n\n <ul class=\"list-unstyled small\">\n @for (prop of operationsService.getStandardKeys(op) | keyvalue; track prop.key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ prop.value | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ op[prop.key] | translate }}\n </span>\n </li>\n }\n\n @for (key of operationsService.getNonStandardKeys(op, propertiesToHide); track key) {\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n <label class=\"small m-b-0 m-r-8 a-s-start\">\n {{ key | humanize | translate }}\n </label>\n <span class=\"m-l-auto text-code\">\n {{ op[key] | json }}\n </span>\n </li>\n }\n </ul>\n\n @for (footer of footerTemplates; track footer) {\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: op }\"\n ></ng-container>\n }\n </c8y-li-collapse>\n </c8y-li>\n </c8y-li-timeline>\n</c8y-list-group>\n","import { NgModule } from '@angular/core';\nimport { OperationsTimelineComponent } from './operations-timeline.component';\n\n/**\n * @deprecated Use `OperationsTimelineComponent` as a standalone component instead.\n */\n@NgModule({\n imports: [OperationsTimelineComponent],\n exports: [OperationsTimelineComponent]\n})\nexport class OperationsTimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -658,7 +658,7 @@ class DatapointsGraphWidgetViewComponent {
|
|
|
658
658
|
}
|
|
659
659
|
}
|
|
660
660
|
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 }); }
|
|
661
|
-
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 (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.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.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"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
|
|
661
|
+
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 (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"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
|
|
662
662
|
}
|
|
663
663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsGraphWidgetViewComponent, decorators: [{
|
|
664
664
|
type: Component,
|
|
@@ -675,7 +675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
675
675
|
SelectComponent,
|
|
676
676
|
SelectItemDirective,
|
|
677
677
|
SelectedItemsDirective
|
|
678
|
-
], providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], template: "@if (widgetControls) {\n <c8y-global-context-widget-wrapper\n [widgetControls]=\"widgetControls\"\n [isLoading]=\"isLoading$ | async\"\n [config]=\"displayConfig\"\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.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.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" }]
|
|
678
|
+
], providers: [ChartEventsService, ChartAlarmsService, WidgetTimeContextDateRangeService], template: "@if (widgetControls) {\n <c8y-global-context-widget-wrapper\n [widgetControls]=\"widgetControls\"\n [isLoading]=\"isLoading$ | async\"\n [config]=\"displayConfig\"\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" }]
|
|
679
679
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i1.ContextDashboardComponent, decorators: [{
|
|
680
680
|
type: Optional
|
|
681
681
|
}] }, { type: i2.DynamicComponentService }, { type: i4$1.WidgetConfigMigrationService }, { type: i2.WidgetTimeContextDateRangeService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|