@esfaenza/es-charts 12.2.13 → 13.1.4

package/fesm2020/esfaenza-es-charts.mjs

@@ -0,0 +1,2747 @@
+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 { 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';
+
+/**
+ * Adapter Base da reimplementare per trasformare i dati da una libreria di grafici a questa per evitare di riscrivere tutto il codice di
+ * generazione delle serie in caso si fossero usati grafici di altre librerie
+ */
+class BaseAdapter {
+    /**
+     * Trasformatore dai dati della libreria vecchia ai dati della libreria nuova per gli Area Chart
+     */
+    adaptDataForAreaChart(anyData) {
+        return anyData;
+    }
+    /**
+     * Trasformatore dai dati della libreria vecchia ai dati della libreria nuova per i Line Chart
+     */
+    adaptDataForLineChart(anyData) {
+        return anyData;
+    }
+    /**
+     * Trasformatore dai dati della libreria vecchia ai dati della libreria nuova per i Line Chart
+     */
+    adaptDataForPieChart(anyData) {
+        return anyData;
+    }
+    /**
+     * Trasformatore dai dati della libreria vecchia ai dati della libreria nuova per i Vertical Chart
+     */
+    adaptDataForVerticalChart(anyData) {
+        return anyData;
+    }
+    /**
+     * Trasformatore dai dati della libreria vecchia ai dati della libreria nuova per i Vertical Chart a due dimensioni
+     */
+    adaptDataForVertical2DChart(anyData) {
+        return anyData;
+    }
+    /**
+     * Trasformatore dai dati della libreria vecchia ai dati della libreria nuova per i Vertical Chart sovrapposti
+     */
+    adaptDataForVerticalStackedChart(anyData) {
+        return anyData;
+    }
+}
+BaseAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BaseAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Dati relativi a un grafico di tipo LineChart
+ */
+class LineChartData {
+    /**
+     * Costruttore
+     *
+     * @param {LineSerie[]} series Lista di serie da graficare
+     * @param {{upper: lower}}
+     */
+    constructor(series = [], limit) {
+        this.series = series;
+        this.limit = limit;
+    }
+}
+
+/**
+ * Dati relativi a un grafico di tipo PieChart
+ */
+class PieChartData {
+    /**
+     * Costruttore
+     *
+     * @param {KeyValueColor[]} values Lista di Chiave-Valore-Colore che rappresentano ognuno uno spicchio del grafico a torta
+     */
+    constructor(values = []) {
+        this.values = values;
+    }
+}
+
+/**
+ * Dati relativi a un grafico di tipo AreaChart
+ */
+class AreaChartData {
+    /**
+     * Costruttore
+     *
+     * @param {{ name: Date; values: KeyValue[]; }[]} groups Gruppi di valori raggruppati per data
+     * @param {BaseInterval} interval Intervallo della serie. Viene utilizzato per gestire eventuali Gap
+     */
+    constructor(groups = [], interval) {
+        this.groups = groups;
+        this.interval = interval;
+    }
+}
+
+/**
+ * Dati relativi a un grafico di tipo Vertical2DChart
+ */
+class Vertical2DChartData {
+    /**
+     * Costruttore
+     *
+     * @param {{ name: string; values: KeyValue[]; }[]} groups Gruppi di valori raggruppati per nome
+     * @param {{ color: string }[]} colorInfos Lista dei colori da utilizzare. Vanno a sovrascrivere quelli di default di amcharts
+     */
+    constructor(groups = [], colorInfos) {
+        this.groups = groups;
+        this.colorInfos = colorInfos;
+    }
+}
+
+/**
+ * Dati relativi a un grafico di tipo VerticalChart
+ */
+class VerticalChartData {
+    /**
+     * Costruttore
+     *
+     * @param {KeyValue[]} values Lista di Chiave-Valore che rappresentano ognuno una colonna
+     */
+    constructor(values = []) {
+        this.values = values;
+    }
+}
+
+/**
+ * Dati relativi a un grafico di tipo VerticalStackedChart
+ */
+class VerticalStackedChartData {
+    /**
+     * Costruttore
+     *
+     * @param {{ name: string; values: KeyValue[]; }[]} groups Gruppi di valori raggruppati per nome
+     */
+    constructor(groups = []) {
+        this.groups = groups;
+    }
+}
+
+/**
+ * Classe che racchiude le impostazioni base bene o male applicabili ad ogni Grafico
+ */
+class BaseSettings {
+}
+
+/**
+ * Classe che presenta le impostazioni di generazione per i grafici di tipo AreaChart
+ */
+class AreaChartSettings extends BaseSettings {
+    /**
+     * @ignore
+     */
+    constructor() { super(); }
+}
+
+/**
+ * Classe che presenta le impostazioni di generazione per i grafici di tipo LineChart
+ */
+class LineChartSettings extends BaseSettings {
+    /**
+     * @ignore
+     */
+    constructor() { super(); }
+}
+
+/**
+ * Classe che presenta le impostazioni di generazione per i grafici di tipo PieChart
+ */
+class PieChartSettings extends BaseSettings {
+}
+
+/**
+ * Classe che presenta le impostazioni di generazione per i grafici di tipo Vertical2DChart
+ */
+class Vertical2DChartSettings extends BaseSettings {
+    /**
+     * @ignore
+     */
+    constructor() { super(); }
+}
+
+/**
+ * Classe che presenta le impostazioni di generazione per i grafici di tipo VerticalChart
+ */
+class VerticalChartSettings extends BaseSettings {
+    /**
+     * @ignore
+     */
+    constructor() { super(); }
+}
+
+/**
+ * Classe che presenta le impostazioni di generazione per i grafici di tipo VerticalStackedChart
+ */
+class VerticalStackedChartSettings extends BaseSettings {
+    /**
+     * @ignore
+     */
+    constructor() { super(); }
+}
+
+/**
+ * Classe che identifica un intervallo di tempo fra un dato e l'altro
+ */
+class BaseInterval {
+}
+
+/**
+ * Classe che identifica le informazioni di Padding per la Legenda
+ */
+class LegendPad {
+}
+
+/**
+ * Modello che identifica un limite superiore - inferiore
+ */
+class Limit {
+    /** @ignore */
+    constructor(upper, upperLabel, upperColor, lower, lowerLabel, lowerColor) {
+        this.upper = upper;
+        this.upperLabel = upperLabel;
+        this.upperColor = upperColor;
+        this.lower = lower;
+        this.lowerLabel = lowerLabel;
+        this.lowerColor = lowerColor;
+    }
+}
+
+/**
+ * Modello che identifica la coppia Data-Valore
+ */
+class DateValue {
+    /** @ignore */
+    constructor(d, v) {
+        this.d = d;
+        this.v = v;
+    }
+}
+
+/**
+ * Modello che identifica la coppia Chiave-Valore
+ */
+class KeyValue {
+    /** @ignore */
+    constructor(k, v) {
+        this.k = k;
+        this.v = v;
+    }
+}
+
+/**
+ * Modello che identifica la coppia Chiave-Valore con in aggiunta il Colore da usare per la serie che verrà creata da questo modello
+ */
+class KeyValueColor {
+    /** @ignore */
+    constructor(k, v, c) {
+        this.k = k;
+        this.v = v;
+        this.c = c;
+    }
+}
+
+/**
+ * Modello che identifica una serie a Linea
+ */
+class LineSerie {
+    /**
+     * Costruttore
+     *
+     * @param {string} name Nome della serie
+     * @param {DateValue[]} values Valori della serie
+     * @param {BaseInterval} interval Intervallo della serie. Viene utilizzato per gestire Gap e date in Istante Finale
+     * @param {string} color Colore della serie, verrà usato sia per la linea base che eventualmente per il riempimento (in caso si utilizzi l'Input **Fill** nel grafico)
+     * @param {string} uom Unità di misura da presentare nell'asse delle Y
+     * @param {boolean} fill Override della proprietà **Fill** del grafico, specifico per ogni serie
+     */
+    constructor(name, values, interval, color, uom, fill) {
+        this.name = name;
+        this.values = values;
+        this.interval = interval;
+        this.color = color;
+        this.uom = uom;
+        this.fill = fill;
+    }
+}
+
+/**
+ * Componente che si occupa della paginazione dei grafici qualora servisse
+ */
+class PageChartSelector {
+    constructor() {
+        /**
+         * Indica un cambio di pagina ed emette un oggetto con i dati attuali e l'indice attuale.
+         *
+         * Qualora la proprietà **data** fosse null indica un evento di "loading"
+         */
+        this.onPageChange = new EventEmitter();
+    }
+    /**
+     * @ignore
+     */
+    ngOnChanges() {
+        if (!(this.Items || this.Dtos) || (this.Items || this.Dtos).length == 0)
+            throw new Error("Chart array cannot be empty!");
+        var idx = (this.StartIndex || 0);
+        this.currentindex = idx;
+        this.currentpage = idx + 1;
+        this.handlePageChange();
+    }
+    /**
+     * Gestisce un cambio pagina inviando al callback **onPageChange** i dati attuali (siano essi il Dto per il caricamento dati i
+     * o i dati già presenti) e l'indice di visualizzazione
+     */
+    handlePageChange() {
+        this.finalIndex = this.currentpage - 1;
+        this.currentindex = this.currentpage - 1;
+        let data = this.Items && this.Items.length > 0 ? this.Items[this.finalIndex].data : this.Dtos[this.finalIndex];
+        this.onPageChange.emit({ data: data, index: this.finalIndex });
+    }
+    /**
+     * Visualizza il grafico successivo
+     */
+    Next() {
+        // Per passare da page a index è sempre un -1
+        this.currentpage++;
+        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
+        // Delay pseudo-intelligente per click compulsivi. 
+        // Se dopo questo delay sono andato avanti solo di 1 effettuo il callback altrimenti incremento l'indice
+        setTimeout(() => {
+            if (this.currentindex == this.currentpage - 2)
+                this.handlePageChange();
+            else
+                this.currentindex++;
+        }, this.BrowseDelayMs);
+    }
+    /**
+     * Visualizza il grafico precedente
+     */
+    Previous() {
+        // Per passare da page a index è sempre un -1
+        this.currentpage--;
+        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
+        // Delay pseudo-intelligente per click compulsivi. 
+        // Se dopo questo delay sono andato indietro solo di 1 effettuo il callback altrimenti decremento l'indice
+        setTimeout(() => {
+            if (this.currentindex == this.currentpage)
+                this.handlePageChange();
+            else
+                this.currentindex--;
+        }, this.BrowseDelayMs);
+    }
+}
+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 });
+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"] }]
+        }], propDecorators: { Items: [{
+                type: Input
+            }], Dtos: [{
+                type: Input
+            }], BrowseDelayMs: [{
+                type: Input
+            }], StartIndex: [{
+                type: Input
+            }], onPageChange: [{
+                type: Output
+            }], headerInner_tr: [{
+                type: ContentChild,
+                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 */
+const _moonrisekingdom = 'moonrisekingdom';
+/** @ignore */
+const _frozen = 'frozen';
+/** @ignore */
+const _dark = 'dark';
+/** @ignore */
+const _kelly = 'kelly';
+/** @ignore */
+const _material = 'material';
+/** @ignore */
+const _dataviz = 'dataviz';
+/** @ignore */
+const _none = 'none';
+/** @ignore */
+const _animated = 'animated';
+/**
+ * Classe per enumerare i temi disponibili nella libreria
+ */
+// @dynamic
+class ChartThemes {
+    get spiritedaway() { return _spiritedaway; }
+    ;
+    get moonrisekingdom() { return _moonrisekingdom; }
+    ;
+    get frozen() { return _frozen; }
+    ;
+    get dark() { return _dark; }
+    ;
+    get kelly() { return _kelly; }
+    ;
+    get material() { return _material; }
+    ;
+    get dataviz() { return _dataviz; }
+    ;
+    get none() { return _none; }
+    ;
+    get animated() { return _animated; }
+    ;
+    static get spiritedaway() { return _spiritedaway; }
+    ;
+    static get moonrisekingdom() { return _moonrisekingdom; }
+    ;
+    static get frozen() { return _frozen; }
+    ;
+    static get dark() { return _dark; }
+    ;
+    static get kelly() { return _kelly; }
+    ;
+    static get material() { return _material; }
+    ;
+    static get dataviz() { return _dataviz; }
+    ;
+    static get none() { return _none; }
+    ;
+    static get animated() { return _animated; }
+    ;
+}
+
+/**
+ * Classe di supporto al caricamento dinamico dei vari pezzi di amcharts che mi servono per il grafico (temi, locali, ecc...)
+ *
+ * Essenzialmente ogni volta che viene creato un grafico, questo acquisisce il tema e il locale applicato IN QUEL MOMENTO,
+ * questo significa che per creare due grafici con temi diversi bisogna fare:
+ *
+ * 1) Caricamento tema 1
+ *
+ * 2) Creazione grafico 1
+ *
+ * 3) Scaricamento tema 1
+ *
+ * 3) Caricamento tema 2
+ *
+ * 4) Creazione grafico 2
+ *
+ */
+class ChartLoader {
+    /**
+     * @ignore
+     */
+    constructor(logs) {
+        this.logs = logs;
+        /**
+         * Indica se attualmente ho le animazioni caricate in modo da non ricaricarle inutilmente
+         */
+        this.AnimationsAreLoaded = false;
+        /**
+         * Indica l'ultimo tema caricato in modo da non ricaricarlo inutilmente qualora il prossimo grafico da creare richieda lo stesso tema
+         */
+        this.LastLoadedTheme = "";
+        /**
+         * Cache dei temi (moduli caricati dinamicamente)
+         */
+        this.themeCache = {};
+        /**
+         * Cache delle localizzazioni (moduli caricati dinamicamente)
+         */
+        this.localizationCache = {};
+    }
+    /**
+     * Applica il tema con le animazioni all'istanza globale di amCharts
+     *
+     * @param {Object} chartsCore Istanza globale di amCharts
+     * @returns {Promise} Promise che identifica la fine del caricamento
+     */
+    applyAnimations(chartsCore) {
+        if (!this.AnimationsAreLoaded) {
+            return this.importIfNeeded('themes', ChartThemes.animated).then(() => {
+                this.log("CORE: Applying theme " + ChartThemes.animated);
+                chartsCore.useTheme(this.themeCache[ChartThemes.animated]);
+                this.AnimationsAreLoaded = true;
+            });
+        }
+        else {
+            this.log("CORE: theme already applyed " + ChartThemes.animated);
+            return new Promise((resolve) => { resolve(true); });
+        }
+    }
+    /**
+     * De-applica il tema con le animazioni dall'istanza globale di amCharts
+     *
+     * @param {Object} chartsCore Istanza globale di amCharts
+     * @returns {Promise} Promise che identifica la fine dello scarico
+     */
+    unapplyAnimations(chartsCore) {
+        if (this.AnimationsAreLoaded) {
+            this.log("CORE: Animations in use, unapplying theme " + ChartThemes.animated);
+            chartsCore.unuseTheme(this.themeCache[ChartThemes.animated]);
+            this.AnimationsAreLoaded = false;
+        }
+        else
+            this.log("CORE: Animations already unused, no need to unapply them");
+        return new Promise((resolve) => { resolve(true); });
+    }
+    /**
+     * Applica il tema specificato all'istanza globale di amCharts
+     *
+     * @param {Object} chartsCore Istanza globale di amCharts
+     * @param {'spiritedaway' | 'moonrisekingdom' | 'frozen' | 'dark' | 'kelly' | 'material' | 'dataviz' | 'none'} theme Tema da applicare
+     * @returns {Promise} Promise che identifica la fine del caricamento
+     */
+    applyTheme(chartsCore, theme) {
+        // Ultimo tema applicato è lo stesso che mi è stato richiesto di applicare --> NO-OP
+        if (this.LastLoadedTheme == theme) {
+            this.log("CORE: theme already applied " + theme);
+            return new Promise((resolve) => { resolve(true); });
+        }
+        // Scarico il tema precedente a prescindere, ormai non mi serve più
+        this.unapplyPreviousTheme(chartsCore);
+        // Il tema è il none --> registro la cosa e basta, il tema precedente è stato rimosso subito qui sopra ^
+        if (theme == ChartThemes.none) {
+            this.LastLoadedTheme = ChartThemes.none;
+            return new Promise((resolve) => { resolve(true); });
+        }
+        // Il tema è diverso dal precedente e non è il tema vuoto --> Importo il tema specificato se non presente in memoria e lo applico al grafico attuale
+        return this.importIfNeeded('themes', theme).then(() => {
+            this.log("CORE: Applying theme " + theme);
+            chartsCore.useTheme(this.themeCache[theme]);
+            this.LastLoadedTheme = theme;
+        });
+    }
+    /**
+     * De-applica il tema precedente dall'istanza globale di amCharts
+     *
+     * @param {Object} chartsCore Istanza globale di amCharts
+     */
+    unapplyPreviousTheme(chartsCore) {
+        if (!this.LastLoadedTheme || this.LastLoadedTheme == ChartThemes.none)
+            return;
+        this.log("CORE: Unapplying previously used theme " + this.LastLoadedTheme);
+        chartsCore.unuseTheme(this.themeCache[this.LastLoadedTheme]);
+    }
+    /**
+     * Applica il locale specificato all'istanza specifica del grafico
+     *
+     * @param {amCharts.Chart} chart Istanza specifica del grafico a cui applicare il locale
+     * @param {string} locale Locale da applicare
+     * @returns {Promise} Promise che identifica la fine del caricamento
+     */
+    applyLocale(chart, locale) {
+        return this.importIfNeeded('lang', locale).then(() => {
+            this.log("Chart " + chart.htmlContainer.id + ": applying locale " + locale);
+            chart.language.locale = this.localizationCache[locale];
+        });
+    }
+    /**
+     * Permette di importare, se serve un dato tema o localizzazione
+     *
+     * @param {'lang' | 'themes'} what Oggetto da importare, se localizzazione o tema
+     * @param {string} item Chiave dell'oggetto da importare
+     *
+     * @returns {Promise} Promise che identifica la fine del caricamento
+     */
+    importIfNeeded(what, item) {
+        // Se sto cercando di caricare qualcosa di già caricato non faccio nulla
+        if (!(what == 'themes' && !this.themeCache[item]) && !(what == 'lang' && !this.localizationCache[item])) {
+            this.log("CORE: " + (what == 'lang' ? "Language " : "Theme ") + item + " already loaded");
+            return new Promise((resolve) => { resolve(true); });
+        }
+        this.log("CORE: Loading " + (what == 'lang' ? "language " : "theme ") + item);
+        /*
+         *                               ****************************
+         *                               ******** ATTENZIONE ********
+         *                               ****************************
+         *
+         *  Se stai vedendo questo codice di import e stai valutando di riscriverlo come:
+         *
+         *                                     V       V
+         *      import(`@amcharts/amcharts4/${what}/${item}`).then(module => {
+         *        if (what == 'themes') this.themeCache[item] = module.default;
+         *        else if (what == 'lang') this.localizationCache[item] = module.default;
+         *      });
+         *
+         *  Sappi che è una pessima idea. Gli import sono valutati da webpack in compiletime per generare i chunk,
+         *  mettere la navigazione agli import con la concatenazione viene preso malissimo ed essenzialmente dice a webpack
+         *  di tirare su e bundlare l'intera node_modules. Divertente, no?
+         *
+         */
+        switch (what) {
+            case 'themes':
+                switch (item) {
+                    case ChartThemes.spiritedaway:
+                        return import('@amcharts/amcharts4/themes/spiritedaway').then(theme => this.themeCache[item] = theme.default);
+                    case ChartThemes.moonrisekingdom:
+                        return import('@amcharts/amcharts4/themes/moonrisekingdom').then(theme => this.themeCache[item] = theme.default);
+                    case ChartThemes.frozen:
+                        return import('@amcharts/amcharts4/themes/frozen').then(theme => this.themeCache[item] = theme.default);
+                    case ChartThemes.dark:
+                        return import('@amcharts/amcharts4/themes/dark').then(theme => this.themeCache[item] = theme.default);
+                    case ChartThemes.kelly:
+                        return import('@amcharts/amcharts4/themes/kelly').then(theme => this.themeCache[item] = theme.default);
+                    case ChartThemes.material:
+                        return import('@amcharts/amcharts4/themes/material').then(theme => this.themeCache[item] = theme.default);
+                    case ChartThemes.dataviz:
+                        return import('@amcharts/amcharts4/themes/dataviz').then(theme => this.themeCache[item] = theme.default);
+                    case ChartThemes.animated:
+                        return import('@amcharts/amcharts4/themes/animated').then(theme => this.themeCache[item] = theme.default);
+                }
+                break;
+            case 'lang':
+                switch (item) {
+                    case 'it-IT':
+                        return import('@amcharts/amcharts4/lang/it_IT').then(lang => this.localizationCache[item] = lang.default);
+                    case 'en-US':
+                        return import('@amcharts/amcharts4/lang/en_US').then(lang => this.localizationCache[item] = lang.default);
+                }
+        }
+        this.log("CORE: Loading Failed. " + (what == 'lang' ? "Language " : "Theme") + " not recognized: " + item);
+        return new Promise((resolve) => { resolve(true); });
+    }
+    /**
+     * @ignore
+     */
+    log(text) {
+        if (this.logs)
+            console.log("@esfaenza/es-charts: " + text);
+    }
+}
+
+/**
+ * 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...
+ */
+class BaseChartComponent {
+    /**
+     * Costruttore
+     *
+     * @param {ElementRef} el Contenitore all'interno del cui viene creato il grafico. Utilizzato per estrapolarne la **ContainerHeight**
+     * @param {Object} platformId piattaforma Angular (browser, ecc...) per essere sicuri che amcharts venga attivato solo lato browser. Non utilizzando SSR nelle applicazioni che consumano questa libreria non è particolarmente significativo, ma non si sa mai
+     * @param {NgZone} zone NgZone di default per permettere di inizializzare il grafico all'infuori di Angular per avere qualche prestazione in più
+     * @param {ChartLoader} Charter Istanza del Loader che si occuperà di caricare in memoria tutto ciò che serve per il grafico attuale (temi, locale, animazioni, ecc...)
+     * @param {ChartDispatcher} Dispatcher Istanza del Dispatcher che si occupa di differire il caricamento dei grafici 1 dopo l'altro in modo che caricamenti pseudo paralleli incasinino tutto
+     * @param {boolean} logs Indica se effettuare log a console o meno, iniettato dalle classi specializzate dal token ESC_LOGS
+     * @param {boolean} animations Indica se per questo grafico devono essere attive o meno le animazioni. Impostazione generica presa dal token ESC_ANIMATIONS
+     * @param {string} locale Indica il locale specifico per questo grafico. Impostazione generica presa dal token ESC_LOCALE
+     * @param {string} theme Indica il tema specifico per questo grafico. Impostazione generica presa dal token ESC_THEME
+     */
+    constructor(el, platformId, zone, Charter, Dispatcher, logs, animations, locale, theme) {
+        this.el = el;
+        this.platformId = platformId;
+        this.zone = zone;
+        this.Charter = Charter;
+        this.Dispatcher = Dispatcher;
+        this.logs = logs;
+        this.animations = animations;
+        this.locale = locale;
+        this.theme = theme;
+        /**
+         * Nome del grafico, fondamentale assegnarlo per permettere alla libreria di schedularne la creazione
+         */
+        this.name = "";
+        /**
+         * Dopo aver navigato a un nuovo grafico verranno attesi questi millisecondi prima di richiedere i dati attraverso la **DataRetrieve**.
+         *
+         * Questo per evitare che l'utente cliccando velocemente "avanti" generi tonnellate di richieste inutili
+         */
+        this.BrowseDelayMs = 500;
+        /**
+         * Evento lanciato sulla selezione di un range di dati o dalla timeline o dal grafico. Valido per tutti i grafici che supportano serie basate sulle date
+         */
+        this.onSelectionChanged = new EventEmitter();
+        /**
+         * Evento lanciato dal click di una serie dalla Legenda, a patto che l'Input **HideSeriesOnLabelClick** sia impostato a false
+         */
+        this.onSeriesClicked = new EventEmitter();
+        /**
+         * Evento lanciato all'inizio del caricamento di una nuova pagina del grafico
+         */
+        this.onLoadStart = new EventEmitter();
+        /**
+         * Evento lanciato al termine del caricamento di una nuova pagina del grafico
+         */
+        this.onLoadEnd = new EventEmitter();
+        /**
+        * Evento lanciato al termine della creazione del grafico referenziando l'istanza nativa del grafico creato in modo da poter effettuare modifiche
+        * post inizializzazione lato applicativo
+        */
+        this.chartLoaded = new EventEmitter();
+        /**
+         * Serve a decidere se sarà presente l'interfaccia di paginazione
+         */
+        this.isPaged = false;
+        /**
+         * @ignore
+         */
+        this.initDone = false;
+    }
+    /**
+     * Metodo di inizializzazione post valorizzazione degli input, utilizzato per valorizzare correttamente le proprietà essenziali del grafico (Animazioni, Tema e Locale)
+     *
+     * Viene data priorità ai Settings (HTML), priorità secondaria agli Input diretti (Lato HTML), priorità ultima alle impostazioni globali,
+     * impostate in fase di import del modulo assegnando valori ai token ESC_LOCALE, ESC_ANIMATIONS, ESC_THEME
+     */
+    ngOnInit() {
+        // Qui servono solo le variabili da conoscere PRE-graficazione per il caricamento dei moduli lazy del grafico
+        this.Animations = this.Settings?.Animations != null ? this.Settings?.Animations : (this.Animations != null ? this.Animations : this.animations);
+        this.Theme = this.Settings?.Theme != null ? this.Settings?.Theme : (this.Theme != null ? this.Theme : this.theme);
+        this.Locale = this.Settings?.Locale != null ? this.Settings?.Locale : (this.Locale != null ? this.Locale : this.locale);
+        this.isPaged = (this.DataArray && this.DataArray.length > 0 && !this.Data) || (this.DataDtos && this.DataDtos.length > 0 && !!this.DataRetrieve);
+        this.log("Chart " + this.name + ": ngOnInit");
+    }
+    /**
+     * Implementazione utilizzata per controllare eventuali proprietà chiave del grafico e rigraficare tutto qualora si rivelasse necessario
+     *
+     * @param {SimpleChanges} changes Indicazione dei cambiamenti sulle proprietà del grafico. Vedere documentazione Angular in merito
+     */
+    ngOnChanges(changes) {
+        if (!this.initDone)
+            return;
+        this.log("Chart " + this.name + ": ngOnChanges");
+        let propsToCheck = ["Timeline", "Legend", "Settings", "Animations", "Theme", "Locale", ...this.getSpecificPropertiesToCheck()];
+        this.checkPropertiesAndRegraphicateAsNeeded(changes, propsToCheck);
+    }
+    /**
+     * Nel post inizializzazione, a patto che mi trovi in ambiente "browser", proseguo al caricamento del grafico sull'HTML
+     */
+    ngAfterViewInit() {
+        if (!this.name)
+            throw "a Unique name is mandatory to create a chart";
+        this.log("Chart " + this.name + ": ngAfterViewInit, graphicating chart outside Angular");
+        if (!this.isPaged)
+            this.dispatchLoadChart();
+    }
+    /**
+     * All'onDestroy scarico il grafico per liberare memoria
+     */
+    ngOnDestroy() {
+        if (this.Chart) {
+            this.log("Chart " + this.name + ": Unloading destroyed chart");
+            this.browserOnly(() => { this.Chart.dispose(); this.Dispatcher.deregisterGraph(this.name); });
+        }
+        else
+            this.log("Chart " + this.name + ": Unloading uncreated chart component. It probably was a duplicated");
+    }
+    /**
+     * Registra il grafico attuale nel Dispatcher in modo che venga caricato appena possibile
+     */
+    dispatchLoadChart() {
+        this.browserOnly(() => {
+            this.Dispatcher.register(this.name, () => { return this.loadChart(); });
+        });
+    }
+    /**
+     * Il caricamento del grafico funziona nel seguente modo:
+     *
+     * 1) Caricamento del tema e delle animazioni, qualora necessari
+     *
+     * 2) Caricamento delle impostazioni specifiche e integrazione con le impostazioni generiche
+     *
+     * 3) Graficazione
+     *
+     * 4) Caricamento del locale
+     */
+    loadChart() {
+        this.log("Chart " + this.name + ": Start loading Modules if needed");
+        return Promise.all([
+            this.setupAmChartsThemes().then(() => {
+                this.log("Chart " + this.name + ": Graphicating after modules load");
+                var castedSettings = this.getCastedSettings();
+                this.fillSettings(castedSettings);
+                this.fillSpecificSettings(castedSettings);
+                this.ChartService = this.graphicate(castedSettings);
+                this.Chart = this.ChartService.ChartInstance;
+                if (!this.Chart)
+                    this.log("Chart " + this.name + ": Could not create graph");
+                return this.Charter.applyLocale(this.Chart, this.Locale).then(() => { this.initDone = true; this.chartLoaded.emit(this); });
+            })
+        ]);
+    }
+    /**
+     * Riempimento delle impostazioni nella classe Settings. Si danno priorità ai valori già impostati nei Settings,
+     * integrando eventualmente con le  proprietà del grafico
+     *
+     * @param {BaseSettings} settings Impostazioni base ricevute dalla specializzazione del grafico
+     */
+    fillSettings(settings) {
+        // Merge degli Input con i Settings, dando priorità ai Settings
+        settings.Theme = settings.Theme ? settings.Theme : this.Theme;
+        settings.Locale = settings.Locale ? settings.Locale : this.Locale;
+        settings.Animations = settings.Animations != null ? settings.Animations : this.Animations;
+        settings.Legend = settings.Legend != null ? settings.Legend : this.Legend;
+        settings.Name = settings.Name ? settings.Name : this.name;
+        settings.Timeline = settings.Timeline != null ? settings.Timeline : this.Timeline;
+        settings.AdaptLabelSizeAndOrientation = settings.AdaptLabelSizeAndOrientation != null ? settings.AdaptLabelSizeAndOrientation : this.AdaptLabelSizeAndOrientation;
+        settings.XAxisTitle = settings.XAxisTitle ? settings.XAxisTitle : this.XTitle;
+        settings.YAxisTitle = settings.YAxisTitle ? settings.YAxisTitle : this.YTitle;
+        settings.LegendPosition = settings.LegendPosition ? settings.LegendPosition : this.LegendPosition;
+        settings.HideSeriesOnLabelClick = settings.HideSeriesOnLabelClick != null ? settings.HideSeriesOnLabelClick : this.HideSeriesOnLabelClick;
+        settings.MinGridDistance = settings.MinGridDistance != null ? settings.MinGridDistance : this.MinGridDistance;
+        settings.LegendPadding = settings.LegendPadding ? settings.LegendPadding : this.LegendPadding ?? null;
+        settings.ContainerHeight = this.el.nativeElement.parentElement.offsetHeight;
+        settings.OnSeriesClickCallback = (series) => { this.onSeriesClicked.emit(series); };
+        settings.OnSelectionChangedCallback = (event) => { this.onSelectionChanged.emit({ from: event.from, to: event.to, initial: event.initial }); };
+    }
+    /**
+     * Controlla i cambiamenti avvenuti alle proprietà chiave e rieffettua la graficazione qualora necessario
+     *
+     * @param {SimpleChanges} changes Indicazione della modifiche avvenute nei vari Input
+     * @param {string[]} propsToCheck Lista degli Input da controllare per cui una modifica causa una rigraficazione
+     */
+    checkPropertiesAndRegraphicateAsNeeded(changes, propsToCheck) {
+        let toReGraphicate = false;
+        for (let i = 0; i < propsToCheck.length; i++)
+            toReGraphicate = toReGraphicate || (changes[propsToCheck[i]] && changes[propsToCheck[i]].currentValue);
+        if (toReGraphicate)
+            this.reloadChart();
+    }
+    /**
+     * Funzione che effettua un cambio di pagina per i grafici paginati. Qualora **data** fosse nullo significa che è iniziato un caricamento
+     * e anche lato applicativo il DataRetrieve dovrà considerare che l'assenza di valori non è altro che un'indicazione di inizio caricamento
+     *
+     * Il caricamento di qualsiasi pagina genererà comunque una primo evento con **data** nullo in modo da indicare l'inizio caricamento e
+     * in seconda istanza un altro evento in cui **data** sarà sempre valorizzato, o con il Dto da usare per recuperare i dati, o con i dati
+     * veri e propri già presenti nel **DataArray**
+     *
+     * I callback **onLoadStart** e **onLoadEnd** vengono sempre chiamati
+     *
+     * @param {{ data: LineChartData | PieChartData | Vertical2DChartData | VerticalChartData | any, index: number }} nd Indice del caricamento dati, con eventualmente già i dati se disponibili
+     */
+    changePage(nd) {
+        if (!nd.data) {
+            this.loadingChart = true;
+            // Serve per informare l'applicativo in listening sull'indice attualmente in visualizzazione. 
+            // La mancanza di dati indica che non devono essere effettuate ricerche per ora
+            if (this.DataRetrieve)
+                this.DataRetrieve(null, nd.index);
+            this.onLoadStart.emit();
+            return;
+        }
+        if (this.DataRetrieve)
+            this.DataRetrieve(nd.data, nd.index).then(t => { this.changePageDataReceived(t); });
+        else
+            this.changePageDataReceived(nd.data);
+    }
+    /**
+     * Al termine del caricamento dei dati di una pagina questo metodo viene chiamato per rigraficare la situazione con i nuovi dati
+     *
+     * @param {LineChartData | PieChartData | Vertical2DChartData | VerticalChartData | any} data Dati del grafico
+     */
+    changePageDataReceived(data) {
+        this.loadingChart = false;
+        this.onLoadEnd.emit();
+        let firstBind = !this.Data;
+        this.Data = data;
+        if (!firstBind)
+            this.reloadChart();
+        else
+            this.dispatchLoadChart();
+    }
+    /**
+     * Ricarica il grafico distruggendo il vecchio e ricreando il nuovo
+     *
+     * Le chiamate a questo metodo possono essere trasformate in chiamate al metodo **graphicate** della Service, se solo quel metodo fosse abbastanza intelligente per capire
+     * le differenze fra il grafico com'era prima e come deve diventare, in modo da non ricrearlo ma semplicemente modificare quello che già è disegnato
+     */
+    reloadChart() {
+        this.browserOnly(() => { if (!this.Chart.isDisposed())
+            this.Chart.dispose(); this.Dispatcher.deregisterGraph(this.name); });
+        this.Dispatcher.register(this.name, () => { return this.loadChart(); });
+    }
+    /**
+     * Permette di aggiungere un blocco di dati in maniera "live" ad un grafico
+     */
+    addData(chartData) {
+        this.ChartService.refreshData(chartData);
+    }
+    ;
+    /**
+     * Funzione che si occupa di caricare i temi necessari per il grafico in oggetto. Prima applica il tema, poi, se serve, applica le animazioni
+     */
+    setupAmChartsThemes() {
+        return Promise.all([
+            this.Charter.applyTheme(am4core, this.Theme).then(() => {
+                return this.Animations ? this.Charter.applyAnimations(am4core) : this.Charter.unapplyAnimations(am4core);
+            })
+        ]);
+    }
+    /**
+     * @ignore
+     */
+    log(log) {
+        if (this.logs)
+            console.log("@esfaenza/es-charts: " + log);
+    }
+    /**
+     * @ignore
+     */
+    browserOnly(f) {
+        if (isPlatformBrowser(this.platformId)) {
+            this.zone.runOutsideAngular(() => {
+                f();
+            });
+        }
+    }
+}
+BaseChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseChartComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+BaseChartComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseChartComponent, inputs: { XTitle: "XTitle", YTitle: "YTitle", Settings: "Settings", Legend: "Legend", LegendPosition: "LegendPosition", Timeline: "Timeline", name: "name", Animations: "Animations", Theme: "Theme", Locale: "Locale", HideSeriesOnLabelClick: "HideSeriesOnLabelClick", MinGridDistance: "MinGridDistance", AdaptLabelSizeAndOrientation: "AdaptLabelSizeAndOrientation", LegendPadding: "LegendPadding", DataDtos: "DataDtos", DataDtoStartIndex: "DataDtoStartIndex", DataRetrieve: "DataRetrieve", BrowseDelayMs: "BrowseDelayMs" }, outputs: { onSelectionChanged: "onSelectionChanged", onSeriesClicked: "onSeriesClicked", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd", chartLoaded: "chartLoaded" }, queries: [{ propertyName: "header_tr", first: true, predicate: ["header"], descendants: true }, { propertyName: "loading_template", first: true, predicate: ["loading"], descendants: true }], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseChartComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Object }, { type: i0.NgZone }, { type: ChartLoader }, { type: ChartDispatcher }, { type: undefined }, { type: undefined }, { type: undefined }, { type: undefined }]; }, propDecorators: { XTitle: [{
+                type: Input
+            }], YTitle: [{
+                type: Input
+            }], Settings: [{
+                type: Input
+            }], Legend: [{
+                type: Input
+            }], LegendPosition: [{
+                type: Input
+            }], Timeline: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], Animations: [{
+                type: Input
+            }], Theme: [{
+                type: Input
+            }], Locale: [{
+                type: Input
+            }], HideSeriesOnLabelClick: [{
+                type: Input
+            }], MinGridDistance: [{
+                type: Input
+            }], AdaptLabelSizeAndOrientation: [{
+                type: Input
+            }], LegendPadding: [{
+                type: Input
+            }], DataDtos: [{
+                type: Input
+            }], DataDtoStartIndex: [{
+                type: Input
+            }], DataRetrieve: [{
+                type: Input
+            }], BrowseDelayMs: [{
+                type: Input
+            }], header_tr: [{
+                type: ContentChild,
+                args: ['header', { static: false }]
+            }], loading_template: [{
+                type: ContentChild,
+                args: ['loading', { static: false }]
+            }], onSelectionChanged: [{
+                type: Output
+            }], onSeriesClicked: [{
+                type: Output
+            }], onLoadStart: [{
+                type: Output
+            }], onLoadEnd: [{
+                type: Output
+            }], chartLoaded: [{
+                type: Output
+            }] } });
+
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un LineChart
+ */
+class LineChartService {
+    /** @ignore */
+    constructor(Adapter, dateExts) {
+        this.Adapter = Adapter;
+        this.dateExts = dateExts;
+        /** @ignore */
+        this.DataGroupBucketSize = 1500;
+        /** @ignore */
+        this.OpacityOnSelected = 0.3;
+        /** @ignore */
+        this.singleDataSet = false;
+        //******************** 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 LineChart
+     */
+    graphicate(data, settings) {
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
+        let threshold = settings.DataGroupingThreshold ?? 3000;
+        this.singleDataSet = settings.MergeDatasets ?? false;
+        let showTicks = settings.ShowTicks == null ? true : settings?.ShowTicks;
+        let dataShouldBeGrouped = Math.max(...dataConverted.series.map(t => t.values.length)) > threshold;
+        let showTimeline = settings.Timeline || dataShouldBeGrouped;
+        let seriesWithInterval = dataConverted.series.some(t => t.interval);
+        let interval = seriesWithInterval ? dataConverted.series.find(t => t.interval).interval : null;
+        let gapsAllowed = settings?.AllowGaps == null ? seriesWithInterval : settings?.AllowGaps;
+        let finalInstant = settings?.FinalInstants ?? true;
+        //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;
+        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
+        if (settings.YAxisTitle) {
+            yAxis.title.text = settings.YAxisTitle;
+            yAxis.title.fontWeight = "bold";
+        }
+        if (settings.Min)
+            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 dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
+        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;
+        }
+        dateAxis.renderer.minGridDistance = settings?.MinGridDistance ?? 50;
+        dateAxis.renderer.grid.template.location = 0;
+        dateAxis.minZoomCount = 5;
+        dateAxis.groupData = dataShouldBeGrouped;
+        dateAxis.groupCount = settings.DataGroupBucketSize ?? this.DataGroupBucketSize;
+        //Se ho almeno una serie ad intervallo e i settings non mi impediscono esplicitamente di usare i gaps, visualizzo i dati col gap
+        if (gapsAllowed) {
+            if (!seriesWithInterval) {
+                console.error("Per utilizzare la funzionalità dei gap è obbligatorio definire un intervallo nelle serie del grafico");
+                return null;
+            }
+            dateAxis.baseInterval = { count: interval.count, timeUnit: interval.timeunit };
+        }
+        if (showTimeline)
+            ChartInstanceCasted.scrollbarX = new am4charts.XYChartScrollbar();
+        let seriesToPush = [];
+        let seriesColors = [];
+        let defaultIndex = 0;
+        //-- Generazione di un unico dataset invece che N, per poter gestire un unico tooltip
+        if (this.singleDataSet) {
+            this.ChartInstance.data = this.generateSingleDataset(dataConverted);
+            ;
+            dateAxis.cursorTooltipEnabled = false;
+        }
+        //-- Fine generazione
+        dataConverted.series.forEach((s, index) => {
+            if (s.values[0] && !(s.values[0].d instanceof Date)) {
+                for (let v = 0; v < s.values.length; v++)
+                    s.values[v].d = new Date(s.values[v].d);
+            }
+            var correctOrder = true;
+            var prevDate = null;
+            for (let v = 0; v < s.values.length; v++) {
+                if (!prevDate)
+                    prevDate = s.values[v].d;
+                else if (s.values[v].d < prevDate) {
+                    correctOrder = false;
+                    break;
+                }
+            }
+            if (!correctOrder)
+                s.values.sort((d1, d2) => d1.d.getTime() - d2.d.getTime());
+            let fill = s.fill != null && s.fill != undefined ? s.fill : (settings?.Fill ?? false);
+            let series = settings?.Step ? new am4charts.StepLineSeries() : new am4charts.LineSeries();
+            series.dataFields.valueY = "v" + (this.singleDataSet ? index : "");
+            series.dataFields.dateX = "d";
+            series.dataFields.measureUnit = s.uom;
+            series.name = s.name;
+            series.strokeWidth = settings?.StrokeSize ?? 1;
+            series.connect = !gapsAllowed;
+            series.minBulletDistance = 10;
+            series.tooltipText = this.singleDataSet ? "" : "{name}: [bold]{valueY}[/]";
+            series.tooltip.pointerOrientation = "vertical";
+            series.tooltip.background.fillOpacity = 0.5;
+            series.tooltip.label.padding(12, 12, 12, 12);
+            series.fillOpacity = fill ? 1 : 0.0001;
+            series.stacked = fill;
+            //Dataset singolo, i dati sono registrati a livello di chart, creo il tooltip che permette di vederli tutti insieme
+            //altrimenti assegno i dati della serie direttamente alla serie
+            if (this.singleDataSet) {
+                series.tooltip.getFillFromObject = false;
+                series.tooltip.background.fill = am4core.color("#eee");
+                series.tooltip.label.fill = am4core.color("#00");
+                series.tooltip.defaultState.transitionDuration = 0;
+                series.tooltip.hiddenState.transitionDuration = 0;
+                //Utilizzo il mio dateService per la formattazione della data in modo che non debba mai gestire n formati fra n librerie... bellissimo
+                series.dateFormatter.format = (source) => {
+                    if (interval && finalInstant) {
+                        let timepart = null;
+                        switch (interval.timeunit) {
+                            case "hour":
+                                timepart = 'day';
+                                break;
+                            case "minute":
+                                timepart = 'hour';
+                                break;
+                            case "second":
+                                timepart = 'minute';
+                                break;
+                        }
+                        if (timepart)
+                            return this.dateExts.adjustDateToFinalInstant(source, timepart, interval ? interval.timeunit == "second" : false);
+                    }
+                    else
+                        return this.dateExts.getFormatted(source, false, interval ? interval.timeunit == "second" : false);
+                };
+                series.adapter.add("tooltipText", () => {
+                    var text = "[bold]{dateX.formatDate()}[/]\n";
+                    this.ChartInstance.series.each((item) => {
+                        let uom = " [font-style: italic]" + series.dataFields.measureUnit || "" + "[/]";
+                        text += "[" + item.stroke.hex + "]●[/] " + item.name + ": [bold]{" + item.dataFields.valueY + "}[/]" + uom + "\n";
+                    });
+                    return text;
+                });
+            }
+            else
+                series.data = s.values;
+            let segment = series.segments.template;
+            let hoverState = segment.states.create("hover");
+            hoverState.properties.strokeWidth = (settings?.StrokeSize ?? 1) + 1;
+            let dimmed = segment.states.create("dimmed");
+            dimmed.properties.stroke = am4core.color("#dadada");
+            //Se la serie ha un colore, uso quello, altrimenti pesco dai colori di default andando in ordine
+            if (s.color)
+                seriesColors.push(am4core.color(s.color));
+            else {
+                seriesColors.push(ChartInstanceCasted.colors.list[defaultIndex % ChartInstanceCasted.colors.list.length]);
+                defaultIndex++;
+            }
+            seriesToPush.push(series);
+        });
+        ChartInstanceCasted.colors.list = seriesColors;
+        //Scrivo le serie nel grafico
+        seriesToPush.forEach(s => {
+            ChartInstanceCasted.series.push(s);
+            if (showTimeline)
+                ChartInstanceCasted.scrollbarX.series.push(s);
+        });
+        if (settings.Legend) {
+            this.ChartInstance.legend = new am4charts.Legend();
+            this.ChartInstance.legend.position = settings?.LegendPosition ?? 'right';
+            this.ChartInstance.legend.scrollable = true;
+            this.ChartInstance.legend.itemContainers.template.tooltipText = "{name}";
+            this.ChartInstance.legend.itemContainers.template.events.on("over", (event) => { this.processOver(event.target.dataItem.dataContext); });
+            this.ChartInstance.legend.itemContainers.template.events.on("out", () => { this.processOut(); });
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = settings.LegendPadding.top ?? 0;
+                template.paddingBottom = settings.LegendPadding.bottom ?? 0;
+                template.paddingLeft = settings.LegendPadding.left ?? 0;
+                template.paddingRight = settings.LegendPadding.right ?? 0;
+            }
+        }
+        this.ChartInstance.cursor = new am4charts.XYCursor();
+        //Prove******************************************************************************************************************************
+        // this.ChartInstance.cursor.events.on("cursorpositionchanged", (ev) => {
+        //     //var value = dateAxis.positionToDate(dateAxis.toAxisPosition(ev.target.xPosition));
+        //     var dt = dateAxis.series.values.find(t => t.dataItem.values.dateX);
+        //     if (dt && dt.dataItem) {
+        //         console.log(dt.dataItem.values);
+        //         // this.ChartInstance.tooltipText = dt;
+        //     }
+        //     else {
+        //         this.ChartInstance.tooltipText = "";
+        //     }
+        // });
+        //******************************************************************************************************************************
+        this.ChartInstance.cursor.xAxis = dateAxis;
+        this.ChartInstance.cursor.yAxis = yAxis;
+        if (this.singleDataSet)
+            this.ChartInstance.cursor.maxTooltipDistance = -1;
+        //TODO: Cercare di capire perché è figlio di puttana......
+        dateAxis.events.on("startchanged", t => this.emitSelectionChanged(t, settings));
+        dateAxis.events.on("endchanged", t => this.emitSelectionChanged(t, settings));
+        return this;
+    }
+    /** @ignore */
+    refreshData(data) {
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
+        if (this.singleDataSet) {
+            var data = this.generateSingleDataset(dataConverted);
+            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 });
+            }
+        });
+    }
+    /** Partendo da dati divisi per seriue genera un dataset unito con la data come chiave e i vari valori dopo */
+    generateSingleDataset(data) {
+        let dto = {};
+        data.series.forEach((vs, index) => {
+            for (let i = 0; i < vs.values.length; i++) {
+                var dataitem = vs.values[i];
+                var indexer = new Date(dataitem.d).valueOf();
+                if (!dto[indexer])
+                    dto[indexer] = {};
+                dto[indexer]['v' + index] = dataitem.v;
+            }
+        });
+        var dates = Object.keys(dto);
+        var ret = [];
+        for (let i = 0; i < dates.length; i++) {
+            let values = dto[dates[i]];
+            let item = { d: new Date(parseInt(dates[i])) };
+            var vals = Object.keys(values);
+            for (let ii = 0; ii < vals.length; ii++) {
+                let series = vals[ii];
+                let singleVal = values[series];
+                item[series] = singleVal;
+            }
+            ret.push(item);
+        }
+        return ret;
+    }
+    /** @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 */
+    processOver(hoveredSeries) {
+        hoveredSeries.toFront();
+        let fill = hoveredSeries.stacked;
+        hoveredSeries.segments.each((segment) => {
+            segment.setState("hover");
+            if (!fill)
+                segment.fillSprite.fillOpacity = this.OpacityOnSelected;
+        });
+        if (!fill)
+            hoveredSeries.legendDataItem.marker.children.getIndex(1).fillOpacity = this.OpacityOnSelected;
+        this.ChartInstance.series.each((series) => {
+            if (series != hoveredSeries) {
+                let fill = series.stacked;
+                series.segments.each((segment) => {
+                    segment.setState("dimmed");
+                    if (!fill)
+                        segment.fillSprite.fillOpacity = 0;
+                });
+            }
+        });
+    }
+    /** @ignore */
+    processOut() {
+        this.ChartInstance.series.each((series) => {
+            let fill = series.stacked;
+            series.segments.each((segment) => {
+                segment.setState("default");
+                if (!fill)
+                    segment.fillSprite.fillOpacity = 0;
+            });
+            if (!fill)
+                series.legendDataItem.marker.children.getIndex(1).fillOpacity = 0;
+        });
+    }
+    /** @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 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) {
+        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?.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 = settings?.LegendPosition ?? 'right';
+            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = settings.LegendPadding.top ?? 0;
+                template.paddingBottom = settings.LegendPadding.bottom ?? 0;
+                template.paddingLeft = settings.LegendPadding.left ?? 0;
+                template.paddingRight = settings.LegendPadding.right ?? 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 = settings?.MinGridDistance ?? 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) {
+        if (settings.Timeline) {
+            console.error("Timeline not supported for pie chart");
+            return null;
+        }
+        //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
+        am4core.options.autoDispose = true;
+        this.ChartInstance = am4core.create(settings.Name, settings.Mode3D ? am4charts.PieChart3D : am4charts.PieChart);
+        this.ChartInstance.innerRadius = ((settings.DonutRadiusPercentage || 15) / 100) * settings.ContainerHeight;
+        let series = this.ChartInstance.series.push(settings.Mode3D ? new am4charts.PieSeries3D() : new am4charts.PieSeries());
+        series.dataFields.value = "v";
+        series.dataFields.category = "k";
+        //Il default sono valori percentuali
+        if (this.ViewAbsoluteValues) {
+            series.legendSettings.valueText = "{value}";
+            series.labels.template.text = "{category}: [bold]{value}[/]";
+        }
+        series.slices.template.stroke = am4core.color("#fff");
+        series.slices.template.strokeOpacity = 1;
+        series.slices.template.togglable = false;
+        series.hiddenState.properties.opacity = 1;
+        series.hiddenState.properties.endAngle = -90;
+        series.hiddenState.properties.startAngle = -90;
+        if (settings.HideZeroes == null ? true : settings.HideZeroes) {
+            series.ticks.template.events.on("ready", this.hideZeroes);
+            series.ticks.template.events.on("visibilitychanged", this.hideZeroes);
+            series.labels.template.events.on("ready", this.hideZeroes);
+            series.labels.template.events.on("visibilitychanged", this.hideZeroes);
+        }
+        series.slices.template.events.on("hit", (ev) => {
+            if (settings.OnSeriesClickCallback) {
+                let clickedSeries = ev.target.dataItem.dataContext.k;
+                settings.OnSeriesClickCallback(clickedSeries);
+            }
+        });
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForPieChart(data) : data;
+        let defaultIndex = 0;
+        for (let i = 0; i < dataConverted.values.length; i++) {
+            if (!dataConverted.values[i].c) {
+                dataConverted.values[i].c = this.ChartInstance.colors.list[defaultIndex % this.ChartInstance.colors.list.length];
+                defaultIndex++;
+            }
+            else
+                dataConverted.values[i].c = am4core.color(dataConverted.values[i].c);
+        }
+        series.slices.template.propertyFields.fill = "c";
+        this.ChartInstance.data = dataConverted.values;
+        if (!settings.LabelsVisible) {
+            series.labels.template.disabled = true;
+            series.ticks.template.disabled = true;
+        }
+        else if (settings.LabelsWrap || settings.LabelsTruncate) {
+            series.labels.template.maxWidth = settings.LabelsWidth || 100;
+            if (settings.LabelsWrap)
+                series.labels.template.wrap = true;
+            else if (settings.LabelsTruncate)
+                series.labels.template.truncate = true;
+        }
+        if (settings.Legend) {
+            let legend = new am4charts.Legend();
+            this.ChartInstance.legend = legend;
+            legend.position = settings?.LegendPosition || "bottom";
+            legend.itemContainers.template.togglable = settings.HideSeriesOnLabelClick === true;
+            legend.itemContainers.template.tooltipText = "{category}";
+            //Se la legenda non fa il toggle della serie la considero come se fosse un click sulla serie in se
+            if (!settings.HideSeriesOnLabelClick) {
+                legend.itemContainers.template.events.on("hit", (ev) => {
+                    if (settings.OnSeriesClickCallback) {
+                        let clickedSeries = ev.target.dataItem.dataContext.legendDataItem.name;
+                        settings.OnSeriesClickCallback(clickedSeries);
+                    }
+                });
+            }
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = settings.LegendPadding.top ?? 0;
+                template.paddingBottom = settings.LegendPadding.bottom ?? 0;
+                template.paddingLeft = settings.LegendPadding.left ?? 0;
+                template.paddingRight = settings.LegendPadding.right ?? 0;
+            }
+        }
+        return this;
+    }
+    /** @ignore */
+    refreshData(data) {
+        //TODO:IMPL
+    }
+    /** @ignore */
+    hideZeroes(ev) {
+        if (ev.target.dataItem && (ev.target.dataItem.values.value.percent == 0))
+            ev.target.hide();
+        else
+            ev.target.show();
+    }
+}
+
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
+ */
+class Vertical2DChartService {
+    /** @ignore */
+    constructor(Adapter) {
+        this.Adapter = Adapter;
+        /** @ignore */
+        this.DefaultGroupPaddingPercentage = 5;
+        /** @ignore */
+        this.dangerZone = 50;
+        /** @ignore */
+        this.LabelWidth = 150;
+        /** @ignore */
+        this.LabelRightWhenCompressed = 20;
+        /** @ignore */
+        this.LabelTopWhenCompressed = -5;
+        /** @ignore */
+        this.DefaultColumnWidthPercentage = 85;
+    }
+    /**
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
+     */
+    graphicate(data, settings) {
+        if (settings.Timeline) {
+            console.error("Timeline not supported for vertical chart");
+            return null;
+        }
+        //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 = settings?.LegendPosition ?? 'right';
+            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = settings.LegendPadding.top ?? 0;
+                template.paddingBottom = settings.LegendPadding.bottom ?? 0;
+                template.paddingLeft = settings.LegendPadding.left ?? 0;
+                template.paddingRight = settings.LegendPadding.right ?? 0;
+            }
+        }
+        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
+        if (settings.YAxisTitle) {
+            yAxis.title.text = settings.YAxisTitle;
+            yAxis.title.fontWeight = "bold";
+        }
+        let categoryAxis = ChartInstanceCasted.xAxes.push(new am4charts.CategoryAxis());
+        if (settings.XAxisTitle) {
+            categoryAxis.title.text = settings.XAxisTitle;
+            categoryAxis.title.fontWeight = "bold";
+        }
+        yAxis.min = 0;
+        categoryAxis.dataFields.category = 'key';
+        categoryAxis.renderer.cellStartLocation = am4core.percent(settings.GroupPaddingPercentage ?? this.DefaultGroupPaddingPercentage).value;
+        categoryAxis.renderer.cellEndLocation = am4core.percent(100 - (settings.GroupPaddingPercentage ?? this.DefaultGroupPaddingPercentage)).value;
+        categoryAxis.renderer.grid.template.location = 0;
+        categoryAxis.renderer.minGridDistance = settings?.MinGridDistance ?? 30;
+        let label = categoryAxis.renderer.labels.template;
+        label.truncate = true;
+        label.maxWidth = settings.LabelWidth ?? this.LabelWidth;
+        label.tooltipText = "{category}";
+        if (settings?.AdaptLabelSizeAndOrientation == null ? true : settings?.AdaptLabelSizeAndOrientation) {
+            categoryAxis.events.on("sizechanged", (ev) => {
+                let axis = ev.target;
+                var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
+                if (cellWidth < axis.renderer.labels.template.maxWidth) {
+                    let areWeInDangerZone = cellWidth < (settings?.LabelVerticalOrientationCutoffWidth ?? this.dangerZone);
+                    axis.renderer.labels.template.rotation = areWeInDangerZone ? -90 : -45;
+                    axis.renderer.labels.template.dx = settings.LabelRightWhenCompressed ?? areWeInDangerZone ? 0 : this.LabelRightWhenCompressed;
+                    axis.renderer.labels.template.dy = settings.LabelTopWhenCompressed ?? this.LabelTopWhenCompressed;
+                    axis.renderer.labels.template.horizontalCenter = "right";
+                    axis.renderer.labels.template.verticalCenter = "middle";
+                }
+                else {
+                    axis.renderer.labels.template.rotation = 0;
+                    axis.renderer.labels.template.dx = 0;
+                    axis.renderer.labels.template.dy = 0;
+                    axis.renderer.labels.template.horizontalCenter = "middle";
+                    axis.renderer.labels.template.verticalCenter = "top";
+                }
+            });
+        }
+        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 */
+    refreshData(data) {
+        //TODO:IMPL
+    }
+    /** @ignore */
+    createSeries(chart, settings, value, name) {
+        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(settings.ColumnWidthPercentage ?? 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);
+                });
+            }
+        }
+    }
+}
+
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
+ */
+class VerticalChartService {
+    /** @ignore */
+    constructor(Adapter) {
+        this.Adapter = Adapter;
+        /** @ignore */
+        this.dangerZone = 50;
+        /** @ignore */
+        this.LabelWidth = 150;
+        /** @ignore */
+        this.LabelRightWhenCompressed = 20;
+        /** @ignore */
+        this.LabelTopWhenCompressed = -5;
+        /** @ignore */
+        this.DefaultColumnWidthPercentage = 85;
+    }
+    /**
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
+     */
+    graphicate(data, settings) {
+        if (settings.Timeline) {
+            console.error("Timeline not supported for vertical chart");
+            return null;
+        }
+        //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;
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
+        ChartInstanceCasted.data = dataConverted.values;
+        if (settings.Legend) {
+            ChartInstanceCasted.legend = new am4charts.Legend();
+            ChartInstanceCasted.legend.position = settings?.LegendPosition ?? 'right';
+            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = settings.LegendPadding.top ?? 0;
+                template.paddingBottom = settings.LegendPadding.bottom ?? 0;
+                template.paddingLeft = settings.LegendPadding.left ?? 0;
+                template.paddingRight = settings.LegendPadding.right ?? 0;
+            }
+        }
+        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
+        if (settings.YAxisTitle) {
+            yAxis.title.text = settings.YAxisTitle;
+            yAxis.title.fontWeight = "bold";
+        }
+        let categoryAxis = ChartInstanceCasted.xAxes.push(new am4charts.CategoryAxis());
+        if (settings.XAxisTitle) {
+            categoryAxis.title.text = settings.XAxisTitle;
+            categoryAxis.title.fontWeight = "bold";
+        }
+        categoryAxis.dataFields.category = "k";
+        categoryAxis.renderer.grid.template.location = 0;
+        categoryAxis.renderer.minGridDistance = settings?.MinGridDistance ?? 30;
+        let label = categoryAxis.renderer.labels.template;
+        label.truncate = true;
+        label.maxWidth = settings.LabelWidth ?? this.LabelWidth;
+        label.tooltipText = "{category}";
+        if (settings?.AdaptLabelSizeAndOrientation == null ? true : settings?.AdaptLabelSizeAndOrientation) {
+            categoryAxis.events.on("sizechanged", (ev) => {
+                let axis = ev.target;
+                var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
+                if (cellWidth < axis.renderer.labels.template.maxWidth) {
+                    let areWeInDangerZone = cellWidth < (settings?.LabelVerticalOrientationCutoffWidth ?? this.dangerZone);
+                    axis.renderer.labels.template.rotation = areWeInDangerZone ? -90 : -45;
+                    axis.renderer.labels.template.dx = settings.LabelRightWhenCompressed ?? areWeInDangerZone ? 0 : this.LabelRightWhenCompressed;
+                    axis.renderer.labels.template.dy = settings.LabelTopWhenCompressed ?? this.LabelTopWhenCompressed;
+                    axis.renderer.labels.template.horizontalCenter = "right";
+                    axis.renderer.labels.template.verticalCenter = "middle";
+                }
+                else {
+                    axis.renderer.labels.template.rotation = 0;
+                    axis.renderer.labels.template.dx = 0;
+                    axis.renderer.labels.template.dy = 0;
+                    axis.renderer.labels.template.horizontalCenter = "middle";
+                    axis.renderer.labels.template.verticalCenter = "top";
+                }
+            });
+        }
+        // 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(settings.ColumnWidthPercentage ?? this.DefaultColumnWidthPercentage);
+        let columnTemplate = series.columns.template;
+        columnTemplate.strokeWidth = 2;
+        columnTemplate.strokeOpacity = 1;
+        return this;
+    }
+    /** @ignore */
+    refreshData(data) {
+        //TODO:IMPL
+    }
+}
+
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un VerticalStackedChart
+ */
+class VerticalStackedChartService {
+    /** @ignore */
+    constructor(Adapter) {
+        this.Adapter = Adapter;
+        /** @ignore */
+        this.dangerZone = 50;
+        /** @ignore */
+        this.LabelWidth = 150;
+        /** @ignore */
+        this.LabelRightWhenCompressed = 20;
+        /** @ignore */
+        this.LabelTopWhenCompressed = -5;
+        /** @ignore */
+        this.DefaultColumnWidthPercentage = 85;
+    }
+    /**
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalStackedChart
+     */
+    graphicate(data, settings) {
+        if (settings.Timeline) {
+            console.error("Timeline not supported for vertical chart");
+            return null;
+        }
+        //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;
+        // Create axes 
+        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
+        if (settings.YAxisTitle) {
+            yAxis.title.text = settings.YAxisTitle;
+            yAxis.title.fontWeight = "bold";
+        }
+        let categoryAxis = ChartInstanceCasted.xAxes.push(new am4charts.CategoryAxis());
+        if (settings.XAxisTitle) {
+            categoryAxis.title.text = settings.XAxisTitle;
+            categoryAxis.title.fontWeight = "bold";
+        }
+        yAxis.min = 0;
+        categoryAxis.dataFields.category = "key";
+        categoryAxis.renderer.grid.template.location = 0;
+        categoryAxis.renderer.minGridDistance = settings?.MinGridDistance ?? 30;
+        let label = categoryAxis.renderer.labels.template;
+        label.truncate = true;
+        label.maxWidth = settings.LabelWidth ?? this.LabelWidth;
+        label.tooltipText = "{category}";
+        if (settings?.AdaptLabelSizeAndOrientation == null ? true : settings?.AdaptLabelSizeAndOrientation) {
+            categoryAxis.events.on("sizechanged", (ev) => {
+                let axis = ev.target;
+                var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
+                if (cellWidth < axis.renderer.labels.template.maxWidth) {
+                    let areWeInDangerZone = cellWidth < (settings?.LabelVerticalOrientationCutoffWidth ?? this.dangerZone);
+                    axis.renderer.labels.template.rotation = areWeInDangerZone ? -90 : -45;
+                    axis.renderer.labels.template.dx = settings.LabelRightWhenCompressed ?? areWeInDangerZone ? 0 : this.LabelRightWhenCompressed;
+                    axis.renderer.labels.template.dy = settings.LabelTopWhenCompressed ?? this.LabelTopWhenCompressed;
+                    axis.renderer.labels.template.horizontalCenter = "right";
+                    axis.renderer.labels.template.verticalCenter = "middle";
+                }
+                else {
+                    axis.renderer.labels.template.rotation = 0;
+                    axis.renderer.labels.template.dx = 0;
+                    axis.renderer.labels.template.dy = 0;
+                    axis.renderer.labels.template.horizontalCenter = "middle";
+                    axis.renderer.labels.template.verticalCenter = "top";
+                }
+            });
+        }
+        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVerticalStackedChart(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;
+        //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
+        for (let prop in dataConverted[0]) {
+            if (prop !== "key")
+                this.createSeriesStacked(ChartInstanceCasted, settings, prop, prop);
+        }
+        if (settings.Legend) {
+            ChartInstanceCasted.legend = new am4charts.Legend();
+            ChartInstanceCasted.legend.position = settings?.LegendPosition ?? 'right';
+            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = settings.LegendPadding.top ?? 0;
+                template.paddingBottom = settings.LegendPadding.bottom ?? 0;
+                template.paddingLeft = settings.LegendPadding.left ?? 0;
+                template.paddingRight = settings.LegendPadding.right ?? 0;
+            }
+        }
+        return this;
+    }
+    /** @ignore */
+    refreshData(data) {
+        //TODO:IMPL
+    }
+    /** @ignore */
+    createSeriesStacked(chart, settings, field, name) {
+        // Set up series
+        let series = chart.series.push(new am4charts.ColumnSeries());
+        series.name = name;
+        series.dataFields.valueY = field;
+        series.dataFields.categoryX = "key";
+        series.sequencedInterpolation = true;
+        series.columns.template.tooltipText = "{name} {categoryX}: [bold]{valueY}[/]";
+        series.columns.template.fillOpacity = .8;
+        series.columns.template.width = am4core.percent(settings.ColumnWidthPercentage ?? this.DefaultColumnWidthPercentage);
+        // Make it stacked
+        series.stacked = true;
+        return series;
+    }
+}
+
+/**
+ * Componente specifico per la graficazione di un qualsiasi tipo di grafico.
+ *
+ * Si basa sul tipo specificato dalla proprietà **Type**
+ */
+class EsChartComponent extends BaseChartComponent {
+    /**
+     * @ignore
+     */
+    constructor(el, ChartLoader, ChartDispatcher, dateService, adapter, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME);
+        this.dateService = dateService;
+        this.adapter = adapter;
+    }
+    /**
+     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     */
+    getSpecificPropertiesToCheck() {
+        return ["Data", "Type"];
+    }
+    /**
+     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     *
+     * @returns {PieChartSettings | AreaChartSettings | LineChartSettings | VerticalChartSettings | Vertical2DChartSettings | VerticalStackedChartSettings} Settings castati al tipo giusto
+     */
+    getCastedSettings() {
+        switch (this.Type) {
+            case 'pie':
+                return (this.Settings ?? new PieChartSettings());
+            case 'area':
+                return (this.Settings ?? new AreaChartSettings());
+            case 'line':
+                return (this.Settings ?? new LineChartSettings());
+            case 'vertical':
+                return (this.Settings ?? new VerticalChartSettings());
+            case 'vertical-2d':
+                return (this.Settings ?? new Vertical2DChartSettings());
+            case 'vertical-stacked':
+                return (this.Settings ?? new VerticalStackedChartSettings());
+        }
+    }
+    /**
+     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     *
+     * @param {PieChartSettings | AreaChartSettings | LineChartSettings | VerticalChartSettings | Vertical2DChartSettings | VerticalStackedChartSettings} settingsCasted Settings castati al tipo giusto
+     */
+    fillSpecificSettings(settingsCasted) {
+        // Nope. Se si usa l'es-chart si danno i settings con l'oggetto
+    }
+    /**
+     * Effettua il rendering di questo grafico in base ai Settings
+     *
+     * @param {PieChartSettings | AreaChartSettings | LineChartSettings | VerticalChartSettings | Vertical2DChartSettings | VerticalStackedChartSettings} settingsCasted Impostazioni di graficazione
+     * @returns {PieChartService | AreaChartService | LineChartService | VerticalChartService | Vertical2DChartService | VerticalStackedChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     */
+    graphicate(settings) {
+        switch (this.Type) {
+            case 'pie':
+                return new PieChartService(this.adapter).graphicate(this.Data, settings);
+            case 'area':
+                return new AreaChartService(this.adapter).graphicate(this.Data, settings);
+            case 'line':
+                return new LineChartService(this.adapter, this.dateService).graphicate(this.Data, settings);
+            case 'vertical':
+                return new VerticalChartService(this.adapter).graphicate(this.Data, settings);
+            case 'vertical-2d':
+                return new Vertical2DChartService(this.adapter).graphicate(this.Data, settings);
+            case 'vertical-stacked':
+                return new VerticalStackedChartService(this.adapter).graphicate(this.Data, settings);
+        }
+    }
+}
+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 });
+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: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOGS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_ANIMATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOCALE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_THEME]
+                }] }]; }, propDecorators: { Type: [{
+                type: Input
+            }], Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }] } });
+
+/**
+ * Componente specifico per la graficazione di un grafico ad Area
+ */
+class EsAreaChartComponent extends BaseChartComponent {
+    /**
+     * @ignore
+     */
+    constructor(el, ChartLoader, ChartDispatcher, adapter, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME);
+        this.adapter = adapter;
+    }
+    /**
+     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     */
+    getSpecificPropertiesToCheck() {
+        return ["Data", "DataArray"];
+    }
+    /**
+     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     *
+     * @returns {AreaChartSettings} Settings castati al tipo giusto
+     */
+    getCastedSettings() {
+        return (this.Settings ?? new AreaChartSettings());
+    }
+    /**
+     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     *
+     * @param {AreaChartSettings} settingsCasted Settings castati al tipo giusto
+     */
+    fillSpecificSettings(settingsCasted) {
+    }
+    /**
+     * Effettua il rendering di questo grafico in base ai Settings
+     *
+     * @param {AreaChartSettings} settingsCasted Impostazioni di graficazione
+     * @returns {AreaChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     */
+    graphicate(settingsCasted) {
+        return new AreaChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    }
+}
+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 });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOGS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_ANIMATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOCALE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_THEME]
+                }] }]; }, propDecorators: { Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }] } });
+
+/**
+ * Componente specifico per la graficazione di un grafico a Linea su un asse temporale
+ */
+class EsLineChartComponent extends BaseChartComponent {
+    /**
+     * @ignore
+     */
+    constructor(el, ChartLoader, ChartDispatcher, adapter, dateService, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME);
+        this.adapter = adapter;
+        this.dateService = dateService;
+    }
+    /**
+     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     */
+    getSpecificPropertiesToCheck() {
+        return ["Data", "DataArray", "Step", "DataGroupBucketSize", "DataGroupingThreshold", "StrokeSize", "AllowGaps", "MergeDatasets", "FinalInstants", "Fill", "Min", "Max"];
+    }
+    /**
+     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     *
+     * @returns {LineChartSettings} Settings castati al tipo giusto
+     */
+    getCastedSettings() {
+        return (this.Settings ?? new LineChartSettings());
+    }
+    /**
+     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     *
+     * @param {LineChartSettings} settingsCasted Settings castati al tipo giusto
+     */
+    fillSpecificSettings(settingsCasted) {
+        settingsCasted.Step = settingsCasted.Step != null ? settingsCasted.Step : this.Step;
+        settingsCasted.DataGroupBucketSize = settingsCasted.DataGroupBucketSize != null ? settingsCasted.DataGroupBucketSize : this.DataGroupBucketSize;
+        settingsCasted.StrokeSize = settingsCasted.StrokeSize != null ? settingsCasted.StrokeSize : this.StrokeSize;
+        settingsCasted.DataGroupingThreshold = settingsCasted.DataGroupingThreshold != null ? settingsCasted.DataGroupingThreshold : this.DataGroupingThreshold;
+        settingsCasted.AllowGaps = settingsCasted.AllowGaps != null ? settingsCasted.AllowGaps : this.AllowGaps;
+        settingsCasted.MergeDatasets = settingsCasted.MergeDatasets != null ? settingsCasted.MergeDatasets : this.MergeDatasets;
+        settingsCasted.FinalInstants = settingsCasted.FinalInstants != null ? settingsCasted.FinalInstants : this.FinalInstants;
+        settingsCasted.Min = settingsCasted.Min != null ? settingsCasted.Min : this.Min;
+        settingsCasted.Max = settingsCasted.Max != null ? settingsCasted.Max : this.Max;
+        settingsCasted.Fill = settingsCasted.Fill != null ? settingsCasted.Fill : this.Fill;
+    }
+    /**
+     * Effettua il rendering di questo grafico in base ai Settings
+     *
+     * @param {LineChartSettings} settingsCasted Impostazioni di graficazione
+     * @returns {LineChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     */
+    graphicate(settingsCasted) {
+        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 });
+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: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOGS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_ANIMATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOCALE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_THEME]
+                }] }]; }, propDecorators: { Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }], Step: [{
+                type: Input
+            }], DataGroupBucketSize: [{
+                type: Input
+            }], DataGroupingThreshold: [{
+                type: Input
+            }], StrokeSize: [{
+                type: Input
+            }], AllowGaps: [{
+                type: Input
+            }], MergeDatasets: [{
+                type: Input
+            }], FinalInstants: [{
+                type: Input
+            }], Min: [{
+                type: Input
+            }], Max: [{
+                type: Input
+            }], Fill: [{
+                type: Input
+            }] } });
+
+/**
+ * Componente specifico per la graficazione di un grafico a Torta
+ */
+class EsPieChartComponent extends BaseChartComponent {
+    /**
+     * @ignore
+     */
+    constructor(el, ChartLoader, ChartDispatcher, adapter, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME);
+        this.adapter = adapter;
+    }
+    /**
+     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     */
+    getSpecificPropertiesToCheck() {
+        return ["Data", "DataArray", "HideZeroes", "Mode3D", "LabelsWrap", "LabelsTruncate", "LabelsWidth", "LabelsVisible"];
+    }
+    /**
+     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     *
+     * @returns {PieChartSettings} Settings castati al tipo giusto
+     */
+    getCastedSettings() {
+        return (this.Settings ?? new PieChartSettings());
+    }
+    /**
+     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     *
+     * @param {PieChartSettings} settingsCasted Settings castati al tipo giusto
+     */
+    fillSpecificSettings(settingsCasted) {
+        settingsCasted.HideZeroes = settingsCasted.HideZeroes != null ? settingsCasted.HideZeroes : this.HideZeroes;
+        settingsCasted.Mode3D = settingsCasted.Mode3D != null ? settingsCasted.Mode3D : this.Mode3D;
+        settingsCasted.DonutRadiusPercentage = settingsCasted.DonutRadiusPercentage != null ? settingsCasted.DonutRadiusPercentage : this.DonutRadiusPercentage;
+        settingsCasted.LabelsWrap = settingsCasted.LabelsWrap != null ? settingsCasted.LabelsWrap : this.LabelsWrap;
+        settingsCasted.LabelsTruncate = settingsCasted.LabelsTruncate != null ? settingsCasted.LabelsTruncate : this.LabelsTruncate;
+        settingsCasted.LabelsWidth = settingsCasted.LabelsWidth != null ? settingsCasted.LabelsWidth : this.LabelsWidth;
+        settingsCasted.LabelsVisible = settingsCasted.LabelsVisible != null ? settingsCasted.LabelsVisible : this.LabelsVisible;
+    }
+    /**
+     * Effettua il rendering di questo grafico in base ai Settings
+     *
+     * @param {PieChartSettings} settingsCasted Impostazioni di graficazione
+     * @returns {PieChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     */
+    graphicate(settingsCasted) {
+        return new PieChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    }
+}
+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 });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOGS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_ANIMATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOCALE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_THEME]
+                }] }]; }, propDecorators: { Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }], HideZeroes: [{
+                type: Input
+            }], Mode3D: [{
+                type: Input
+            }], DonutRadiusPercentage: [{
+                type: Input
+            }], LabelsWrap: [{
+                type: Input
+            }], LabelsTruncate: [{
+                type: Input
+            }], LabelsWidth: [{
+                type: Input
+            }], LabelsVisible: [{
+                type: Input
+            }] } });
+
+/**
+ * Componente specifico per la graficazione di un grafico a Barre con due dimensioni
+ */
+class EsVertical2DChartComponent extends BaseChartComponent {
+    /**
+     * @ignore
+     */
+    constructor(el, ChartLoader, ChartDispatcher, adapter, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME);
+        this.adapter = adapter;
+    }
+    /**
+     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     */
+    getSpecificPropertiesToCheck() {
+        return ["Data", "DataArray"];
+    }
+    /**
+     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     *
+     * @returns {Vertical2DChartSettings} Settings castati al tipo giusto
+     */
+    getCastedSettings() {
+        return (this.Settings ?? new Vertical2DChartSettings());
+    }
+    /**
+     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     *
+     * @param {Vertical2DChartSettings} settingsCasted Settings castati al tipo giusto
+     */
+    fillSpecificSettings(settingsCasted) {
+        settingsCasted.ColumnWidthPercentage = settingsCasted.ColumnWidthPercentage != null ? settingsCasted.ColumnWidthPercentage : this.ColumnWidthPercentage;
+        settingsCasted.GroupPaddingPercentage = settingsCasted.GroupPaddingPercentage != null ? settingsCasted.GroupPaddingPercentage : this.GroupPaddingPercentage;
+        settingsCasted.LabelWidth = settingsCasted.LabelWidth != null ? settingsCasted.LabelWidth : this.LabelWidth;
+        settingsCasted.LabelVerticalOrientationCutoffWidth = settingsCasted.LabelVerticalOrientationCutoffWidth != null ? settingsCasted.LabelVerticalOrientationCutoffWidth : this.LabelVerticalOrientationCutoffWidth;
+        settingsCasted.LabelRightWhenCompressed = settingsCasted.LabelRightWhenCompressed != null ? settingsCasted.LabelRightWhenCompressed : this.LabelRightWhenCompressed;
+        settingsCasted.LabelTopWhenCompressed = settingsCasted.LabelTopWhenCompressed != null ? settingsCasted.LabelTopWhenCompressed : this.LabelTopWhenCompressed;
+    }
+    /**
+     * Effettua il rendering di questo grafico in base ai Settings
+     *
+     * @param {Vertical2DChartSettings} settingsCasted Impostazioni di graficazione
+     * @returns {Vertical2DChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     */
+    graphicate(settingsCasted) {
+        return new Vertical2DChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    }
+}
+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 });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOGS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_ANIMATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOCALE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_THEME]
+                }] }]; }, propDecorators: { Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }], ColumnWidthPercentage: [{
+                type: Input
+            }], GroupPaddingPercentage: [{
+                type: Input
+            }], LabelWidth: [{
+                type: Input
+            }], LabelVerticalOrientationCutoffWidth: [{
+                type: Input
+            }], LabelRightWhenCompressed: [{
+                type: Input
+            }], LabelTopWhenCompressed: [{
+                type: Input
+            }] } });
+
+/**
+ * Componente specifico per la graficazione di un grafico a Barre
+ */
+class EsVerticalChartComponent extends BaseChartComponent {
+    /**
+     * @ignore
+     */
+    constructor(el, ChartLoader, ChartDispatcher, adapter, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME);
+        this.adapter = adapter;
+    }
+    /**
+     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     */
+    getSpecificPropertiesToCheck() {
+        return ["Data", "DataArray"];
+    }
+    /**
+     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     *
+     * @returns {VerticalChartSettings} Settings castati al tipo giusto
+     */
+    getCastedSettings() {
+        return (this.Settings ?? new VerticalChartSettings());
+    }
+    /**
+     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     *
+     * @param {VerticalChartSettings} settingsCasted Settings castati al tipo giusto
+     */
+    fillSpecificSettings(settingsCasted) {
+        settingsCasted.ColumnWidthPercentage = settingsCasted.ColumnWidthPercentage != null ? settingsCasted.ColumnWidthPercentage : this.ColumnWidthPercentage;
+        settingsCasted.LabelWidth = settingsCasted.LabelWidth != null ? settingsCasted.LabelWidth : this.LabelWidth;
+        settingsCasted.LabelVerticalOrientationCutoffWidth = settingsCasted.LabelVerticalOrientationCutoffWidth != null ? settingsCasted.LabelVerticalOrientationCutoffWidth : this.LabelVerticalOrientationCutoffWidth;
+        settingsCasted.LabelRightWhenCompressed = settingsCasted.LabelRightWhenCompressed != null ? settingsCasted.LabelRightWhenCompressed : this.LabelRightWhenCompressed;
+        settingsCasted.LabelTopWhenCompressed = settingsCasted.LabelTopWhenCompressed != null ? settingsCasted.LabelTopWhenCompressed : this.LabelTopWhenCompressed;
+    }
+    /**
+     * Effettua il rendering di questo grafico in base ai Settings
+     *
+     * @param {VerticalChartSettings} settingsCasted Impostazioni di graficazione
+     * @returns {VerticalChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     */
+    graphicate(settingsCasted) {
+        return new VerticalChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    }
+}
+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 });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOGS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_ANIMATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOCALE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_THEME]
+                }] }]; }, propDecorators: { Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }], ColumnWidthPercentage: [{
+                type: Input
+            }], LabelWidth: [{
+                type: Input
+            }], LabelVerticalOrientationCutoffWidth: [{
+                type: Input
+            }], LabelRightWhenCompressed: [{
+                type: Input
+            }], LabelTopWhenCompressed: [{
+                type: Input
+            }] } });
+
+/**
+ * Componente specifico per la graficazione di un grafico a Barre in modalità Stacked (una serie sopra l'altra)
+ */
+class EsVerticalStackedChartComponent extends BaseChartComponent {
+    /**
+     * @ignore
+     */
+    constructor(el, ChartLoader, ChartDispatcher, adapter, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, ESC_LOCALE, ESC_THEME);
+        this.adapter = adapter;
+    }
+    /**
+     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     */
+    getSpecificPropertiesToCheck() {
+        return ["Data", "DataArray"];
+    }
+    /**
+     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     *
+     * @returns {VerticalStackedChartSettings} Settings castati al tipo giusto
+     */
+    getCastedSettings() {
+        return (this.Settings ?? new VerticalStackedChartSettings());
+    }
+    /**
+     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     *
+     * @param {VerticalStackedChartSettings} settingsCasted Settings castati al tipo giusto
+     */
+    fillSpecificSettings(settingsCasted) {
+        settingsCasted.ColumnWidthPercentage = settingsCasted.ColumnWidthPercentage != null ? settingsCasted.ColumnWidthPercentage : this.ColumnWidthPercentage;
+        settingsCasted.LabelWidth = settingsCasted.LabelWidth != null ? settingsCasted.LabelWidth : this.LabelWidth;
+        settingsCasted.LabelVerticalOrientationCutoffWidth = settingsCasted.LabelVerticalOrientationCutoffWidth != null ? settingsCasted.LabelVerticalOrientationCutoffWidth : this.LabelVerticalOrientationCutoffWidth;
+        settingsCasted.LabelRightWhenCompressed = settingsCasted.LabelRightWhenCompressed != null ? settingsCasted.LabelRightWhenCompressed : this.LabelRightWhenCompressed;
+        settingsCasted.LabelTopWhenCompressed = settingsCasted.LabelTopWhenCompressed != null ? settingsCasted.LabelTopWhenCompressed : this.LabelTopWhenCompressed;
+    }
+    /**
+     * Effettua il rendering di questo grafico in base ai Settings
+     *
+     * @param {VerticalStackedChartSettings} settingsCasted Impostazioni di graficazione
+     * @returns {VerticalStackedChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     */
+    graphicate(settingsCasted) {
+        return new VerticalStackedChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    }
+}
+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 });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOGS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_ANIMATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOCALE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_THEME]
+                }] }]; }, propDecorators: { Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }], ColumnWidthPercentage: [{
+                type: Input
+            }], LabelWidth: [{
+                type: Input
+            }], LabelVerticalOrientationCutoffWidth: [{
+                type: Input
+            }], LabelRightWhenCompressed: [{
+                type: Input
+            }], LabelTopWhenCompressed: [{
+                type: Input
+            }] } });
+
+/**
+ * Classe che identifica i dati per un grafico generico paginato
+ */
+class PagedChartData {
+    /**
+     * Costruttore
+     *
+     * @param {T} data Dati del grafico
+     * @param {string} title Titolo del grafico
+     * @param {Object} dataRetrieveDto Dto utilizzato per recuperare i dati di questo grafico
+     * @param {Function} dataRetrieveFunction Funzione utilizzata per ottenere i dati di questo grafico
+     */
+    constructor(data, title, dataRetrieveDto, dataRetrieveFunction) {
+        this.data = data;
+        this.title = title;
+        this.dataRetrieveDto = dataRetrieveDto;
+        this.dataRetrieveFunction = dataRetrieveFunction;
+    }
+}
+
+/** Componenti esportati dal modulo */
+const COMPONENTS = [
+    EsChartComponent,
+    EsLineChartComponent,
+    EsPieChartComponent,
+    EsVertical2DChartComponent,
+    EsVerticalChartComponent,
+    EsVerticalStackedChartComponent,
+    PageChartSelector,
+    EsAreaChartComponent
+];
+class EsChartsModule {
+    static forRoot(config) {
+        return {
+            ngModule: EsChartsModule,
+            providers: [
+                { provide: ESC_LOCALE, useValue: config?.locale || 'it-IT' },
+                { provide: ESC_ANIMATIONS, useValue: config?.animations == null ? true : config?.animations },
+                { provide: ESC_THEME, useValue: config?.theme || 'spiritedaway' },
+                { provide: ESC_LOGS, useValue: config?.debugMode == null ? false : config?.debugMode },
+                { provide: BaseAdapter, useClass: config?.adapter || BaseAdapter },
+                // Singleton cattiva by Ema. Verificare strade migliori
+                { provide: ChartLoader, useValue: new ChartLoader(config?.debugMode == null ? false : config?.debugMode) }
+            ]
+        };
+    }
+}
+EsChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EsChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsChartsModule, declarations: [EsChartComponent,
+        EsLineChartComponent,
+        EsPieChartComponent,
+        EsVertical2DChartComponent,
+        EsVerticalChartComponent,
+        EsVerticalStackedChartComponent,
+        PageChartSelector,
+        EsAreaChartComponent], imports: [CommonModule], exports: [EsChartComponent,
+        EsLineChartComponent,
+        EsPieChartComponent,
+        EsVertical2DChartComponent,
+        EsVerticalChartComponent,
+        EsVerticalStackedChartComponent,
+        PageChartSelector,
+        EsAreaChartComponent] });
+EsChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsChartsModule, providers: [ChartDispatcher], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EsChartsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [...COMPONENTS],
+                    providers: [ChartDispatcher],
+                    exports: [...COMPONENTS]
+                }]
+        }] });
+
+/*
+ * Public API Surface of es-charts
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AreaChartData, AreaChartSettings, BaseAdapter, BaseChartComponent, BaseInterval, BaseSettings, ChartThemes, DateValue, EsAreaChartComponent, EsChartComponent, EsChartsModule, EsLineChartComponent, EsPieChartComponent, EsVertical2DChartComponent, EsVerticalChartComponent, EsVerticalStackedChartComponent, KeyValue, KeyValueColor, LegendPad, Limit, LineChartData, LineChartSettings, LineSerie, PageChartSelector, PagedChartData, PieChartData, PieChartSettings, Vertical2DChartData, Vertical2DChartSettings, VerticalChartData, VerticalChartSettings, VerticalStackedChartData, VerticalStackedChartSettings };
+//# sourceMappingURL=esfaenza-es-charts.mjs.map