@esfaenza/es-charts 15.2.1 → 15.2.3

package/fesm2020/esfaenza-es-charts.mjs

@@ -1,10 +1,11 @@
 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 { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChild, InjectionToken, Inject, PLATFORM_ID, NgModule, Directive } from '@angular/core';
+import * as i5 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as am4core from '@amcharts/amcharts4/core';
 import * as am4charts from '@amcharts/amcharts4/charts';
-import * as i3 from '@esfaenza/extensions';
+import * as i4 from '@esfaenza/extensions';
+import * as i4$1 from '@esfaenza/localizations';
 
 /**
  * Adapter Base da reimplementare per trasformare i dati da una libreria di grafici a questa per evitare di riscrivere tutto il codice di
@@ -364,7 +365,7 @@ class PageChartSelector {
     }
 }
 PageChartSelector.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PageChartSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageChartSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PageChartSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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"] }]
@@ -444,210 +445,6 @@ class ChartThemes {
     ;
 }
 
-/**
- * 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);
-    }
-}
-
-/**
- * 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)
  */
@@ -662,676 +459,594 @@ const ESC_THEME = new InjectionToken('ESC_THEME');
 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
+ * Classe il cui unico scopo è gestire il setup e rendering di un LineChart
  */
-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();
-        }
+class LineChartService {
+    /** @ignore */
+    constructor(Adapter, dateExts) {
+        this.Adapter = Adapter;
+        this.dateExts = dateExts;
+        /** @ignore */
+        this.DataGroupBucketSize = 1500;
+        /** @ignore */
+        this.OpacityOnSelected = 0.3;
+        /** @ignore */
+        this.OpacityOnFill = 0.75;
+        /** @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 = {};
     }
     /**
-     * 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
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un LineChart
      */
-    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;
+    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";
         }
-        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();
+        if (settings.Min)
+            yAxis.min = settings.Min;
+        if (settings.Max)
+            yAxis.max = settings.Max;
+        let limitNullOrUndef = dataConverted.limit == null || dataConverted.limit == undefined;
+        let limits = limitNullOrUndef ? [] : !dataConverted.limit.length ? [dataConverted.limit] : dataConverted.limit;
+        if (limits.length > 0) {
+            for (let i = 0; i < limits.length; i++) {
+                let limit = limits[i];
+                if (limit.upper != null && limit.upper != undefined && limit.lower != null && limit.lower != undefined) {
+                    let range = yAxis.axisRanges.create();
+                    range.value = limit.lower;
+                    range.endValue = limit.upper;
+                    if (limit.fillColor) {
+                        range.contents.stroke = am4core.color(limit.fillColor);
+                        range.contents.fill = range.contents.stroke;
+                    }
+                    range.label.inside = true;
+                    range.label.text = limit.upperlabel;
+                    range.label.fill = range.grid.stroke;
+                    range.label.verticalCenter = "bottom";
+                    range.label.stroke = am4core.color(limit.uppercolor || "#F92200");
+                    range.grid.stroke = am4core.color(limit.uppercolor || "#F92200");
+                    range.grid.strokeWidth = 2;
+                    range.grid.strokeOpacity = 1;
+                }
+                else if ((limit.lower == null || limit.lower == undefined) && limit.upper != null && limit.upper != undefined) {
+                    let range = yAxis.axisRanges.create();
+                    range.value = limit.upper;
+                    range.label.inside = true;
+                    range.label.text = limit.upperlabel;
+                    range.label.fill = range.grid.stroke;
+                    range.label.verticalCenter = "bottom";
+                    range.label.stroke = am4core.color(limit.uppercolor || "#F92200");
+                    range.grid.stroke = am4core.color(limit.uppercolor || "#F92200");
+                    range.grid.strokeWidth = 2;
+                    range.grid.strokeOpacity = 1;
+                }
+                else if ((limit.upper == null || limit.upper == undefined) && limit.lower != null && limit.lower != undefined) {
+                    let range = yAxis.axisRanges.create();
+                    range.value = limit.lower;
+                    range.label.inside = true;
+                    range.label.text = limit.lowerlabel;
+                    range.label.fill = range.grid.stroke;
+                    range.label.verticalCenter = "bottom";
+                    range.label.stroke = am4core.color(limit.lowercolor || "#F92200");
+                    range.grid.stroke = am4core.color(limit.lowercolor || "#F92200");
+                    range.grid.strokeWidth = 2;
+                    range.grid.strokeOpacity = 1;
+                }
+            }
+        }
+        this.dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
+        // Per comatibilità col codice scritto quando non era a livello globale, mi scoccia sostituire
+        let dateAxis = this.dateAxis;
+        if (settings.XAxisTitle) {
+            dateAxis.title.text = settings.XAxisTitle;
+            dateAxis.title.fontWeight = "bold";
+        }
+        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;
+        // Ordinamento dei dati se serve
+        dataConverted.series.forEach((s) => {
+            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());
+        });
+        // 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;
+        }
+        dataConverted.series.forEach((s, index) => {
+            let stacked = s.stacked != null && s.stacked != undefined ? s.stacked : (settings?.Stacked ?? false);
+            let fill = stacked || (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.measureUnit = s.uom;
+            series.name = s.name;
+            series.strokeWidth = settings?.StrokeSize ?? 1;
+            series.connect = !gapsAllowed;
+            series.minBulletDistance = 10;
+            series.tooltipText = this.singleDataSet ? "" : s.name ? "{name}: [bold]{valueY}[/]" : "[bold]{valueY}[/]";
+            series.tooltip.pointerOrientation = "vertical";
+            series.tooltip.background.fillOpacity = 0.5;
+            series.tooltip.label.padding(12, 12, 12, 12);
+            series.fillOpacity = fill ? this.OpacityOnFill : 0.0001;
+            series.stacked = stacked;
+            series.hidden = s.hidden;
+            //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 && ["hour", "minute", "second"].includes(interval.timeunit)) {
+                        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, interval ? ["day", "week", "month", "year"].includes(interval.timeunit) : 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.measureUnit || "" + "[/]";
+                        text += "[" + item.stroke.hex + "]●[/] " + (item.name ? (item.name + ": ") : "") + "[bold]{" + item.dataFields.valueY + "}[/]" + uom + "\n";
+                    });
+                    return text;
+                });
             }
             else
-                this.log("DISPATCHER: queue is over, nothing more to do");
+                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
-     */
-    log(text) {
-        if (this.logs)
-            console.log("@esfaenza/es-charts: " + text);
-    }
-}
-ChartDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartDispatcher, deps: [{ token: ESC_LOGS }], target: i0.ɵɵFactoryTarget.Injectable });
-ChartDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartDispatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartDispatcher, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ESC_LOGS]
-                }] }]; } });
-
-/**
- * Componente Grafico Base che gestisce tutte le cose comuni dei vari grafici istanziabili, come la presenza o menu di una legenda,
- * il tema utilizzato, il locale del singolo grafico, ecc ecc...
- */
-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");
+    /** @ignore */
+    setSelection(from, to) {
+        this.dateAxis.zoomToDates(from, to, true, true);
     }
-    /**
-     * 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)
+    /** @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.log("Chart " + this.name + ": ngOnChanges");
-        let propsToCheck = ["Timeline", "Legend", "Settings", "Animations", "Theme", "Locale", ...this.getSpecificPropertiesToCheck()];
-        this.checkPropertiesAndRegraphicateAsNeeded(changes, propsToCheck);
+        }
+        throw "Impossibile aggiornare i dati senza unire il dataset. Si prega di impostare [MergeDatasets] a true";
     }
-    /**
-     * 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();
+    /** 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;
     }
-    /**
-     * 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); });
+    /** @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);
         }
-        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(); });
+    /** @ignore */
+    processOver(hoveredSeries) {
+        hoveredSeries.zIndex = 999;
+        let fill = hoveredSeries.fillOpacity == this.OpacityOnFill;
+        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.fillOpacity == this.OpacityOnFill;
+                series.segments.each((segment) => {
+                    segment.setState("dimmed");
+                    if (!fill)
+                        segment.fillSprite.fillOpacity = 0;
+                });
+            }
         });
     }
-    /**
-     * 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); });
-            })
-        ]);
+    /** @ignore */
+    processOut() {
+        this.ChartInstance.series.each((series, i) => {
+            series.zIndex = i;
+            let fill = series.fillOpacity == this.OpacityOnFill;
+            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 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 {
     /**
-     * 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
+     * @ignore
      */
-    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 }); };
+    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 = [];
     }
     /**
-     * Controlla i cambiamenti avvenuti alle proprietà chiave e rieffettua la graficazione qualora necessario
+     * 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 {SimpleChanges} changes Indicazione della modifiche avvenute nei vari Input
-     * @param {string[]} propsToCheck Lista degli Input da controllare per cui una modifica causa una rigraficazione
+     * @param {string} name Identificativo del grafico da registrare
+     * @param {Function} chartCreationFunction Funzione che fisicamente dovrà occuparsi della creazione del grafico
      */
-    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();
+    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();
+        }
     }
     /**
-     * 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
+     * Deregistra un grafico presente. Chiamata generalmente al dispose del grafico in questione quando non dev'essere più mostrato nella pagina corrente
      *
-     * @param {{ data: LineChartData | PieChartData | Vertical2DChartData | VerticalChartData | any, index: number }} nd Indice del caricamento dati, con eventualmente già i dati se disponibili
+     * @param {string} name Identificativo del grafico da deregistrare
      */
-    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();
+    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;
         }
-        if (this.DataRetrieve)
-            this.DataRetrieve(nd.data, nd.index).then(t => { this.changePageDataReceived(t); });
-        else
-            this.changePageDataReceived(nd.data);
+        this.log("DISPATCHER: Chart deregistered " + name);
+        this.InitializedGraphs.splice(index, 1);
     }
     /**
-     * Al termine del caricamento dei dati di una pagina questo metodo viene chiamato per rigraficare la situazione con i nuovi dati
+     * 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.
      *
-     * @param {LineChartData | PieChartData | Vertical2DChartData | VerticalChartData | any} data Dati del grafico
+     * Questo è il punto chiave che permette di avere per ogni grafico temi e locale differenti
      */
-    changePageDataReceived(data) {
-        this.loadingChart = false;
-        this.onLoadEnd.emit();
-        let firstBind = !this.Data;
-        this.Data = data;
-        if (!firstBind)
-            this.reloadChart();
-        else
-            this.dispatchLoadChart();
+    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");
+        });
     }
     /**
-     * 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
+     * @ignore
      */
-    reloadChart() {
-        this.browserOnly(() => { if (!this.Chart.isDisposed())
-            this.Chart.dispose(); this.Dispatcher.deregisterGraph(this.name); });
-        this.Dispatcher.register(this.name, () => { return this.loadChart(); });
+    log(text) {
+        if (this.logs)
+            console.log("@esfaenza/es-charts: " + text);
     }
+}
+ChartDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartDispatcher, deps: [{ token: ESC_LOGS }], target: i0.ɵɵFactoryTarget.Injectable });
+ChartDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartDispatcher, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartDispatcher, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ESC_LOGS]
+                }] }]; } });
+
+/**
+ * Componente specifico per la graficazione di un grafico a Linea su un asse temporale
+ */
+class EsLineChartComponent extends BaseChartComponent {
     /**
-     * Permette di aggiungere un blocco di dati in maniera "live" ad un grafico
+     * @ignore
      */
-    addData(chartData) {
-        this.ChartService.refreshData(chartData);
+    constructor(el, ChartLoader, ChartDispatcher, adapter, dateService, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_THEME, lc) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, lc.Locale, ESC_THEME);
+        this.adapter = adapter;
+        this.dateService = dateService;
     }
-    ;
     /**
-     * Funzione che si occupa di caricare i temi necessari per il grafico in oggetto. Prima applica il tema, poi, se serve, applica le animazioni
+     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
      */
-    setupAmChartsThemes() {
-        return Promise.all([
-            this.Charter.applyTheme(am4core, this.Theme).then(() => {
-                return this.Animations ? this.Charter.applyAnimations(am4core) : this.Charter.unapplyAnimations(am4core);
-            })
-        ]);
+    getSpecificPropertiesToCheck() {
+        return ["Data", "DataArray", "Step", "DataGroupBucketSize", "DataGroupingThreshold", "StrokeSize", "Stacked", "AllowGaps", "MergeDatasets", "FinalInstants", "Fill", "Min", "Max"];
     }
     /**
-     * @ignore
+     * 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
      */
-    log(log) {
-        if (this.logs)
-            console.log("@esfaenza/es-charts: " + log);
+    getCastedSettings() {
+        return (this.Settings ?? new LineChartSettings());
     }
     /**
-     * Imposta lo zoom dal **from** al **to**
+     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
      *
-     * @param {Date} from Inizio dello zoom
-     * @param {Date} to Fine dello zoom
+     * @param {LineChartSettings} settingsCasted Settings castati al tipo giusto
      */
-    setSelection(from, to) {
-        this.ChartService.setSelection(from, to);
+    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;
+        settingsCasted.Stacked = settingsCasted.Stacked != null ? settingsCasted.Stacked : this.Stacked;
     }
     /**
-     * @ignore
+     * 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
      */
-    browserOnly(f) {
-        if (isPlatformBrowser(this.platformId)) {
-            this.zone.runOutsideAngular(() => {
-                f();
-            });
-        }
+    graphicate(settingsCasted) {
+        return new LineChartService(this.adapter, this.dateService).graphicate(this.Data, settingsCasted);
     }
 }
-BaseChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BaseChartComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-BaseChartComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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: [{
+EsLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EsLineChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i4.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i4$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EsLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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", Stacked: "Stacked" }, 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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: i4.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_THEME]
+                }] }, { type: i4$1.LocalizationService }]; }, propDecorators: { Data: [{
                 type: Input
-            }], name: [{
+            }], DataArray: [{
                 type: Input
-            }], Animations: [{
+            }], Step: [{
                 type: Input
-            }], Theme: [{
+            }], DataGroupBucketSize: [{
                 type: Input
-            }], Locale: [{
+            }], DataGroupingThreshold: [{
                 type: Input
-            }], HideSeriesOnLabelClick: [{
+            }], StrokeSize: [{
                 type: Input
-            }], MinGridDistance: [{
+            }], AllowGaps: [{
                 type: Input
-            }], AdaptLabelSizeAndOrientation: [{
+            }], MergeDatasets: [{
                 type: Input
-            }], LegendPadding: [{
+            }], FinalInstants: [{
                 type: Input
-            }], DataDtos: [{
+            }], Min: [{
                 type: Input
-            }], DataDtoStartIndex: [{
+            }], Max: [{
                 type: Input
-            }], DataRetrieve: [{
+            }], Fill: [{
                 type: Input
-            }], BrowseDelayMs: [{
+            }], Stacked: [{
                 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
+ * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
  */
-class LineChartService {
+class AreaChartService {
     /** @ignore */
-    constructor(Adapter, dateExts) {
+    constructor(Adapter) {
         this.Adapter = Adapter;
-        this.dateExts = dateExts;
-        /** @ignore */
-        this.DataGroupBucketSize = 1500;
-        /** @ignore */
-        this.OpacityOnSelected = 0.3;
-        /** @ignore */
-        this.OpacityOnFill = 0.75;
-        /** @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
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un AreaChart
      */
     graphicate(data, settings) {
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
-        let threshold = settings.DataGroupingThreshold ?? 3000;
-        this.singleDataSet = settings.MergeDatasets ?? false;
+        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 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;
+        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;
-        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;
-        let limitNullOrUndef = dataConverted.limit == null || dataConverted.limit == undefined;
-        let limits = limitNullOrUndef ? [] : !dataConverted.limit.length ? [dataConverted.limit] : dataConverted.limit;
-        if (limits.length > 0) {
-            for (let i = 0; i < limits.length; i++) {
-                let limit = limits[i];
-                if (limit.upper != null && limit.upper != undefined && limit.lower != null && limit.lower != undefined) {
-                    let range = yAxis.axisRanges.create();
-                    range.value = limit.lower;
-                    range.endValue = limit.upper;
-                    if (limit.fillColor) {
-                        range.contents.stroke = am4core.color(limit.fillColor);
-                        range.contents.fill = range.contents.stroke;
-                    }
-                    range.label.inside = true;
-                    range.label.text = limit.upperlabel;
-                    range.label.fill = range.grid.stroke;
-                    range.label.verticalCenter = "bottom";
-                    range.label.stroke = am4core.color(limit.uppercolor || "#F92200");
-                    range.grid.stroke = am4core.color(limit.uppercolor || "#F92200");
-                    range.grid.strokeWidth = 2;
-                    range.grid.strokeOpacity = 1;
-                }
-                else if ((limit.lower == null || limit.lower == undefined) && limit.upper != null && limit.upper != undefined) {
-                    let range = yAxis.axisRanges.create();
-                    range.value = limit.upper;
-                    range.label.inside = true;
-                    range.label.text = limit.upperlabel;
-                    range.label.fill = range.grid.stroke;
-                    range.label.verticalCenter = "bottom";
-                    range.label.stroke = am4core.color(limit.uppercolor || "#F92200");
-                    range.grid.stroke = am4core.color(limit.uppercolor || "#F92200");
-                    range.grid.strokeWidth = 2;
-                    range.grid.strokeOpacity = 1;
-                }
-                else if ((limit.upper == null || limit.upper == undefined) && limit.lower != null && limit.lower != undefined) {
-                    let range = yAxis.axisRanges.create();
-                    range.value = limit.lower;
-                    range.label.inside = true;
-                    range.label.text = limit.lowerlabel;
-                    range.label.fill = range.grid.stroke;
-                    range.label.verticalCenter = "bottom";
-                    range.label.stroke = am4core.color(limit.lowercolor || "#F92200");
-                    range.grid.stroke = am4core.color(limit.lowercolor || "#F92200");
-                    range.grid.strokeWidth = 2;
-                    range.grid.strokeOpacity = 1;
-                }
-            }
-        }
-        this.dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
-        // Per comatibilità col codice scritto quando non era a livello globale, mi scoccia sostituire
-        let dateAxis = this.dateAxis;
-        if (settings.XAxisTitle) {
-            dateAxis.title.text = settings.XAxisTitle;
-            dateAxis.title.fontWeight = "bold";
-        }
-        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;
-        // Ordinamento dei dati se serve
-        dataConverted.series.forEach((s) => {
-            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());
-        });
-        // 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;
-        }
-        dataConverted.series.forEach((s, index) => {
-            let stacked = s.stacked != null && s.stacked != undefined ? s.stacked : (settings?.Stacked ?? false);
-            let fill = stacked || (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.measureUnit = s.uom;
-            series.name = s.name;
-            series.strokeWidth = settings?.StrokeSize ?? 1;
-            series.connect = !gapsAllowed;
-            series.minBulletDistance = 10;
-            series.tooltipText = this.singleDataSet ? "" : s.name ? "{name}: [bold]{valueY}[/]" : "[bold]{valueY}[/]";
-            series.tooltip.pointerOrientation = "vertical";
-            series.tooltip.background.fillOpacity = 0.5;
-            series.tooltip.label.padding(12, 12, 12, 12);
-            series.fillOpacity = fill ? this.OpacityOnFill : 0.0001;
-            series.stacked = stacked;
-            series.hidden = s.hidden;
-            //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 && ["hour", "minute", "second"].includes(interval.timeunit)) {
-                        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, interval ? ["day", "week", "month", "year"].includes(interval.timeunit) : 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.measureUnit || "" + "[/]";
-                        text += "[" + item.stroke.hex + "]●[/] " + (item.name ? (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(); });
+            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;
@@ -1340,69 +1055,63 @@ class LineChartService {
                 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......
+        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 */
     setSelection(from, to) {
-        this.dateAxis.zoomToDates(from, to, true, true);
     }
     /** @ignore */
     refreshData(data) {
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
-        if (this.singleDataSet) {
-            var data = this.generateSingleDataset(dataConverted);
-            this.ChartInstance.addData(data);
-            return;
-        }
-        throw "Impossibile aggiornare i dati senza unire il dataset. Si prega di impostare [MergeDatasets] a true";
-    }
-    /** Partendo da dati divisi per seriue genera un dataset unito con la data come chiave e i vari valori dopo */
-    generateSingleDataset(data) {
-        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;
+        //TODO:IMPL
     }
     /** @ignore */
     emitSelectionChanged(ev, settings) {
@@ -1417,40 +1126,20 @@ class LineChartService {
         }
     }
     /** @ignore */
-    processOver(hoveredSeries) {
-        hoveredSeries.zIndex = 999;
-        let fill = hoveredSeries.fillOpacity == this.OpacityOnFill;
-        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.fillOpacity == this.OpacityOnFill;
-                series.segments.each((segment) => {
-                    segment.setState("dimmed");
-                    if (!fill)
-                        segment.fillSprite.fillOpacity = 0;
-                });
-            }
-        });
-    }
-    /** @ignore */
-    processOut() {
-        this.ChartInstance.series.each((series, i) => {
-            series.zIndex = i;
-            let fill = series.fillOpacity == this.OpacityOnFill;
-            series.segments.each((segment) => {
-                segment.setState("default");
-                if (!fill)
-                    segment.fillSprite.fillOpacity = 0;
-            });
-            if (!fill)
-                series.legendDataItem.marker.children.getIndex(1).fillOpacity = 0;
-        });
+    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) {
@@ -1462,6 +1151,71 @@ class LineChartService {
     }
 }
 
+/**
+ * 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_THEME, lc) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, lc.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: "15.2.9", 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_THEME }, { token: i4$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EsAreaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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_THEME]
+                }] }, { type: i4$1.LocalizationService }]; }, propDecorators: { Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }] } });
+
 /**
  * Classe il cui unico scopo è gestire il setup e rendering di un PieChart
  */
@@ -1575,13 +1329,101 @@ class PieChartService {
 }
 
 /**
- * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
+ * 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_THEME, lc) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, lc.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: "15.2.9", 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_THEME }, { token: i4$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EsPieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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_THEME]
+                }] }, { type: i4$1.LocalizationService }]; }, 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
+            }] } });
+
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
  */
-class VerticalChartService {
+class Vertical2DChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
         /** @ignore */
+        this.DefaultGroupPaddingPercentage = 5;
+        /** @ignore */
         this.dangerZone = 50;
         /** @ignore */
         this.LabelWidth = 150;
@@ -1593,7 +1435,7 @@ class VerticalChartService {
         this.DefaultColumnWidthPercentage = 85;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
      */
     graphicate(data, settings) {
         if (settings.Timeline) {
@@ -1604,9 +1446,6 @@ class VerticalChartService {
         am4core.options.autoDispose = true;
         this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
         let ChartInstanceCasted = this.ChartInstance;
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
-        ChartInstanceCasted.data = dataConverted.values;
-        let noStrokes = dataConverted.values.some(t => !!t.c);
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = settings?.LegendPosition ?? 'right';
@@ -1629,7 +1468,10 @@ class VerticalChartService {
             categoryAxis.title.text = settings.XAxisTitle;
             categoryAxis.title.fontWeight = "bold";
         }
-        categoryAxis.dataFields.category = "k";
+        yAxis.min = 0;
+        categoryAxis.dataFields.category = 'key';
+        categoryAxis.renderer.cellStartLocation = am4core.percent(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;
@@ -1657,24 +1499,24 @@ class VerticalChartService {
                 }
             });
         }
-        // Create series
-        let series = ChartInstanceCasted.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueY = "v";
-        series.dataFields.categoryX = "k";
-        series.name = "";
-        let columnTemplate = series.columns.template;
-        columnTemplate.tooltipText = "{categoryX}: [bold]{valueY}[/] {t}";
-        columnTemplate.fillOpacity = .8;
-        columnTemplate.width = am4core.percent(settings.ColumnWidthPercentage ?? this.DefaultColumnWidthPercentage);
-        if (noStrokes) {
-            columnTemplate.strokeOpacity = 0;
-            columnTemplate.strokeWidth = 0;
-            columnTemplate.adapter.add("fill", (_, target) => am4core.color(target.dataItem.dataContext.c));
-        }
-        else {
-            columnTemplate.strokeWidth = 2;
-            columnTemplate.strokeOpacity = 1;
+        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
+        let dataConverted = [];
+        for (let i = 0; i < dataPreConverted.groups.length; i++) {
+            let item = dataPreConverted.groups[i];
+            let obj = { key: item.name };
+            for (let p = 0; p < item.values.length; p++) {
+                let value = item.values[p];
+                obj[value.k] = value.v;
+            }
+            dataConverted.push(obj);
         }
+        ChartInstanceCasted.data = dataConverted;
+        if (dataPreConverted.colorinfos)
+            ChartInstanceCasted.colors.list = dataPreConverted.colorinfos.map(c => am4core.color(c.color));
+        //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
+        for (let prop in dataConverted[0])
+            if (prop !== "key")
+                this.createSeries(ChartInstanceCasted, settings, prop, prop);
         return this;
     }
     /** @ignore */
@@ -1684,18 +1526,146 @@ class VerticalChartService {
     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 Vertical2DChart
+ * Componente specifico per la graficazione di un grafico a Barre con due dimensioni
  */
-class Vertical2DChartService {
+class EsVertical2DChartComponent extends BaseChartComponent {
+    /**
+     * @ignore
+     */
+    constructor(el, ChartLoader, ChartDispatcher, adapter, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_THEME, lc) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, lc.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: "15.2.9", 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_THEME }, { token: i4$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EsVertical2DChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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_THEME]
+                }] }, { type: i4$1.LocalizationService }]; }, 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
+            }] } });
+
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
+ */
+class VerticalChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
         /** @ignore */
-        this.DefaultGroupPaddingPercentage = 5;
-        /** @ignore */
         this.dangerZone = 50;
         /** @ignore */
         this.LabelWidth = 150;
@@ -1707,7 +1677,7 @@ class Vertical2DChartService {
         this.DefaultColumnWidthPercentage = 85;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
      */
     graphicate(data, settings) {
         if (settings.Timeline) {
@@ -1718,6 +1688,9 @@ class Vertical2DChartService {
         am4core.options.autoDispose = true;
         this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
         let ChartInstanceCasted = this.ChartInstance;
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
+        ChartInstanceCasted.data = dataConverted.values;
+        let noStrokes = dataConverted.values.some(t => !!t.c);
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = settings?.LegendPosition ?? 'right';
@@ -1740,10 +1713,7 @@ class Vertical2DChartService {
             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.dataFields.category = "k";
         categoryAxis.renderer.grid.template.location = 0;
         categoryAxis.renderer.minGridDistance = settings?.MinGridDistance ?? 30;
         let label = categoryAxis.renderer.labels.template;
@@ -1771,24 +1741,24 @@ class Vertical2DChartService {
                 }
             });
         }
-        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
-        let dataConverted = [];
-        for (let i = 0; i < dataPreConverted.groups.length; i++) {
-            let item = dataPreConverted.groups[i];
-            let obj = { key: item.name };
-            for (let p = 0; p < item.values.length; p++) {
-                let value = item.values[p];
-                obj[value.k] = value.v;
-            }
-            dataConverted.push(obj);
+        // Create series
+        let series = ChartInstanceCasted.series.push(new am4charts.ColumnSeries());
+        series.dataFields.valueY = "v";
+        series.dataFields.categoryX = "k";
+        series.name = "";
+        let columnTemplate = series.columns.template;
+        columnTemplate.tooltipText = "{categoryX}: [bold]{valueY}[/] {t}";
+        columnTemplate.fillOpacity = .8;
+        columnTemplate.width = am4core.percent(settings.ColumnWidthPercentage ?? this.DefaultColumnWidthPercentage);
+        if (noStrokes) {
+            columnTemplate.strokeOpacity = 0;
+            columnTemplate.strokeWidth = 0;
+            columnTemplate.adapter.add("fill", (_, target) => am4core.color(target.dataItem.dataContext.c));
+        }
+        else {
+            columnTemplate.strokeWidth = 2;
+            columnTemplate.strokeOpacity = 1;
         }
-        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 */
@@ -1798,54 +1768,87 @@ class Vertical2DChartService {
     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;
+}
+
+/**
+ * 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_THEME, lc) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, lc.Locale, ESC_THEME);
+        this.adapter = adapter;
     }
-    /** @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);
-                });
-            }
-        }
+    /**
+     * 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: "15.2.9", 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_THEME }, { token: i4$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EsVerticalChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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_THEME]
+                }] }, { type: i4$1.LocalizationService }]; }, propDecorators: { Data: [{
+                type: Input
+            }], DataArray: [{
+                type: Input
+            }], ColumnWidthPercentage: [{
+                type: Input
+            }], LabelWidth: [{
+                type: Input
+            }], LabelVerticalOrientationCutoffWidth: [{
+                type: Input
+            }], LabelRightWhenCompressed: [{
+                type: Input
+            }], LabelTopWhenCompressed: [{
+                type: Input
+            }] } });
 
 /**
  * Classe il cui unico scopo è gestire il setup e rendering di un VerticalStackedChart
@@ -1944,169 +1947,114 @@ class VerticalStackedChartService {
                 template.paddingBottom = settings.LegendPadding.bottom ?? 0;
                 template.paddingLeft = settings.LegendPadding.left ?? 0;
                 template.paddingRight = settings.LegendPadding.right ?? 0;
-            }
-        }
-        return this;
-    }
-    /** @ignore */
-    setSelection(from, to) {
-    }
-    /** @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;
-    }
-}
-
-/**
- * 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 */
-    setSelection(from, to) {
-    }
-    /** @ignore */
-    refreshData(data) {
-        //TODO:IMPL
-    }
-    /** @ignore */
-    emitSelectionChanged(ev, settings) {
-        if (settings.OnSelectionChangedCallback) {
-            this.throttla("selchange", () => {
-                var axis = ev.target;
-                var start = new Date(axis.minZoomed);
-                var end = new Date(axis.maxZoomed);
-                var initial = axis.min == axis.minZoomed && axis.max == axis.maxZoomed;
-                settings.OnSelectionChangedCallback({ from: start, to: end, initial: initial });
-            }, 150);
+            }
         }
+        return this;
     }
     /** @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;
+    setSelection(from, to) {
     }
     /** @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);
+    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 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_THEME, lc) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, lc.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: "15.2.9", 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_THEME }, { token: i4$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EsVerticalStackedChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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_THEME]
+                }] }, { type: i4$1.LocalizationService }]; }, 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 qualsiasi tipo di grafico.
  *
@@ -2116,8 +2064,8 @@ 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);
+    constructor(el, ChartLoader, ChartDispatcher, dateService, adapter, zone, platformId, ESC_LOGS, ESC_ANIMATIONS, ESC_THEME, lc) {
+        super(el, platformId, zone, ChartLoader, ChartDispatcher, ESC_LOGS, ESC_ANIMATIONS, lc.Locale, ESC_THEME);
         this.dateService = dateService;
         this.adapter = adapter;
     }
@@ -2179,12 +2127,12 @@ class EsChartComponent extends BaseChartComponent {
         }
     }
 }
-EsChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EsChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i3.DateService }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EsChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i4.DateService }, { token: BaseAdapter }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i4$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EsChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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: i3.DateService }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i4.DateService }, { type: BaseAdapter }, { type: i0.NgZone }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }, { type: undefined, decorators: [{
@@ -2193,13 +2141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }] }, { 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: i4$1.LocalizationService }]; }, propDecorators: { Type: [{
                 type: Input
             }], Data: [{
                 type: Input
@@ -2207,515 +2152,607 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+/** 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_ANIMATIONS, useValue: config?.animations == null || config?.animations == undefined ? true : config?.animations },
+                { provide: ESC_THEME, useValue: config?.theme || 'spiritedaway' },
+                { provide: ESC_LOGS, useValue: config?.debugMode || false },
+                { provide: BaseAdapter, useClass: config?.adapter || BaseAdapter }
+            ]
+        };
+    }
+}
+EsChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EsChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EsChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: EsChartsModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EsChartsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [...COMPONENTS],
+                    exports: [...COMPONENTS]
+                }]
+        }] });
+
 /**
- * Componente specifico per la graficazione di un grafico ad Area
+ * 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 EsAreaChartComponent extends BaseChartComponent {
+class ChartLoader {
     /**
      * @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) {
+    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 = {};
     }
     /**
-     * Effettua il rendering di questo grafico in base ai Settings
+     * Applica il tema con le animazioni all'istanza globale di amCharts
      *
-     * @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: "15.2.9", 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: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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 {
+     * @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); });
+        }
+    }
     /**
-     * @ignore
+     * 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
      */
-    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;
+    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); });
     }
     /**
-     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     * 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
      */
-    getSpecificPropertiesToCheck() {
-        return ["Data", "DataArray", "Step", "DataGroupBucketSize", "DataGroupingThreshold", "StrokeSize", "Stacked", "AllowGaps", "MergeDatasets", "FinalInstants", "Fill", "Min", "Max"];
+    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;
+        });
     }
     /**
-     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     * De-applica il tema precedente dall'istanza globale di amCharts
      *
-     * @returns {LineChartSettings} Settings castati al tipo giusto
+     * @param {Object} chartsCore Istanza globale di amCharts
      */
-    getCastedSettings() {
-        return (this.Settings ?? new LineChartSettings());
+    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]);
     }
     /**
-     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     * Applica il locale specificato all'istanza specifica del grafico
      *
-     * @param {LineChartSettings} settingsCasted Settings castati al tipo giusto
+     * @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
      */
-    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;
-        settingsCasted.Stacked = settingsCasted.Stacked != null ? settingsCasted.Stacked : this.Stacked;
+    applyLocale(chart, locale) {
+        return this.importIfNeeded('lang', locale).then(() => {
+            this.log("Chart " + chart.htmlContainer.id + ": applying locale " + locale);
+            chart.language.locale = this.localizationCache[locale];
+        });
     }
     /**
-     * Effettua il rendering di questo grafico in base ai Settings
+     * Permette di importare, se serve un dato tema o localizzazione
      *
-     * @param {LineChartSettings} settingsCasted Impostazioni di graficazione
-     * @returns {LineChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     * @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
      */
-    graphicate(settingsCasted) {
-        return new LineChartService(this.adapter, this.dateService).graphicate(this.Data, settingsCasted);
+    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);
     }
 }
-EsLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EsLineChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i3.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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", Stacked: "Stacked" }, 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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: i3.DateService }, { type: i0.NgZone }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: undefined, decorators: [{
+ChartLoader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartLoader, deps: [{ token: ESC_LOGS }], target: i0.ɵɵFactoryTarget.Injectable });
+ChartLoader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartLoader, providedIn: EsChartsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ChartLoader, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: EsChartsModule }]
+        }], ctorParameters: function () { return [{ 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
-            }], Stacked: [{
-                type: Input
-            }] } });
+                }] }]; } });
 
 /**
- * Componente specifico per la graficazione di un grafico a Torta
+ * 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 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;
-    }
+class BaseChartComponent {
     /**
-     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     * 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 LocalizationService
+     * @param {string} theme Indica il tema specifico per questo grafico. Impostazione generica presa dal token ESC_THEME
      */
-    getSpecificPropertiesToCheck() {
-        return ["Data", "DataArray", "HideZeroes", "Mode3D", "LabelsWrap", "LabelsTruncate", "LabelsWidth", "LabelsVisible"];
+    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;
     }
     /**
-     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     * Metodo di inizializzazione post valorizzazione degli input, utilizzato per valorizzare correttamente le proprietà essenziali del grafico (Animazioni, Tema e Locale)
      *
-     * @returns {PieChartSettings} Settings castati al tipo giusto
+     * 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_ANIMATIONS, ESC_THEME
      */
-    getCastedSettings() {
-        return (this.Settings ?? new PieChartSettings());
+    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");
     }
     /**
-     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     * Implementazione utilizzata per controllare eventuali proprietà chiave del grafico e rigraficare tutto qualora si rivelasse necessario
      *
-     * @param {PieChartSettings} settingsCasted Settings castati al tipo giusto
+     * @param {SimpleChanges} changes Indicazione dei cambiamenti sulle proprietà del grafico. Vedere documentazione Angular in merito
      */
-    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;
+    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);
     }
     /**
-     * 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
+     * Nel post inizializzazione, a patto che mi trovi in ambiente "browser", proseguo al caricamento del grafico sull'HTML
      */
-    graphicate(settingsCasted) {
-        return new PieChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    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();
     }
-}
-EsPieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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
+     * All'onDestroy scarico il grafico per liberare memoria
      */
-    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;
+    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");
     }
     /**
-     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     * Registra il grafico attuale nel Dispatcher in modo che venga caricato appena possibile
      */
-    getSpecificPropertiesToCheck() {
-        return ["Data", "DataArray"];
+    dispatchLoadChart() {
+        this.browserOnly(() => {
+            this.Dispatcher.register(this.name, () => { return this.loadChart(); });
+        });
     }
     /**
-     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     * Il caricamento del grafico funziona nel seguente modo:
      *
-     * @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
+     * 1) Caricamento del tema e delle animazioni, qualora necessari
      *
-     * @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
+     * 2) Caricamento delle impostazioni specifiche e integrazione con le impostazioni generiche
      *
-     * @param {Vertical2DChartSettings} settingsCasted Impostazioni di graficazione
-     * @returns {Vertical2DChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     * 3) Graficazione
+     *
+     * 4) Caricamento del locale
      */
-    graphicate(settingsCasted) {
-        return new Vertical2DChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    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");
+                // Unico punto reale in cui viene utilizzato il locale, tehe
+                return this.Charter.applyLocale(this.Chart, this.Locale).then(() => { this.initDone = true; this.chartLoaded.emit(this); });
+            })
+        ]);
     }
-}
-EsVertical2DChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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
+     * 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
      */
-    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;
+    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 }); };
     }
     /**
-     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     * 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
      */
-    getSpecificPropertiesToCheck() {
-        return ["Data", "DataArray"];
+    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();
     }
     /**
-     * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
+     * 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
      *
-     * @returns {VerticalChartSettings} Settings castati al tipo giusto
+     * @param {{ data: LineChartData | PieChartData | Vertical2DChartData | VerticalChartData | any, index: number }} nd Indice del caricamento dati, con eventualmente già i dati se disponibili
      */
-    getCastedSettings() {
-        return (this.Settings ?? new VerticalChartSettings());
+    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);
     }
     /**
-     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     * Al termine del caricamento dei dati di una pagina questo metodo viene chiamato per rigraficare la situazione con i nuovi dati
      *
-     * @param {VerticalChartSettings} settingsCasted Settings castati al tipo giusto
+     * @param {LineChartData | PieChartData | Vertical2DChartData | VerticalChartData | any} data Dati del grafico
      */
-    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;
+    changePageDataReceived(data) {
+        this.loadingChart = false;
+        this.onLoadEnd.emit();
+        let firstBind = !this.Data;
+        this.Data = data;
+        if (!firstBind)
+            this.reloadChart();
+        else
+            this.dispatchLoadChart();
     }
     /**
-     * Effettua il rendering di questo grafico in base ai Settings
+     * Ricarica il grafico distruggendo il vecchio e ricreando il nuovo
      *
-     * @param {VerticalChartSettings} settingsCasted Impostazioni di graficazione
-     * @returns {VerticalChartService} La service utilizzata per il rendering nello stato subito successivo al rendering effettuato
+     * 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
      */
-    graphicate(settingsCasted) {
-        return new VerticalChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    reloadChart() {
+        this.browserOnly(() => { if (!this.Chart.isDisposed())
+            this.Chart.dispose(); this.Dispatcher.deregisterGraph(this.name); });
+        this.Dispatcher.register(this.name, () => { return this.loadChart(); });
     }
-}
-EsVerticalChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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
+     * Permette di aggiungere un blocco di dati in maniera "live" ad un grafico
      */
-    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;
+    addData(chartData) {
+        this.ChartService.refreshData(chartData);
     }
+    ;
     /**
-     * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
+     * Funzione che si occupa di caricare i temi necessari per il grafico in oggetto. Prima applica il tema, poi, se serve, applica le animazioni
      */
-    getSpecificPropertiesToCheck() {
-        return ["Data", "DataArray"];
+    setupAmChartsThemes() {
+        return Promise.all([
+            this.Charter.applyTheme(am4core, this.Theme).then(() => {
+                return this.Animations ? this.Charter.applyAnimations(am4core) : this.Charter.unapplyAnimations(am4core);
+            })
+        ]);
     }
     /**
-     * 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
+     * @ignore
      */
-    getCastedSettings() {
-        return (this.Settings ?? new VerticalStackedChartSettings());
+    log(log) {
+        if (this.logs)
+            console.log("@esfaenza/es-charts: " + log);
     }
     /**
-     * Integra i Settings base con tutti gli Input specifici di questo grafico, dando priorità ai Settings se definiti
+     * Imposta lo zoom dal **from** al **to**
      *
-     * @param {VerticalStackedChartSettings} settingsCasted Settings castati al tipo giusto
+     * @param {Date} from Inizio dello zoom
+     * @param {Date} to Fine dello zoom
      */
-    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;
+    setSelection(from, to) {
+        this.ChartService.setSelection(from, to);
     }
     /**
-     * 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
+     * @ignore
      */
-    graphicate(settingsCasted) {
-        return new VerticalStackedChartService(this.adapter).graphicate(this.Data, settingsCasted);
+    browserOnly(f) {
+        if (isPlatformBrowser(this.platformId)) {
+            this.zone.runOutsideAngular(() => {
+                f();
+            });
+        }
     }
 }
-EsVerticalStackedChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "14.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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:rgba(153,153,153,.6);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: [{
+BaseChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BaseChartComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+BaseChartComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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
-            }], DataArray: [{
+            }], YTitle: [{
                 type: Input
-            }], ColumnWidthPercentage: [{
+            }], Settings: [{
                 type: Input
-            }], LabelWidth: [{
+            }], Legend: [{
                 type: Input
-            }], LabelVerticalOrientationCutoffWidth: [{
+            }], LegendPosition: [{
                 type: Input
-            }], LabelRightWhenCompressed: [{
+            }], Timeline: [{
                 type: Input
-            }], LabelTopWhenCompressed: [{
+            }], 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
             }] } });
 
 /**
@@ -2738,60 +2775,6 @@ class PagedChartData {
     }
 }
 
-/** 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: "15.2.9", ngImport: i0, type: EsChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EsChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: EsChartsModule, providers: [ChartDispatcher], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EsChartsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [...COMPONENTS],
-                    providers: [ChartDispatcher],
-                    exports: [...COMPONENTS]
-                }]
-        }] });
-
 /*
  * Public API Surface of es-charts
  */