@esfaenza/es-charts 11.2.15 → 11.2.19

package/fesm2015/esfaenza-es-charts.js

@@ -705,6 +705,11 @@ class BaseChartComponent {
          * Evento lanciato al termine del caricamento di una nuova pagina del grafico
          */
         this.onLoadEnd = new EventEmitter();
+        /**
+        * Evento lanciato al termine della creazione del grafico referenziando l'istanza nativa del grafico creato in modo da poter effettuare modifiche
+        * post inizializzazione lato applicativo
+        */
+        this.chartLoaded = new EventEmitter();
         /**
          * Serve a decidere se sarà presente l'interfaccia di paginazione
          */
@@ -793,7 +798,7 @@ class BaseChartComponent {
                 this.Chart = this.ChartService.ChartInstance;
                 if (!this.Chart)
                     this.log("Chart " + this.name + ": Could not create graph");
-                return this.Charter.applyLocale(this.Chart, this.Locale).then(() => this.initDone = true);
+                return this.Charter.applyLocale(this.Chart, this.Locale).then(() => { this.initDone = true; this.chartLoaded.emit(this.Chart); });
             })
         ]);
     }
@@ -889,6 +894,13 @@ class BaseChartComponent {
             this.Chart.dispose(); this.Dispatcher.deregisterGraph(this.name); });
         this.Dispatcher.register(this.name, () => { return this.loadChart(); });
     }
+    /**
+     * Permette di aggiungere un blocco di dati in maniera "live" ad un grafico
+     */
+    addData(chartData) {
+        this.ChartService.refreshData(chartData);
+    }
+    ;
     /**
      * Funzione che si occupa di caricare i temi necessari per il grafico in oggetto. Prima applica il tema, poi, se serve, applica le animazioni
      */
@@ -955,7 +967,8 @@ BaseChartComponent.propDecorators = {
     onSelectionChanged: [{ type: Output }],
     onSeriesClicked: [{ type: Output }],
     onLoadStart: [{ type: Output }],
-    onLoadEnd: [{ type: Output }]
+    onLoadEnd: [{ type: Output }],
+    chartLoaded: [{ type: Output }]
 };
 
 /**
@@ -970,6 +983,8 @@ class LineChartService {
         this.DataGroupBucketSize = 1500;
         /** @ignore */
         this.OpacityOnSelected = 0.3;
+        /** @ignore */
+        this.singleDataSet = false;
         //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
         //TODO: spostarla in un metodo di utilità (esfaenza/extensions)
         /** @ignore */
@@ -982,7 +997,7 @@ class LineChartService {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
         let threshold = (_a = settings.DataGroupingThreshold) !== null && _a !== void 0 ? _a : 3000;
-        let singleDataSet = (_b = settings.MergeDatasets) !== null && _b !== void 0 ? _b : false;
+        this.singleDataSet = (_b = settings.MergeDatasets) !== null && _b !== void 0 ? _b : false;
         let showTicks = settings.ShowTicks == null ? true : settings === null || settings === void 0 ? void 0 : settings.ShowTicks;
         let dataShouldBeGrouped = Math.max(...dataConverted.series.map(t => t.values.length)) > threshold;
         let showTimeline = settings.Timeline || dataShouldBeGrouped;
@@ -1011,6 +1026,7 @@ class LineChartService {
                 range.label.text = dataConverted.limit.upperLabel;
                 range.label.fill = range.grid.stroke;
                 range.label.verticalCenter = "bottom";
+                range.label.stroke = am4core.color(dataConverted.limit.upperColor || "#F92200");
                 range.grid.stroke = am4core.color(dataConverted.limit.upperColor || "#F92200");
                 range.grid.strokeWidth = 2;
                 range.grid.strokeOpacity = 1;
@@ -1022,6 +1038,7 @@ class LineChartService {
                 range.label.text = dataConverted.limit.lowerLabel;
                 range.label.fill = range.grid.stroke;
                 range.label.verticalCenter = "bottom";
+                range.label.stroke = am4core.color(dataConverted.limit.lowerColor || "#F92200");
                 range.grid.stroke = am4core.color(dataConverted.limit.lowerColor || "#F92200");
                 range.grid.strokeWidth = 2;
                 range.grid.strokeOpacity = 1;
@@ -1059,31 +1076,9 @@ class LineChartService {
         let seriesColors = [];
         let defaultIndex = 0;
         //-- Generazione di un unico dataset invece che N, per poter gestire un unico tooltip
-        if (singleDataSet) {
-            let dto = {};
-            dataConverted.series.forEach((vs, index) => {
-                for (let i = 0; i < vs.values.length; i++) {
-                    var dataitem = vs.values[i];
-                    var indexer = new Date(dataitem.d).valueOf();
-                    if (!dto[indexer])
-                        dto[indexer] = {};
-                    dto[indexer]['v' + index] = dataitem.v;
-                }
-            });
-            var dates = Object.keys(dto);
-            let singleDS = [];
-            for (let i = 0; i < dates.length; i++) {
-                let values = dto[dates[i]];
-                let item = { d: new Date(parseInt(dates[i])) };
-                var vals = Object.keys(values);
-                for (let ii = 0; ii < vals.length; ii++) {
-                    let series = vals[ii];
-                    let singleVal = values[series];
-                    item[series] = singleVal;
-                }
-                singleDS.push(item);
-            }
-            this.ChartInstance.data = singleDS;
+        if (this.singleDataSet) {
+            this.ChartInstance.data = this.generateSingleDataset(dataConverted);
+            ;
             dateAxis.cursorTooltipEnabled = false;
         }
         //-- Fine generazione
@@ -1107,14 +1102,14 @@ class LineChartService {
                 s.values.sort((d1, d2) => d1.d.getTime() - d2.d.getTime());
             let fill = s.fill != null && s.fill != undefined ? s.fill : ((_a = settings === null || settings === void 0 ? void 0 : settings.Fill) !== null && _a !== void 0 ? _a : false);
             let series = (settings === null || settings === void 0 ? void 0 : settings.Step) ? new am4charts.StepLineSeries() : new am4charts.LineSeries();
-            series.dataFields.valueY = "v" + (singleDataSet ? index : "");
+            series.dataFields.valueY = "v" + (this.singleDataSet ? index : "");
             series.dataFields.dateX = "d";
             series.dataFields.measureUnit = s.uom;
             series.name = s.name;
             series.strokeWidth = (_b = settings === null || settings === void 0 ? void 0 : settings.StrokeSize) !== null && _b !== void 0 ? _b : 1;
             series.connect = !gapsAllowed;
             series.minBulletDistance = 10;
-            series.tooltipText = singleDataSet ? "" : "{name}: [bold]{valueY}[/]";
+            series.tooltipText = this.singleDataSet ? "" : "{name}: [bold]{valueY}[/]";
             series.tooltip.pointerOrientation = "vertical";
             series.tooltip.background.fillOpacity = 0.5;
             series.tooltip.label.padding(12, 12, 12, 12);
@@ -1122,7 +1117,7 @@ class LineChartService {
             series.stacked = fill;
             //Dataset singolo, i dati sono registrati a livello di chart, creo il tooltip che permette di vederli tutti insieme
             //altrimenti assegno i dati della serie direttamente alla serie
-            if (singleDataSet) {
+            if (this.singleDataSet) {
                 series.tooltip.getFillFromObject = false;
                 series.tooltip.background.fill = am4core.color("#eee");
                 series.tooltip.label.fill = am4core.color("#00");
@@ -1212,7 +1207,7 @@ class LineChartService {
         //******************************************************************************************************************************
         this.ChartInstance.cursor.xAxis = dateAxis;
         this.ChartInstance.cursor.yAxis = yAxis;
-        if (singleDataSet)
+        if (this.singleDataSet)
             this.ChartInstance.cursor.maxTooltipDistance = -1;
         //TODO: Cercare di capire perché è figlio di puttana......
         dateAxis.events.on("startchanged", t => this.emitSelectionChanged(t, settings));
@@ -1221,7 +1216,59 @@ class LineChartService {
     }
     /** @ignore */
     refreshData(data) {
-        //TODO:IMPL
+        let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
+        if (this.singleDataSet) {
+            var data = this.generateSingleDataset(dataConverted);
+            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 });
+            }
+        });
+    }
+    /** Partendo da dati divisi per seriue genera un dataset unito con la data come chiave e i vari valori dopo */
+    generateSingleDataset(data) {
+        let dto = {};
+        data.series.forEach((vs, index) => {
+            for (let i = 0; i < vs.values.length; i++) {
+                var dataitem = vs.values[i];
+                var indexer = new Date(dataitem.d).valueOf();
+                if (!dto[indexer])
+                    dto[indexer] = {};
+                dto[indexer]['v' + index] = dataitem.v;
+            }
+        });
+        var dates = Object.keys(dto);
+        var ret = [];
+        for (let i = 0; i < dates.length; i++) {
+            let values = dto[dates[i]];
+            let item = { d: new Date(parseInt(dates[i])) };
+            var vals = Object.keys(values);
+            for (let ii = 0; ii < vals.length; ii++) {
+                let series = vals[ii];
+                let singleVal = values[series];
+                item[series] = singleVal;
+            }
+            ret.push(item);
+        }
+        return ret;
     }
     /** @ignore */
     emitSelectionChanged(ev, settings) {