@esfaenza/es-charts 11.2.21 → 11.2.24

package/fesm2015/esfaenza-es-charts.js

@@ -1,4 +1,4 @@
-import { Injectable, InjectionToken, Inject, EventEmitter, Directive, ElementRef, NgZone, Input, ContentChild, Output, Component, ChangeDetectionStrategy, PLATFORM_ID, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChild, InjectionToken, Inject, Directive, ElementRef, NgZone, PLATFORM_ID, NgModule } from '@angular/core';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as am4core from '@amcharts/amcharts4/core';
 import { DateService } from '@esfaenza/extensions';
@@ -219,13 +219,13 @@ class LegendPad {
  */
 class Limit {
     /** @ignore */
-    constructor(upper, upperLabel, upperColor, lower, lowerLabel, lowerColor) {
+    constructor(upper, upperlabel, uppercolor, lower, lowerlabel, lowercolor) {
         this.upper = upper;
-        this.upperLabel = upperLabel;
-        this.upperColor = upperColor;
+        this.upperlabel = upperlabel;
+        this.uppercolor = uppercolor;
         this.lower = lower;
-        this.lowerLabel = lowerLabel;
-        this.lowerColor = lowerColor;
+        this.lowerlabel = lowerlabel;
+        this.lowercolor = lowercolor;
     }
 }
 
@@ -288,107 +288,87 @@ class LineSerie {
 }
 
 /**
- * Token che identifica il Locale di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_LOCALE = new InjectionToken('ESC_LOCALE');
-/**
- * Token che identifica il default per l'utilizzo o meno delle Animazioni per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_ANIMATIONS = new InjectionToken('ESC_ANIMATIONS');
-/**
- * Token che identifica il Tema di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_THEME = new InjectionToken('ESC_THEME');
-/**
- * Token che identifica l'utilizzo o meno del sistema di Log per l'intera libreria
- */
-const ESC_LOGS = new InjectionToken('ESC_LOGS');
-
-/**
- * Classe che si occupa del dispatch delle operazioni di rendering dei grafici utilizzando una coda per permettere ad ogni grafico di avere temi e localizzazione custom
+ * Componente che si occupa della paginazione dei grafici qualora servisse
  */
-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 = [];
+class PageChartSelector {
+    constructor() {
         /**
-         * Lista dei grafici inizializzati e attivi in un dato momento (viene registrata la proprietà **name**). Non è possibile registrare due grafici con lo stesso identificativo
+         * Indica un cambio di pagina ed emette un oggetto con i dati attuali e l'indice attuale.
+         *
+         * Qualora la proprietà **data** fosse null indica un evento di "loading"
          */
-        this.InitializedGraphs = [];
+        this.onPageChange = new EventEmitter();
     }
     /**
-     * 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
+     * @ignore
      */
-    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();
-        }
+    ngOnChanges() {
+        if (!(this.Items || this.Dtos) || (this.Items || this.Dtos).length == 0)
+            throw new Error("Chart array cannot be empty!");
+        var idx = (this.StartIndex || 0);
+        this.currentindex = idx;
+        this.currentpage = idx + 1;
+        this.handlePageChange();
     }
     /**
-     * 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
+     * Gestisce un cambio pagina inviando al callback **onPageChange** i dati attuali (siano essi il Dto per il caricamento dati i
+     * o i dati già presenti) e l'indice di visualizzazione
      */
-    deregisterGraph(name) {
-        let index = this.InitializedGraphs.indexOf(name);
-        if (index == -1) {
-            //Questo succede quando si cerca di distruggere il grafico mentre sta venendo graficato
-            this.log("DISPATCHER: Registration missing for chart " + name + " it was probably destroyed during load");
-            return;
-        }
-        this.log("DISPATCHER: Chart deregistered " + name);
-        this.InitializedGraphs.splice(index, 1);
+    handlePageChange() {
+        this.finalIndex = this.currentpage - 1;
+        this.currentindex = this.currentpage - 1;
+        let data = this.Items && this.Items.length > 0 ? this.Items[this.finalIndex].data : this.Dtos[this.finalIndex];
+        this.onPageChange.emit({ data: data, index: this.finalIndex });
     }
     /**
-     * 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
+     * Visualizza il grafico successivo
      */
-    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();
-            }
+    Next() {
+        // Per passare da page a index è sempre un -1
+        this.currentpage++;
+        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
+        // Delay pseudo-intelligente per click compulsivi. 
+        // Se dopo questo delay sono andato avanti solo di 1 effettuo il callback altrimenti incremento l'indice
+        setTimeout(() => {
+            if (this.currentindex == this.currentpage - 2)
+                this.handlePageChange();
             else
-                this.log("DISPATCHER: queue is over, nothing more to do");
-        });
+                this.currentindex++;
+        }, this.BrowseDelayMs);
     }
     /**
-     * @ignore
+     * Visualizza il grafico precedente
      */
-    log(text) {
-        if (this.logs)
-            console.log("@esfaenza/es-charts: " + text);
+    Previous() {
+        // Per passare da page a index è sempre un -1
+        this.currentpage--;
+        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
+        // Delay pseudo-intelligente per click compulsivi. 
+        // Se dopo questo delay sono andato indietro solo di 1 effettuo il callback altrimenti decremento l'indice
+        setTimeout(() => {
+            if (this.currentindex == this.currentpage)
+                this.handlePageChange();
+            else
+                this.currentindex--;
+        }, this.BrowseDelayMs);
     }
 }
-ChartDispatcher.decorators = [
-    { type: Injectable }
+PageChartSelector.decorators = [
+    { type: Component, args: [{
+                selector: "chart-pager",
+                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>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                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:medium none currentcolor}.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}"]
+            },] }
 ];
-ChartDispatcher.ctorParameters = () => [
-    { type: Boolean, decorators: [{ type: Inject, args: [ESC_LOGS,] }] }
-];
+PageChartSelector.propDecorators = {
+    Items: [{ type: Input }],
+    Dtos: [{ type: Input }],
+    BrowseDelayMs: [{ type: Input }],
+    StartIndex: [{ type: Input }],
+    onPageChange: [{ type: Output }],
+    headerInner_tr: [{ type: ContentChild, args: ['header_inner', { static: false },] }]
+};
 
 /** @ignore */
 const _spiritedaway = 'spiritedaway';
@@ -651,6 +631,109 @@ class ChartLoader {
     }
 }
 
+/**
+ * Token che identifica il Locale di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_LOCALE = new InjectionToken('ESC_LOCALE');
+/**
+ * Token che identifica il default per l'utilizzo o meno delle Animazioni per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_ANIMATIONS = new InjectionToken('ESC_ANIMATIONS');
+/**
+ * Token che identifica il Tema di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_THEME = new InjectionToken('ESC_THEME');
+/**
+ * Token che identifica l'utilizzo o meno del sistema di Log per l'intera libreria
+ */
+const ESC_LOGS = new InjectionToken('ESC_LOGS');
+
+/**
+ * Classe che si occupa del dispatch delle operazioni di rendering dei grafici utilizzando una coda per permettere ad ogni grafico di avere temi e localizzazione custom
+ */
+class ChartDispatcher {
+    /**
+     * @ignore
+     */
+    constructor(logs) {
+        this.logs = logs;
+        /**
+         * Coda di inizializzazioni ancora da eseguire. Quando questa è vuota significa che nessuno sta creando grafici
+         */
+        this.Initializations = [];
+        /**
+         * Lista dei grafici inizializzati e attivi in un dato momento (viene registrata la proprietà **name**). Non è possibile registrare due grafici con lo stesso identificativo
+         */
+        this.InitializedGraphs = [];
+    }
+    /**
+     * Registra un grafico da visualizzare insieme alla propria funzione di creazione. Quest'ultima sarà differita fino a che tutti i grafici
+     * precedentemente registati non hanno finito la fase di inizializzazione
+     *
+     * @param {string} name Identificativo del grafico da registrare
+     * @param {Function} chartCreationFunction Funzione che fisicamente dovrà occuparsi della creazione del grafico
+     */
+    register(name, chartCreationFunction) {
+        if (this.InitializedGraphs.indexOf(name) != -1)
+            throw "Attempting to register a duplicate chart '" + name + "'. Make sure the 'name' properties of your charts are univoque";
+        this.log("DISPATCHER: Registering chart creation function execution for " + name);
+        this.Initializations.push({ name: name, function: chartCreationFunction });
+        if (this.Initializations.length == 1) {
+            this.log("DISPATCHER: Initial drain started");
+            this.drainInitQueues();
+        }
+    }
+    /**
+     * Deregistra un grafico presente. Chiamata generalmente al dispose del grafico in questione quando non dev'essere più mostrato nella pagina corrente
+     *
+     * @param {string} name Identificativo del grafico da deregistrare
+     */
+    deregisterGraph(name) {
+        let index = this.InitializedGraphs.indexOf(name);
+        if (index == -1) {
+            //Questo succede quando si cerca di distruggere il grafico mentre sta venendo graficato
+            this.log("DISPATCHER: Registration missing for chart " + name + " it was probably destroyed during load");
+            return;
+        }
+        this.log("DISPATCHER: Chart deregistered " + name);
+        this.InitializedGraphs.splice(index, 1);
+    }
+    /**
+     * Metodo che esegue in maniera sequenziale le funzioni di inizializzazione dei grafici finché presenti
+     * in modo che nessun grafico possa essere inizializzato contemporaneamente ad un altro.
+     *
+     * Questo è il punto chiave che permette di avere per ogni grafico temi e locale differenti
+     */
+    drainInitQueues() {
+        let toExecute = this.Initializations[0];
+        this.log("DISPATCHER: Executing initialization function for chart " + toExecute.name);
+        toExecute.function().then(() => {
+            this.log("DISPATCHER: initialization for chart " + toExecute.name + " is done");
+            this.InitializedGraphs.push(toExecute.name);
+            this.Initializations.splice(0, 1);
+            if (this.Initializations.length >= 1) {
+                this.log("DISPATCHER: Found queued initializations. Continuing");
+                this.drainInitQueues();
+            }
+            else
+                this.log("DISPATCHER: queue is over, nothing more to do");
+        });
+    }
+    /**
+     * @ignore
+     */
+    log(text) {
+        if (this.logs)
+            console.log("@esfaenza/es-charts: " + text);
+    }
+}
+ChartDispatcher.decorators = [
+    { type: Injectable }
+];
+ChartDispatcher.ctorParameters = () => [
+    { type: Boolean, 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...
@@ -1023,11 +1106,11 @@ class LineChartService {
                 let range = yAxis.axisRanges.create();
                 range.value = dataConverted.limit.upper;
                 range.label.inside = true;
-                range.label.text = dataConverted.limit.upperLabel;
+                range.label.text = dataConverted.limit.upperlabel;
                 range.label.fill = range.grid.stroke;
                 range.label.verticalCenter = "bottom";
-                range.label.stroke = am4core.color(dataConverted.limit.upperColor || "#F92200");
-                range.grid.stroke = am4core.color(dataConverted.limit.upperColor || "#F92200");
+                range.label.stroke = am4core.color(dataConverted.limit.uppercolor || "#F92200");
+                range.grid.stroke = am4core.color(dataConverted.limit.uppercolor || "#F92200");
                 range.grid.strokeWidth = 2;
                 range.grid.strokeOpacity = 1;
             }
@@ -1035,11 +1118,11 @@ class LineChartService {
                 let range = yAxis.axisRanges.create();
                 range.value = dataConverted.limit.lower;
                 range.label.inside = true;
-                range.label.text = dataConverted.limit.lowerLabel;
+                range.label.text = dataConverted.limit.lowerlabel;
                 range.label.fill = range.grid.stroke;
                 range.label.verticalCenter = "bottom";
-                range.label.stroke = am4core.color(dataConverted.limit.lowerColor || "#F92200");
-                range.grid.stroke = am4core.color(dataConverted.limit.lowerColor || "#F92200");
+                range.label.stroke = am4core.color(dataConverted.limit.lowercolor || "#F92200");
+                range.grid.stroke = am4core.color(dataConverted.limit.lowercolor || "#F92200");
                 range.grid.strokeWidth = 2;
                 range.grid.strokeOpacity = 1;
             }
@@ -1222,26 +1305,7 @@ class LineChartService {
             this.ChartInstance.addData(data);
             return;
         }
-        this.ChartInstance.series.each(s => {
-            var relativeSerie = dataConverted.series.find(t => t.name == s.name);
-            // Una serie del grafico è stata ggiornata, ordino i datapoint e li aggiungo
-            var correctOrder = true;
-            var prevDate = null;
-            for (let v = 0; v < relativeSerie.values.length; v++) {
-                if (!prevDate)
-                    prevDate = relativeSerie.values[v].d;
-                else if (relativeSerie.values[v].d < prevDate) {
-                    correctOrder = false;
-                    break;
-                }
-            }
-            if (!correctOrder)
-                relativeSerie.values.sort((d1, d2) => d1.d.getTime() - d2.d.getTime());
-            for (let v = 0; v < relativeSerie.values.length; v++) {
-                let obj = relativeSerie.values[v];
-                s.addData({ date: obj.d, value: obj.v });
-            }
-        });
+        throw "Impossibile aggiornare i dati senza unire il dataset. Si prega di impostare [MergeDatasets] a true";
     }
     /** Partendo da dati divisi per seriue genera un dataset unito con la data come chiave e i vari valori dopo */
     generateSingleDataset(data) {
@@ -1327,139 +1391,6 @@ class LineChartService {
     }
 }
 
-/**
- * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
- */
-class AreaChartService {
-    /** @ignore */
-    constructor(Adapter) {
-        this.Adapter = Adapter;
-        //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
-        //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
-        /** @ignore */
-        this.executionTimers = {};
-    }
-    /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un AreaChart
-     */
-    graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f;
-        if (settings.Timeline) {
-            console.error("Timeline not supported for area chart");
-            return null;
-        }
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForAreaChart(data) : data;
-        let showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
-        let interval = dataConverted.interval;
-        //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
-        am4core.options.autoDispose = true;
-        this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
-        let ChartInstanceCasted = this.ChartInstance;
-        if (settings.Legend) {
-            ChartInstanceCasted.legend = new am4charts.Legend();
-            ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
-            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
-            if (settings.LegendPadding) {
-                let template = this.ChartInstance.legend.itemContainers.template;
-                template.paddingTop = (_b = settings.LegendPadding.top) !== null && _b !== void 0 ? _b : 0;
-                template.paddingBottom = (_c = settings.LegendPadding.bottom) !== null && _c !== void 0 ? _c : 0;
-                template.paddingLeft = (_d = settings.LegendPadding.left) !== null && _d !== void 0 ? _d : 0;
-                template.paddingRight = (_e = settings.LegendPadding.right) !== null && _e !== void 0 ? _e : 0;
-            }
-        }
-        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
-        yAxis.tooltip.disabled = true;
-        if (settings.YAxisTitle) {
-            yAxis.title.text = settings.YAxisTitle;
-            yAxis.title.fontWeight = "bold";
-        }
-        yAxis.min = 0;
-        let dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
-        dateAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 50;
-        dateAxis.startLocation = 0.5;
-        dateAxis.endLocation = 0.5;
-        if (settings.XAxisTitle) {
-            dateAxis.title.text = settings.XAxisTitle;
-            dateAxis.title.fontWeight = "bold";
-        }
-        if (showTicks) {
-            dateAxis.renderer.ticks.template.disabled = false;
-            dateAxis.renderer.ticks.template.strokeOpacity = 1;
-            dateAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
-            dateAxis.renderer.ticks.template.strokeWidth = 2;
-            dateAxis.renderer.ticks.template.length = 10;
-            dateAxis.renderer.ticks.template.location = 0;
-        }
-        if (!!interval)
-            dateAxis.baseInterval = { count: interval.count, timeUnit: interval.timeunit };
-        // Unisco il dataset e tiro fuori i dati
-        let chartData = [];
-        let seriesToMakeCache = {};
-        let seriesToMake = [];
-        for (let i = 0; i < dataConverted.groups.length; i++) {
-            let group = dataConverted.groups[i];
-            let dataItem = { date: group.name };
-            for (let ii = 0; ii < group.values.length; ii++) {
-                let val = group.values[ii];
-                dataItem[val.k] = val.v;
-                if (!seriesToMakeCache[val.k]) {
-                    seriesToMakeCache[val.k] = true;
-                    seriesToMake.push(val.k);
-                }
-            }
-            chartData.push(dataItem);
-        }
-        ChartInstanceCasted.data = chartData;
-        //---------------------------------------------------------
-        seriesToMake.forEach(s => { this.createSeries(ChartInstanceCasted, s); });
-        ChartInstanceCasted.cursor = new am4charts.XYCursor();
-        ChartInstanceCasted.cursor.xAxis = dateAxis;
-        dateAxis.events.on("startchanged", t => this.emitSelectionChanged(t, settings));
-        dateAxis.events.on("endchanged", t => this.emitSelectionChanged(t, settings));
-        return this;
-    }
-    /** @ignore */
-    refreshData(data) {
-        //TODO:IMPL
-    }
-    /** @ignore */
-    emitSelectionChanged(ev, settings) {
-        if (settings.OnSelectionChangedCallback) {
-            this.throttla("selchange", () => {
-                var axis = ev.target;
-                var start = new Date(axis.minZoomed);
-                var end = new Date(axis.maxZoomed);
-                var initial = axis.min == axis.minZoomed && axis.max == axis.maxZoomed;
-                settings.OnSelectionChangedCallback({ from: start, to: end, initial: initial });
-            }, 150);
-        }
-    }
-    /** @ignore */
-    createSeries(chart, name) {
-        let series = chart.series.push(new am4charts.LineSeries());
-        series.dataFields.dateX = "date";
-        series.name = name[0].toUpperCase() + name.slice(1);
-        series.dataFields.valueY = name;
-        series.tooltipText = "[#000]{valueY.value}[/]";
-        //series.tooltip.background.fill = am4core.color("#FFF");
-        series.tooltip.getStrokeFromObject = true;
-        series.tooltip.background.strokeWidth = 3;
-        series.tooltip.getFillFromObject = false;
-        series.fillOpacity = 0.6;
-        series.strokeWidth = 2;
-        series.stacked = true;
-        return series;
-    }
-    /** @ignore */
-    throttla(id, func, throttleTime) {
-        //Se ho la funzione che vuole eseguire ripulisco quel timeout
-        if (this.executionTimers[id])
-            clearTimeout(this.executionTimers[id]);
-        //Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
-        this.executionTimers[id] = setTimeout(() => { func(); this.executionTimers[id] = null; }, throttleTime);
-    }
-}
-
 /**
  * Classe il cui unico scopo è gestire il setup e rendering di un PieChart
  */
@@ -1571,15 +1502,13 @@ class PieChartService {
 }
 
 /**
- * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
+ * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
  */
-class Vertical2DChartService {
+class VerticalChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
         /** @ignore */
-        this.DefaultGroupPaddingPercentage = 5;
-        /** @ignore */
         this.dangerZone = 50;
         /** @ignore */
         this.LabelWidth = 150;
@@ -1591,10 +1520,10 @@ class Vertical2DChartService {
         this.DefaultColumnWidthPercentage = 85;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
      */
     graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (settings.Timeline) {
             console.error("Timeline not supported for vertical chart");
             return null;
@@ -1603,6 +1532,8 @@ class Vertical2DChartService {
         am4core.options.autoDispose = true;
         this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
         let ChartInstanceCasted = this.ChartInstance;
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
+        ChartInstanceCasted.data = dataConverted.values;
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
@@ -1625,15 +1556,12 @@ class Vertical2DChartService {
             categoryAxis.title.text = settings.XAxisTitle;
             categoryAxis.title.fontWeight = "bold";
         }
-        yAxis.min = 0;
-        categoryAxis.dataFields.category = 'key';
-        categoryAxis.renderer.cellStartLocation = am4core.percent((_f = settings.GroupPaddingPercentage) !== null && _f !== void 0 ? _f : this.DefaultGroupPaddingPercentage).value;
-        categoryAxis.renderer.cellEndLocation = am4core.percent(100 - ((_g = settings.GroupPaddingPercentage) !== null && _g !== void 0 ? _g : this.DefaultGroupPaddingPercentage)).value;
+        categoryAxis.dataFields.category = "k";
         categoryAxis.renderer.grid.template.location = 0;
-        categoryAxis.renderer.minGridDistance = (_h = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _h !== void 0 ? _h : 30;
+        categoryAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 30;
         let label = categoryAxis.renderer.labels.template;
         label.truncate = true;
-        label.maxWidth = (_j = settings.LabelWidth) !== null && _j !== void 0 ? _j : this.LabelWidth;
+        label.maxWidth = (_g = settings.LabelWidth) !== null && _g !== void 0 ? _g : this.LabelWidth;
         label.tooltipText = "{category}";
         if ((settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) == null ? true : settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) {
             categoryAxis.events.on("sizechanged", (ev) => {
@@ -1657,88 +1585,35 @@ class Vertical2DChartService {
                 }
             });
         }
-        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
-        let dataConverted = [];
-        for (let i = 0; i < dataPreConverted.groups.length; i++) {
-            let item = dataPreConverted.groups[i];
-            let obj = { key: item.name };
-            for (let p = 0; p < item.values.length; p++) {
-                let value = item.values[p];
-                obj[value.k] = value.v;
-            }
-            dataConverted.push(obj);
-        }
-        ChartInstanceCasted.data = dataConverted;
-        if (dataPreConverted.colorInfos)
-            ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(c => am4core.color(c.color));
-        //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
-        for (let prop in dataConverted[0])
-            if (prop !== "key")
-                this.createSeries(ChartInstanceCasted, settings, prop, prop);
+        // Create series
+        let series = ChartInstanceCasted.series.push(new am4charts.ColumnSeries());
+        series.dataFields.valueY = "v";
+        series.dataFields.categoryX = "k";
+        series.name = "";
+        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
+        series.columns.template.fillOpacity = .8;
+        series.columns.template.width = am4core.percent((_h = settings.ColumnWidthPercentage) !== null && _h !== void 0 ? _h : this.DefaultColumnWidthPercentage);
+        let columnTemplate = series.columns.template;
+        columnTemplate.strokeWidth = 2;
+        columnTemplate.strokeOpacity = 1;
         return this;
     }
     /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
-    /** @ignore */
-    createSeries(chart, settings, value, name) {
-        var _a;
-        let series = chart.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueY = value;
-        series.dataFields.categoryX = 'key';
-        series.name = name;
-        series.columns.template.tooltipText = "{name} {categoryX}: [bold]{valueY}[/]";
-        series.columns.template.fillOpacity = .8;
-        series.columns.template.width = am4core.percent((_a = settings.ColumnWidthPercentage) !== null && _a !== void 0 ? _a : this.DefaultColumnWidthPercentage);
-        series.events.on("hidden", () => this.arrangeColumns);
-        series.events.on("shown", () => this.arrangeColumns);
-        return series;
-    }
-    /** @ignore */
-    arrangeColumns() {
-        let ChartInstanceCasted = this.ChartInstance;
-        let series = ChartInstanceCasted.series.getIndex(0);
-        let xAxis = ChartInstanceCasted.xAxes.getIndex(0);
-        let w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
-        if (series.dataItems.length > 1) {
-            let x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
-            let x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
-            let delta = ((x1 - x0) / ChartInstanceCasted.series.length) * w;
-            if (am4core.isNumber(delta)) {
-                let middle = ChartInstanceCasted.series.length / 2;
-                let newIndex = 0;
-                ChartInstanceCasted.series.each((series) => {
-                    if (!series.isHidden && !series.isHiding) {
-                        series.dummyData = newIndex;
-                        newIndex++;
-                    }
-                    else {
-                        series.dummyData = ChartInstanceCasted.series.indexOf(series);
-                    }
-                });
-                let visibleCount = newIndex;
-                let newMiddle = visibleCount / 2;
-                ChartInstanceCasted.series.each((series) => {
-                    let trueIndex = ChartInstanceCasted.series.indexOf(series);
-                    let newIndex = series.dummyData;
-                    let dx = (newIndex - trueIndex + middle - newMiddle) * delta;
-                    series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
-                    series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
-                });
-            }
-        }
-    }
 }
 
 /**
- * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
+ * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
  */
-class VerticalChartService {
+class Vertical2DChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
         /** @ignore */
+        this.DefaultGroupPaddingPercentage = 5;
+        /** @ignore */
         this.dangerZone = 50;
         /** @ignore */
         this.LabelWidth = 150;
@@ -1750,10 +1625,10 @@ class VerticalChartService {
         this.DefaultColumnWidthPercentage = 85;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
      */
     graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (settings.Timeline) {
             console.error("Timeline not supported for vertical chart");
             return null;
@@ -1762,8 +1637,6 @@ class VerticalChartService {
         am4core.options.autoDispose = true;
         this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
         let ChartInstanceCasted = this.ChartInstance;
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
-        ChartInstanceCasted.data = dataConverted.values;
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
@@ -1786,12 +1659,15 @@ class VerticalChartService {
             categoryAxis.title.text = settings.XAxisTitle;
             categoryAxis.title.fontWeight = "bold";
         }
-        categoryAxis.dataFields.category = "k";
+        yAxis.min = 0;
+        categoryAxis.dataFields.category = 'key';
+        categoryAxis.renderer.cellStartLocation = am4core.percent((_f = settings.GroupPaddingPercentage) !== null && _f !== void 0 ? _f : this.DefaultGroupPaddingPercentage).value;
+        categoryAxis.renderer.cellEndLocation = am4core.percent(100 - ((_g = settings.GroupPaddingPercentage) !== null && _g !== void 0 ? _g : this.DefaultGroupPaddingPercentage)).value;
         categoryAxis.renderer.grid.template.location = 0;
-        categoryAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 30;
+        categoryAxis.renderer.minGridDistance = (_h = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _h !== void 0 ? _h : 30;
         let label = categoryAxis.renderer.labels.template;
         label.truncate = true;
-        label.maxWidth = (_g = settings.LabelWidth) !== null && _g !== void 0 ? _g : this.LabelWidth;
+        label.maxWidth = (_j = settings.LabelWidth) !== null && _j !== void 0 ? _j : this.LabelWidth;
         label.tooltipText = "{category}";
         if ((settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) == null ? true : settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) {
             categoryAxis.events.on("sizechanged", (ev) => {
@@ -1815,22 +1691,77 @@ class VerticalChartService {
                 }
             });
         }
-        // Create series
-        let series = ChartInstanceCasted.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueY = "v";
-        series.dataFields.categoryX = "k";
-        series.name = "";
-        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
-        series.columns.template.fillOpacity = .8;
-        series.columns.template.width = am4core.percent((_h = settings.ColumnWidthPercentage) !== null && _h !== void 0 ? _h : this.DefaultColumnWidthPercentage);
-        let columnTemplate = series.columns.template;
-        columnTemplate.strokeWidth = 2;
-        columnTemplate.strokeOpacity = 1;
+        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
+        let dataConverted = [];
+        for (let i = 0; i < dataPreConverted.groups.length; i++) {
+            let item = dataPreConverted.groups[i];
+            let obj = { key: item.name };
+            for (let p = 0; p < item.values.length; p++) {
+                let value = item.values[p];
+                obj[value.k] = value.v;
+            }
+            dataConverted.push(obj);
+        }
+        ChartInstanceCasted.data = dataConverted;
+        if (dataPreConverted.colorInfos)
+            ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(c => am4core.color(c.color));
+        //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
+        for (let prop in dataConverted[0])
+            if (prop !== "key")
+                this.createSeries(ChartInstanceCasted, settings, prop, prop);
         return this;
     }
     /** @ignore */
-    refreshData(data) {
-        //TODO:IMPL
+    refreshData(data) {
+        //TODO:IMPL
+    }
+    /** @ignore */
+    createSeries(chart, settings, value, name) {
+        var _a;
+        let series = chart.series.push(new am4charts.ColumnSeries());
+        series.dataFields.valueY = value;
+        series.dataFields.categoryX = 'key';
+        series.name = name;
+        series.columns.template.tooltipText = "{name} {categoryX}: [bold]{valueY}[/]";
+        series.columns.template.fillOpacity = .8;
+        series.columns.template.width = am4core.percent((_a = settings.ColumnWidthPercentage) !== null && _a !== void 0 ? _a : this.DefaultColumnWidthPercentage);
+        series.events.on("hidden", () => this.arrangeColumns);
+        series.events.on("shown", () => this.arrangeColumns);
+        return series;
+    }
+    /** @ignore */
+    arrangeColumns() {
+        let ChartInstanceCasted = this.ChartInstance;
+        let series = ChartInstanceCasted.series.getIndex(0);
+        let xAxis = ChartInstanceCasted.xAxes.getIndex(0);
+        let w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
+        if (series.dataItems.length > 1) {
+            let x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
+            let x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
+            let delta = ((x1 - x0) / ChartInstanceCasted.series.length) * w;
+            if (am4core.isNumber(delta)) {
+                let middle = ChartInstanceCasted.series.length / 2;
+                let newIndex = 0;
+                ChartInstanceCasted.series.each((series) => {
+                    if (!series.isHidden && !series.isHiding) {
+                        series.dummyData = newIndex;
+                        newIndex++;
+                    }
+                    else {
+                        series.dummyData = ChartInstanceCasted.series.indexOf(series);
+                    }
+                });
+                let visibleCount = newIndex;
+                let newMiddle = visibleCount / 2;
+                ChartInstanceCasted.series.each((series) => {
+                    let trueIndex = ChartInstanceCasted.series.indexOf(series);
+                    let newIndex = series.dummyData;
+                    let dx = (newIndex - trueIndex + middle - newMiddle) * delta;
+                    series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
+                    series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
+                });
+            }
+        }
     }
 }
 
@@ -1959,6 +1890,139 @@ class VerticalStackedChartService {
     }
 }
 
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
+ */
+class AreaChartService {
+    /** @ignore */
+    constructor(Adapter) {
+        this.Adapter = Adapter;
+        //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
+        //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
+        /** @ignore */
+        this.executionTimers = {};
+    }
+    /**
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un AreaChart
+     */
+    graphicate(data, settings) {
+        var _a, _b, _c, _d, _e, _f;
+        if (settings.Timeline) {
+            console.error("Timeline not supported for area chart");
+            return null;
+        }
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForAreaChart(data) : data;
+        let showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
+        let interval = dataConverted.interval;
+        //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
+        am4core.options.autoDispose = true;
+        this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
+        let ChartInstanceCasted = this.ChartInstance;
+        if (settings.Legend) {
+            ChartInstanceCasted.legend = new am4charts.Legend();
+            ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
+            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = (_b = settings.LegendPadding.top) !== null && _b !== void 0 ? _b : 0;
+                template.paddingBottom = (_c = settings.LegendPadding.bottom) !== null && _c !== void 0 ? _c : 0;
+                template.paddingLeft = (_d = settings.LegendPadding.left) !== null && _d !== void 0 ? _d : 0;
+                template.paddingRight = (_e = settings.LegendPadding.right) !== null && _e !== void 0 ? _e : 0;
+            }
+        }
+        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
+        yAxis.tooltip.disabled = true;
+        if (settings.YAxisTitle) {
+            yAxis.title.text = settings.YAxisTitle;
+            yAxis.title.fontWeight = "bold";
+        }
+        yAxis.min = 0;
+        let dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
+        dateAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 50;
+        dateAxis.startLocation = 0.5;
+        dateAxis.endLocation = 0.5;
+        if (settings.XAxisTitle) {
+            dateAxis.title.text = settings.XAxisTitle;
+            dateAxis.title.fontWeight = "bold";
+        }
+        if (showTicks) {
+            dateAxis.renderer.ticks.template.disabled = false;
+            dateAxis.renderer.ticks.template.strokeOpacity = 1;
+            dateAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
+            dateAxis.renderer.ticks.template.strokeWidth = 2;
+            dateAxis.renderer.ticks.template.length = 10;
+            dateAxis.renderer.ticks.template.location = 0;
+        }
+        if (!!interval)
+            dateAxis.baseInterval = { count: interval.count, timeUnit: interval.timeunit };
+        // Unisco il dataset e tiro fuori i dati
+        let chartData = [];
+        let seriesToMakeCache = {};
+        let seriesToMake = [];
+        for (let i = 0; i < dataConverted.groups.length; i++) {
+            let group = dataConverted.groups[i];
+            let dataItem = { date: group.name };
+            for (let ii = 0; ii < group.values.length; ii++) {
+                let val = group.values[ii];
+                dataItem[val.k] = val.v;
+                if (!seriesToMakeCache[val.k]) {
+                    seriesToMakeCache[val.k] = true;
+                    seriesToMake.push(val.k);
+                }
+            }
+            chartData.push(dataItem);
+        }
+        ChartInstanceCasted.data = chartData;
+        //---------------------------------------------------------
+        seriesToMake.forEach(s => { this.createSeries(ChartInstanceCasted, s); });
+        ChartInstanceCasted.cursor = new am4charts.XYCursor();
+        ChartInstanceCasted.cursor.xAxis = dateAxis;
+        dateAxis.events.on("startchanged", t => this.emitSelectionChanged(t, settings));
+        dateAxis.events.on("endchanged", t => this.emitSelectionChanged(t, settings));
+        return this;
+    }
+    /** @ignore */
+    refreshData(data) {
+        //TODO:IMPL
+    }
+    /** @ignore */
+    emitSelectionChanged(ev, settings) {
+        if (settings.OnSelectionChangedCallback) {
+            this.throttla("selchange", () => {
+                var axis = ev.target;
+                var start = new Date(axis.minZoomed);
+                var end = new Date(axis.maxZoomed);
+                var initial = axis.min == axis.minZoomed && axis.max == axis.maxZoomed;
+                settings.OnSelectionChangedCallback({ from: start, to: end, initial: initial });
+            }, 150);
+        }
+    }
+    /** @ignore */
+    createSeries(chart, name) {
+        let series = chart.series.push(new am4charts.LineSeries());
+        series.dataFields.dateX = "date";
+        series.name = name[0].toUpperCase() + name.slice(1);
+        series.dataFields.valueY = name;
+        series.tooltipText = "[#000]{valueY.value}[/]";
+        //series.tooltip.background.fill = am4core.color("#FFF");
+        series.tooltip.getStrokeFromObject = true;
+        series.tooltip.background.strokeWidth = 3;
+        series.tooltip.getFillFromObject = false;
+        series.fillOpacity = 0.6;
+        series.strokeWidth = 2;
+        series.stacked = true;
+        return series;
+    }
+    /** @ignore */
+    throttla(id, func, throttleTime) {
+        //Se ho la funzione che vuole eseguire ripulisco quel timeout
+        if (this.executionTimers[id])
+            clearTimeout(this.executionTimers[id]);
+        //Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
+        this.executionTimers[id] = setTimeout(() => { func(); this.executionTimers[id] = null; }, throttleTime);
+    }
+}
+
 /**
  * Componente specifico per la graficazione di un qualsiasi tipo di grafico.
  *
@@ -2555,89 +2619,6 @@ class PagedChartData {
     }
 }
 
-/**
- * Componente che si occupa della paginazione dei grafici qualora servisse
- */
-class PageChartSelector {
-    constructor() {
-        /**
-         * Indica un cambio di pagina ed emette un oggetto con i dati attuali e l'indice attuale.
-         *
-         * Qualora la proprietà **data** fosse null indica un evento di "loading"
-         */
-        this.onPageChange = new EventEmitter();
-    }
-    /**
-     * @ignore
-     */
-    ngOnChanges() {
-        if (!(this.Items || this.Dtos) || (this.Items || this.Dtos).length == 0)
-            throw new Error("Chart array cannot be empty!");
-        var idx = (this.StartIndex || 0);
-        this.currentindex = idx;
-        this.currentpage = idx + 1;
-        this.handlePageChange();
-    }
-    /**
-     * Gestisce un cambio pagina inviando al callback **onPageChange** i dati attuali (siano essi il Dto per il caricamento dati i
-     * o i dati già presenti) e l'indice di visualizzazione
-     */
-    handlePageChange() {
-        this.finalIndex = this.currentpage - 1;
-        this.currentindex = this.currentpage - 1;
-        let data = this.Items && this.Items.length > 0 ? this.Items[this.finalIndex].data : this.Dtos[this.finalIndex];
-        this.onPageChange.emit({ data: data, index: this.finalIndex });
-    }
-    /**
-     * Visualizza il grafico successivo
-     */
-    Next() {
-        // Per passare da page a index è sempre un -1
-        this.currentpage++;
-        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
-        // Delay pseudo-intelligente per click compulsivi. 
-        // Se dopo questo delay sono andato avanti solo di 1 effettuo il callback altrimenti incremento l'indice
-        setTimeout(() => {
-            if (this.currentindex == this.currentpage - 2)
-                this.handlePageChange();
-            else
-                this.currentindex++;
-        }, this.BrowseDelayMs);
-    }
-    /**
-     * Visualizza il grafico precedente
-     */
-    Previous() {
-        // Per passare da page a index è sempre un -1
-        this.currentpage--;
-        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
-        // Delay pseudo-intelligente per click compulsivi. 
-        // Se dopo questo delay sono andato indietro solo di 1 effettuo il callback altrimenti decremento l'indice
-        setTimeout(() => {
-            if (this.currentindex == this.currentpage)
-                this.handlePageChange();
-            else
-                this.currentindex--;
-        }, this.BrowseDelayMs);
-    }
-}
-PageChartSelector.decorators = [
-    { type: Component, args: [{
-                selector: "chart-pager",
-                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>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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:medium none currentcolor}.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}"]
-            },] }
-];
-PageChartSelector.propDecorators = {
-    Items: [{ type: Input }],
-    Dtos: [{ type: Input }],
-    BrowseDelayMs: [{ type: Input }],
-    StartIndex: [{ type: Input }],
-    onPageChange: [{ type: Output }],
-    headerInner_tr: [{ type: ContentChild, args: ['header_inner', { static: false },] }]
-};
-
 /** Componenti esportati dal modulo */
 const COMPONENTS = [
     EsChartComponent,
@@ -2682,5 +2663,5 @@ EsChartsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartData, AreaChartSettings, BaseAdapter, BaseChartComponent, BaseInterval, BaseSettings, ChartThemes, DateValue, EsAreaChartComponent, EsChartComponent, EsChartsModule, EsLineChartComponent, EsPieChartComponent, EsVertical2DChartComponent, EsVerticalChartComponent, EsVerticalStackedChartComponent, KeyValue, KeyValueColor, LegendPad, Limit, LineChartData, LineChartSettings, LineSerie, PagedChartData, PieChartData, PieChartSettings, Vertical2DChartData, Vertical2DChartSettings, VerticalChartData, VerticalChartSettings, VerticalStackedChartData, VerticalStackedChartSettings, BaseInterval as ɵa, ChartLoader as ɵb, ChartDispatcher as ɵc, ESC_LOCALE as ɵd, ESC_ANIMATIONS as ɵe, ESC_THEME as ɵf, ESC_LOGS as ɵg, BaseAdapter as ɵh, EsChartComponent as ɵi, EsLineChartComponent as ɵj, EsPieChartComponent as ɵk, EsVertical2DChartComponent as ɵl, EsVerticalChartComponent as ɵm, EsVerticalStackedChartComponent as ɵn, PageChartSelector as ɵo, EsAreaChartComponent as ɵp };
+export { AreaChartData, AreaChartSettings, BaseAdapter, BaseChartComponent, BaseInterval, BaseSettings, ChartThemes, DateValue, EsAreaChartComponent, EsChartComponent, EsChartsModule, EsLineChartComponent, EsPieChartComponent, EsVertical2DChartComponent, EsVerticalChartComponent, EsVerticalStackedChartComponent, KeyValue, KeyValueColor, LegendPad, Limit, LineChartData, LineChartSettings, LineSerie, PageChartSelector, PagedChartData, PieChartData, PieChartSettings, Vertical2DChartData, Vertical2DChartSettings, VerticalChartData, VerticalChartSettings, VerticalStackedChartData, VerticalStackedChartSettings, ChartLoader as ɵa, ChartDispatcher as ɵb, ESC_LOCALE as ɵc, ESC_ANIMATIONS as ɵd, ESC_THEME as ɵe, ESC_LOGS as ɵf };
 //# sourceMappingURL=esfaenza-es-charts.js.map