@esfaenza/es-charts 11.2.21 → 11.2.22

package/fesm2015/esfaenza-es-charts.js

@@ -287,109 +287,6 @@ class LineSerie {
     }
 }
 
-/**
- * Token che identifica il Locale di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_LOCALE = new InjectionToken('ESC_LOCALE');
-/**
- * Token che identifica il default per l'utilizzo o meno delle Animazioni per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_ANIMATIONS = new InjectionToken('ESC_ANIMATIONS');
-/**
- * Token che identifica il Tema di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
- */
-const ESC_THEME = new InjectionToken('ESC_THEME');
-/**
- * Token che identifica l'utilizzo o meno del sistema di Log per l'intera libreria
- */
-const ESC_LOGS = new InjectionToken('ESC_LOGS');
-
-/**
- * Classe che si occupa del dispatch delle operazioni di rendering dei grafici utilizzando una coda per permettere ad ogni grafico di avere temi e localizzazione custom
- */
-class ChartDispatcher {
-    /**
-     * @ignore
-     */
-    constructor(logs) {
-        this.logs = logs;
-        /**
-         * Coda di inizializzazioni ancora da eseguire. Quando questa è vuota significa che nessuno sta creando grafici
-         */
-        this.Initializations = [];
-        /**
-         * Lista dei grafici inizializzati e attivi in un dato momento (viene registrata la proprietà **name**). Non è possibile registrare due grafici con lo stesso identificativo
-         */
-        this.InitializedGraphs = [];
-    }
-    /**
-     * Registra un grafico da visualizzare insieme alla propria funzione di creazione. Quest'ultima sarà differita fino a che tutti i grafici
-     * precedentemente registati non hanno finito la fase di inizializzazione
-     *
-     * @param {string} name Identificativo del grafico da registrare
-     * @param {Function} chartCreationFunction Funzione che fisicamente dovrà occuparsi della creazione del grafico
-     */
-    register(name, chartCreationFunction) {
-        if (this.InitializedGraphs.indexOf(name) != -1)
-            throw "Attempting to register a duplicate chart '" + name + "'. Make sure the 'name' properties of your charts are univoque";
-        this.log("DISPATCHER: Registering chart creation function execution for " + name);
-        this.Initializations.push({ name: name, function: chartCreationFunction });
-        if (this.Initializations.length == 1) {
-            this.log("DISPATCHER: Initial drain started");
-            this.drainInitQueues();
-        }
-    }
-    /**
-     * Deregistra un grafico presente. Chiamata generalmente al dispose del grafico in questione quando non dev'essere più mostrato nella pagina corrente
-     *
-     * @param {string} name Identificativo del grafico da deregistrare
-     */
-    deregisterGraph(name) {
-        let index = this.InitializedGraphs.indexOf(name);
-        if (index == -1) {
-            //Questo succede quando si cerca di distruggere il grafico mentre sta venendo graficato
-            this.log("DISPATCHER: Registration missing for chart " + name + " it was probably destroyed during load");
-            return;
-        }
-        this.log("DISPATCHER: Chart deregistered " + name);
-        this.InitializedGraphs.splice(index, 1);
-    }
-    /**
-     * Metodo che esegue in maniera sequenziale le funzioni di inizializzazione dei grafici finché presenti
-     * in modo che nessun grafico possa essere inizializzato contemporaneamente ad un altro.
-     *
-     * Questo è il punto chiave che permette di avere per ogni grafico temi e locale differenti
-     */
-    drainInitQueues() {
-        let toExecute = this.Initializations[0];
-        this.log("DISPATCHER: Executing initialization function for chart " + toExecute.name);
-        toExecute.function().then(() => {
-            this.log("DISPATCHER: initialization for chart " + toExecute.name + " is done");
-            this.InitializedGraphs.push(toExecute.name);
-            this.Initializations.splice(0, 1);
-            if (this.Initializations.length >= 1) {
-                this.log("DISPATCHER: Found queued initializations. Continuing");
-                this.drainInitQueues();
-            }
-            else
-                this.log("DISPATCHER: queue is over, nothing more to do");
-        });
-    }
-    /**
-     * @ignore
-     */
-    log(text) {
-        if (this.logs)
-            console.log("@esfaenza/es-charts: " + text);
-    }
-}
-ChartDispatcher.decorators = [
-    { type: Injectable }
-];
-ChartDispatcher.ctorParameters = () => [
-    { type: Boolean, decorators: [{ type: Inject, args: [ESC_LOGS,] }] }
-];
-
 /** @ignore */
 const _spiritedaway = 'spiritedaway';
 /** @ignore */
@@ -651,6 +548,109 @@ class ChartLoader {
     }
 }
 
+/**
+ * Token che identifica il Locale di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_LOCALE = new InjectionToken('ESC_LOCALE');
+/**
+ * Token che identifica il default per l'utilizzo o meno delle Animazioni per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_ANIMATIONS = new InjectionToken('ESC_ANIMATIONS');
+/**
+ * Token che identifica il Tema di default per tutti i grafici, può essere sovrascritto dalle impostazioni locali (Settings e Input)
+ */
+const ESC_THEME = new InjectionToken('ESC_THEME');
+/**
+ * Token che identifica l'utilizzo o meno del sistema di Log per l'intera libreria
+ */
+const ESC_LOGS = new InjectionToken('ESC_LOGS');
+
+/**
+ * Classe che si occupa del dispatch delle operazioni di rendering dei grafici utilizzando una coda per permettere ad ogni grafico di avere temi e localizzazione custom
+ */
+class ChartDispatcher {
+    /**
+     * @ignore
+     */
+    constructor(logs) {
+        this.logs = logs;
+        /**
+         * Coda di inizializzazioni ancora da eseguire. Quando questa è vuota significa che nessuno sta creando grafici
+         */
+        this.Initializations = [];
+        /**
+         * Lista dei grafici inizializzati e attivi in un dato momento (viene registrata la proprietà **name**). Non è possibile registrare due grafici con lo stesso identificativo
+         */
+        this.InitializedGraphs = [];
+    }
+    /**
+     * Registra un grafico da visualizzare insieme alla propria funzione di creazione. Quest'ultima sarà differita fino a che tutti i grafici
+     * precedentemente registati non hanno finito la fase di inizializzazione
+     *
+     * @param {string} name Identificativo del grafico da registrare
+     * @param {Function} chartCreationFunction Funzione che fisicamente dovrà occuparsi della creazione del grafico
+     */
+    register(name, chartCreationFunction) {
+        if (this.InitializedGraphs.indexOf(name) != -1)
+            throw "Attempting to register a duplicate chart '" + name + "'. Make sure the 'name' properties of your charts are univoque";
+        this.log("DISPATCHER: Registering chart creation function execution for " + name);
+        this.Initializations.push({ name: name, function: chartCreationFunction });
+        if (this.Initializations.length == 1) {
+            this.log("DISPATCHER: Initial drain started");
+            this.drainInitQueues();
+        }
+    }
+    /**
+     * Deregistra un grafico presente. Chiamata generalmente al dispose del grafico in questione quando non dev'essere più mostrato nella pagina corrente
+     *
+     * @param {string} name Identificativo del grafico da deregistrare
+     */
+    deregisterGraph(name) {
+        let index = this.InitializedGraphs.indexOf(name);
+        if (index == -1) {
+            //Questo succede quando si cerca di distruggere il grafico mentre sta venendo graficato
+            this.log("DISPATCHER: Registration missing for chart " + name + " it was probably destroyed during load");
+            return;
+        }
+        this.log("DISPATCHER: Chart deregistered " + name);
+        this.InitializedGraphs.splice(index, 1);
+    }
+    /**
+     * Metodo che esegue in maniera sequenziale le funzioni di inizializzazione dei grafici finché presenti
+     * in modo che nessun grafico possa essere inizializzato contemporaneamente ad un altro.
+     *
+     * Questo è il punto chiave che permette di avere per ogni grafico temi e locale differenti
+     */
+    drainInitQueues() {
+        let toExecute = this.Initializations[0];
+        this.log("DISPATCHER: Executing initialization function for chart " + toExecute.name);
+        toExecute.function().then(() => {
+            this.log("DISPATCHER: initialization for chart " + toExecute.name + " is done");
+            this.InitializedGraphs.push(toExecute.name);
+            this.Initializations.splice(0, 1);
+            if (this.Initializations.length >= 1) {
+                this.log("DISPATCHER: Found queued initializations. Continuing");
+                this.drainInitQueues();
+            }
+            else
+                this.log("DISPATCHER: queue is over, nothing more to do");
+        });
+    }
+    /**
+     * @ignore
+     */
+    log(text) {
+        if (this.logs)
+            console.log("@esfaenza/es-charts: " + text);
+    }
+}
+ChartDispatcher.decorators = [
+    { type: Injectable }
+];
+ChartDispatcher.ctorParameters = () => [
+    { type: Boolean, decorators: [{ type: Inject, args: [ESC_LOGS,] }] }
+];
+
 /**
  * Componente Grafico Base che gestisce tutte le cose comuni dei vari grafici istanziabili, come la presenza o menu di una legenda,
  * il tema utilizzato, il locale del singolo grafico, ecc ecc...
@@ -1222,26 +1222,7 @@ class LineChartService {
             this.ChartInstance.addData(data);
             return;
         }
-        this.ChartInstance.series.each(s => {
-            var relativeSerie = dataConverted.series.find(t => t.name == s.name);
-            // Una serie del grafico è stata ggiornata, ordino i datapoint e li aggiungo
-            var correctOrder = true;
-            var prevDate = null;
-            for (let v = 0; v < relativeSerie.values.length; v++) {
-                if (!prevDate)
-                    prevDate = relativeSerie.values[v].d;
-                else if (relativeSerie.values[v].d < prevDate) {
-                    correctOrder = false;
-                    break;
-                }
-            }
-            if (!correctOrder)
-                relativeSerie.values.sort((d1, d2) => d1.d.getTime() - d2.d.getTime());
-            for (let v = 0; v < relativeSerie.values.length; v++) {
-                let obj = relativeSerie.values[v];
-                s.addData({ date: obj.d, value: obj.v });
-            }
-        });
+        throw "Impossibile aggiornare i dati senza unire il dataset. Si prega di impostare [MergeDatasets] a true";
     }
     /** Partendo da dati divisi per seriue genera un dataset unito con la data come chiave e i vari valori dopo */
     generateSingleDataset(data) {
@@ -1328,168 +1309,35 @@ class LineChartService {
 }
 
 /**
- * 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
  */
-class AreaChartService {
+class PieChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
-        //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
-        //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
         /** @ignore */
-        this.executionTimers = {};
+        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
      */
     graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         if (settings.Timeline) {
-            console.error("Timeline not supported for area chart");
+            console.error("Timeline not supported for pie chart");
             return null;
         }
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForAreaChart(data) : data;
-        let showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
-        let interval = dataConverted.interval;
         //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
         am4core.options.autoDispose = true;
-        this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
-        let ChartInstanceCasted = this.ChartInstance;
-        if (settings.Legend) {
-            ChartInstanceCasted.legend = new am4charts.Legend();
-            ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
-            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
-            if (settings.LegendPadding) {
-                let template = this.ChartInstance.legend.itemContainers.template;
-                template.paddingTop = (_b = settings.LegendPadding.top) !== null && _b !== void 0 ? _b : 0;
-                template.paddingBottom = (_c = settings.LegendPadding.bottom) !== null && _c !== void 0 ? _c : 0;
-                template.paddingLeft = (_d = settings.LegendPadding.left) !== null && _d !== void 0 ? _d : 0;
-                template.paddingRight = (_e = settings.LegendPadding.right) !== null && _e !== void 0 ? _e : 0;
-            }
-        }
-        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
-        yAxis.tooltip.disabled = true;
-        if (settings.YAxisTitle) {
-            yAxis.title.text = settings.YAxisTitle;
-            yAxis.title.fontWeight = "bold";
-        }
-        yAxis.min = 0;
-        let dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
-        dateAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 50;
-        dateAxis.startLocation = 0.5;
-        dateAxis.endLocation = 0.5;
-        if (settings.XAxisTitle) {
-            dateAxis.title.text = settings.XAxisTitle;
-            dateAxis.title.fontWeight = "bold";
-        }
-        if (showTicks) {
-            dateAxis.renderer.ticks.template.disabled = false;
-            dateAxis.renderer.ticks.template.strokeOpacity = 1;
-            dateAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
-            dateAxis.renderer.ticks.template.strokeWidth = 2;
-            dateAxis.renderer.ticks.template.length = 10;
-            dateAxis.renderer.ticks.template.location = 0;
-        }
-        if (!!interval)
-            dateAxis.baseInterval = { count: interval.count, timeUnit: interval.timeunit };
-        // Unisco il dataset e tiro fuori i dati
-        let chartData = [];
-        let seriesToMakeCache = {};
-        let seriesToMake = [];
-        for (let i = 0; i < dataConverted.groups.length; i++) {
-            let group = dataConverted.groups[i];
-            let dataItem = { date: group.name };
-            for (let ii = 0; ii < group.values.length; ii++) {
-                let val = group.values[ii];
-                dataItem[val.k] = val.v;
-                if (!seriesToMakeCache[val.k]) {
-                    seriesToMakeCache[val.k] = true;
-                    seriesToMake.push(val.k);
-                }
-            }
-            chartData.push(dataItem);
-        }
-        ChartInstanceCasted.data = chartData;
-        //---------------------------------------------------------
-        seriesToMake.forEach(s => { this.createSeries(ChartInstanceCasted, s); });
-        ChartInstanceCasted.cursor = new am4charts.XYCursor();
-        ChartInstanceCasted.cursor.xAxis = dateAxis;
-        dateAxis.events.on("startchanged", t => this.emitSelectionChanged(t, settings));
-        dateAxis.events.on("endchanged", t => this.emitSelectionChanged(t, settings));
-        return this;
-    }
-    /** @ignore */
-    refreshData(data) {
-        //TODO:IMPL
-    }
-    /** @ignore */
-    emitSelectionChanged(ev, settings) {
-        if (settings.OnSelectionChangedCallback) {
-            this.throttla("selchange", () => {
-                var axis = ev.target;
-                var start = new Date(axis.minZoomed);
-                var end = new Date(axis.maxZoomed);
-                var initial = axis.min == axis.minZoomed && axis.max == axis.maxZoomed;
-                settings.OnSelectionChangedCallback({ from: start, to: end, initial: initial });
-            }, 150);
-        }
-    }
-    /** @ignore */
-    createSeries(chart, name) {
-        let series = chart.series.push(new am4charts.LineSeries());
-        series.dataFields.dateX = "date";
-        series.name = name[0].toUpperCase() + name.slice(1);
-        series.dataFields.valueY = name;
-        series.tooltipText = "[#000]{valueY.value}[/]";
-        //series.tooltip.background.fill = am4core.color("#FFF");
-        series.tooltip.getStrokeFromObject = true;
-        series.tooltip.background.strokeWidth = 3;
-        series.tooltip.getFillFromObject = false;
-        series.fillOpacity = 0.6;
-        series.strokeWidth = 2;
-        series.stacked = true;
-        return series;
-    }
-    /** @ignore */
-    throttla(id, func, throttleTime) {
-        //Se ho la funzione che vuole eseguire ripulisco quel timeout
-        if (this.executionTimers[id])
-            clearTimeout(this.executionTimers[id]);
-        //Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
-        this.executionTimers[id] = setTimeout(() => { func(); this.executionTimers[id] = null; }, throttleTime);
-    }
-}
-
-/**
- * Classe il cui unico scopo è gestire il setup e rendering di un PieChart
- */
-class PieChartService {
-    /** @ignore */
-    constructor(Adapter) {
-        this.Adapter = Adapter;
-        /** @ignore */
-        this.ViewAbsoluteValues = true;
-    }
-    /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un PieChart
-     */
-    graphicate(data, settings) {
-        var _a, _b, _c, _d;
-        if (settings.Timeline) {
-            console.error("Timeline not supported for pie chart");
-            return null;
-        }
-        //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
-        am4core.options.autoDispose = true;
-        this.ChartInstance = am4core.create(settings.Name, settings.Mode3D ? am4charts.PieChart3D : am4charts.PieChart);
-        this.ChartInstance.innerRadius = ((settings.DonutRadiusPercentage || 15) / 100) * settings.ContainerHeight;
-        let series = this.ChartInstance.series.push(settings.Mode3D ? new am4charts.PieSeries3D() : new am4charts.PieSeries());
-        series.dataFields.value = "v";
-        series.dataFields.category = "k";
-        //Il default sono valori percentuali
-        if (this.ViewAbsoluteValues) {
-            series.legendSettings.valueText = "{value}";
-            series.labels.template.text = "{category}: [bold]{value}[/]";
+        this.ChartInstance = am4core.create(settings.Name, settings.Mode3D ? am4charts.PieChart3D : am4charts.PieChart);
+        this.ChartInstance.innerRadius = ((settings.DonutRadiusPercentage || 15) / 100) * settings.ContainerHeight;
+        let series = this.ChartInstance.series.push(settings.Mode3D ? new am4charts.PieSeries3D() : new am4charts.PieSeries());
+        series.dataFields.value = "v";
+        series.dataFields.category = "k";
+        //Il default sono valori percentuali
+        if (this.ViewAbsoluteValues) {
+            series.legendSettings.valueText = "{value}";
+            series.labels.template.text = "{category}: [bold]{value}[/]";
         }
         series.slices.template.stroke = am4core.color("#fff");
         series.slices.template.strokeOpacity = 1;
@@ -1571,15 +1419,13 @@ class PieChartService {
 }
 
 /**
- * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
+ * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
  */
-class Vertical2DChartService {
+class VerticalChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
         /** @ignore */
-        this.DefaultGroupPaddingPercentage = 5;
-        /** @ignore */
         this.dangerZone = 50;
         /** @ignore */
         this.LabelWidth = 150;
@@ -1591,10 +1437,10 @@ class Vertical2DChartService {
         this.DefaultColumnWidthPercentage = 85;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
      */
     graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (settings.Timeline) {
             console.error("Timeline not supported for vertical chart");
             return null;
@@ -1603,6 +1449,8 @@ class Vertical2DChartService {
         am4core.options.autoDispose = true;
         this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
         let ChartInstanceCasted = this.ChartInstance;
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
+        ChartInstanceCasted.data = dataConverted.values;
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
@@ -1625,15 +1473,12 @@ class Vertical2DChartService {
             categoryAxis.title.text = settings.XAxisTitle;
             categoryAxis.title.fontWeight = "bold";
         }
-        yAxis.min = 0;
-        categoryAxis.dataFields.category = 'key';
-        categoryAxis.renderer.cellStartLocation = am4core.percent((_f = settings.GroupPaddingPercentage) !== null && _f !== void 0 ? _f : this.DefaultGroupPaddingPercentage).value;
-        categoryAxis.renderer.cellEndLocation = am4core.percent(100 - ((_g = settings.GroupPaddingPercentage) !== null && _g !== void 0 ? _g : this.DefaultGroupPaddingPercentage)).value;
+        categoryAxis.dataFields.category = "k";
         categoryAxis.renderer.grid.template.location = 0;
-        categoryAxis.renderer.minGridDistance = (_h = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _h !== void 0 ? _h : 30;
+        categoryAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 30;
         let label = categoryAxis.renderer.labels.template;
         label.truncate = true;
-        label.maxWidth = (_j = settings.LabelWidth) !== null && _j !== void 0 ? _j : this.LabelWidth;
+        label.maxWidth = (_g = settings.LabelWidth) !== null && _g !== void 0 ? _g : this.LabelWidth;
         label.tooltipText = "{category}";
         if ((settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) == null ? true : settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) {
             categoryAxis.events.on("sizechanged", (ev) => {
@@ -1657,88 +1502,35 @@ class Vertical2DChartService {
                 }
             });
         }
-        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
-        let dataConverted = [];
-        for (let i = 0; i < dataPreConverted.groups.length; i++) {
-            let item = dataPreConverted.groups[i];
-            let obj = { key: item.name };
-            for (let p = 0; p < item.values.length; p++) {
-                let value = item.values[p];
-                obj[value.k] = value.v;
-            }
-            dataConverted.push(obj);
-        }
-        ChartInstanceCasted.data = dataConverted;
-        if (dataPreConverted.colorInfos)
-            ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(c => am4core.color(c.color));
-        //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
-        for (let prop in dataConverted[0])
-            if (prop !== "key")
-                this.createSeries(ChartInstanceCasted, settings, prop, prop);
+        // Create series
+        let series = ChartInstanceCasted.series.push(new am4charts.ColumnSeries());
+        series.dataFields.valueY = "v";
+        series.dataFields.categoryX = "k";
+        series.name = "";
+        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
+        series.columns.template.fillOpacity = .8;
+        series.columns.template.width = am4core.percent((_h = settings.ColumnWidthPercentage) !== null && _h !== void 0 ? _h : this.DefaultColumnWidthPercentage);
+        let columnTemplate = series.columns.template;
+        columnTemplate.strokeWidth = 2;
+        columnTemplate.strokeOpacity = 1;
         return this;
     }
     /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
-    /** @ignore */
-    createSeries(chart, settings, value, name) {
-        var _a;
-        let series = chart.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueY = value;
-        series.dataFields.categoryX = 'key';
-        series.name = name;
-        series.columns.template.tooltipText = "{name} {categoryX}: [bold]{valueY}[/]";
-        series.columns.template.fillOpacity = .8;
-        series.columns.template.width = am4core.percent((_a = settings.ColumnWidthPercentage) !== null && _a !== void 0 ? _a : this.DefaultColumnWidthPercentage);
-        series.events.on("hidden", () => this.arrangeColumns);
-        series.events.on("shown", () => this.arrangeColumns);
-        return series;
-    }
-    /** @ignore */
-    arrangeColumns() {
-        let ChartInstanceCasted = this.ChartInstance;
-        let series = ChartInstanceCasted.series.getIndex(0);
-        let xAxis = ChartInstanceCasted.xAxes.getIndex(0);
-        let w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
-        if (series.dataItems.length > 1) {
-            let x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
-            let x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
-            let delta = ((x1 - x0) / ChartInstanceCasted.series.length) * w;
-            if (am4core.isNumber(delta)) {
-                let middle = ChartInstanceCasted.series.length / 2;
-                let newIndex = 0;
-                ChartInstanceCasted.series.each((series) => {
-                    if (!series.isHidden && !series.isHiding) {
-                        series.dummyData = newIndex;
-                        newIndex++;
-                    }
-                    else {
-                        series.dummyData = ChartInstanceCasted.series.indexOf(series);
-                    }
-                });
-                let visibleCount = newIndex;
-                let newMiddle = visibleCount / 2;
-                ChartInstanceCasted.series.each((series) => {
-                    let trueIndex = ChartInstanceCasted.series.indexOf(series);
-                    let newIndex = series.dummyData;
-                    let dx = (newIndex - trueIndex + middle - newMiddle) * delta;
-                    series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
-                    series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
-                });
-            }
-        }
-    }
 }
 
 /**
- * Classe il cui unico scopo è gestire il setup e rendering di un VerticalChart
+ * Classe il cui unico scopo è gestire il setup e rendering di un Vertical2DChart
  */
-class VerticalChartService {
+class Vertical2DChartService {
     /** @ignore */
     constructor(Adapter) {
         this.Adapter = Adapter;
         /** @ignore */
+        this.DefaultGroupPaddingPercentage = 5;
+        /** @ignore */
         this.dangerZone = 50;
         /** @ignore */
         this.LabelWidth = 150;
@@ -1750,10 +1542,10 @@ class VerticalChartService {
         this.DefaultColumnWidthPercentage = 85;
     }
     /**
-     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un VerticalChart
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un Vertical2DChart
      */
     graphicate(data, settings) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (settings.Timeline) {
             console.error("Timeline not supported for vertical chart");
             return null;
@@ -1762,8 +1554,6 @@ class VerticalChartService {
         am4core.options.autoDispose = true;
         this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
         let ChartInstanceCasted = this.ChartInstance;
-        let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
-        ChartInstanceCasted.data = dataConverted.values;
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
@@ -1786,12 +1576,15 @@ class VerticalChartService {
             categoryAxis.title.text = settings.XAxisTitle;
             categoryAxis.title.fontWeight = "bold";
         }
-        categoryAxis.dataFields.category = "k";
+        yAxis.min = 0;
+        categoryAxis.dataFields.category = 'key';
+        categoryAxis.renderer.cellStartLocation = am4core.percent((_f = settings.GroupPaddingPercentage) !== null && _f !== void 0 ? _f : this.DefaultGroupPaddingPercentage).value;
+        categoryAxis.renderer.cellEndLocation = am4core.percent(100 - ((_g = settings.GroupPaddingPercentage) !== null && _g !== void 0 ? _g : this.DefaultGroupPaddingPercentage)).value;
         categoryAxis.renderer.grid.template.location = 0;
-        categoryAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 30;
+        categoryAxis.renderer.minGridDistance = (_h = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _h !== void 0 ? _h : 30;
         let label = categoryAxis.renderer.labels.template;
         label.truncate = true;
-        label.maxWidth = (_g = settings.LabelWidth) !== null && _g !== void 0 ? _g : this.LabelWidth;
+        label.maxWidth = (_j = settings.LabelWidth) !== null && _j !== void 0 ? _j : this.LabelWidth;
         label.tooltipText = "{category}";
         if ((settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) == null ? true : settings === null || settings === void 0 ? void 0 : settings.AdaptLabelSizeAndOrientation) {
             categoryAxis.events.on("sizechanged", (ev) => {
@@ -1815,23 +1608,78 @@ class VerticalChartService {
                 }
             });
         }
-        // Create series
-        let series = ChartInstanceCasted.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueY = "v";
-        series.dataFields.categoryX = "k";
-        series.name = "";
-        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
-        series.columns.template.fillOpacity = .8;
-        series.columns.template.width = am4core.percent((_h = settings.ColumnWidthPercentage) !== null && _h !== void 0 ? _h : this.DefaultColumnWidthPercentage);
-        let columnTemplate = series.columns.template;
-        columnTemplate.strokeWidth = 2;
-        columnTemplate.strokeOpacity = 1;
+        let dataPreConverted = this.Adapter ? this.Adapter.adaptDataForVertical2DChart(data) : data;
+        let dataConverted = [];
+        for (let i = 0; i < dataPreConverted.groups.length; i++) {
+            let item = dataPreConverted.groups[i];
+            let obj = { key: item.name };
+            for (let p = 0; p < item.values.length; p++) {
+                let value = item.values[p];
+                obj[value.k] = value.v;
+            }
+            dataConverted.push(obj);
+        }
+        ChartInstanceCasted.data = dataConverted;
+        if (dataPreConverted.colorInfos)
+            ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(c => am4core.color(c.color));
+        //Prendo la prima categoria e mi baso sulle proprietà per dfeinire le serie
+        for (let prop in dataConverted[0])
+            if (prop !== "key")
+                this.createSeries(ChartInstanceCasted, settings, prop, prop);
         return this;
     }
     /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
+    /** @ignore */
+    createSeries(chart, settings, value, name) {
+        var _a;
+        let series = chart.series.push(new am4charts.ColumnSeries());
+        series.dataFields.valueY = value;
+        series.dataFields.categoryX = 'key';
+        series.name = name;
+        series.columns.template.tooltipText = "{name} {categoryX}: [bold]{valueY}[/]";
+        series.columns.template.fillOpacity = .8;
+        series.columns.template.width = am4core.percent((_a = settings.ColumnWidthPercentage) !== null && _a !== void 0 ? _a : this.DefaultColumnWidthPercentage);
+        series.events.on("hidden", () => this.arrangeColumns);
+        series.events.on("shown", () => this.arrangeColumns);
+        return series;
+    }
+    /** @ignore */
+    arrangeColumns() {
+        let ChartInstanceCasted = this.ChartInstance;
+        let series = ChartInstanceCasted.series.getIndex(0);
+        let xAxis = ChartInstanceCasted.xAxes.getIndex(0);
+        let w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
+        if (series.dataItems.length > 1) {
+            let x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
+            let x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
+            let delta = ((x1 - x0) / ChartInstanceCasted.series.length) * w;
+            if (am4core.isNumber(delta)) {
+                let middle = ChartInstanceCasted.series.length / 2;
+                let newIndex = 0;
+                ChartInstanceCasted.series.each((series) => {
+                    if (!series.isHidden && !series.isHiding) {
+                        series.dummyData = newIndex;
+                        newIndex++;
+                    }
+                    else {
+                        series.dummyData = ChartInstanceCasted.series.indexOf(series);
+                    }
+                });
+                let visibleCount = newIndex;
+                let newMiddle = visibleCount / 2;
+                ChartInstanceCasted.series.each((series) => {
+                    let trueIndex = ChartInstanceCasted.series.indexOf(series);
+                    let newIndex = series.dummyData;
+                    let dx = (newIndex - trueIndex + middle - newMiddle) * delta;
+                    series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
+                    series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
+                });
+            }
+        }
+    }
 }
 
 /**
@@ -1959,6 +1807,139 @@ class VerticalStackedChartService {
     }
 }
 
+/**
+ * Classe il cui unico scopo è gestire il setup e rendering di un AreaChart
+ */
+class AreaChartService {
+    /** @ignore */
+    constructor(Adapter) {
+        this.Adapter = Adapter;
+        //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
+        //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
+        /** @ignore */
+        this.executionTimers = {};
+    }
+    /**
+     * Metodo che data una coppia Dati - Impostazioni li utilizza per creare e visualizzare un AreaChart
+     */
+    graphicate(data, settings) {
+        var _a, _b, _c, _d, _e, _f;
+        if (settings.Timeline) {
+            console.error("Timeline not supported for area chart");
+            return null;
+        }
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForAreaChart(data) : data;
+        let showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
+        let interval = dataConverted.interval;
+        //Per evitare di dimenticarmeli e gestire comunque bene gli ngif ecc...
+        am4core.options.autoDispose = true;
+        this.ChartInstance = am4core.create(settings.Name, am4charts.XYChart);
+        let ChartInstanceCasted = this.ChartInstance;
+        if (settings.Legend) {
+            ChartInstanceCasted.legend = new am4charts.Legend();
+            ChartInstanceCasted.legend.position = (_a = settings === null || settings === void 0 ? void 0 : settings.LegendPosition) !== null && _a !== void 0 ? _a : 'right';
+            ChartInstanceCasted.legend.itemContainers.template.tooltipText = "{category}";
+            if (settings.LegendPadding) {
+                let template = this.ChartInstance.legend.itemContainers.template;
+                template.paddingTop = (_b = settings.LegendPadding.top) !== null && _b !== void 0 ? _b : 0;
+                template.paddingBottom = (_c = settings.LegendPadding.bottom) !== null && _c !== void 0 ? _c : 0;
+                template.paddingLeft = (_d = settings.LegendPadding.left) !== null && _d !== void 0 ? _d : 0;
+                template.paddingRight = (_e = settings.LegendPadding.right) !== null && _e !== void 0 ? _e : 0;
+            }
+        }
+        let yAxis = ChartInstanceCasted.yAxes.push(new am4charts.ValueAxis());
+        yAxis.tooltip.disabled = true;
+        if (settings.YAxisTitle) {
+            yAxis.title.text = settings.YAxisTitle;
+            yAxis.title.fontWeight = "bold";
+        }
+        yAxis.min = 0;
+        let dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
+        dateAxis.renderer.minGridDistance = (_f = settings === null || settings === void 0 ? void 0 : settings.MinGridDistance) !== null && _f !== void 0 ? _f : 50;
+        dateAxis.startLocation = 0.5;
+        dateAxis.endLocation = 0.5;
+        if (settings.XAxisTitle) {
+            dateAxis.title.text = settings.XAxisTitle;
+            dateAxis.title.fontWeight = "bold";
+        }
+        if (showTicks) {
+            dateAxis.renderer.ticks.template.disabled = false;
+            dateAxis.renderer.ticks.template.strokeOpacity = 1;
+            dateAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
+            dateAxis.renderer.ticks.template.strokeWidth = 2;
+            dateAxis.renderer.ticks.template.length = 10;
+            dateAxis.renderer.ticks.template.location = 0;
+        }
+        if (!!interval)
+            dateAxis.baseInterval = { count: interval.count, timeUnit: interval.timeunit };
+        // Unisco il dataset e tiro fuori i dati
+        let chartData = [];
+        let seriesToMakeCache = {};
+        let seriesToMake = [];
+        for (let i = 0; i < dataConverted.groups.length; i++) {
+            let group = dataConverted.groups[i];
+            let dataItem = { date: group.name };
+            for (let ii = 0; ii < group.values.length; ii++) {
+                let val = group.values[ii];
+                dataItem[val.k] = val.v;
+                if (!seriesToMakeCache[val.k]) {
+                    seriesToMakeCache[val.k] = true;
+                    seriesToMake.push(val.k);
+                }
+            }
+            chartData.push(dataItem);
+        }
+        ChartInstanceCasted.data = chartData;
+        //---------------------------------------------------------
+        seriesToMake.forEach(s => { this.createSeries(ChartInstanceCasted, s); });
+        ChartInstanceCasted.cursor = new am4charts.XYCursor();
+        ChartInstanceCasted.cursor.xAxis = dateAxis;
+        dateAxis.events.on("startchanged", t => this.emitSelectionChanged(t, settings));
+        dateAxis.events.on("endchanged", t => this.emitSelectionChanged(t, settings));
+        return this;
+    }
+    /** @ignore */
+    refreshData(data) {
+        //TODO:IMPL
+    }
+    /** @ignore */
+    emitSelectionChanged(ev, settings) {
+        if (settings.OnSelectionChangedCallback) {
+            this.throttla("selchange", () => {
+                var axis = ev.target;
+                var start = new Date(axis.minZoomed);
+                var end = new Date(axis.maxZoomed);
+                var initial = axis.min == axis.minZoomed && axis.max == axis.maxZoomed;
+                settings.OnSelectionChangedCallback({ from: start, to: end, initial: initial });
+            }, 150);
+        }
+    }
+    /** @ignore */
+    createSeries(chart, name) {
+        let series = chart.series.push(new am4charts.LineSeries());
+        series.dataFields.dateX = "date";
+        series.name = name[0].toUpperCase() + name.slice(1);
+        series.dataFields.valueY = name;
+        series.tooltipText = "[#000]{valueY.value}[/]";
+        //series.tooltip.background.fill = am4core.color("#FFF");
+        series.tooltip.getStrokeFromObject = true;
+        series.tooltip.background.strokeWidth = 3;
+        series.tooltip.getFillFromObject = false;
+        series.fillOpacity = 0.6;
+        series.strokeWidth = 2;
+        series.stacked = true;
+        return series;
+    }
+    /** @ignore */
+    throttla(id, func, throttleTime) {
+        //Se ho la funzione che vuole eseguire ripulisco quel timeout
+        if (this.executionTimers[id])
+            clearTimeout(this.executionTimers[id]);
+        //Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
+        this.executionTimers[id] = setTimeout(() => { func(); this.executionTimers[id] = null; }, throttleTime);
+    }
+}
+
 /**
  * Componente specifico per la graficazione di un qualsiasi tipo di grafico.
  *
@@ -2682,5 +2663,5 @@ EsChartsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartData, AreaChartSettings, BaseAdapter, BaseChartComponent, BaseInterval, BaseSettings, ChartThemes, DateValue, EsAreaChartComponent, EsChartComponent, EsChartsModule, EsLineChartComponent, EsPieChartComponent, EsVertical2DChartComponent, EsVerticalChartComponent, EsVerticalStackedChartComponent, KeyValue, KeyValueColor, LegendPad, Limit, LineChartData, LineChartSettings, LineSerie, PagedChartData, PieChartData, PieChartSettings, Vertical2DChartData, Vertical2DChartSettings, VerticalChartData, VerticalChartSettings, VerticalStackedChartData, VerticalStackedChartSettings, BaseInterval as ɵa, ChartLoader as ɵb, ChartDispatcher as ɵc, ESC_LOCALE as ɵd, ESC_ANIMATIONS as ɵe, ESC_THEME as ɵf, ESC_LOGS as ɵg, BaseAdapter as ɵh, EsChartComponent as ɵi, EsLineChartComponent as ɵj, EsPieChartComponent as ɵk, EsVertical2DChartComponent as ɵl, EsVerticalChartComponent as ɵm, EsVerticalStackedChartComponent as ɵn, PageChartSelector as ɵo, EsAreaChartComponent as ɵp };
+export { AreaChartData, AreaChartSettings, BaseAdapter, BaseChartComponent, BaseInterval, BaseSettings, ChartThemes, DateValue, EsAreaChartComponent, EsChartComponent, EsChartsModule, EsLineChartComponent, EsPieChartComponent, EsVertical2DChartComponent, EsVerticalChartComponent, EsVerticalStackedChartComponent, KeyValue, KeyValueColor, LegendPad, Limit, LineChartData, LineChartSettings, LineSerie, PagedChartData, PieChartData, PieChartSettings, Vertical2DChartData, Vertical2DChartSettings, VerticalChartData, VerticalChartSettings, VerticalStackedChartData, VerticalStackedChartSettings, ChartLoader as ɵa, ChartDispatcher as ɵb, ESC_LOCALE as ɵc, ESC_ANIMATIONS as ɵd, ESC_THEME as ɵe, ESC_LOGS as ɵf, PageChartSelector as ɵg };
 //# sourceMappingURL=esfaenza-es-charts.js.map