@esfaenza/es-charts 11.2.22 → 11.2.25

package/fesm2015/esfaenza-es-charts.js

@@ -1,4 +1,4 @@
-import { Injectable, InjectionToken, Inject, EventEmitter, Directive, ElementRef, NgZone, Input, ContentChild, Output, Component, ChangeDetectionStrategy, PLATFORM_ID, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChild, InjectionToken, Inject, Directive, ElementRef, NgZone, PLATFORM_ID, NgModule } from '@angular/core';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as am4core from '@amcharts/amcharts4/core';
 import { DateService } from '@esfaenza/extensions';
@@ -219,13 +219,13 @@ class LegendPad {
  */
 class Limit {
     /** @ignore */
-    constructor(upper, upperLabel, upperColor, lower, lowerLabel, lowerColor) {
+    constructor(upper, upperlabel, uppercolor, lower, lowerlabel, lowercolor) {
         this.upper = upper;
-        this.upperLabel = upperLabel;
-        this.upperColor = upperColor;
+        this.upperlabel = upperlabel;
+        this.uppercolor = uppercolor;
         this.lower = lower;
-        this.lowerLabel = lowerLabel;
-        this.lowerColor = lowerColor;
+        this.lowerlabel = lowerlabel;
+        this.lowercolor = lowercolor;
     }
 }
 
@@ -287,6 +287,89 @@ class LineSerie {
     }
 }
 
+/**
+ * Componente che si occupa della paginazione dei grafici qualora servisse
+ */
+class PageChartSelector {
+    constructor() {
+        /**
+         * Indica un cambio di pagina ed emette un oggetto con i dati attuali e l'indice attuale.
+         *
+         * Qualora la proprietà **data** fosse null indica un evento di "loading"
+         */
+        this.onPageChange = new EventEmitter();
+    }
+    /**
+     * @ignore
+     */
+    ngOnChanges() {
+        if (!(this.Items || this.Dtos) || (this.Items || this.Dtos).length == 0)
+            throw new Error("Chart array cannot be empty!");
+        var idx = (this.StartIndex || 0);
+        this.currentindex = idx;
+        this.currentpage = idx + 1;
+        this.handlePageChange();
+    }
+    /**
+     * Gestisce un cambio pagina inviando al callback **onPageChange** i dati attuali (siano essi il Dto per il caricamento dati i
+     * o i dati già presenti) e l'indice di visualizzazione
+     */
+    handlePageChange() {
+        this.finalIndex = this.currentpage - 1;
+        this.currentindex = this.currentpage - 1;
+        let data = this.Items && this.Items.length > 0 ? this.Items[this.finalIndex].data : this.Dtos[this.finalIndex];
+        this.onPageChange.emit({ data: data, index: this.finalIndex });
+    }
+    /**
+     * Visualizza il grafico successivo
+     */
+    Next() {
+        // Per passare da page a index è sempre un -1
+        this.currentpage++;
+        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
+        // Delay pseudo-intelligente per click compulsivi. 
+        // Se dopo questo delay sono andato avanti solo di 1 effettuo il callback altrimenti incremento l'indice
+        setTimeout(() => {
+            if (this.currentindex == this.currentpage - 2)
+                this.handlePageChange();
+            else
+                this.currentindex++;
+        }, this.BrowseDelayMs);
+    }
+    /**
+     * Visualizza il grafico precedente
+     */
+    Previous() {
+        // Per passare da page a index è sempre un -1
+        this.currentpage--;
+        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
+        // Delay pseudo-intelligente per click compulsivi. 
+        // Se dopo questo delay sono andato indietro solo di 1 effettuo il callback altrimenti decremento l'indice
+        setTimeout(() => {
+            if (this.currentindex == this.currentpage)
+                this.handlePageChange();
+            else
+                this.currentindex--;
+        }, this.BrowseDelayMs);
+    }
+}
+PageChartSelector.decorators = [
+    { type: Component, args: [{
+                selector: "chart-pager",
+                template: "<div *ngIf=\"(Items || Dtos) && (Items || Dtos).length > 0\" class=\"pcs-no-selection\">\r\n    <div class=\"pcs-button pcs-backward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"currentpage != 1 && Previous(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\"  [style.cursor]=\"currentpage == 1 ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-left\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div class=\"pcs-infos\">\r\n        <ng-container *ngIf=\"headerInner_tr\">\r\n            <ng-container *ngTemplateOutlet=\"headerInner_tr; context : {$implicit: (Items || Dtos)[currentpage - 1]}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"pcs-button pcs-forward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"(Items || Dtos).length != currentpage && Next(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\" [style.cursor]=\"(Items || Dtos).length == currentpage ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-right\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div style=\"clear: both;\"></div>\r\n</div>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".pcs-button{width:60px}.pcs-forward{float:right;text-align:end}.pcs-backward{float:left}.pcs-svg-header{width:57px;height:40px}.pcs-svg-button-container{outline:medium none currentcolor}.pcs-svg-arrow{pointer-events:none;fill:#555}.pcs-svg-arrow-right{transform:translate(44px,36px) rotate(180deg)}.pcs-svg-arrow-left{transform:translate(13px,4px)}.pcs-svg-button{fill:#d9d9d9;stroke:#fff;fill-opacity:1;stroke-opacity:1}.pcs-svg-button:hover{fill:#a3a3a3;cursor:pointer}.pcs-infos{width:calc(100% - 120px);height:44px;float:left}.pcs-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}"]
+            },] }
+];
+PageChartSelector.propDecorators = {
+    Items: [{ type: Input }],
+    Dtos: [{ type: Input }],
+    BrowseDelayMs: [{ type: Input }],
+    StartIndex: [{ type: Input }],
+    onPageChange: [{ type: Output }],
+    headerInner_tr: [{ type: ContentChild, args: ['header_inner', { static: false },] }]
+};
+
 /** @ignore */
 const _spiritedaway = 'spiritedaway';
 /** @ignore */
@@ -918,6 +1001,15 @@ class BaseChartComponent {
         if (this.logs)
             console.log("@esfaenza/es-charts: " + log);
     }
+    /**
+     * Imposta lo zoom dal **from** al **to**
+     *
+     * @param {Date} from Inizio dello zoom
+     * @param {Date} to Fine dello zoom
+     */
+    setSelection(from, to) {
+        this.ChartService.setSelection(from, to);
+    }
     /**
      * @ignore
      */
@@ -1023,11 +1115,11 @@ class LineChartService {
                 let range = yAxis.axisRanges.create();
                 range.value = dataConverted.limit.upper;
                 range.label.inside = true;
-                range.label.text = dataConverted.limit.upperLabel;
+                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.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;
             }
@@ -1035,16 +1127,18 @@ class LineChartService {
                 let range = yAxis.axisRanges.create();
                 range.value = dataConverted.limit.lower;
                 range.label.inside = true;
-                range.label.text = dataConverted.limit.lowerLabel;
+                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.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;
             }
         }
-        let dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
+        // Per comatibilità col codice scritto quando non era a livello globale, mi scoccia sostituire
+        let dateAxis = this.dateAxis;
+        dateAxis = ChartInstanceCasted.xAxes.push(new am4charts.DateAxis());
         if (settings.XAxisTitle) {
             dateAxis.title.text = settings.XAxisTitle;
             dateAxis.title.fontWeight = "bold";
@@ -1215,6 +1309,10 @@ class LineChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+        this.dateAxis.zoomToDates(from, to, true, true);
+    }
+    /** @ignore */
     refreshData(data) {
         let dataConverted = this.Adapter ? this.Adapter.adaptDataForLineChart(data) : data;
         if (this.singleDataSet) {
@@ -1406,6 +1504,9 @@ class PieChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
@@ -1516,6 +1617,9 @@ class VerticalChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
@@ -1629,6 +1733,9 @@ class Vertical2DChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
@@ -1786,6 +1893,9 @@ class VerticalStackedChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
@@ -1899,6 +2009,9 @@ class AreaChartService {
         return this;
     }
     /** @ignore */
+    setSelection(from, to) {
+    }
+    /** @ignore */
     refreshData(data) {
         //TODO:IMPL
     }
@@ -2536,89 +2649,6 @@ class PagedChartData {
     }
 }
 
-/**
- * Componente che si occupa della paginazione dei grafici qualora servisse
- */
-class PageChartSelector {
-    constructor() {
-        /**
-         * Indica un cambio di pagina ed emette un oggetto con i dati attuali e l'indice attuale.
-         *
-         * Qualora la proprietà **data** fosse null indica un evento di "loading"
-         */
-        this.onPageChange = new EventEmitter();
-    }
-    /**
-     * @ignore
-     */
-    ngOnChanges() {
-        if (!(this.Items || this.Dtos) || (this.Items || this.Dtos).length == 0)
-            throw new Error("Chart array cannot be empty!");
-        var idx = (this.StartIndex || 0);
-        this.currentindex = idx;
-        this.currentpage = idx + 1;
-        this.handlePageChange();
-    }
-    /**
-     * Gestisce un cambio pagina inviando al callback **onPageChange** i dati attuali (siano essi il Dto per il caricamento dati i
-     * o i dati già presenti) e l'indice di visualizzazione
-     */
-    handlePageChange() {
-        this.finalIndex = this.currentpage - 1;
-        this.currentindex = this.currentpage - 1;
-        let data = this.Items && this.Items.length > 0 ? this.Items[this.finalIndex].data : this.Dtos[this.finalIndex];
-        this.onPageChange.emit({ data: data, index: this.finalIndex });
-    }
-    /**
-     * Visualizza il grafico successivo
-     */
-    Next() {
-        // Per passare da page a index è sempre un -1
-        this.currentpage++;
-        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
-        // Delay pseudo-intelligente per click compulsivi. 
-        // Se dopo questo delay sono andato avanti solo di 1 effettuo il callback altrimenti incremento l'indice
-        setTimeout(() => {
-            if (this.currentindex == this.currentpage - 2)
-                this.handlePageChange();
-            else
-                this.currentindex++;
-        }, this.BrowseDelayMs);
-    }
-    /**
-     * Visualizza il grafico precedente
-     */
-    Previous() {
-        // Per passare da page a index è sempre un -1
-        this.currentpage--;
-        this.onPageChange.emit({ data: null, index: this.currentpage - 1 });
-        // Delay pseudo-intelligente per click compulsivi. 
-        // Se dopo questo delay sono andato indietro solo di 1 effettuo il callback altrimenti decremento l'indice
-        setTimeout(() => {
-            if (this.currentindex == this.currentpage)
-                this.handlePageChange();
-            else
-                this.currentindex--;
-        }, this.BrowseDelayMs);
-    }
-}
-PageChartSelector.decorators = [
-    { type: Component, args: [{
-                selector: "chart-pager",
-                template: "<div *ngIf=\"(Items || Dtos) && (Items || Dtos).length > 0\" class=\"pcs-no-selection\">\r\n    <div class=\"pcs-button pcs-backward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"currentpage != 1 && Previous(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\"  [style.cursor]=\"currentpage == 1 ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-left\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div class=\"pcs-infos\">\r\n        <ng-container *ngIf=\"headerInner_tr\">\r\n            <ng-container *ngTemplateOutlet=\"headerInner_tr; context : {$implicit: (Items || Dtos)[currentpage - 1]}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"pcs-button pcs-forward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"(Items || Dtos).length != currentpage && Next(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\" [style.cursor]=\"(Items || Dtos).length == currentpage ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-right\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div style=\"clear: both;\"></div>\r\n</div>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".pcs-button{width:60px}.pcs-forward{float:right;text-align:end}.pcs-backward{float:left}.pcs-svg-header{width:57px;height:40px}.pcs-svg-button-container{outline:medium none currentcolor}.pcs-svg-arrow{pointer-events:none;fill:#555}.pcs-svg-arrow-right{transform:translate(44px,36px) rotate(180deg)}.pcs-svg-arrow-left{transform:translate(13px,4px)}.pcs-svg-button{fill:#d9d9d9;stroke:#fff;fill-opacity:1;stroke-opacity:1}.pcs-svg-button:hover{fill:#a3a3a3;cursor:pointer}.pcs-infos{width:calc(100% - 120px);height:44px;float:left}.pcs-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}"]
-            },] }
-];
-PageChartSelector.propDecorators = {
-    Items: [{ type: Input }],
-    Dtos: [{ type: Input }],
-    BrowseDelayMs: [{ type: Input }],
-    StartIndex: [{ type: Input }],
-    onPageChange: [{ type: Output }],
-    headerInner_tr: [{ type: ContentChild, args: ['header_inner', { static: false },] }]
-};
-
 /** Componenti esportati dal modulo */
 const COMPONENTS = [
     EsChartComponent,
@@ -2663,5 +2693,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, 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 };
+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, ChartLoader as ɵa, ChartDispatcher as ɵb, ESC_LOCALE as ɵc, ESC_ANIMATIONS as ɵd, ESC_THEME as ɵe, ESC_LOGS as ɵf };
 //# sourceMappingURL=esfaenza-es-charts.js.map