@esfaenza/es-charts 13.1.5 → 13.1.8

package/fesm2015/esfaenza-es-charts.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChild, InjectionToken, Inject, Directive, PLATFORM_ID, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
+import * as i5 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as am4core from '@amcharts/amcharts4/core';
 import * as am4charts from '@amcharts/amcharts4/charts';
-import * as i2 from '@esfaenza/extensions';
+import * as i3 from '@esfaenza/extensions';
 
 /**
  * Adapter Base da reimplementare per trasformare i dati da una libreria di grafici a questa per evitare di riscrivere tutto il codice di
@@ -223,13 +223,14 @@ class LegendPad {
  */
 class Limit {
     /** @ignore */
-    constructor(upper, upperLabel, upperColor, lower, lowerLabel, lowerColor) {
+    constructor(upper, upperlabel, uppercolor, lower, lowerlabel, lowercolor, fillColor = "") {
         this.upper = upper;
-        this.upperLabel = upperLabel;
-        this.upperColor = upperColor;
+        this.upperlabel = upperlabel;
+        this.uppercolor = uppercolor;
         this.lower = lower;
-        this.lowerLabel = lowerLabel;
-        this.lowerColor = lowerColor;
+        this.lowerlabel = lowerlabel;
+        this.lowercolor = lowercolor;
+        this.fillColor = fillColor;
     }
 }
 
@@ -358,7 +359,7 @@ class PageChartSelector {
     }
 }
 PageChartSelector.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PageChartSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageChartSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: PageChartSelector, selector: "chart-pager", inputs: { Items: "Items", Dtos: "Dtos", BrowseDelayMs: "BrowseDelayMs", StartIndex: "StartIndex" }, outputs: { onPageChange: "onPageChange" }, queries: [{ propertyName: "headerInner_tr", first: true, predicate: ["header_inner"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"(Items || Dtos) && (Items || Dtos).length > 0\" class=\"pcs-no-selection\">\r\n    <div class=\"pcs-button pcs-backward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"currentpage != 1 && Previous(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\"  [style.cursor]=\"currentpage == 1 ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-left\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div class=\"pcs-infos\">\r\n        <ng-container *ngIf=\"headerInner_tr\">\r\n            <ng-container *ngTemplateOutlet=\"headerInner_tr; context : {$implicit: (Items || Dtos)[currentpage - 1]}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"pcs-button pcs-forward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"(Items || Dtos).length != currentpage && Next(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\" [style.cursor]=\"(Items || Dtos).length == currentpage ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-right\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div style=\"clear: both;\"></div>\r\n</div>", styles: [".pcs-button{width:60px}.pcs-forward{float:right;text-align:end}.pcs-backward{float:left}.pcs-svg-header{width:57px;height:40px}.pcs-svg-button-container{outline:currentcolor none medium}.pcs-svg-arrow{pointer-events:none;fill:#555}.pcs-svg-arrow-right{transform:translate(44px,36px) rotate(180deg)}.pcs-svg-arrow-left{transform:translate(13px,4px)}.pcs-svg-button{fill:#d9d9d9;stroke:#fff;fill-opacity:1;stroke-opacity:1}.pcs-svg-button:hover{fill:#a3a3a3;cursor:pointer}.pcs-infos{width:calc(100% - 120px);height:44px;float:left}.pcs-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PageChartSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: PageChartSelector, selector: "chart-pager", inputs: { Items: "Items", Dtos: "Dtos", BrowseDelayMs: "BrowseDelayMs", StartIndex: "StartIndex" }, outputs: { onPageChange: "onPageChange" }, queries: [{ propertyName: "headerInner_tr", first: true, predicate: ["header_inner"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"(Items || Dtos) && (Items || Dtos).length > 0\" class=\"pcs-no-selection\">\r\n    <div class=\"pcs-button pcs-backward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"currentpage != 1 && Previous(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\"  [style.cursor]=\"currentpage == 1 ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-left\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div class=\"pcs-infos\">\r\n        <ng-container *ngIf=\"headerInner_tr\">\r\n            <ng-container *ngTemplateOutlet=\"headerInner_tr; context : {$implicit: (Items || Dtos)[currentpage - 1]}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"pcs-button pcs-forward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"(Items || Dtos).length != currentpage && Next(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\" [style.cursor]=\"(Items || Dtos).length == currentpage ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-right\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div style=\"clear: both;\"></div>\r\n</div>", styles: [".pcs-button{width:60px}.pcs-forward{float:right;text-align:end}.pcs-backward{float:left}.pcs-svg-header{width:57px;height:40px}.pcs-svg-button-container{outline:currentcolor none medium}.pcs-svg-arrow{pointer-events:none;fill:#555}.pcs-svg-arrow-right{transform:translate(44px,36px) rotate(180deg)}.pcs-svg-arrow-left{transform:translate(13px,4px)}.pcs-svg-button{fill:#d9d9d9;stroke:#fff;fill-opacity:1;stroke-opacity:1}.pcs-svg-button:hover{fill:#a3a3a3;cursor:pointer}.pcs-infos{width:calc(100% - 120px);height:44px;float:left}.pcs-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PageChartSelector, decorators: [{
             type: Component,
             args: [{ selector: "chart-pager", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"(Items || Dtos) && (Items || Dtos).length > 0\" class=\"pcs-no-selection\">\r\n    <div class=\"pcs-button pcs-backward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"currentpage != 1 && Previous(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\"  [style.cursor]=\"currentpage == 1 ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-left\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div class=\"pcs-infos\">\r\n        <ng-container *ngIf=\"headerInner_tr\">\r\n            <ng-container *ngTemplateOutlet=\"headerInner_tr; context : {$implicit: (Items || Dtos)[currentpage - 1]}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"pcs-button pcs-forward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"(Items || Dtos).length != currentpage && Next(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\" [style.cursor]=\"(Items || Dtos).length == currentpage ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-right\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div style=\"clear: both;\"></div>\r\n</div>", styles: [".pcs-button{width:60px}.pcs-forward{float:right;text-align:end}.pcs-backward{float:left}.pcs-svg-header{width:57px;height:40px}.pcs-svg-button-container{outline:currentcolor none medium}.pcs-svg-arrow{pointer-events:none;fill:#555}.pcs-svg-arrow-right{transform:translate(44px,36px) rotate(180deg)}.pcs-svg-arrow-left{transform:translate(13px,4px)}.pcs-svg-button{fill:#d9d9d9;stroke:#fff;fill-opacity:1;stroke-opacity:1}.pcs-svg-button:hover{fill:#a3a3a3;cursor:pointer}.pcs-infos{width:calc(100% - 120px);height:44px;float:left}.pcs-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}\n"] }]
@@ -377,113 +378,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: ['header_inner', { static: false }]
             }] } });
 
-/**
- * Token che identifica il Locale di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_LOCALE = new InjectionToken('ESC_LOCALE');
-/**
- * Token che identifica il default per l'utilizzo o meno delle Animazioni per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_ANIMATIONS = new InjectionToken('ESC_ANIMATIONS');
-/**
- * Token che identifica il Tema di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_THEME = new InjectionToken('ESC_THEME');
-/**
- * Token che identifica l'utilizzo o meno del sistema di Log per l'intera libreria
- */
-const ESC_LOGS = new InjectionToken('ESC_LOGS');
-
-/**
- * Classe che si occupa del dispatch delle operazioni di rendering dei grafici utilizzando una coda per permettere ad ogni grafico di avere temi e localizzazione custom
- */
-class ChartDispatcher {
-    /**
-     * @ignore
-     */
-    constructor(logs) {
-        this.logs = logs;
-        /**
-         * Coda di inizializzazioni ancora da eseguire. Quando questa è vuota significa che nessuno sta creando grafici
-         */
-        this.Initializations = [];
-        /**
-         * Lista dei grafici inizializzati e attivi in un dato momento (viene registrata la proprietà **name**). Non è possibile registrare due grafici con lo stesso identificativo
-         */
-        this.InitializedGraphs = [];
-    }
-    /**
-     * Registra un grafico da visualizzare insieme alla propria funzione di creazione. Quest'ultima sarà differita fino a che tutti i grafici
-     * precedentemente registati non hanno finito la fase di inizializzazione
-     *
-     * @param {string} name Identificativo del grafico da registrare
-     * @param {Function} chartCreationFunction Funzione che fisicamente dovrà occuparsi della creazione del grafico
-     */
-    register(name, chartCreationFunction) {
-        if (this.InitializedGraphs.indexOf(name) != -1)
-            throw "Attempting to register a duplicate chart '" + name + "'. Make sure the 'name' properties of your charts are univoque";
-        this.log("DISPATCHER: Registering chart creation function execution for " + name);
-        this.Initializations.push({ name: name, function: chartCreationFunction });
-        if (this.Initializations.length == 1) {
-            this.log("DISPATCHER: Initial drain started");
-            this.drainInitQueues();
-        }
-    }
-    /**
-     * Deregistra un grafico presente. Chiamata generalmente al dispose del grafico in questione quando non dev'essere più mostrato nella pagina corrente
-     *
-     * @param {string} name Identificativo del grafico da deregistrare
-     */
-    deregisterGraph(name) {
-        let index = this.InitializedGraphs.indexOf(name);
-        if (index == -1) {
-            //Questo succede quando si cerca di distruggere il grafico mentre sta venendo graficato
-            this.log("DISPATCHER: Registration missing for chart " + name + " it was probably destroyed during load");
-            return;
-        }
-        this.log("DISPATCHER: Chart deregistered " + name);
-        this.InitializedGraphs.splice(index, 1);
-    }
-    /**
-     * Metodo che esegue in maniera sequenziale le funzioni di inizializzazione dei grafici finché presenti
-     * in modo che nessun grafico possa essere inizializzato contemporaneamente ad un altro.
-     *
-     * Questo è il punto chiave che permette di avere per ogni grafico temi e locale differenti
-     */
-    drainInitQueues() {
-        let toExecute = this.Initializations[0];
-        this.log("DISPATCHER: Executing initialization function for chart " + toExecute.name);
-        toExecute.function().then(() => {
-            this.log("DISPATCHER: initialization for chart " + toExecute.name + " is done");
-            this.InitializedGraphs.push(toExecute.name);
-            this.Initializations.splice(0, 1);
-            if (this.Initializations.length >= 1) {
-                this.log("DISPATCHER: Found queued initializations. Continuing");
-                this.drainInitQueues();
-            }
-            else
-                this.log("DISPATCHER: queue is over, nothing more to do");
-        });
-    }
-    /**
-     * @ignore
-     */
-    log(text) {
-        if (this.logs)
-            console.log("@esfaenza/es-charts: " + text);
-    }
-}
-ChartDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartDispatcher, deps: [{ token: ESC_LOGS }], target: i0.ɵɵFactoryTarget.Injectable });
-ChartDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartDispatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartDispatcher, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [ESC_LOGS]
-                    }] }];
-    } });
-
 /** @ignore */
 const _spiritedaway = 'spiritedaway';
 /** @ignore */
@@ -745,6 +639,113 @@ class ChartLoader {
     }
 }
 
+/**
+ * Token che identifica il Locale di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_LOCALE = new InjectionToken('ESC_LOCALE');
+/**
+ * Token che identifica il default per l'utilizzo o meno delle Animazioni per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_ANIMATIONS = new InjectionToken('ESC_ANIMATIONS');
+/**
+ * Token che identifica il Tema di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_THEME = new InjectionToken('ESC_THEME');
+/**
+ * Token che identifica l'utilizzo o meno del sistema di Log per l'intera libreria
+ */
+const ESC_LOGS = new InjectionToken('ESC_LOGS');
+
+/**
+ * Classe che si occupa del dispatch delle operazioni di rendering dei grafici utilizzando una coda per permettere ad ogni grafico di avere temi e localizzazione custom
+ */
+class ChartDispatcher {
+    /**
+     * @ignore
+     */
+    constructor(logs) {
+        this.logs = logs;
+        /**
+         * Coda di inizializzazioni ancora da eseguire. Quando questa è vuota significa che nessuno sta creando grafici
+         */
+        this.Initializations = [];
+        /**
+         * Lista dei grafici inizializzati e attivi in un dato momento (viene registrata la proprietà **name**). Non è possibile registrare due grafici con lo stesso identificativo
+         */
+        this.InitializedGraphs = [];
+    }
+    /**
+     * Registra un grafico da visualizzare insieme alla propria funzione di creazione. Quest'ultima sarà differita fino a che tutti i grafici
+     * precedentemente registati non hanno finito la fase di inizializzazione
+     *
+     * @param {string} name Identificativo del grafico da registrare
+     * @param {Function} chartCreationFunction Funzione che fisicamente dovrà occuparsi della creazione del grafico
+     */
+    register(name, chartCreationFunction) {
+        if (this.InitializedGraphs.indexOf(name) != -1)
+            throw "Attempting to register a duplicate chart '" + name + "'. Make sure the 'name' properties of your charts are univoque";
+        this.log("DISPATCHER: Registering chart creation function execution for " + name);
+        this.Initializations.push({ name: name, function: chartCreationFunction });
+        if (this.Initializations.length == 1) {
+            this.log("DISPATCHER: Initial drain started");
+            this.drainInitQueues();
+        }
+    }
+    /**
+     * Deregistra un grafico presente. Chiamata generalmente al dispose del grafico in questione quando non dev'essere più mostrato nella pagina corrente
+     *
+     * @param {string} name Identificativo del grafico da deregistrare
+     */
+    deregisterGraph(name) {
+        let index = this.InitializedGraphs.indexOf(name);
+        if (index == -1) {
+            //Questo succede quando si cerca di distruggere il grafico mentre sta venendo graficato
+            this.log("DISPATCHER: Registration missing for chart " + name + " it was probably destroyed during load");
+            return;
+        }
+        this.log("DISPATCHER: Chart deregistered " + name);
+        this.InitializedGraphs.splice(index, 1);
+    }
+    /**
+     * Metodo che esegue in maniera sequenziale le funzioni di inizializzazione dei grafici finché presenti
+     * in modo che nessun grafico possa essere inizializzato contemporaneamente ad un altro.
+     *
+     * Questo è il punto chiave che permette di avere per ogni grafico temi e locale differenti
+     */
+    drainInitQueues() {
+        let toExecute = this.Initializations[0];
+        this.log("DISPATCHER: Executing initialization function for chart " + toExecute.name);
+        toExecute.function().then(() => {
+            this.log("DISPATCHER: initialization for chart " + toExecute.name + " is done");
+            this.InitializedGraphs.push(toExecute.name);
+            this.Initializations.splice(0, 1);
+            if (this.Initializations.length >= 1) {
+                this.log("DISPATCHER: Found queued initializations. Continuing");
+                this.drainInitQueues();
+            }
+            else
+                this.log("DISPATCHER: queue is over, nothing more to do");
+        });
+    }
+    /**
+     * @ignore
+     */
+    log(text) {
+        if (this.logs)
+            console.log("@esfaenza/es-charts: " + text);
+    }
+}
+ChartDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartDispatcher, deps: [{ token: ESC_LOGS }], target: i0.ɵɵFactoryTarget.Injectable });
+ChartDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartDispatcher, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ESC_LOGS]
+                    }] }];
+    } });
+
 /**
  * Componente Grafico Base che gestisce tutte le cose comuni dei vari grafici istanziabili, come la presenza o menu di una legenda,
  * il tema utilizzato, il locale del singolo grafico, ecc ecc...
@@ -1015,6 +1016,15 @@ class BaseChartComponent {
         if (this.logs)
             console.log("@esfaenza/es-charts: " + log);
     }
+    /**
+     * Imposta lo zoom dal **from** al **to**
+     *
+     * @param {Date} from Inizio dello zoom
+     * @param {Date} to Fine dello zoom
+     */
+    setSelection(from, to) {
+        this.ChartService.setSelection(from, to);
+    }
     /**
      * @ignore
      */
@@ -1131,33 +1141,57 @@ class LineChartService {
             yAxis.min = settings.Min;
         if (settings.Max)
             yAxis.max = settings.Max;
-        if (dataConverted.limit) {
-            if (dataConverted.limit.upper != null && dataConverted.limit.upper != undefined) {
-                let range = yAxis.axisRanges.create();
-                range.value = dataConverted.limit.upper;
-                range.label.inside = true;
-                range.label.text = dataConverted.limit.upperLabel;
-                range.label.fill = range.grid.stroke;
-                range.label.verticalCenter = "bottom";
-                range.label.stroke = am4core.color(dataConverted.limit.upperColor || "#F92200");
-                range.grid.stroke = am4core.color(dataConverted.limit.upperColor || "#F92200");
-                range.grid.strokeWidth = 2;
-                range.grid.strokeOpacity = 1;
-            }
-            if (dataConverted.limit.lower != null && dataConverted.limit.lower != undefined) {
-                let range = yAxis.axisRanges.create();
-                range.value = dataConverted.limit.lower;
-                range.label.inside = true;
-                range.label.text = dataConverted.limit.lowerLabel;
-                range.label.fill = range.grid.stroke;
-                range.label.verticalCenter = "bottom";
-                range.label.stroke = am4core.color(dataConverted.limit.lowerColor || "#F92200");
-                range.grid.stroke = am4core.color(dataConverted.limit.lowerColor || "#F92200");
-                range.grid.strokeWidth = 2;
-                range.grid.strokeOpacity = 1;
+        let limitNullOrUndef = dataConverted.limit == null || dataConverted.limit == undefined;
+        let limits = limitNullOrUndef ? [] : !dataConverted.limit.length ? [dataConverted.limit] : dataConverted.limit;
+        if (limits.length > 0) {
+            for (let i = 0; i < limits.length; i++) {
+                let limit = limits[i];
+                if (limit.upper != null && limit.upper != undefined && limit.lower != null && limit.lower != undefined) {
+                    let range = yAxis.axisRanges.create();
+                    range.value = limit.lower;
+                    range.endValue = limit.upper;
+                    if (limit.fillColor) {
+                        range.contents.stroke = am4core.color(limit.fillColor);
+                        range.contents.fill = range.contents.stroke;
+                    }
+                    range.label.inside = true;
+                    range.label.text = limit.upperlabel;
+                    range.label.fill = range.grid.stroke;
+                    range.label.verticalCenter = "bottom";
+                    range.label.stroke = am4core.color(limit.uppercolor || "#F92200");
+                    range.grid.stroke = am4core.color(limit.uppercolor || "#F92200");
+                    range.grid.strokeWidth = 2;
+                    range.grid.strokeOpacity = 1;
+                }
+                else if ((limit.lower == null || limit.lower == undefined) && limit.upper != null && limit.upper != undefined) {
+                    let range = yAxis.axisRanges.create();
+                    range.value = limit.upper;
+                    range.label.inside = true;
+                    range.label.text = limit.upperlabel;
+                    range.label.fill = range.grid.stroke;
+                    range.label.verticalCenter = "bottom";
+                    range.label.stroke = am4core.color(limit.uppercolor || "#F92200");
+                    range.grid.stroke = am4core.color(limit.uppercolor || "#F92200");
+                    range.grid.strokeWidth = 2;
+                    range.grid.strokeOpacity = 1;
+                }
+                else if ((limit.upper == null || limit.upper == undefined) && limit.lower != null && limit.lower != undefined) {
+                    let range = yAxis.axisRanges.create();
+                    range.value = limit.lower;
+                    range.label.inside = true;
+                    range.label.text = limit.lowerlabel;
+                    range.label.fill = range.grid.stroke;
+                    range.label.verticalCenter = "bottom";
+                    range.label.stroke = am4core.color(limit.lowercolor || "#F92200");
+                    range.grid.stroke = am4core.color(limit.lowercolor || "#F92200");
+                    range.grid.strokeWidth = 2;
+                    range.grid.strokeOpacity = 1;
+                }
             }
         }
-        let dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
+        this.dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
+        // Per comatibilità col codice scritto quando non era a livello globale, mi scoccia sostituire
+        let dateAxis = this.dateAxis;
         if (settings.XAxisTitle) {
             dateAxis.title.text = settings.XAxisTitle;
             dateAxis.title.fontWeight = "bold";
@@ -1328,6 +1362,10 @@ class LineChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+        this.dateAxis.zoomToDates(from, to, true, true);
+    }
+    /** @ignore */
     refreshData(data) {
         let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
         if (this.singleDataSet) {
@@ -1335,26 +1373,7 @@ class LineChartService {
             this.ChartInstance.addData(data);
             return;
         }
-        this.ChartInstance.series.each(s => {
-            var relativeSerie = dataConverted.series.find(t => t.name == s.name);
-            // Una serie del grafico è stata ggiornata, ordino i datapoint e li aggiungo
-            var correctOrder = true;
-            var prevDate = null;
-            for (let v = 0; v < relativeSerie.values.length; v++) {
-                if (!prevDate)
-                    prevDate = relativeSerie.values[v].d;
-                else if (relativeSerie.values[v].d < prevDate) {
-                    correctOrder = false;
-                    break;
-                }
-            }
-            if (!correctOrder)
-                relativeSerie.values.sort((d1, d2) => d1.d.getTime() - d2.d.getTime());
-            for (let v = 0; v < relativeSerie.values.length; v++) {
-                let obj = relativeSerie.values[v];
-                s.addData({ date: obj.d, value: obj.v });
-            }
-        });
+        throw "Impossibile aggiornare i dati senza unire il dataset. Si prega di impostare [MergeDatasets] a true";
     }
     /** Partendo da dati divisi per seriue genera un dataset unito con la data come chiave e i vari valori dopo */
     generateSingleDataset(data) {
@@ -1441,155 +1460,22 @@ class LineChartService {
 }
 
 /**
- * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
+ * Classe il cui unico scopo è gestire il setup e rendering di un PieChart
  */
-class AreaChartService {
+class PieChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
-        //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
-        //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
         /** @ignore */
-        this.executionTimers = {};
+        this.ViewAbsoluteValues = true;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un AreaChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un PieChart
      */
     graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         if (settings.Timeline) {
-            console.error("Timeline not supported for area chart");
-            return null;
-        }
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForAreaChart(data) : data;
-        let showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
-        let interval = dataConverted.interval;
-        //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
-        am4core.options.autoDispose = true;
-        this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
-        let ChartInstanceCasted = this.ChartInstance;
-        if (settings.Legend) {
-            ChartInstanceCasted.legend = new am4charts.Legend();
-            ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
-            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
-            if (settings.LegendPadding) {
-                let template = this.ChartInstance.legend.itemContainers.template;
-                template.paddingTop = (_b = settings.LegendPadding.top) !== null && _b !== void 0 ? _b : 0;
-                template.paddingBottom = (_c = settings.LegendPadding.bottom) !== null && _c !== void 0 ? _c : 0;
-                template.paddingLeft = (_d = settings.LegendPadding.left) !== null && _d !== void 0 ? _d : 0;
-                template.paddingRight = (_e = settings.LegendPadding.right) !== null && _e !== void 0 ? _e : 0;
-            }
-        }
-        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
-        yAxis.tooltip.disabled = true;
-        if (settings.YAxisTitle) {
-            yAxis.title.text = settings.YAxisTitle;
-            yAxis.title.fontWeight = "bold";
-        }
-        yAxis.min = 0;
-        let dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
-        dateAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 50;
-        dateAxis.startLocation = 0.5;
-        dateAxis.endLocation = 0.5;
-        if (settings.XAxisTitle) {
-            dateAxis.title.text = settings.XAxisTitle;
-            dateAxis.title.fontWeight = "bold";
-        }
-        if (showTicks) {
-            dateAxis.renderer.ticks.template.disabled = false;
-            dateAxis.renderer.ticks.template.strokeOpacity = 1;
-            dateAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
-            dateAxis.renderer.ticks.template.strokeWidth = 2;
-            dateAxis.renderer.ticks.template.length = 10;
-            dateAxis.renderer.ticks.template.location = 0;
-        }
-        if (!!interval)
-            dateAxis.baseInterval = { count: interval.count, timeUnit: interval.timeunit };
-        // Unisco il dataset e tiro fuori i dati
-        let chartData = [];
-        let seriesToMakeCache = {};
-        let seriesToMake = [];
-        for (let i = 0; i < dataConverted.groups.length; i++) {
-            let group = dataConverted.groups[i];
-            let dataItem = { date: group.name };
-            for (let ii = 0; ii < group.values.length; ii++) {
-                let val = group.values[ii];
-                dataItem[val.k] = val.v;
-                if (!seriesToMakeCache[val.k]) {
-                    seriesToMakeCache[val.k] = true;
-                    seriesToMake.push(val.k);
-                }
-            }
-            chartData.push(dataItem);
-        }
-        ChartInstanceCasted.data = chartData;
-        //---------------------------------------------------------
-        seriesToMake.forEach(s => { this.createSeries(ChartInstanceCasted, s); });
-        ChartInstanceCasted.cursor = new am4charts.XYCursor();
-        ChartInstanceCasted.cursor.xAxis = dateAxis;
-        dateAxis.events.on("startchanged", t => this.emitSelectionChanged(t, settings));
-        dateAxis.events.on("endchanged", t => this.emitSelectionChanged(t, settings));
-        return this;
-    }
-    /** @ignore */
-    refreshData(data) {
-        //TODO:IMPL
-    }
-    /** @ignore */
-    emitSelectionChanged(ev, settings) {
-        if (settings.OnSelectionChangedCallback) {
-            this.throttla("selchange", () => {
-                var axis = ev.target;
-                var start = new Date(axis.minZoomed);
-                var end = new Date(axis.maxZoomed);
-                var initial = axis.min == axis.minZoomed && axis.max == axis.maxZoomed;
-                settings.OnSelectionChangedCallback({ from: start, to: end, initial: initial });
-            }, 150);
-        }
-    }
-    /** @ignore */
-    createSeries(chart, name) {
-        let series = chart.series.push(new am4charts.LineSeries());
-        series.dataFields.dateX = "date";
-        series.name = name[0].toUpperCase() + name.slice(1);
-        series.dataFields.valueY = name;
-        series.tooltipText = "[#000]{valueY.value}[/]";
-        //series.tooltip.background.fill = am4core.color("#FFF");
-        series.tooltip.getStrokeFromObject = true;
-        series.tooltip.background.strokeWidth = 3;
-        series.tooltip.getFillFromObject = false;
-        series.fillOpacity = 0.6;
-        series.strokeWidth = 2;
-        series.stacked = true;
-        return series;
-    }
-    /** @ignore */
-    throttla(id, func, throttleTime) {
-        //Se ho la funzione che vuole eseguire ripulisco quel timeout
-        if (this.executionTimers[id])
-            clearTimeout(this.executionTimers[id]);
-        //Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
-        this.executionTimers[id] = setTimeout(() => { func(); this.executionTimers[id] = null; }, throttleTime);
-    }
-}
-
-/**
- * Classe il cui unico scopo è gestire il setup e rendering di un PieChart
- */
-class PieChartService {
-    /** @ignore */
-    constructor(Adapter) {
-        this.Adapter = Adapter;
-        /** @ignore */
-        this.ViewAbsoluteValues = true;
-    }
-    /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un PieChart
-     */
-    graphicate(data, settings) {
-        var _a, _b, _c, _d;
-        if (settings.Timeline) {
-            console.error("Timeline not supported for pie chart");
+            console.error("Timeline not supported for pie chart");
             return null;
         }
         //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
@@ -1671,6 +1557,9 @@ class PieChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
@@ -1684,15 +1573,13 @@ class PieChartService {
 }
 
 /**
- * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
+ * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
  */
-class Vertical2DChartService {
+class VerticalChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
         /** @ignore */
-        this.DefaultGroupPaddingPercentage = 5;
-        /** @ignore */
         this.dangerZone = 50;
         /** @ignore */
         this.LabelWidth = 150;
@@ -1704,10 +1591,10 @@ class Vertical2DChartService {
         this.DefaultColumnWidthPercentage = 85;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
      */
     graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (settings.Timeline) {
             console.error("Timeline not supported for vertical chart");
             return null;
@@ -1716,6 +1603,8 @@ class Vertical2DChartService {
         am4core.options.autoDispose = true;
         this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
         let ChartInstanceCasted = this.ChartInstance;
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
+        ChartInstanceCasted.data = dataConverted.values;
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
@@ -1738,15 +1627,12 @@ class Vertical2DChartService {
             categoryAxis.title.text = settings.XAxisTitle;
             categoryAxis.title.fontWeight = "bold";
         }
-        yAxis.min = 0;
-        categoryAxis.dataFields.category = 'key';
-        categoryAxis.renderer.cellStartLocation = am4core.percent((_f = settings.GroupPaddingPercentage) !== null && _f !== void 0 ? _f : this.DefaultGroupPaddingPercentage).value;
-        categoryAxis.renderer.cellEndLocation = am4core.percent(100 - ((_g = settings.GroupPaddingPercentage) !== null && _g !== void 0 ? _g : this.DefaultGroupPaddingPercentage)).value;
+        categoryAxis.dataFields.category = "k";
         categoryAxis.renderer.grid.template.location = 0;
-        categoryAxis.renderer.minGridDistance = (_h = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _h !== void 0 ? _h : 30;
+        categoryAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 30;
         let label = categoryAxis.renderer.labels.template;
         label.truncate = true;
-        label.maxWidth = (_j = settings.LabelWidth) !== null && _j !== void 0 ? _j : this.LabelWidth;
+        label.maxWidth = (_g = settings.LabelWidth) !== null && _g !== void 0 ? _g : this.LabelWidth;
         label.tooltipText = "{category}";
         if ((settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) == null ? true : settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) {
             categoryAxis.events.on("sizechanged", (ev) => {
@@ -1770,88 +1656,38 @@ class Vertical2DChartService {
                 }
             });
         }
-        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
-        let dataConverted = [];
-        for (let i = 0; i < dataPreConverted.groups.length; i++) {
-            let item = dataPreConverted.groups[i];
-            let obj = { key: item.name };
-            for (let p = 0; p < item.values.length; p++) {
-                let value = item.values[p];
-                obj[value.k] = value.v;
-            }
-            dataConverted.push(obj);
-        }
-        ChartInstanceCasted.data = dataConverted;
-        if (dataPreConverted.colorInfos)
-            ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(c => am4core.color(c.color));
-        //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
-        for (let prop in dataConverted[0])
-            if (prop !== "key")
-                this.createSeries(ChartInstanceCasted, settings, prop, prop);
+        // Create series
+        let series = ChartInstanceCasted.series.push(new am4charts.ColumnSeries());
+        series.dataFields.valueY = "v";
+        series.dataFields.categoryX = "k";
+        series.name = "";
+        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
+        series.columns.template.fillOpacity = .8;
+        series.columns.template.width = am4core.percent((_h = settings.ColumnWidthPercentage) !== null && _h !== void 0 ? _h : this.DefaultColumnWidthPercentage);
+        let columnTemplate = series.columns.template;
+        columnTemplate.strokeWidth = 2;
+        columnTemplate.strokeOpacity = 1;
         return this;
     }
     /** @ignore */
-    refreshData(data) {
-        //TODO:IMPL
+    setSelection(from, to) {
     }
     /** @ignore */
-    createSeries(chart, settings, value, name) {
-        var _a;
-        let series = chart.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueY = value;
-        series.dataFields.categoryX = 'key';
-        series.name = name;
-        series.columns.template.tooltipText = "{name} {categoryX}: [bold]{valueY}[/]";
-        series.columns.template.fillOpacity = .8;
-        series.columns.template.width = am4core.percent((_a = settings.ColumnWidthPercentage) !== null && _a !== void 0 ? _a : this.DefaultColumnWidthPercentage);
-        series.events.on("hidden", () => this.arrangeColumns);
-        series.events.on("shown", () => this.arrangeColumns);
-        return series;
-    }
-    /** @ignore */
-    arrangeColumns() {
-        let ChartInstanceCasted = this.ChartInstance;
-        let series = ChartInstanceCasted.series.getIndex(0);
-        let xAxis = ChartInstanceCasted.xAxes.getIndex(0);
-        let w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
-        if (series.dataItems.length > 1) {
-            let x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
-            let x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
-            let delta = ((x1 - x0) / ChartInstanceCasted.series.length) * w;
-            if (am4core.isNumber(delta)) {
-                let middle = ChartInstanceCasted.series.length / 2;
-                let newIndex = 0;
-                ChartInstanceCasted.series.each((series) => {
-                    if (!series.isHidden && !series.isHiding) {
-                        series.dummyData = newIndex;
-                        newIndex++;
-                    }
-                    else {
-                        series.dummyData = ChartInstanceCasted.series.indexOf(series);
-                    }
-                });
-                let visibleCount = newIndex;
-                let newMiddle = visibleCount / 2;
-                ChartInstanceCasted.series.each((series) => {
-                    let trueIndex = ChartInstanceCasted.series.indexOf(series);
-                    let newIndex = series.dummyData;
-                    let dx = (newIndex - trueIndex + middle - newMiddle) * delta;
-                    series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
-                    series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
-                });
-            }
-        }
+    refreshData(data) {
+        //TODO:IMPL
     }
 }
 
 /**
- * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
+ * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
  */
-class VerticalChartService {
+class Vertical2DChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
         /** @ignore */
+        this.DefaultGroupPaddingPercentage = 5;
+        /** @ignore */
         this.dangerZone = 50;
         /** @ignore */
         this.LabelWidth = 150;
@@ -1863,10 +1699,10 @@ class VerticalChartService {
         this.DefaultColumnWidthPercentage = 85;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
      */
     graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (settings.Timeline) {
             console.error("Timeline not supported for vertical chart");
             return null;
@@ -1875,8 +1711,6 @@ class VerticalChartService {
         am4core.options.autoDispose = true;
         this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
         let ChartInstanceCasted = this.ChartInstance;
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
-        ChartInstanceCasted.data = dataConverted.values;
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
@@ -1899,12 +1733,15 @@ class VerticalChartService {
             categoryAxis.title.text = settings.XAxisTitle;
             categoryAxis.title.fontWeight = "bold";
         }
-        categoryAxis.dataFields.category = "k";
+        yAxis.min = 0;
+        categoryAxis.dataFields.category = 'key';
+        categoryAxis.renderer.cellStartLocation = am4core.percent((_f = settings.GroupPaddingPercentage) !== null && _f !== void 0 ? _f : this.DefaultGroupPaddingPercentage).value;
+        categoryAxis.renderer.cellEndLocation = am4core.percent(100 - ((_g = settings.GroupPaddingPercentage) !== null && _g !== void 0 ? _g : this.DefaultGroupPaddingPercentage)).value;
         categoryAxis.renderer.grid.template.location = 0;
-        categoryAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 30;
+        categoryAxis.renderer.minGridDistance = (_h = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _h !== void 0 ? _h : 30;
         let label = categoryAxis.renderer.labels.template;
         label.truncate = true;
-        label.maxWidth = (_g = settings.LabelWidth) !== null && _g !== void 0 ? _g : this.LabelWidth;
+        label.maxWidth = (_j = settings.LabelWidth) !== null && _j !== void 0 ? _j : this.LabelWidth;
         label.tooltipText = "{category}";
         if ((settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) == null ? true : settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) {
             categoryAxis.events.on("sizechanged", (ev) => {
@@ -1928,23 +1765,81 @@ class VerticalChartService {
                 }
             });
         }
-        // Create series
-        let series = ChartInstanceCasted.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueY = "v";
-        series.dataFields.categoryX = "k";
-        series.name = "";
-        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
-        series.columns.template.fillOpacity = .8;
-        series.columns.template.width = am4core.percent((_h = settings.ColumnWidthPercentage) !== null && _h !== void 0 ? _h : this.DefaultColumnWidthPercentage);
-        let columnTemplate = series.columns.template;
-        columnTemplate.strokeWidth = 2;
-        columnTemplate.strokeOpacity = 1;
+        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
+        let dataConverted = [];
+        for (let i = 0; i < dataPreConverted.groups.length; i++) {
+            let item = dataPreConverted.groups[i];
+            let obj = { key: item.name };
+            for (let p = 0; p < item.values.length; p++) {
+                let value = item.values[p];
+                obj[value.k] = value.v;
+            }
+            dataConverted.push(obj);
+        }
+        ChartInstanceCasted.data = dataConverted;
+        if (dataPreConverted.colorInfos)
+            ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(c => am4core.color(c.color));
+        //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
+        for (let prop in dataConverted[0])
+            if (prop !== "key")
+                this.createSeries(ChartInstanceCasted, settings, prop, prop);
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
+    /** @ignore */
+    createSeries(chart, settings, value, name) {
+        var _a;
+        let series = chart.series.push(new am4charts.ColumnSeries());
+        series.dataFields.valueY = value;
+        series.dataFields.categoryX = 'key';
+        series.name = name;
+        series.columns.template.tooltipText = "{name} {categoryX}: [bold]{valueY}[/]";
+        series.columns.template.fillOpacity = .8;
+        series.columns.template.width = am4core.percent((_a = settings.ColumnWidthPercentage) !== null && _a !== void 0 ? _a : this.DefaultColumnWidthPercentage);
+        series.events.on("hidden", () => this.arrangeColumns);
+        series.events.on("shown", () => this.arrangeColumns);
+        return series;
+    }
+    /** @ignore */
+    arrangeColumns() {
+        let ChartInstanceCasted = this.ChartInstance;
+        let series = ChartInstanceCasted.series.getIndex(0);
+        let xAxis = ChartInstanceCasted.xAxes.getIndex(0);
+        let w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
+        if (series.dataItems.length > 1) {
+            let x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
+            let x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
+            let delta = ((x1 - x0) / ChartInstanceCasted.series.length) * w;
+            if (am4core.isNumber(delta)) {
+                let middle = ChartInstanceCasted.series.length / 2;
+                let newIndex = 0;
+                ChartInstanceCasted.series.each((series) => {
+                    if (!series.isHidden && !series.isHiding) {
+                        series.dummyData = newIndex;
+                        newIndex++;
+                    }
+                    else {
+                        series.dummyData = ChartInstanceCasted.series.indexOf(series);
+                    }
+                });
+                let visibleCount = newIndex;
+                let newMiddle = visibleCount / 2;
+                ChartInstanceCasted.series.each((series) => {
+                    let trueIndex = ChartInstanceCasted.series.indexOf(series);
+                    let newIndex = series.dummyData;
+                    let dx = (newIndex - trueIndex + middle - newMiddle) * delta;
+                    series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
+                    series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
+                });
+            }
+        }
+    }
 }
 
 /**
@@ -2051,6 +1946,9 @@ class VerticalStackedChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
@@ -2072,6 +1970,142 @@ class VerticalStackedChartService {
     }
 }
 
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
+ */
+class AreaChartService {
+    /** @ignore */
+    constructor(Adapter) {
+        this.Adapter = Adapter;
+        //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
+        //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
+        /** @ignore */
+        this.executionTimers = {};
+    }
+    /**
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un AreaChart
+     */
+    graphicate(data, settings) {
+        var _a, _b, _c, _d, _e, _f;
+        if (settings.Timeline) {
+            console.error("Timeline not supported for area chart");
+            return null;
+        }
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForAreaChart(data) : data;
+        let showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
+        let interval = dataConverted.interval;
+        //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
+        am4core.options.autoDispose = true;
+        this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
+        let ChartInstanceCasted = this.ChartInstance;
+        if (settings.Legend) {
+            ChartInstanceCasted.legend = new am4charts.Legend();
+            ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
+            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = (_b = settings.LegendPadding.top) !== null && _b !== void 0 ? _b : 0;
+                template.paddingBottom = (_c = settings.LegendPadding.bottom) !== null && _c !== void 0 ? _c : 0;
+                template.paddingLeft = (_d = settings.LegendPadding.left) !== null && _d !== void 0 ? _d : 0;
+                template.paddingRight = (_e = settings.LegendPadding.right) !== null && _e !== void 0 ? _e : 0;
+            }
+        }
+        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
+        yAxis.tooltip.disabled = true;
+        if (settings.YAxisTitle) {
+            yAxis.title.text = settings.YAxisTitle;
+            yAxis.title.fontWeight = "bold";
+        }
+        yAxis.min = 0;
+        let dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
+        dateAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 50;
+        dateAxis.startLocation = 0.5;
+        dateAxis.endLocation = 0.5;
+        if (settings.XAxisTitle) {
+            dateAxis.title.text = settings.XAxisTitle;
+            dateAxis.title.fontWeight = "bold";
+        }
+        if (showTicks) {
+            dateAxis.renderer.ticks.template.disabled = false;
+            dateAxis.renderer.ticks.template.strokeOpacity = 1;
+            dateAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
+            dateAxis.renderer.ticks.template.strokeWidth = 2;
+            dateAxis.renderer.ticks.template.length = 10;
+            dateAxis.renderer.ticks.template.location = 0;
+        }
+        if (!!interval)
+            dateAxis.baseInterval = { count: interval.count, timeUnit: interval.timeunit };
+        // Unisco il dataset e tiro fuori i dati
+        let chartData = [];
+        let seriesToMakeCache = {};
+        let seriesToMake = [];
+        for (let i = 0; i < dataConverted.groups.length; i++) {
+            let group = dataConverted.groups[i];
+            let dataItem = { date: group.name };
+            for (let ii = 0; ii < group.values.length; ii++) {
+                let val = group.values[ii];
+                dataItem[val.k] = val.v;
+                if (!seriesToMakeCache[val.k]) {
+                    seriesToMakeCache[val.k] = true;
+                    seriesToMake.push(val.k);
+                }
+            }
+            chartData.push(dataItem);
+        }
+        ChartInstanceCasted.data = chartData;
+        //---------------------------------------------------------
+        seriesToMake.forEach(s => { this.createSeries(ChartInstanceCasted, s); });
+        ChartInstanceCasted.cursor = new am4charts.XYCursor();
+        ChartInstanceCasted.cursor.xAxis = dateAxis;
+        dateAxis.events.on("startchanged", t => this.emitSelectionChanged(t, settings));
+        dateAxis.events.on("endchanged", t => this.emitSelectionChanged(t, settings));
+        return this;
+    }
+    /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
+    refreshData(data) {
+        //TODO:IMPL
+    }
+    /** @ignore */
+    emitSelectionChanged(ev, settings) {
+        if (settings.OnSelectionChangedCallback) {
+            this.throttla("selchange", () => {
+                var axis = ev.target;
+                var start = new Date(axis.minZoomed);
+                var end = new Date(axis.maxZoomed);
+                var initial = axis.min == axis.minZoomed && axis.max == axis.maxZoomed;
+                settings.OnSelectionChangedCallback({ from: start, to: end, initial: initial });
+            }, 150);
+        }
+    }
+    /** @ignore */
+    createSeries(chart, name) {
+        let series = chart.series.push(new am4charts.LineSeries());
+        series.dataFields.dateX = "date";
+        series.name = name[0].toUpperCase() + name.slice(1);
+        series.dataFields.valueY = name;
+        series.tooltipText = "[#000]{valueY.value}[/]";
+        //series.tooltip.background.fill = am4core.color("#FFF");
+        series.tooltip.getStrokeFromObject = true;
+        series.tooltip.background.strokeWidth = 3;
+        series.tooltip.getFillFromObject = false;
+        series.fillOpacity = 0.6;
+        series.strokeWidth = 2;
+        series.stacked = true;
+        return series;
+    }
+    /** @ignore */
+    throttla(id, func, throttleTime) {
+        //Se ho la funzione che vuole eseguire ripulisco quel timeout
+        if (this.executionTimers[id])
+            clearTimeout(this.executionTimers[id]);
+        //Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
+        this.executionTimers[id] = setTimeout(() => { func(); this.executionTimers[id] = null; }, throttleTime);
+    }
+}
+
 /**
  * Componente specifico per la graficazione di un qualsiasi tipo di grafico.
  *
@@ -2145,13 +2179,13 @@ class EsChartComponent extends BaseChartComponent {
         }
     }
 }
-EsChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i2.DateService }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsChartComponent, selector: "es-chart", inputs: { Type: "Type", Data: "Data", DataArray: "DataArray" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i3.DateService }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
+EsChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsChartComponent, selector: "es-chart", inputs: { Type: "Type", Data: "Data", DataArray: "DataArray" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i2.DateService }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
+        return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i3.DateService }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
                     }] }, { type: undefined, decorators: [{
@@ -2219,7 +2253,7 @@ class EsAreaChartComponent extends BaseChartComponent {
     }
 }
 EsAreaChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsAreaChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsAreaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsAreaChartComponent, selector: "es-area-chart", inputs: { Data: "Data", DataArray: "DataArray" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsAreaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsAreaChartComponent, selector: "es-area-chart", inputs: { Data: "Data", DataArray: "DataArray" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsAreaChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-area-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
@@ -2300,13 +2334,13 @@ class EsLineChartComponent extends BaseChartComponent {
         return new LineChartService(this.adapter, this.dateService).graphicate(this.Data, settingsCasted);
     }
 }
-EsLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsLineChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i2.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsLineChartComponent, selector: "es-line-chart", inputs: { Data: "Data", DataArray: "DataArray", Step: "Step", DataGroupBucketSize: "DataGroupBucketSize", DataGroupingThreshold: "DataGroupingThreshold", StrokeSize: "StrokeSize", AllowGaps: "AllowGaps", MergeDatasets: "MergeDatasets", FinalInstants: "FinalInstants", Min: "Min", Max: "Max", Fill: "Fill" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsLineChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i3.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
+EsLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsLineChartComponent, selector: "es-line-chart", inputs: { Data: "Data", DataArray: "DataArray", Step: "Step", DataGroupBucketSize: "DataGroupBucketSize", DataGroupingThreshold: "DataGroupingThreshold", StrokeSize: "StrokeSize", AllowGaps: "AllowGaps", MergeDatasets: "MergeDatasets", FinalInstants: "FinalInstants", Min: "Min", Max: "Max", Fill: "Fill" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsLineChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-line-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: BaseAdapter }, { type: i2.DateService }, { type: i0.NgZone }, { type: Object, decorators: [{
+        return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: BaseAdapter }, { type: i3.DateService }, { type: i0.NgZone }, { type: Object, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
                     }] }, { type: undefined, decorators: [{
@@ -2399,7 +2433,7 @@ class EsPieChartComponent extends BaseChartComponent {
     }
 }
 EsPieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsPieChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsPieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsPieChartComponent, selector: "es-pie-chart", inputs: { Data: "Data", DataArray: "DataArray", HideZeroes: "HideZeroes", Mode3D: "Mode3D", DonutRadiusPercentage: "DonutRadiusPercentage", LabelsWrap: "LabelsWrap", LabelsTruncate: "LabelsTruncate", LabelsWidth: "LabelsWidth", LabelsVisible: "LabelsVisible" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsPieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsPieChartComponent, selector: "es-pie-chart", inputs: { Data: "Data", DataArray: "DataArray", HideZeroes: "HideZeroes", Mode3D: "Mode3D", DonutRadiusPercentage: "DonutRadiusPercentage", LabelsWrap: "LabelsWrap", LabelsTruncate: "LabelsTruncate", LabelsWidth: "LabelsWidth", LabelsVisible: "LabelsVisible" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsPieChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-pie-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
@@ -2490,7 +2524,7 @@ class EsVertical2DChartComponent extends BaseChartComponent {
     }
 }
 EsVertical2DChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsVertical2DChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsVertical2DChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsVertical2DChartComponent, selector: "es-vertical-2d-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", GroupPaddingPercentage: "GroupPaddingPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsVertical2DChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsVertical2DChartComponent, selector: "es-vertical-2d-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", GroupPaddingPercentage: "GroupPaddingPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsVertical2DChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-vertical-2d-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
@@ -2578,7 +2612,7 @@ class EsVerticalChartComponent extends BaseChartComponent {
     }
 }
 EsVerticalChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsVerticalChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsVerticalChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsVerticalChartComponent, selector: "es-vertical-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsVerticalChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsVerticalChartComponent, selector: "es-vertical-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsVerticalChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-vertical-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
@@ -2664,7 +2698,7 @@ class EsVerticalStackedChartComponent extends BaseChartComponent {
     }
 }
 EsVerticalStackedChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsVerticalStackedChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsVerticalStackedChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsVerticalStackedChartComponent, selector: "es-vertical-stacked-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsVerticalStackedChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EsVerticalStackedChartComponent, selector: "es-vertical-stacked-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsVerticalStackedChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-vertical-stacked-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]