@esfaenza/es-charts 13.3.3 → 13.3.4

package/fesm2020/esfaenza-es-charts.mjs

@@ -107,12 +107,12 @@ class Vertical2DChartData {
     /**
      * Costruttore
      *
-     * @param {{ name: string; values: KeyValue[]; }[]} groups Gruppi di valori raggruppati per nome
-     * @param {{ color: string }[]} colorInfos Lista dei colori da utilizzare. Vanno a sovrascrivere quelli di default di amcharts
+     * @param {{ name: string; values: KeyValue[];, uom: string }[]} groups Gruppi di valori raggruppati per nome
+     * @param {{ color: string }[]} colorinfos Lista dei colori da utilizzare. Vanno a sovrascrivere quelli di default di amcharts
      */
-    constructor(groups = [], colorInfos) {
+    constructor(groups = [], colorinfos) {
         this.groups = groups;
-        this.colorInfos = colorInfos;
+        this.colorinfos = colorinfos;
     }
 }
 
@@ -123,7 +123,7 @@ class VerticalChartData {
     /**
      * Costruttore
      *
-     * @param {KeyValue[]} values Lista di Chiave-Valore che rappresentano ognuno una colonna
+     * @param {KeyValueColor[]} values Lista di Chiave-Valore-Colore che rappresentano ognuno una colonna
      */
     constructor(values = []) {
         this.values = values;
@@ -137,7 +137,7 @@ class VerticalStackedChartData {
     /**
      * Costruttore
      *
-     * @param {{ name: string; values: KeyValue[]; }[]} groups Gruppi di valori raggruppati per nome
+     * @param {{ name: string; values: KeyValue[], uom: string }[]} groups Gruppi di valori raggruppati per nome
      */
     constructor(groups = []) {
         this.groups = groups;
@@ -261,10 +261,11 @@ class KeyValue {
  */
 class KeyValueColor {
     /** @ignore */
-    constructor(k, v, c) {
+    constructor(k, v, c, t) {
         this.k = k;
         this.v = v;
         this.c = c;
+        this.t = t;
     }
 }
 
@@ -281,14 +282,18 @@ class LineSerie {
      * @param {string} color Colore della serie, verrà usato sia per la linea base che eventualmente per il riempimento (in caso si utilizzi l'Input **Fill** nel grafico)
      * @param {string} uom Unità di misura da presentare nell'asse delle Y
      * @param {boolean} fill Override della proprietà **Fill** del grafico, specifico per ogni serie
+     * @param {boolean} stacked Override della proprietà **Stacked** del grafico, specifico per ogni serie
+     * @param {boolean} hidden Indica se la serie deve partire nascosta di default
      */
-    constructor(name, values, interval, color, uom, fill) {
+    constructor(name, values, interval, color, uom, fill, stacked, hidden) {
         this.name = name;
         this.values = values;
         this.interval = interval;
         this.color = color;
         this.uom = uom;
         this.fill = fill;
+        this.stacked = stacked;
+        this.hidden = hidden;
     }
 }
 
@@ -1100,6 +1105,8 @@ class LineChartService {
         /** @ignore */
         this.OpacityOnSelected = 0.3;
         /** @ignore */
+        this.OpacityOnFill = 0.75;
+        /** @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)
@@ -1214,14 +1221,8 @@ class LineChartService {
         let seriesToPush = [];
         let seriesColors = [];
         let defaultIndex = 0;
-        //-- Generazione di un unico dataset invece che N, per poter gestire un unico tooltip
-        if (this.singleDataSet) {
-            this.ChartInstance.data = this.generateSingleDataset(dataConverted);
-            ;
-            dateAxis.cursorTooltipEnabled = false;
-        }
-        //-- Fine generazione
-        dataConverted.series.forEach((s, index) => {
+        // Ordinamento dei dati se serve
+        dataConverted.series.forEach((s) => {
             if (s.values[0] && !(s.values[0].d instanceof Date)) {
                 for (let v = 0; v < s.values.length; v++)
                     s.values[v].d = new Date(s.values[v].d);
@@ -1238,11 +1239,20 @@ class LineChartService {
             }
             if (!correctOrder)
                 s.values.sort((d1, d2) => d1.d.getTime() - d2.d.getTime());
-            let fill = s.fill != null && s.fill != undefined ? s.fill : (settings?.Fill ?? false);
+        });
+        // Generazione di un unico dataset invece che N, per poter gestire un unico tooltip
+        if (this.singleDataSet) {
+            this.ChartInstance.data = this.generateSingleDataset(dataConverted);
+            ;
+            dateAxis.cursorTooltipEnabled = false;
+        }
+        dataConverted.series.forEach((s, index) => {
+            let stacked = s.stacked != null && s.stacked != undefined ? s.stacked : (settings?.Stacked ?? false);
+            let fill = stacked || (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" + (this.singleDataSet ? index : "");
             series.dataFields.dateX = "d";
-            series.dataFields.measureUnit = s.uom;
+            series.measureUnit = s.uom;
             series.name = s.name;
             series.strokeWidth = settings?.StrokeSize ?? 1;
             series.connect = !gapsAllowed;
@@ -1251,8 +1261,9 @@ class LineChartService {
             series.tooltip.pointerOrientation = "vertical";
             series.tooltip.background.fillOpacity = 0.5;
             series.tooltip.label.padding(12, 12, 12, 12);
-            series.fillOpacity = fill ? 1 : 0.0001;
-            series.stacked = fill;
+            series.fillOpacity = fill ? this.OpacityOnFill : 0.0001;
+            series.stacked = stacked;
+            series.hidden = s.hidden;
             //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 (this.singleDataSet) {
@@ -1263,7 +1274,7 @@ class LineChartService {
                 series.tooltip.hiddenState.transitionDuration = 0;
                 //Utilizzo il mio dateService per la formattazione della data in modo che non debba mai gestire n formati fra n librerie... bellissimo
                 series.dateFormatter.format = (source) => {
-                    if (interval && finalInstant) {
+                    if (interval && finalInstant && ["hour", "minute", "second"].includes(interval.timeunit)) {
                         let timepart = null;
                         switch (interval.timeunit) {
                             case "hour":
@@ -1280,12 +1291,12 @@ class LineChartService {
                             return this.dateExts.adjustDateToFinalInstant(source, timepart, interval ? interval.timeunit == "second" : false);
                     }
                     else
-                        return this.dateExts.getFormatted(source, false, interval ? interval.timeunit == "second" : false);
+                        return this.dateExts.getFormatted(source, interval ? ["day", "week", "month", "year"].includes(interval.timeunit) : false, interval ? interval.timeunit == "second" : false);
                 };
                 series.adapter.add("tooltipText", () => {
                     var text = "[bold]{dateX.formatDate()}[/]\n";
                     this.ChartInstance.series.each((item) => {
-                        let uom = " [font-style: italic]" + series.dataFields.measureUnit || "" + "[/]";
+                        let uom = " [font-style: italic]" + series.measureUnit || "" + "[/]";
                         text += "[" + item.stroke.hex + "]●[/] " + (item.name ? (item.name + ": ") : "") + "[bold]{" + item.dataFields.valueY + "}[/]" + uom + "\n";
                     });
                     return text;
@@ -1407,8 +1418,8 @@ class LineChartService {
     }
     /** @ignore */
     processOver(hoveredSeries) {
-        hoveredSeries.toFront();
-        let fill = hoveredSeries.stacked;
+        hoveredSeries.zIndex = 999;
+        let fill = hoveredSeries.fillOpacity == this.OpacityOnFill;
         hoveredSeries.segments.each((segment) => {
             segment.setState("hover");
             if (!fill)
@@ -1418,7 +1429,7 @@ class LineChartService {
             hoveredSeries.legendDataItem.marker.children.getIndex(1).fillOpacity = this.OpacityOnSelected;
         this.ChartInstance.series.each((series) => {
             if (series != hoveredSeries) {
-                let fill = series.stacked;
+                let fill = series.fillOpacity == this.OpacityOnFill;
                 series.segments.each((segment) => {
                     segment.setState("dimmed");
                     if (!fill)
@@ -1429,8 +1440,9 @@ class LineChartService {
     }
     /** @ignore */
     processOut() {
-        this.ChartInstance.series.each((series) => {
-            let fill = series.stacked;
+        this.ChartInstance.series.each((series, i) => {
+            series.zIndex = i;
+            let fill = series.fillOpacity == this.OpacityOnFill;
             series.segments.each((segment) => {
                 segment.setState("default");
                 if (!fill)
@@ -1594,6 +1606,7 @@ class VerticalChartService {
         let ChartInstanceCasted = this.ChartInstance;
         let dataConverted = this.Adapter ? this.Adapter.adaptDataForVerticalChart(data) : data;
         ChartInstanceCasted.data = dataConverted.values;
+        let noStrokes = dataConverted.values.some(t => !!t.c);
         if (settings.Legend) {
             ChartInstanceCasted.legend = new am4charts.Legend();
             ChartInstanceCasted.legend.position = settings?.LegendPosition ?? 'right';
@@ -1649,12 +1662,19 @@ class VerticalChartService {
         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(settings.ColumnWidthPercentage ?? this.DefaultColumnWidthPercentage);
         let columnTemplate = series.columns.template;
-        columnTemplate.strokeWidth = 2;
-        columnTemplate.strokeOpacity = 1;
+        columnTemplate.tooltipText = "{categoryX}: [bold]{valueY}[/] {t}";
+        columnTemplate.fillOpacity = .8;
+        columnTemplate.width = am4core.percent(settings.ColumnWidthPercentage ?? this.DefaultColumnWidthPercentage);
+        if (noStrokes) {
+            columnTemplate.strokeOpacity = 0;
+            columnTemplate.strokeWidth = 0;
+            columnTemplate.adapter.add("fill", (_, target) => am4core.color(target.dataItem.dataContext.c));
+        }
+        else {
+            columnTemplate.strokeWidth = 2;
+            columnTemplate.strokeOpacity = 1;
+        }
         return this;
     }
     /** @ignore */
@@ -1763,8 +1783,8 @@ class Vertical2DChartService {
             dataConverted.push(obj);
         }
         ChartInstanceCasted.data = dataConverted;
-        if (dataPreConverted.colorInfos)
-            ChartInstanceCasted.colors.list = dataPreConverted.colorInfos.map(c => am4core.color(c.color));
+        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")
@@ -2271,7 +2291,7 @@ class EsLineChartComponent extends BaseChartComponent {
      * Ottiene le proprietà specifiche per questa tipologia di grafico per cui serve rigraficare
      */
     getSpecificPropertiesToCheck() {
-        return ["Data", "DataArray", "Step", "DataGroupBucketSize", "DataGroupingThreshold", "StrokeSize", "AllowGaps", "MergeDatasets", "FinalInstants", "Fill", "Min", "Max"];
+        return ["Data", "DataArray", "Step", "DataGroupBucketSize", "DataGroupingThreshold", "StrokeSize", "Stacked", "AllowGaps", "MergeDatasets", "FinalInstants", "Fill", "Min", "Max"];
     }
     /**
      * Ottiene i Settings (Ereditati dalla classe base, quindi del tipo generico **BaseSettings**) castati al tipo specifico per questo grafico
@@ -2297,6 +2317,7 @@ class EsLineChartComponent extends BaseChartComponent {
         settingsCasted.Min = settingsCasted.Min != null ? settingsCasted.Min : this.Min;
         settingsCasted.Max = settingsCasted.Max != null ? settingsCasted.Max : this.Max;
         settingsCasted.Fill = settingsCasted.Fill != null ? settingsCasted.Fill : this.Fill;
+        settingsCasted.Stacked = settingsCasted.Stacked != null ? settingsCasted.Stacked : this.Stacked;
     }
     /**
      * Effettua il rendering di questo grafico in base ai Settings
@@ -2309,7 +2330,7 @@ class EsLineChartComponent extends BaseChartComponent {
     }
 }
 EsLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EsLineChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: BaseAdapter }, { token: i3.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_LOGS }, { token: ESC_ANIMATIONS }, { token: ESC_LOCALE }, { token: ESC_THEME }], target: i0.ɵɵFactoryTarget.Component });
-EsLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EsLineChartComponent, selector: "es-line-chart", inputs: { Data: "Data", DataArray: "DataArray", Step: "Step", DataGroupBucketSize: "DataGroupBucketSize", DataGroupingThreshold: "DataGroupingThreshold", StrokeSize: "StrokeSize", AllowGaps: "AllowGaps", MergeDatasets: "MergeDatasets", FinalInstants: "FinalInstants", Min: "Min", Max: "Max", Fill: "Fill" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EsLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EsLineChartComponent, selector: "es-line-chart", inputs: { Data: "Data", DataArray: "DataArray", Step: "Step", DataGroupBucketSize: "DataGroupBucketSize", DataGroupingThreshold: "DataGroupingThreshold", StrokeSize: "StrokeSize", AllowGaps: "AllowGaps", MergeDatasets: "MergeDatasets", FinalInstants: "FinalInstants", Min: "Min", Max: "Max", Fill: "Fill", Stacked: "Stacked" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], components: [{ type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EsLineChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-line-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
@@ -2352,6 +2373,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], Fill: [{
                 type: Input
+            }], Stacked: [{
+                type: Input
             }] } });
 
 /**