@esfaenza/es-charts 11.2.21 → 11.2.24

package/bundles/esfaenza-es-charts.umd.js

@@ -600,13 +600,13 @@
      */
     var Limit = /** @class */ (function () {
         /** @ignore */
-        function Limit(upper, upperLabel, upperColor, lower, lowerLabel, lowerColor) {
+        function Limit(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;
         }
         return Limit;
     }());
@@ -674,109 +674,90 @@
     }());
 
     /**
-     * Token che identifica il Locale di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
-     */
-    var ESC_LOCALE = new core.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)
-     */
-    var ESC_ANIMATIONS = new core.InjectionToken('ESC_ANIMATIONS');
-    /**
-     * Token che identifica il Tema di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
-     */
-    var ESC_THEME = new core.InjectionToken('ESC_THEME');
-    /**
-     * Token che identifica l'utilizzo o meno del sistema di Log per l'intera libreria
-     */
-    var ESC_LOGS = new core.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
      */
-    var ChartDispatcher = /** @class */ (function () {
-        /**
-         * @ignore
-         */
-        function ChartDispatcher(logs) {
-            this.logs = logs;
-            /**
-             * Coda di inizializzazioni ancora da eseguire. Quando questa è vuota significa che nessuno sta creando grafici
-             */
-            this.Initializations = [];
+    var PageChartSelector = /** @class */ (function () {
+        function PageChartSelector() {
             /**
-             * 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 core.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
          */
-        ChartDispatcher.prototype.register = function (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();
-            }
+        PageChartSelector.prototype.ngOnChanges = function () {
+            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
          */
-        ChartDispatcher.prototype.deregisterGraph = function (name) {
-            var 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);
+        PageChartSelector.prototype.handlePageChange = function () {
+            this.finalIndex = this.currentpage - 1;
+            this.currentindex = this.currentpage - 1;
+            var 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
          */
-        ChartDispatcher.prototype.drainInitQueues = function () {
+        PageChartSelector.prototype.Next = function () {
             var _this = this;
-            var toExecute = this.Initializations[0];
-            this.log("DISPATCHER: Executing initialization function for chart " + toExecute.name);
-            toExecute.function().then(function () {
-                _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();
-                }
+            // 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(function () {
+                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
          */
-        ChartDispatcher.prototype.log = function (text) {
-            if (this.logs)
-                console.log("@esfaenza/es-charts: " + text);
+        PageChartSelector.prototype.Previous = function () {
+            var _this = this;
+            // 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(function () {
+                if (_this.currentindex == _this.currentpage)
+                    _this.handlePageChange();
+                else
+                    _this.currentindex--;
+            }, this.BrowseDelayMs);
         };
-        return ChartDispatcher;
+        return PageChartSelector;
     }());
-    ChartDispatcher.decorators = [
-        { type: core.Injectable }
+    PageChartSelector.decorators = [
+        { type: core.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: core.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 = function () { return [
-        { type: Boolean, decorators: [{ type: core.Inject, args: [ESC_LOGS,] }] }
-    ]; };
+    PageChartSelector.propDecorators = {
+        Items: [{ type: core.Input }],
+        Dtos: [{ type: core.Input }],
+        BrowseDelayMs: [{ type: core.Input }],
+        StartIndex: [{ type: core.Input }],
+        onPageChange: [{ type: core.Output }],
+        headerInner_tr: [{ type: core.ContentChild, args: ['header_inner', { static: false },] }]
+    };
 
     /** @ignore */
     var _spiritedaway = 'spiritedaway';
@@ -1119,6 +1100,111 @@
         return ChartLoader;
     }());
 
+    /**
+     * Token che identifica il Locale di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+     */
+    var ESC_LOCALE = new core.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)
+     */
+    var ESC_ANIMATIONS = new core.InjectionToken('ESC_ANIMATIONS');
+    /**
+     * Token che identifica il Tema di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+     */
+    var ESC_THEME = new core.InjectionToken('ESC_THEME');
+    /**
+     * Token che identifica l'utilizzo o meno del sistema di Log per l'intera libreria
+     */
+    var ESC_LOGS = new core.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
+     */
+    var ChartDispatcher = /** @class */ (function () {
+        /**
+         * @ignore
+         */
+        function ChartDispatcher(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
+         */
+        ChartDispatcher.prototype.register = function (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
+         */
+        ChartDispatcher.prototype.deregisterGraph = function (name) {
+            var 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
+         */
+        ChartDispatcher.prototype.drainInitQueues = function () {
+            var _this = this;
+            var toExecute = this.Initializations[0];
+            this.log("DISPATCHER: Executing initialization function for chart " + toExecute.name);
+            toExecute.function().then(function () {
+                _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
+         */
+        ChartDispatcher.prototype.log = function (text) {
+            if (this.logs)
+                console.log("@esfaenza/es-charts: " + text);
+        };
+        return ChartDispatcher;
+    }());
+    ChartDispatcher.decorators = [
+        { type: core.Injectable }
+    ];
+    ChartDispatcher.ctorParameters = function () { return [
+        { type: Boolean, decorators: [{ type: core.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...
@@ -1503,11 +1589,11 @@
                     var 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__namespace.color(dataConverted.limit.upperColor || "#F92200");
-                    range.grid.stroke = am4core__namespace.color(dataConverted.limit.upperColor || "#F92200");
+                    range.label.stroke = am4core__namespace.color(dataConverted.limit.uppercolor || "#F92200");
+                    range.grid.stroke = am4core__namespace.color(dataConverted.limit.uppercolor || "#F92200");
                     range.grid.strokeWidth = 2;
                     range.grid.strokeOpacity = 1;
                 }
@@ -1515,11 +1601,11 @@
                     var 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__namespace.color(dataConverted.limit.lowerColor || "#F92200");
-                    range.grid.stroke = am4core__namespace.color(dataConverted.limit.lowerColor || "#F92200");
+                    range.label.stroke = am4core__namespace.color(dataConverted.limit.lowercolor || "#F92200");
+                    range.grid.stroke = am4core__namespace.color(dataConverted.limit.lowercolor || "#F92200");
                     range.grid.strokeWidth = 2;
                     range.grid.strokeOpacity = 1;
                 }
@@ -1702,26 +1788,7 @@
                 this.ChartInstance.addData(data);
                 return;
             }
-            this.ChartInstance.series.each(function (s) {
-                var relativeSerie = dataConverted.series.find(function (t) { return t.name == s.name; });
-                // Una serie del grafico è stata ggiornata, ordino i datapoint e li aggiungo
-                var correctOrder = true;
-                var prevDate = null;
-                for (var 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(function (d1, d2) { return d1.d.getTime() - d2.d.getTime(); });
-                for (var v = 0; v < relativeSerie.values.length; v++) {
-                    var 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 */
         LineChartService.prototype.generateSingleDataset = function (data) {
@@ -1810,142 +1877,6 @@
         return LineChartService;
     }());
 
-    /**
-     * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
-     */
-    var AreaChartService = /** @class */ (function () {
-        /** @ignore */
-        function AreaChartService(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
-         */
-        AreaChartService.prototype.graphicate = function (data, settings) {
-            var _this = this;
-            var _a, _b, _c, _d, _e, _f;
-            if (settings.Timeline) {
-                console.error("Timeline not supported for area chart");
-                return null;
-            }
-            var dataConverted = this.Adapter ? this.Adapter.adaptDataForAreaChart(data) : data;
-            var showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
-            var interval = dataConverted.interval;
-            //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
-            am4core__namespace.options.autoDispose = true;
-            this.ChartInstance = am4core__namespace.create(settings.Name, am4charts__namespace.XYChart);
-            var ChartInstanceCasted = this.ChartInstance;
-            if (settings.Legend) {
-                ChartInstanceCasted.legend = new am4charts__namespace.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) {
-                    var 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;
-                }
-            }
-            var yAxis = ChartInstanceCasted.yAxes.push(new am4charts__namespace.ValueAxis());
-            yAxis.tooltip.disabled = true;
-            if (settings.YAxisTitle) {
-                yAxis.title.text = settings.YAxisTitle;
-                yAxis.title.fontWeight = "bold";
-            }
-            yAxis.min = 0;
-            var dateAxis = ChartInstanceCasted.xAxes.push(new am4charts__namespace.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__namespace.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
-            var chartData = [];
-            var seriesToMakeCache = {};
-            var seriesToMake = [];
-            for (var i = 0; i < dataConverted.groups.length; i++) {
-                var group = dataConverted.groups[i];
-                var dataItem = { date: group.name };
-                for (var ii = 0; ii < group.values.length; ii++) {
-                    var 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(function (s) { _this.createSeries(ChartInstanceCasted, s); });
-            ChartInstanceCasted.cursor = new am4charts__namespace.XYCursor();
-            ChartInstanceCasted.cursor.xAxis = dateAxis;
-            dateAxis.events.on("startchanged", function (t) { return _this.emitSelectionChanged(t, settings); });
-            dateAxis.events.on("endchanged", function (t) { return _this.emitSelectionChanged(t, settings); });
-            return this;
-        };
-        /** @ignore */
-        AreaChartService.prototype.refreshData = function (data) {
-            //TODO:IMPL
-        };
-        /** @ignore */
-        AreaChartService.prototype.emitSelectionChanged = function (ev, settings) {
-            if (settings.OnSelectionChangedCallback) {
-                this.throttla("selchange", function () {
-                    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 */
-        AreaChartService.prototype.createSeries = function (chart, name) {
-            var series = chart.series.push(new am4charts__namespace.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 */
-        AreaChartService.prototype.throttla = function (id, func, throttleTime) {
-            var _this = this;
-            //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(function () { func(); _this.executionTimers[id] = null; }, throttleTime);
-        };
-        return AreaChartService;
-    }());
-
     /**
      * Classe il cui unico scopo è gestire il setup e rendering di un PieChart
      */
@@ -2058,15 +1989,13 @@
     }());
 
     /**
-     * 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
      */
-    var Vertical2DChartService = /** @class */ (function () {
+    var VerticalChartService = /** @class */ (function () {
         /** @ignore */
-        function Vertical2DChartService(Adapter) {
+        function VerticalChartService(Adapter) {
             this.Adapter = Adapter;
             /** @ignore */
-            this.DefaultGroupPaddingPercentage = 5;
-            /** @ignore */
             this.dangerZone = 50;
             /** @ignore */
             this.LabelWidth = 150;
@@ -2078,11 +2007,11 @@
             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
          */
-        Vertical2DChartService.prototype.graphicate = function (data, settings) {
+        VerticalChartService.prototype.graphicate = function (data, settings) {
             var _this = this;
-            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;
@@ -2091,6 +2020,8 @@
             am4core__namespace.options.autoDispose = true;
             this.ChartInstance = am4core__namespace.create(settings.Name, am4charts__namespace.XYChart);
             var ChartInstanceCasted = this.ChartInstance;
+            var dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
+            ChartInstanceCasted.data = dataConverted.values;
             if (settings.Legend) {
                 ChartInstanceCasted.legend = new am4charts__namespace.Legend();
                 ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
@@ -2113,15 +2044,12 @@
                 categoryAxis.title.text = settings.XAxisTitle;
                 categoryAxis.title.fontWeight = "bold";
             }
-            yAxis.min = 0;
-            categoryAxis.dataFields.category = 'key';
-            categoryAxis.renderer.cellStartLocation = am4core__namespace.percent((_f = settings.GroupPaddingPercentage) !== null && _f !== void 0 ? _f : this.DefaultGroupPaddingPercentage).value;
-            categoryAxis.renderer.cellEndLocation = am4core__namespace.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;
             var 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", function (ev) {
@@ -2145,90 +2073,36 @@
                     }
                 });
             }
-            var dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
-            var dataConverted = [];
-            for (var i = 0; i < dataPreConverted.groups.length; i++) {
-                var item = dataPreConverted.groups[i];
-                var obj = { key: item.name };
-                for (var p = 0; p < item.values.length; p++) {
-                    var value = item.values[p];
-                    obj[value.k] = value.v;
-                }
-                dataConverted.push(obj);
-            }
-            ChartInstanceCasted.data = dataConverted;
-            if (dataPreConverted.colorInfos)
-                ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(function (c) { return am4core__namespace.color(c.color); });
-            //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
-            for (var prop in dataConverted[0])
-                if (prop !== "key")
-                    this.createSeries(ChartInstanceCasted, settings, prop, prop);
+            // Create series
+            var series = ChartInstanceCasted.series.push(new am4charts__namespace.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__namespace.percent((_h = settings.ColumnWidthPercentage) !== null && _h !== void 0 ? _h : this.DefaultColumnWidthPercentage);
+            var columnTemplate = series.columns.template;
+            columnTemplate.strokeWidth = 2;
+            columnTemplate.strokeOpacity = 1;
             return this;
         };
         /** @ignore */
-        Vertical2DChartService.prototype.refreshData = function (data) {
+        VerticalChartService.prototype.refreshData = function (data) {
             //TODO:IMPL
         };
-        /** @ignore */
-        Vertical2DChartService.prototype.createSeries = function (chart, settings, value, name) {
-            var _this = this;
-            var _a;
-            var series = chart.series.push(new am4charts__namespace.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__namespace.percent((_a = settings.ColumnWidthPercentage) !== null && _a !== void 0 ? _a : this.DefaultColumnWidthPercentage);
-            series.events.on("hidden", function () { return _this.arrangeColumns; });
-            series.events.on("shown", function () { return _this.arrangeColumns; });
-            return series;
-        };
-        /** @ignore */
-        Vertical2DChartService.prototype.arrangeColumns = function () {
-            var ChartInstanceCasted = this.ChartInstance;
-            var series = ChartInstanceCasted.series.getIndex(0);
-            var xAxis = ChartInstanceCasted.xAxes.getIndex(0);
-            var w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
-            if (series.dataItems.length > 1) {
-                var x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
-                var x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
-                var delta_1 = ((x1 - x0) / ChartInstanceCasted.series.length) * w;
-                if (am4core__namespace.isNumber(delta_1)) {
-                    var middle_1 = ChartInstanceCasted.series.length / 2;
-                    var newIndex_1 = 0;
-                    ChartInstanceCasted.series.each(function (series) {
-                        if (!series.isHidden && !series.isHiding) {
-                            series.dummyData = newIndex_1;
-                            newIndex_1++;
-                        }
-                        else {
-                            series.dummyData = ChartInstanceCasted.series.indexOf(series);
-                        }
-                    });
-                    var visibleCount = newIndex_1;
-                    var newMiddle_1 = visibleCount / 2;
-                    ChartInstanceCasted.series.each(function (series) {
-                        var trueIndex = ChartInstanceCasted.series.indexOf(series);
-                        var newIndex = series.dummyData;
-                        var dx = (newIndex - trueIndex + middle_1 - newMiddle_1) * delta_1;
-                        series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
-                        series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
-                    });
-                }
-            }
-        };
-        return Vertical2DChartService;
+        return VerticalChartService;
     }());
 
     /**
-     * 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
      */
-    var VerticalChartService = /** @class */ (function () {
+    var Vertical2DChartService = /** @class */ (function () {
         /** @ignore */
-        function VerticalChartService(Adapter) {
+        function Vertical2DChartService(Adapter) {
             this.Adapter = Adapter;
             /** @ignore */
+            this.DefaultGroupPaddingPercentage = 5;
+            /** @ignore */
             this.dangerZone = 50;
             /** @ignore */
             this.LabelWidth = 150;
@@ -2240,11 +2114,11 @@
             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
          */
-        VerticalChartService.prototype.graphicate = function (data, settings) {
+        Vertical2DChartService.prototype.graphicate = function (data, settings) {
             var _this = this;
-            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;
@@ -2253,8 +2127,6 @@
             am4core__namespace.options.autoDispose = true;
             this.ChartInstance = am4core__namespace.create(settings.Name, am4charts__namespace.XYChart);
             var ChartInstanceCasted = this.ChartInstance;
-            var dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
-            ChartInstanceCasted.data = dataConverted.values;
             if (settings.Legend) {
                 ChartInstanceCasted.legend = new am4charts__namespace.Legend();
                 ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
@@ -2277,12 +2149,15 @@
                 categoryAxis.title.text = settings.XAxisTitle;
                 categoryAxis.title.fontWeight = "bold";
             }
-            categoryAxis.dataFields.category = "k";
+            yAxis.min = 0;
+            categoryAxis.dataFields.category = 'key';
+            categoryAxis.renderer.cellStartLocation = am4core__namespace.percent((_f = settings.GroupPaddingPercentage) !== null && _f !== void 0 ? _f : this.DefaultGroupPaddingPercentage).value;
+            categoryAxis.renderer.cellEndLocation = am4core__namespace.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;
             var 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", function (ev) {
@@ -2306,24 +2181,80 @@
                     }
                 });
             }
-            // Create series
-            var series = ChartInstanceCasted.series.push(new am4charts__namespace.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__namespace.percent((_h = settings.ColumnWidthPercentage) !== null && _h !== void 0 ? _h : this.DefaultColumnWidthPercentage);
-            var columnTemplate = series.columns.template;
-            columnTemplate.strokeWidth = 2;
-            columnTemplate.strokeOpacity = 1;
-            return this;
-        };
-        /** @ignore */
-        VerticalChartService.prototype.refreshData = function (data) {
-            //TODO:IMPL
+            var dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
+            var dataConverted = [];
+            for (var i = 0; i < dataPreConverted.groups.length; i++) {
+                var item = dataPreConverted.groups[i];
+                var obj = { key: item.name };
+                for (var p = 0; p < item.values.length; p++) {
+                    var value = item.values[p];
+                    obj[value.k] = value.v;
+                }
+                dataConverted.push(obj);
+            }
+            ChartInstanceCasted.data = dataConverted;
+            if (dataPreConverted.colorInfos)
+                ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(function (c) { return am4core__namespace.color(c.color); });
+            //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
+            for (var prop in dataConverted[0])
+                if (prop !== "key")
+                    this.createSeries(ChartInstanceCasted, settings, prop, prop);
+            return this;
+        };
+        /** @ignore */
+        Vertical2DChartService.prototype.refreshData = function (data) {
+            //TODO:IMPL
+        };
+        /** @ignore */
+        Vertical2DChartService.prototype.createSeries = function (chart, settings, value, name) {
+            var _this = this;
+            var _a;
+            var series = chart.series.push(new am4charts__namespace.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__namespace.percent((_a = settings.ColumnWidthPercentage) !== null && _a !== void 0 ? _a : this.DefaultColumnWidthPercentage);
+            series.events.on("hidden", function () { return _this.arrangeColumns; });
+            series.events.on("shown", function () { return _this.arrangeColumns; });
+            return series;
+        };
+        /** @ignore */
+        Vertical2DChartService.prototype.arrangeColumns = function () {
+            var ChartInstanceCasted = this.ChartInstance;
+            var series = ChartInstanceCasted.series.getIndex(0);
+            var xAxis = ChartInstanceCasted.xAxes.getIndex(0);
+            var w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
+            if (series.dataItems.length > 1) {
+                var x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
+                var x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
+                var delta_1 = ((x1 - x0) / ChartInstanceCasted.series.length) * w;
+                if (am4core__namespace.isNumber(delta_1)) {
+                    var middle_1 = ChartInstanceCasted.series.length / 2;
+                    var newIndex_1 = 0;
+                    ChartInstanceCasted.series.each(function (series) {
+                        if (!series.isHidden && !series.isHiding) {
+                            series.dummyData = newIndex_1;
+                            newIndex_1++;
+                        }
+                        else {
+                            series.dummyData = ChartInstanceCasted.series.indexOf(series);
+                        }
+                    });
+                    var visibleCount = newIndex_1;
+                    var newMiddle_1 = visibleCount / 2;
+                    ChartInstanceCasted.series.each(function (series) {
+                        var trueIndex = ChartInstanceCasted.series.indexOf(series);
+                        var newIndex = series.dummyData;
+                        var dx = (newIndex - trueIndex + middle_1 - newMiddle_1) * delta_1;
+                        series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
+                        series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
+                    });
+                }
+            }
         };
-        return VerticalChartService;
+        return Vertical2DChartService;
     }());
 
     /**
@@ -2453,6 +2384,142 @@
         return VerticalStackedChartService;
     }());
 
+    /**
+     * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
+     */
+    var AreaChartService = /** @class */ (function () {
+        /** @ignore */
+        function AreaChartService(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
+         */
+        AreaChartService.prototype.graphicate = function (data, settings) {
+            var _this = this;
+            var _a, _b, _c, _d, _e, _f;
+            if (settings.Timeline) {
+                console.error("Timeline not supported for area chart");
+                return null;
+            }
+            var dataConverted = this.Adapter ? this.Adapter.adaptDataForAreaChart(data) : data;
+            var showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
+            var interval = dataConverted.interval;
+            //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
+            am4core__namespace.options.autoDispose = true;
+            this.ChartInstance = am4core__namespace.create(settings.Name, am4charts__namespace.XYChart);
+            var ChartInstanceCasted = this.ChartInstance;
+            if (settings.Legend) {
+                ChartInstanceCasted.legend = new am4charts__namespace.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) {
+                    var 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;
+                }
+            }
+            var yAxis = ChartInstanceCasted.yAxes.push(new am4charts__namespace.ValueAxis());
+            yAxis.tooltip.disabled = true;
+            if (settings.YAxisTitle) {
+                yAxis.title.text = settings.YAxisTitle;
+                yAxis.title.fontWeight = "bold";
+            }
+            yAxis.min = 0;
+            var dateAxis = ChartInstanceCasted.xAxes.push(new am4charts__namespace.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__namespace.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
+            var chartData = [];
+            var seriesToMakeCache = {};
+            var seriesToMake = [];
+            for (var i = 0; i < dataConverted.groups.length; i++) {
+                var group = dataConverted.groups[i];
+                var dataItem = { date: group.name };
+                for (var ii = 0; ii < group.values.length; ii++) {
+                    var 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(function (s) { _this.createSeries(ChartInstanceCasted, s); });
+            ChartInstanceCasted.cursor = new am4charts__namespace.XYCursor();
+            ChartInstanceCasted.cursor.xAxis = dateAxis;
+            dateAxis.events.on("startchanged", function (t) { return _this.emitSelectionChanged(t, settings); });
+            dateAxis.events.on("endchanged", function (t) { return _this.emitSelectionChanged(t, settings); });
+            return this;
+        };
+        /** @ignore */
+        AreaChartService.prototype.refreshData = function (data) {
+            //TODO:IMPL
+        };
+        /** @ignore */
+        AreaChartService.prototype.emitSelectionChanged = function (ev, settings) {
+            if (settings.OnSelectionChangedCallback) {
+                this.throttla("selchange", function () {
+                    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 */
+        AreaChartService.prototype.createSeries = function (chart, name) {
+            var series = chart.series.push(new am4charts__namespace.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 */
+        AreaChartService.prototype.throttla = function (id, func, throttleTime) {
+            var _this = this;
+            //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(function () { func(); _this.executionTimers[id] = null; }, throttleTime);
+        };
+        return AreaChartService;
+    }());
+
     /**
      * Componente specifico per la graficazione di un qualsiasi tipo di grafico.
      *
@@ -3071,92 +3138,6 @@
         return PagedChartData;
     }());
 
-    /**
-     * Componente che si occupa della paginazione dei grafici qualora servisse
-     */
-    var PageChartSelector = /** @class */ (function () {
-        function PageChartSelector() {
-            /**
-             * 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 core.EventEmitter();
-        }
-        /**
-         * @ignore
-         */
-        PageChartSelector.prototype.ngOnChanges = function () {
-            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
-         */
-        PageChartSelector.prototype.handlePageChange = function () {
-            this.finalIndex = this.currentpage - 1;
-            this.currentindex = this.currentpage - 1;
-            var 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
-         */
-        PageChartSelector.prototype.Next = function () {
-            var _this = this;
-            // 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(function () {
-                if (_this.currentindex == _this.currentpage - 2)
-                    _this.handlePageChange();
-                else
-                    _this.currentindex++;
-            }, this.BrowseDelayMs);
-        };
-        /**
-         * Visualizza il grafico precedente
-         */
-        PageChartSelector.prototype.Previous = function () {
-            var _this = this;
-            // 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(function () {
-                if (_this.currentindex == _this.currentpage)
-                    _this.handlePageChange();
-                else
-                    _this.currentindex--;
-            }, this.BrowseDelayMs);
-        };
-        return PageChartSelector;
-    }());
-    PageChartSelector.decorators = [
-        { type: core.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: core.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: core.Input }],
-        Dtos: [{ type: core.Input }],
-        BrowseDelayMs: [{ type: core.Input }],
-        StartIndex: [{ type: core.Input }],
-        onPageChange: [{ type: core.Output }],
-        headerInner_tr: [{ type: core.ContentChild, args: ['header_inner', { static: false },] }]
-    };
-
     /** Componenti esportati dal modulo */
     var COMPONENTS = [
         EsChartComponent,
@@ -3227,6 +3208,7 @@
     exports.LineChartData = LineChartData;
     exports.LineChartSettings = LineChartSettings;
     exports.LineSerie = LineSerie;
+    exports.PageChartSelector = PageChartSelector;
     exports.PagedChartData = PagedChartData;
     exports.PieChartData = PieChartData;
     exports.PieChartSettings = PieChartSettings;
@@ -3236,22 +3218,12 @@
     exports.VerticalChartSettings = VerticalChartSettings;
     exports.VerticalStackedChartData = VerticalStackedChartData;
     exports.VerticalStackedChartSettings = VerticalStackedChartSettings;
-    exports.ɵa = BaseInterval;
-    exports.ɵb = ChartLoader;
-    exports.ɵc = ChartDispatcher;
-    exports.ɵd = ESC_LOCALE;
-    exports.ɵe = ESC_ANIMATIONS;
-    exports.ɵf = ESC_THEME;
-    exports.ɵg = ESC_LOGS;
-    exports.ɵh = BaseAdapter;
-    exports.ɵi = EsChartComponent;
-    exports.ɵj = EsLineChartComponent;
-    exports.ɵk = EsPieChartComponent;
-    exports.ɵl = EsVertical2DChartComponent;
-    exports.ɵm = EsVerticalChartComponent;
-    exports.ɵn = EsVerticalStackedChartComponent;
-    exports.ɵo = PageChartSelector;
-    exports.ɵp = EsAreaChartComponent;
+    exports.ɵa = ChartLoader;
+    exports.ɵb = ChartDispatcher;
+    exports.ɵc = ESC_LOCALE;
+    exports.ɵd = ESC_ANIMATIONS;
+    exports.ɵe = ESC_THEME;
+    exports.ɵf = ESC_LOGS;
 
     Object.defineProperty(exports, '__esModule', { value: true });