@smartbit4all/ng-client 7.2.11 → 7.2.12

package/fesm2022/smartbit4all-ng-client.mjs

@@ -52,6 +52,7 @@ import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } fr
 import { Chart, registerables } from 'chart.js';
 import AnnotationPlugin from 'chartjs-plugin-annotation';
 import ZoomPlugin from 'chartjs-plugin-zoom';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { MatToolbar } from '@angular/material/toolbar';
 
 /**
@@ -7622,7 +7623,7 @@ var ToolbarDirection;
     ToolbarDirection["VERTICAL"] = "VERTICAL";
 })(ToolbarDirection || (ToolbarDirection = {}));
 
-let ApiModule$1 = class ApiModule {
+let ApiModule$3 = class ApiModule {
     static forRoot(configurationFactory) {
         return {
             ngModule: ApiModule,
@@ -7642,7 +7643,7 @@ let ApiModule$1 = class ApiModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule$3, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -7650,7 +7651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     exports: [],
                     providers: []
                 }]
-        }], ctorParameters: () => [{ type: ApiModule$1, decorators: [{
+        }], ctorParameters: () => [{ type: ApiModule$3, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -18466,7 +18467,7 @@ var GridViewDescriptorKindEnum;
 })(GridViewDescriptorKindEnum || (GridViewDescriptorKindEnum = {}));
 ;
 
-class ApiModule {
+let ApiModule$2 = class ApiModule {
     static forRoot(configurationFactory) {
         return {
             ngModule: ApiModule,
@@ -18485,8 +18486,8 @@ class ApiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule$2, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -18494,7 +18495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     exports: [],
                     providers: []
                 }]
-        }], ctorParameters: () => [{ type: ApiModule, decorators: [{
+        }], ctorParameters: () => [{ type: ApiModule$2, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -20614,6 +20615,42 @@ var GeoMapTextType;
     GeoMapTextType["HTML"] = "HTML";
 })(GeoMapTextType || (GeoMapTextType = {}));
 
+let ApiModule$1 = class ApiModule {
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration$1, useFactory: configurationFactory }]
+        };
+    }
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule$1, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
+                }]
+        }], ctorParameters: () => [{ type: ApiModule$1, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
+                }] }] });
+
 class AbstractMap {
     constructor(el, cd, itemFactory) {
         this.el = el;
@@ -21860,6 +21897,42 @@ const DrawTime = {
     AfterDraw: 'afterDraw'
 };
 
+class ApiModule {
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration, useFactory: configurationFactory }]
+        };
+    }
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
+                }]
+        }], ctorParameters: () => [{ type: ApiModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
+                }] }] });
+
 function deepMerge(target, source) {
     for (const key of Object.keys(source)) {
         if (source[key] instanceof Object && target[key]) {
@@ -22198,7 +22271,7 @@ class SmartDiagramComponent {
         this.elementSelect = output();
         this.canvasClick = output();
         this.dataClick = output();
-        this.aspectClass = 'default-aspect-ratio';
+        this.aspectClass = "default-aspect-ratio";
         this.viewInitialized = false;
         /** The screen component this diagram belongs to; the source of its uuid. (ADR-0005) */
         this.smartComponent = injectSmartComponent();
@@ -22219,14 +22292,16 @@ class SmartDiagramComponent {
         Chart.register(...registerables);
         Chart.register(AnnotationPlugin);
         Chart.register(ZoomPlugin);
+        Chart.register(ChartDataLabels);
+        Chart.defaults.set("plugins.datalabels", { display: false });
     }
     ngOnChanges(changes) {
-        if (changes['diagramModel']) {
-            this.diagramModel = changes['diagramModel'].currentValue;
+        if (changes["diagramModel"]) {
+            this.diagramModel = changes["diagramModel"].currentValue;
             this.setUp();
         }
-        if (changes['uuid'] && this.uuid !== changes['uuid'].currentValue) {
-            this.uuid = changes['uuid'].currentValue;
+        if (changes["uuid"] && this.uuid !== changes["uuid"].currentValue) {
+            this.uuid = changes["uuid"].currentValue;
             this.load();
         }
     }
@@ -22260,7 +22335,9 @@ class SmartDiagramComponent {
             return;
         }
         let options = undefined;
-        const type = !!this.diagramModel.descriptor?.type ? this.diagramModel.descriptor.type : '';
+        const type = !!this.diagramModel.descriptor?.type
+            ? this.diagramModel.descriptor.type
+            : "";
         const factory = this.diagramOptionProvider.getFactory(type);
         this.type = factory.chartJsType;
         options = factory.createOptions(this.diagramModel.diagramData);
@@ -22298,10 +22375,14 @@ class SmartDiagramComponent {
     }
     onCanvasClick(event) {
         if (this.chart) {
-            const element = this.chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);
-            const dataset = this.chart.getElementsAtEventForMode(event, 'dataset', { intersect: true }, false);
+            const element = this.chart.getElementsAtEventForMode(event, "nearest", { intersect: true }, false);
+            const dataset = this.chart.getElementsAtEventForMode(event, "dataset", { intersect: true }, false);
             if (element && element[0] && dataset) {
-                this.onDataSelect({ originalEvent: event, element: element[0], dataset: dataset });
+                this.onDataSelect({
+                    originalEvent: event,
+                    element: element[0],
+                    dataset: dataset,
+                });
             }
         }
         this.handleChartClick(event);
@@ -22314,17 +22395,30 @@ class SmartDiagramComponent {
                 legend: {
                     display: descriptor.showLegendForChart ?? true,
                 },
+                datalabels: {
+                    display: descriptor.showDataLabels ?? true,
+                    anchor: "end",
+                    align: "end",
+                    clamp: true,
+                    formatter: (value) => {
+                        // scatter/bubble values are objects {x, y}
+                        if (value !== null && typeof value === "object") {
+                            return value.y ?? value.r ?? "";
+                        }
+                        return value;
+                    },
+                },
                 ...(descriptor.title
                     ? {
                         title: {
                             display: true,
-                            text: descriptor.title.content ?? '',
+                            text: descriptor.title.content ?? "",
                             color: descriptor.title.color
                                 ? `rgba(${descriptor.title.color.red ?? 0},
                        ${descriptor.title.color.green ?? 0},
                        ${descriptor.title.color.blue ?? 0},
                        ${descriptor.title.color.alpha ?? 1})`
-                                : '#000000ff',
+                                : "#000000ff",
                             font: {
                                 size: descriptor.title.size ?? undefined,
                                 weight: descriptor.title.weight ?? undefined,
@@ -22334,6 +22428,26 @@ class SmartDiagramComponent {
                         },
                     }
                     : {}),
+                ...(descriptor.subTitle
+                    ? {
+                        subtitle: {
+                            display: true,
+                            text: descriptor.subTitle.content ?? "",
+                            color: descriptor.subTitle.color
+                                ? `rgba(${descriptor.subTitle.color.red ?? 0},
+                     ${descriptor.subTitle.color.green ?? 0},
+                     ${descriptor.subTitle.color.blue ?? 0},
+                     ${descriptor.subTitle.color.alpha ?? 1})`
+                                : "#000000ff",
+                            font: {
+                                size: descriptor.subTitle.size ?? undefined,
+                                weight: descriptor.subTitle.weight ?? undefined,
+                                style: descriptor.subTitle.style ?? undefined,
+                                family: descriptor.subTitle.family ?? undefined,
+                            },
+                        },
+                    }
+                    : {}),
             },
             scales: {},
         };
@@ -22373,7 +22487,8 @@ class SmartDiagramComponent {
         if (descriptor.shapes) {
             descriptor.shapes.forEach((shape, index) => {
                 options.plugins.annotation = options.plugins.annotation || {};
-                options.plugins.annotation.annotations = options.plugins.annotation.annotations || {};
+                options.plugins.annotation.annotations =
+                    options.plugins.annotation.annotations || {};
                 let borderColor = `rgba(
          ${shape.borderColor?.red ?? 0},
          ${shape.borderColor?.green ?? 0},
@@ -22397,7 +22512,7 @@ class SmartDiagramComponent {
                     borderDash = undefined;
                 }
                 const baseAnnotation = {
-                    type: shape.shapeType ?? 'line',
+                    type: shape.shapeType ?? "line",
                     backgroundColor: backgroundColor ?? undefined,
                     borderColor: borderColor ?? undefined,
                     borderWidth: shape.borderWidth ?? 1,
@@ -22405,9 +22520,9 @@ class SmartDiagramComponent {
                     drawTime: shape.drawTime ?? undefined,
                 };
                 switch (shape.shapeType) {
-                    case 'box':
-                    case 'line':
-                    case 'ellipse':
+                    case "box":
+                    case "line":
+                    case "ellipse":
                         options.plugins.annotation.annotations[`shape${index}`] = {
                             ...baseAnnotation,
                             xMin: shape.xMin ?? undefined,
@@ -22416,7 +22531,7 @@ class SmartDiagramComponent {
                             yMax: shape.yMax ?? undefined,
                         };
                         break;
-                    case 'label':
+                    case "label":
                         options.plugins.annotation.annotations[`shape${index}`] = {
                             ...baseAnnotation,
                             xValue: shape.xMin ?? undefined,
@@ -22429,12 +22544,12 @@ class SmartDiagramComponent {
                                 weight: shape.labelText?.weight ?? undefined,
                                 style: shape.labelText?.style ?? undefined,
                             },
-                            backgroundColor: 'transparent',
-                            borderColor: 'transparent',
+                            backgroundColor: "transparent",
+                            borderColor: "transparent",
                         };
                         break;
-                    case 'point':
-                    case 'polygon':
+                    case "point":
+                    case "polygon":
                         options.plugins.annotation.annotations[`shape${index}`] = {
                             ...baseAnnotation,
                             xValue: shape.xMin ?? undefined,
@@ -22454,13 +22569,13 @@ class SmartDiagramComponent {
         ${descriptor.backgroundColor?.green ?? 0},
         ${descriptor.backgroundColor?.blue ?? 0},
         ${descriptor.backgroundColor?.alpha ?? 1})`;
-            let id = 'customCanvasBackgroundColor';
+            let id = "customCanvasBackgroundColor";
             const plugin = {
                 id: id,
                 beforeDraw: (chart, args, options) => {
                     const { ctx, chartArea } = chart;
                     ctx.save();
-                    ctx.globalCompositeOperation = 'destination-over';
+                    ctx.globalCompositeOperation = "destination-over";
                     ctx.fillStyle = backgroundColor;
                     ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
                     ctx.restore();
@@ -22485,7 +22600,7 @@ class SmartDiagramComponent {
         const canvas = event.target;
         const chart = Chart.getChart(canvas);
         if (chart) {
-            const elements = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);
+            const elements = chart.getElementsAtEventForMode(event, "nearest", { intersect: true }, false);
             if (elements.length === 0) {
                 return;
             }
@@ -22543,14 +22658,14 @@ class SmartDiagramComponent {
     }
     applyChartClass() {
         switch (this.type) {
-            case 'pie':
-            case 'doughnut':
-            case 'polarArea':
-            case 'radar':
-                this.aspectClass = 'pie-aspect-ratio';
+            case "pie":
+            case "doughnut":
+            case "polarArea":
+            case "radar":
+                this.aspectClass = "pie-aspect-ratio";
                 break;
             default:
-                this.aspectClass = 'default-aspect-ratio';
+                this.aspectClass = "default-aspect-ratio";
         }
     }
     calcStyle(style) {
@@ -22561,10 +22676,10 @@ class SmartDiagramComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartDiagramComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-diagram', imports: [NgStyle], template: "<div\r\n  class=\"chart-host\"\r\n  [class]=\"aspectClass\"\r\n  [ngStyle]=\"calcStyle($safeNavigationMigration(diagramModel?.descriptor?.style))\"\r\n>\r\n  <div class=\"chart-container\">\r\n    <canvas #chartCanvas role=\"img\" (click)=\"onCanvasClick($event)\"></canvas>\r\n  </div>\r\n</div>\r\n", styles: [".chart-host{display:flex}.chart-container{position:relative}.default-aspect-ratio .chart-container{width:100%;aspect-ratio:1.78}.pie-aspect-ratio .chart-container{width:100%;aspect-ratio:1}\n"] }]
+            args: [{ selector: "smart-diagram", imports: [NgStyle], template: "<div\r\n  class=\"chart-host\"\r\n  [class]=\"aspectClass\"\r\n  [ngStyle]=\"calcStyle($safeNavigationMigration(diagramModel?.descriptor?.style))\"\r\n>\r\n  <div class=\"chart-container\">\r\n    <canvas #chartCanvas role=\"img\" (click)=\"onCanvasClick($event)\"></canvas>\r\n  </div>\r\n</div>\r\n", styles: [".chart-host{display:flex}.chart-container{position:relative}.default-aspect-ratio .chart-container{width:100%;aspect-ratio:1.78}.pie-aspect-ratio .chart-container{width:100%;aspect-ratio:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chartCanvas: [{
                 type: ViewChild,
-                args: ['chartCanvas']
+                args: ["chartCanvas"]
             }], uuid: [{
                 type: Input
             }], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: true }] }], diagramModel: [{