@c8y/ngx-components 1023.14.220 → 1023.14.222
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/alarm-event-selector/index.d.ts.map +1 -1
- package/datapoint-library/list/index.d.ts.map +1 -1
- package/datapoint-selector/index.d.ts +25 -7
- package/datapoint-selector/index.d.ts.map +1 -1
- package/echart/index.d.ts +1 -0
- package/echart/index.d.ts.map +1 -1
- package/fesm2022/c8y-ngx-components-alarm-event-selector.mjs +13 -8
- package/fesm2022/c8y-ngx-components-alarm-event-selector.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-computed-asset-properties.mjs +8 -3
- package/fesm2022/c8y-ngx-components-computed-asset-properties.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-datapoint-library-details.mjs +2 -2
- package/fesm2022/c8y-ngx-components-datapoint-library-details.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-datapoint-library-list.mjs +13 -5
- package/fesm2022/c8y-ngx-components-datapoint-library-list.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-datapoint-selector.mjs +66 -39
- package/fesm2022/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-echart.mjs +25 -14
- package/fesm2022/c8y-ngx-components-echart.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs +15 -6
- package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-table.mjs +10 -6
- package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-table.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-implementations-info-gauge.mjs +20 -16
- package/fesm2022/c8y-ngx-components-widgets-implementations-info-gauge.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-implementations-kpi.mjs +3 -3
- package/fesm2022/c8y-ngx-components-widgets-implementations-kpi.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-implementations-linear-gauge.mjs +4 -4
- package/fesm2022/c8y-ngx-components-widgets-implementations-linear-gauge.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components.mjs +145 -3
- package/fesm2022/c8y-ngx-components.mjs.map +1 -1
- package/index.d.ts +123 -2
- package/index.d.ts.map +1 -1
- package/locales/locales.pot +14 -8
- package/package.json +1 -1
- package/widgets/implementations/datapoints-graph/index.d.ts +6 -0
- package/widgets/implementations/datapoints-graph/index.d.ts.map +1 -1
- package/widgets/implementations/datapoints-table/index.d.ts.map +1 -1
- package/widgets/implementations/info-gauge/index.d.ts.map +1 -1
|
@@ -3,10 +3,10 @@ import { Injectable, Pipe, EventEmitter, Output, Input, Directive, ChangeDetecti
|
|
|
3
3
|
import * as i1$3 from '@angular/forms';
|
|
4
4
|
import { ReactiveFormsModule, Validators } from '@angular/forms';
|
|
5
5
|
import * as i1$2 from '@c8y/ngx-components';
|
|
6
|
-
import { DynamicComponentAlertAggregator, DynamicComponentAlert, CommonModule, DocsModule, DynamicComponentModule, ListGroupModule, DismissAlertStrategy, CoreModule } from '@c8y/ngx-components';
|
|
6
|
+
import { translateDatapointLabel, translateDatapointUnit, DynamicComponentAlertAggregator, DynamicComponentAlert, CommonModule, DocsModule, DynamicComponentModule, ListGroupModule, DatapointUnitPipe, DismissAlertStrategy, CoreModule } from '@c8y/ngx-components';
|
|
7
7
|
import * as i2$1 from '@c8y/ngx-components/context-dashboard';
|
|
8
8
|
import * as i5$1 from '@c8y/ngx-components/datapoint-selector';
|
|
9
|
-
import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
|
|
9
|
+
import { DatapointLabelPipe, DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
|
|
10
10
|
import * as i5 from '@c8y/ngx-components/global-context';
|
|
11
11
|
import { REFRESH_OPTION, GlobalContextWidgetWrapperComponent, AGGREGATION_LABELS, AGGREGATION_VALUES_ARR } from '@c8y/ngx-components/global-context';
|
|
12
12
|
import { INTERVAL_VALUES } from '@c8y/ngx-components/interval-picker';
|
|
@@ -713,8 +713,10 @@ class ColumnTitlePipe {
|
|
|
713
713
|
* @returns The formatted string with label, unit, and render type.
|
|
714
714
|
*/
|
|
715
715
|
transform(columnHeader) {
|
|
716
|
-
const label = columnHeader.label.trim();
|
|
717
|
-
const unit = columnHeader.unit
|
|
716
|
+
const label = translateDatapointLabel(columnHeader.label, this.translateService).trim();
|
|
717
|
+
const unit = columnHeader.unit
|
|
718
|
+
? `[${translateDatapointUnit(columnHeader.unit.trim(), this.translateService)}]`
|
|
719
|
+
: '';
|
|
718
720
|
const renderType = columnHeader.renderType
|
|
719
721
|
? this.translateService.instant(RENDER_TYPES_LABELS[columnHeader.renderType])
|
|
720
722
|
: '';
|
|
@@ -919,7 +921,7 @@ class DatapointsTableComponent {
|
|
|
919
921
|
}));
|
|
920
922
|
}
|
|
921
923
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
922
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: DatapointsTableComponent, isStandalone: true, selector: "c8y-datapoints-table", inputs: { aggregationType: "aggregationType", datapointsTableItems: "datapointsTableItems", devicesColumnHeaders: "devicesColumnHeaders", decimalPlaces: "decimalPlaces", hasMultipleDatapoints: "hasMultipleDatapoints", isLoading: "isLoading", seriesWithoutPermissionToReadCount: "seriesWithoutPermissionToReadCount" }, outputs: { isScrolling: "isScrolling" }, host: { classAttribute: "d-col flex-grow" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasNoPermissionsToReadAnyMeasurement; else missingAllPermissions\">\n <div class=\"c8y-cq-440\">\n <div\n class=\"hidden-xs c8y-list__item c8y-list--timeline hidden-cq\"\n [ngClass]=\"{ 'separator-top-bottom': devicesColumnHeaders.length > 0 }\"\n >\n <div class=\"d-flex container-fluid\">\n <div class=\"c8y-list--timeline__item__date\"></div>\n <div class=\"c8y-list__item__block flex-grow min-width-0\">\n <div class=\"c8y-list__item__body\">\n <div class=\"d-flex row\">\n <ng-container *ngIf=\"hasMultipleDatapoints\">\n <div\n class=\"min-width-0\"\n [title]=\"'Device' | translate\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n >\n <span class=\"text-medium text-truncate\">\n {{ 'Device' | translate }}\n </span>\n </div>\n </ng-container>\n <!-- Data points column headers -->\n <ng-container *ngFor=\"let header of devicesColumnHeaders\">\n <div\n class=\"min-width-0\"\n title=\"{{ header | columnTitle }}\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n >\n <span class=\"text-medium text-truncate\">\n {{ header.label }} {{ header.unit }}\n </span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- The record list -->\n <ng-container *ngIf=\"!isLoading; else loading\">\n <ng-container *ngIf=\"datapointsTableItems.length; else emptyState\">\n <c8y-list-group\n class=\"p-t-8 flex-grow c8y-cq-440\"\n c8yVirtualScrollListener\n (scrolled)=\"onListScrolled()\"\n (scrolledToTop)=\"onListScrolledToTop()\"\n >\n <c8y-li-timeline\n *c8yFor=\"\n let tableItem of { data: datapointsTableItems, res: null };\n enableVirtualScroll: true;\n virtualScrollElementSize: 48;\n virtualScrollStrategy: 'fixed'\n \"\n >\n {{ tableItem.dateAndTime | c8yDate: 'mediumDate' }}\n {{\n tableItem.dateAndTime\n | c8yDate: 'mediumTime'\n | adjustAggregatedTimeRange: aggregationType\n }}\n <c8y-li>\n <c8y-li-body>\n <div class=\"d-flex row\">\n <div\n class=\"min-width-0\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n *ngIf=\"devicesColumnHeaders.length > 1\"\n [attr.data-label]=\"'Device' | translate\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{ tableItem.deviceName }}\"\n >\n {{ tableItem.deviceName }}\n </div>\n </div>\n <!-- Data point value row cells -->\n <ng-container *ngFor=\"let row of tableItem.rowItems\">\n <ng-container *ngIf=\"row !== null; else emptyRowContent\">\n <ng-container [ngSwitch]=\"row.renderType\">\n <div\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n *ngSwitchCase=\"'min'\"\n [attr.data-label]=\"row.label\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </div>\n </div>\n <div\n class=\"col-md-4\"\n [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n *ngSwitchCase=\"'max'\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\"\n >\n {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n </div>\n </div>\n <div\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n *ngSwitchCase=\"'area'\"\n >\n <span\n class=\"text-truncate\"\n title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </span>\n ...\n <span\n class=\"text-truncate\"\n title=\"{{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\"\n [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n </span>\n </div>\n <div\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n *ngSwitchDefault\n >\n <span\n class=\"text-truncate\"\n title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #emptyRowContent>\n <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n </ng-template>\n </ng-container>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-li-timeline>\n </c8y-list-group>\n </ng-container>\n </ng-container>\n</ng-container>\n<ng-template #loading>\n <c8y-loading></c8y-loading>\n</ng-template>\n<ng-template #emptyState>\n <div class=\"p-relative p-l-24\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-alert-idle'\"\n [title]=\"'No data to display.' | translate\"\n [horizontal]=\"true\"\n data-cy=\"datapoints-table-list--empty-state\"\n >\n <p c8y-guide-docs>\n <small translate>\n Find out more in the\n <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n user documentation\n </a>\n .\n </small>\n </p>\n </c8y-ui-empty-state>\n </div>\n</ng-template>\n<ng-template #missingAllPermissions>\n <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n <div class=\"center-block\">\n <c8y-dynamic-component-alerts\n [alerts]=\"missingAllPermissionsAlert\"\n ></c8y-dynamic-component-alerts>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.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$2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1$2.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1$2.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }, { kind: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
924
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DatapointsTableComponent, isStandalone: true, selector: "c8y-datapoints-table", inputs: { aggregationType: "aggregationType", datapointsTableItems: "datapointsTableItems", devicesColumnHeaders: "devicesColumnHeaders", decimalPlaces: "decimalPlaces", hasMultipleDatapoints: "hasMultipleDatapoints", isLoading: "isLoading", seriesWithoutPermissionToReadCount: "seriesWithoutPermissionToReadCount" }, outputs: { isScrolling: "isScrolling" }, host: { classAttribute: "d-col flex-grow" }, usesOnChanges: true, ngImport: i0, template: "@if (!hasNoPermissionsToReadAnyMeasurement) {\n <div class=\"c8y-cq-440\">\n <div\n class=\"hidden-xs c8y-list__item c8y-list--timeline hidden-cq\"\n [ngClass]=\"{ 'separator-top-bottom': devicesColumnHeaders.length > 0 }\"\n >\n <div class=\"d-flex container-fluid\">\n <div class=\"c8y-list--timeline__item__date\"></div>\n <div class=\"c8y-list__item__block flex-grow min-width-0\">\n <div class=\"c8y-list__item__body\">\n <div class=\"d-flex row\">\n @if (hasMultipleDatapoints) {\n <div\n class=\"min-width-0\"\n [title]=\"'Device' | translate\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n >\n <span class=\"text-medium text-truncate\">\n {{ 'Device' | translate }}\n </span>\n </div>\n }\n <!-- Data points column headers -->\n @for (header of devicesColumnHeaders; track header) {\n <div\n class=\"min-width-0\"\n title=\"{{ header | columnTitle }}\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n >\n <span class=\"text-medium text-truncate\">\n {{ header.label | datapointLabel }} {{ header.unit | datapointUnit }}\n </span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- The record list -->\n @if (!isLoading) {\n @if (datapointsTableItems.length) {\n <c8y-list-group\n class=\"p-t-8 flex-grow c8y-cq-440\"\n c8yVirtualScrollListener\n (scrolled)=\"onListScrolled()\"\n (scrolledToTop)=\"onListScrolledToTop()\"\n >\n <c8y-li-timeline\n *c8yFor=\"\n let tableItem of { data: datapointsTableItems, res: null };\n enableVirtualScroll: true;\n virtualScrollElementSize: 48;\n virtualScrollStrategy: 'fixed'\n \"\n >\n {{ tableItem.dateAndTime | c8yDate: 'mediumDate' }}\n {{\n tableItem.dateAndTime\n | c8yDate: 'mediumTime'\n | adjustAggregatedTimeRange: aggregationType\n }}\n <c8y-li>\n <c8y-li-body>\n <div class=\"d-flex row\">\n @if (devicesColumnHeaders.length > 1) {\n <div\n class=\"min-width-0\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n [attr.data-label]=\"'Device' | translate\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{ tableItem.deviceName }}\"\n >\n {{ tableItem.deviceName }}\n </div>\n </div>\n }\n <!-- Data point value row cells -->\n @for (row of tableItem.rowItems; track $index) {\n @if (row !== null) {\n @switch (row.renderType) {\n @case ('min') {\n <div\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n [attr.data-label]=\"row.label\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{\n row.value.min ?? '' | number: getFractionSize(row.value.min)\n }}\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </div>\n </div>\n }\n @case ('max') {\n <div\n class=\"col-md-4\"\n [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{\n row.value.max ?? '' | number: getFractionSize(row.value.max)\n }}\"\n >\n {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n </div>\n </div>\n }\n @case ('area') {\n <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\">\n <span\n class=\"text-truncate\"\n title=\"{{\n row.value.min ?? '' | number: getFractionSize(row.value.min)\n }}\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </span>\n ...\n <span\n class=\"text-truncate\"\n title=\"{{\n row.value.max ?? '' | number: getFractionSize(row.value.max)\n }}\"\n [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n </span>\n </div>\n }\n @default {\n <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\">\n <span\n class=\"text-truncate\"\n title=\"{{\n row.value.min ?? '' | number: getFractionSize(row.value.min)\n }}\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </span>\n </div>\n }\n }\n } @else {\n <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n }\n }\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-li-timeline>\n </c8y-list-group>\n } @else {\n <div class=\"p-relative p-l-24\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-alert-idle'\"\n [title]=\"'No data to display.' | translate\"\n [horizontal]=\"true\"\n data-cy=\"datapoints-table-list--empty-state\"\n >\n <p c8y-guide-docs>\n <small translate>\n Find out more in the\n <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n user documentation\n </a>\n .\n </small>\n </p>\n </c8y-ui-empty-state>\n </div>\n }\n } @else {\n <c8y-loading></c8y-loading>\n }\n} @else {\n <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n <div class=\"center-block\">\n <c8y-dynamic-component-alerts\n [alerts]=\"missingAllPermissionsAlert\"\n ></c8y-dynamic-component-alerts>\n </div>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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$2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1$2.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1$2.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }, { kind: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "c8yDate" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }, { kind: "pipe", type: DatapointUnitPipe, name: "datapointUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
923
925
|
}
|
|
924
926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointsTableComponent, decorators: [{
|
|
925
927
|
type: Component,
|
|
@@ -928,12 +930,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
928
930
|
ApplyRangeClassPipe,
|
|
929
931
|
ColumnTitlePipe,
|
|
930
932
|
CommonModule,
|
|
933
|
+
DatapointLabelPipe,
|
|
934
|
+
DatapointUnitPipe,
|
|
931
935
|
DocsModule,
|
|
932
936
|
DynamicColumnDirective,
|
|
933
937
|
DynamicComponentModule,
|
|
934
938
|
ListGroupModule,
|
|
935
939
|
VirtualScrollListenerDirective
|
|
936
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
940
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hasNoPermissionsToReadAnyMeasurement) {\n <div class=\"c8y-cq-440\">\n <div\n class=\"hidden-xs c8y-list__item c8y-list--timeline hidden-cq\"\n [ngClass]=\"{ 'separator-top-bottom': devicesColumnHeaders.length > 0 }\"\n >\n <div class=\"d-flex container-fluid\">\n <div class=\"c8y-list--timeline__item__date\"></div>\n <div class=\"c8y-list__item__block flex-grow min-width-0\">\n <div class=\"c8y-list__item__body\">\n <div class=\"d-flex row\">\n @if (hasMultipleDatapoints) {\n <div\n class=\"min-width-0\"\n [title]=\"'Device' | translate\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n >\n <span class=\"text-medium text-truncate\">\n {{ 'Device' | translate }}\n </span>\n </div>\n }\n <!-- Data points column headers -->\n @for (header of devicesColumnHeaders; track header) {\n <div\n class=\"min-width-0\"\n title=\"{{ header | columnTitle }}\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n >\n <span class=\"text-medium text-truncate\">\n {{ header.label | datapointLabel }} {{ header.unit | datapointUnit }}\n </span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- The record list -->\n @if (!isLoading) {\n @if (datapointsTableItems.length) {\n <c8y-list-group\n class=\"p-t-8 flex-grow c8y-cq-440\"\n c8yVirtualScrollListener\n (scrolled)=\"onListScrolled()\"\n (scrolledToTop)=\"onListScrolledToTop()\"\n >\n <c8y-li-timeline\n *c8yFor=\"\n let tableItem of { data: datapointsTableItems, res: null };\n enableVirtualScroll: true;\n virtualScrollElementSize: 48;\n virtualScrollStrategy: 'fixed'\n \"\n >\n {{ tableItem.dateAndTime | c8yDate: 'mediumDate' }}\n {{\n tableItem.dateAndTime\n | c8yDate: 'mediumTime'\n | adjustAggregatedTimeRange: aggregationType\n }}\n <c8y-li>\n <c8y-li-body>\n <div class=\"d-flex row\">\n @if (devicesColumnHeaders.length > 1) {\n <div\n class=\"min-width-0\"\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n [attr.data-label]=\"'Device' | translate\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{ tableItem.deviceName }}\"\n >\n {{ tableItem.deviceName }}\n </div>\n </div>\n }\n <!-- Data point value row cells -->\n @for (row of tableItem.rowItems; track $index) {\n @if (row !== null) {\n @switch (row.renderType) {\n @case ('min') {\n <div\n [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n [attr.data-label]=\"row.label\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{\n row.value.min ?? '' | number: getFractionSize(row.value.min)\n }}\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </div>\n </div>\n }\n @case ('max') {\n <div\n class=\"col-md-4\"\n [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n >\n <div\n class=\"text-truncate\"\n title=\"{{\n row.value.max ?? '' | number: getFractionSize(row.value.max)\n }}\"\n >\n {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n </div>\n </div>\n }\n @case ('area') {\n <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\">\n <span\n class=\"text-truncate\"\n title=\"{{\n row.value.min ?? '' | number: getFractionSize(row.value.min)\n }}\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </span>\n ...\n <span\n class=\"text-truncate\"\n title=\"{{\n row.value.max ?? '' | number: getFractionSize(row.value.max)\n }}\"\n [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n </span>\n </div>\n }\n @default {\n <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\">\n <span\n class=\"text-truncate\"\n title=\"{{\n row.value.min ?? '' | number: getFractionSize(row.value.min)\n }}\"\n [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n >\n {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n </span>\n </div>\n }\n }\n } @else {\n <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n }\n }\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-li-timeline>\n </c8y-list-group>\n } @else {\n <div class=\"p-relative p-l-24\">\n <c8y-ui-empty-state\n [icon]=\"'c8y-alert-idle'\"\n [title]=\"'No data to display.' | translate\"\n [horizontal]=\"true\"\n data-cy=\"datapoints-table-list--empty-state\"\n >\n <p c8y-guide-docs>\n <small translate>\n Find out more in the\n <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n user documentation\n </a>\n .\n </small>\n </p>\n </c8y-ui-empty-state>\n </div>\n }\n } @else {\n <c8y-loading></c8y-loading>\n }\n} @else {\n <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n <div class=\"center-block\">\n <c8y-dynamic-component-alerts\n [alerts]=\"missingAllPermissionsAlert\"\n ></c8y-dynamic-component-alerts>\n </div>\n </div>\n}\n" }]
|
|
937
941
|
}], propDecorators: { aggregationType: [{
|
|
938
942
|
type: Input
|
|
939
943
|
}], datapointsTableItems: [{
|