@esfaenza/es-charts 11.2.21 → 11.2.22

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

@@ -673,111 +673,6 @@
         return LineSerie;
     }());
 
-    /**
-     * 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,] }] }
-    ]; };
-
     /** @ignore */
     var _spiritedaway = 'spiritedaway';
     /** @ignore */
@@ -1119,6 +1014,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...
@@ -1702,26 +1702,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) {
@@ -1811,158 +1792,22 @@
     }());
 
     /**
-     * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
+     * Classe il cui unico scopo è gestire il setup e rendering di un PieChart
      */
-    var AreaChartService = /** @class */ (function () {
+    var PieChartService = /** @class */ (function () {
         /** @ignore */
-        function AreaChartService(Adapter) {
+        function PieChartService(Adapter) {
             this.Adapter = Adapter;
-            //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
-            //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
             /** @ignore */
-            this.executionTimers = {};
+            this.ViewAbsoluteValues = true;
         }
         /**
-         * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un AreaChart
+         * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un PieChart
          */
-        AreaChartService.prototype.graphicate = function (data, settings) {
-            var _this = this;
-            var _a, _b, _c, _d, _e, _f;
+        PieChartService.prototype.graphicate = function (data, settings) {
+            var _a, _b, _c, _d;
             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
-     */
-    var PieChartService = /** @class */ (function () {
-        /** @ignore */
-        function PieChartService(Adapter) {
-            this.Adapter = Adapter;
-            /** @ignore */
-            this.ViewAbsoluteValues = true;
-        }
-        /**
-         * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un PieChart
-         */
-        PieChartService.prototype.graphicate = function (data, settings) {
-            var _a, _b, _c, _d;
-            if (settings.Timeline) {
-                console.error("Timeline not supported for pie chart");
+                console.error("Timeline not supported for pie chart");
                 return null;
             }
             //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
@@ -2057,6 +1902,111 @@
         return PieChartService;
     }());
 
+    /**
+     * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
+     */
+    var VerticalChartService = /** @class */ (function () {
+        /** @ignore */
+        function VerticalChartService(Adapter) {
+            this.Adapter = Adapter;
+            /** @ignore */
+            this.dangerZone = 50;
+            /** @ignore */
+            this.LabelWidth = 150;
+            /** @ignore */
+            this.LabelRightWhenCompressed = 20;
+            /** @ignore */
+            this.LabelTopWhenCompressed = -5;
+            /** @ignore */
+            this.DefaultColumnWidthPercentage = 85;
+        }
+        /**
+         * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
+         */
+        VerticalChartService.prototype.graphicate = function (data, settings) {
+            var _this = this;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (settings.Timeline) {
+                console.error("Timeline not supported for vertical chart");
+                return null;
+            }
+            //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
+            am4core__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';
+                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());
+            if (settings.YAxisTitle) {
+                yAxis.title.text = settings.YAxisTitle;
+                yAxis.title.fontWeight = "bold";
+            }
+            var categoryAxis = ChartInstanceCasted.xAxes.push(new am4charts__namespace.CategoryAxis());
+            if (settings.XAxisTitle) {
+                categoryAxis.title.text = settings.XAxisTitle;
+                categoryAxis.title.fontWeight = "bold";
+            }
+            categoryAxis.dataFields.category = "k";
+            categoryAxis.renderer.grid.template.location = 0;
+            categoryAxis.renderer.minGridDistance = (_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 = (_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) {
+                    var _a, _b, _c;
+                    var axis = ev.target;
+                    var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
+                    if (cellWidth < axis.renderer.labels.template.maxWidth) {
+                        var areWeInDangerZone = cellWidth < ((_a = settings === null || settings === void 0 ? void 0 : settings.LabelVerticalOrientationCutoffWidth) !== null && _a !== void 0 ? _a : _this.dangerZone);
+                        axis.renderer.labels.template.rotation = areWeInDangerZone ? -90 : -45;
+                        axis.renderer.labels.template.dx = ((_b = settings.LabelRightWhenCompressed) !== null && _b !== void 0 ? _b : areWeInDangerZone) ? 0 : _this.LabelRightWhenCompressed;
+                        axis.renderer.labels.template.dy = (_c = settings.LabelTopWhenCompressed) !== null && _c !== void 0 ? _c : _this.LabelTopWhenCompressed;
+                        axis.renderer.labels.template.horizontalCenter = "right";
+                        axis.renderer.labels.template.verticalCenter = "middle";
+                    }
+                    else {
+                        axis.renderer.labels.template.rotation = 0;
+                        axis.renderer.labels.template.dx = 0;
+                        axis.renderer.labels.template.dy = 0;
+                        axis.renderer.labels.template.horizontalCenter = "middle";
+                        axis.renderer.labels.template.verticalCenter = "top";
+                    }
+                });
+            }
+            // Create series
+            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
+        };
+        return VerticalChartService;
+    }());
+
     /**
      * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
      */
@@ -2221,111 +2171,6 @@
         return Vertical2DChartService;
     }());
 
-    /**
-     * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
-     */
-    var VerticalChartService = /** @class */ (function () {
-        /** @ignore */
-        function VerticalChartService(Adapter) {
-            this.Adapter = Adapter;
-            /** @ignore */
-            this.dangerZone = 50;
-            /** @ignore */
-            this.LabelWidth = 150;
-            /** @ignore */
-            this.LabelRightWhenCompressed = 20;
-            /** @ignore */
-            this.LabelTopWhenCompressed = -5;
-            /** @ignore */
-            this.DefaultColumnWidthPercentage = 85;
-        }
-        /**
-         * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
-         */
-        VerticalChartService.prototype.graphicate = function (data, settings) {
-            var _this = this;
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (settings.Timeline) {
-                console.error("Timeline not supported for vertical chart");
-                return null;
-            }
-            //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
-            am4core__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';
-                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());
-            if (settings.YAxisTitle) {
-                yAxis.title.text = settings.YAxisTitle;
-                yAxis.title.fontWeight = "bold";
-            }
-            var categoryAxis = ChartInstanceCasted.xAxes.push(new am4charts__namespace.CategoryAxis());
-            if (settings.XAxisTitle) {
-                categoryAxis.title.text = settings.XAxisTitle;
-                categoryAxis.title.fontWeight = "bold";
-            }
-            categoryAxis.dataFields.category = "k";
-            categoryAxis.renderer.grid.template.location = 0;
-            categoryAxis.renderer.minGridDistance = (_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 = (_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) {
-                    var _a, _b, _c;
-                    var axis = ev.target;
-                    var cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
-                    if (cellWidth < axis.renderer.labels.template.maxWidth) {
-                        var areWeInDangerZone = cellWidth < ((_a = settings === null || settings === void 0 ? void 0 : settings.LabelVerticalOrientationCutoffWidth) !== null && _a !== void 0 ? _a : _this.dangerZone);
-                        axis.renderer.labels.template.rotation = areWeInDangerZone ? -90 : -45;
-                        axis.renderer.labels.template.dx = ((_b = settings.LabelRightWhenCompressed) !== null && _b !== void 0 ? _b : areWeInDangerZone) ? 0 : _this.LabelRightWhenCompressed;
-                        axis.renderer.labels.template.dy = (_c = settings.LabelTopWhenCompressed) !== null && _c !== void 0 ? _c : _this.LabelTopWhenCompressed;
-                        axis.renderer.labels.template.horizontalCenter = "right";
-                        axis.renderer.labels.template.verticalCenter = "middle";
-                    }
-                    else {
-                        axis.renderer.labels.template.rotation = 0;
-                        axis.renderer.labels.template.dx = 0;
-                        axis.renderer.labels.template.dy = 0;
-                        axis.renderer.labels.template.horizontalCenter = "middle";
-                        axis.renderer.labels.template.verticalCenter = "top";
-                    }
-                });
-            }
-            // Create series
-            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
-        };
-        return VerticalChartService;
-    }());
-
     /**
      * Classe il cui unico scopo è gestire il setup e rendering di un VerticalStackedChart
      */
@@ -2453,6 +2298,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.
      *
@@ -3236,22 +3217,13 @@
     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;
+    exports.ɵg = PageChartSelector;
 
     Object.defineProperty(exports, '__esModule', { value: true });