@esfaenza/es-charts 13.1.3 → 13.1.4

package/fesm2020/esfaenza-es-charts.mjs

@@ -797,6 +797,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
          */
@@ -884,7 +889,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); });
             })
         ]);
     }
@@ -979,6 +984,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
      */
@@ -1008,7 +1020,7 @@ class BaseChartComponent {
     }
 }
 BaseChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseChartComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-BaseChartComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseChartComponent, inputs: { XTitle: "XTitle", YTitle: "YTitle", Settings: "Settings", Legend: "Legend", LegendPosition: "LegendPosition", Timeline: "Timeline", name: "name", Animations: "Animations", Theme: "Theme", Locale: "Locale", HideSeriesOnLabelClick: "HideSeriesOnLabelClick", MinGridDistance: "MinGridDistance", AdaptLabelSizeAndOrientation: "AdaptLabelSizeAndOrientation", LegendPadding: "LegendPadding", DataDtos: "DataDtos", DataDtoStartIndex: "DataDtoStartIndex", DataRetrieve: "DataRetrieve", BrowseDelayMs: "BrowseDelayMs" }, outputs: { onSelectionChanged: "onSelectionChanged", onSeriesClicked: "onSeriesClicked", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd" }, queries: [{ propertyName: "header_tr", first: true, predicate: ["header"], descendants: true }, { propertyName: "loading_template", first: true, predicate: ["loading"], descendants: true }], usesOnChanges: true, ngImport: i0 });
+BaseChartComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseChartComponent, inputs: { XTitle: "XTitle", YTitle: "YTitle", Settings: "Settings", Legend: "Legend", LegendPosition: "LegendPosition", Timeline: "Timeline", name: "name", Animations: "Animations", Theme: "Theme", Locale: "Locale", HideSeriesOnLabelClick: "HideSeriesOnLabelClick", MinGridDistance: "MinGridDistance", AdaptLabelSizeAndOrientation: "AdaptLabelSizeAndOrientation", LegendPadding: "LegendPadding", DataDtos: "DataDtos", DataDtoStartIndex: "DataDtoStartIndex", DataRetrieve: "DataRetrieve", BrowseDelayMs: "BrowseDelayMs" }, outputs: { onSelectionChanged: "onSelectionChanged", onSeriesClicked: "onSeriesClicked", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd", chartLoaded: "chartLoaded" }, queries: [{ propertyName: "header_tr", first: true, predicate: ["header"], descendants: true }, { propertyName: "loading_template", first: true, predicate: ["loading"], descendants: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseChartComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Object }, { type: i0.NgZone }, { type: ChartLoader }, { type: ChartDispatcher }, { type: undefined }, { type: undefined }, { type: undefined }, { type: undefined }]; }, propDecorators: { XTitle: [{
@@ -1061,6 +1073,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Output
             }], onLoadEnd: [{
                 type: Output
+            }], chartLoaded: [{
+                type: Output
             }] } });
 
 /**
@@ -1075,6 +1089,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 */
@@ -1086,7 +1102,7 @@ class LineChartService {
     graphicate(data, settings) {
         let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
         let threshold = settings.DataGroupingThreshold ?? 3000;
-        let singleDataSet = settings.MergeDatasets ?? false;
+        this.singleDataSet = settings.MergeDatasets ?? false;
         let showTicks = settings.ShowTicks == null ? true : settings?.ShowTicks;
         let dataShouldBeGrouped = Math.max(...dataConverted.series.map(t => t.values.length)) > threshold;
         let showTimeline = settings.Timeline || dataShouldBeGrouped;
@@ -1165,31 +1181,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
@@ -1212,14 +1206,14 @@ class LineChartService {
                 s.values.sort((d1, d2) => d1.d.getTime() - d2.d.getTime());
             let fill = s.fill != null && s.fill != undefined ? s.fill : (settings?.Fill ?? false);
             let series = 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 = settings?.StrokeSize ?? 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);
@@ -1227,7 +1221,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");
@@ -1317,7 +1311,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));
@@ -1326,7 +1320,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) {
@@ -2697,5 +2743,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartData, AreaChartSettings, BaseAdapter, BaseInterval, BaseSettings, ChartThemes, DateValue, EsAreaChartComponent, EsChartComponent, EsChartsModule, EsLineChartComponent, EsPieChartComponent, EsVertical2DChartComponent, EsVerticalChartComponent, EsVerticalStackedChartComponent, KeyValue, KeyValueColor, LegendPad, Limit, LineChartData, LineChartSettings, LineSerie, PageChartSelector, PagedChartData, PieChartData, PieChartSettings, Vertical2DChartData, Vertical2DChartSettings, VerticalChartData, VerticalChartSettings, VerticalStackedChartData, VerticalStackedChartSettings };
+export { AreaChartData, AreaChartSettings, BaseAdapter, BaseChartComponent, BaseInterval, BaseSettings, ChartThemes, DateValue, EsAreaChartComponent, EsChartComponent, EsChartsModule, EsLineChartComponent, EsPieChartComponent, EsVertical2DChartComponent, EsVerticalChartComponent, EsVerticalStackedChartComponent, KeyValue, KeyValueColor, LegendPad, Limit, LineChartData, LineChartSettings, LineSerie, PageChartSelector, PagedChartData, PieChartData, PieChartSettings, Vertical2DChartData, Vertical2DChartSettings, VerticalChartData, VerticalChartSettings, VerticalStackedChartData, VerticalStackedChartSettings };
 //# sourceMappingURL=esfaenza-es-charts.mjs.map