Added zoom functionality on every graph

src/app/components/pab-profile-graph/pab-profile-graph.component.ts

@@ -136,7 +136,6 @@ export class PabProfileGraphComponent extends ResultsComponent {
     }
 
     private zoomComplete() {
-        console.log("zoom complete du Q !");
         this._zoomWasChanged = true;
         this.cd.detectChanges();
     }
@@ -170,33 +169,6 @@ export class PabProfileGraphComponent extends ResultsComponent {
                 showLine: "true"
             });
         }
-
-        /* const that = this;
-        this.graph_options["tooltips"] = {
-            displayColors: false,
-            callbacks: {
-                title: (tooltipItems, data) => {
-                    return this.chartY + " = " + Number(tooltipItems[0].yLabel).toFixed(nDigits);
-                },
-                label: (tooltipItem, data) => {
-                    const lines: string[] = [];
-                    const nbLines = that._results.getVariatingParametersSymbols().length;
-                    for (const v of that._results.getVariatingParametersSymbols()) {
-                        const series = that._results.getValuesSeries(v);
-                        const line = v + " = " + series[tooltipItem.index].toFixed(nDigits);
-                        if (v === this.chartX) {
-                            if (nbLines > 1) {
-                                lines.unshift("");
-                            }
-                            lines.unshift(line);
-                        } else {
-                            lines.push(line);
-                        }
-                    }
-                    return lines;
-                }
-            }
-        }; */
     }
 
     public exportAsImage(element: HTMLDivElement) {

src/app/components/results-graph/results-graph.component.html

 <div class="graph-results-container" #graphResults fxLayout="row wrap" fxLayoutAlign="center center">
     <div fxFlex="1 1 100%">
         <div class="graph-results-buttons">
-            <button mat-icon-button (click)="exportAsImage(graphResults)">
+            <button mat-icon-button (click)="resetZoom()" [disabled]="! zoomWasChanged" [title]="uitextResetZoomTitle">
+                <mat-icon color="primary">replay</mat-icon>
+            </button>
+            <button mat-icon-button (click)="exportAsImage(graphResults)" [title]="uitextExportImageTitle">
                 <mat-icon color="primary">image</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(graphResults)">
+            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(graphResults)" [title]="uitextEnterFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()">
+            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
             </button>
         </div>

src/app/components/results-graph/results-graph.component.scss

@@ -19,6 +19,12 @@
                 transform: scale(1.2);
             }
         }
+
+        &:disabled {
+            mat-icon {
+                color: #bfbfbf;
+            }
+        }
     }
 }
 

src/app/components/results-graph/results-graph.component.ts

-import { Component, ViewChild, AfterContentInit, OnInit } from "@angular/core";
+import { Component, ViewChild, AfterContentInit, ChangeDetectorRef } from "@angular/core";
+
+import { ChartComponent } from "angular2-chartjs";
 
 import { Observer } from "jalhyd";
 
@@ -17,11 +19,17 @@ import { ResultsComponent } from "../fixedvar-results/results.component";
     ]
 })
 export class ResultsGraphComponent extends ResultsComponent implements AfterContentInit, Observer {
+
+    @ViewChild(ChartComponent)
+    private chartComponent;
+
     private _results: PlottableData;
 
     /** used to briefly destroy/rebuild the chart component, to refresh axis labels (@see bug #137) */
     public displayChart = true;
 
+    private _zoomWasChanged = false;
+
     @ViewChild(GraphTypeSelectComponent)
     private _graphTypeComponent: GraphTypeSelectComponent;
 
@@ -52,9 +60,28 @@ export class ResultsGraphComponent extends ResultsComponent implements AfterCont
 
     public constructor(
         private appSetup: ApplicationSetupService,
-        private intlService: I18nService
+        private intlService: I18nService,
+        private cd: ChangeDetectorRef
     ) {
         super();
+        // enable zoom and pan (using "chartjs-plugin-zoom" package)
+        const that = this;
+        this.graph_options["plugins"] = {
+            zoom: {
+                pan: {
+                    enabled: false, // conflicts with drag zoom
+                    mode: "xy",
+                },
+                zoom: {
+                    enabled: true,
+                    drag: true, // conflicts with pan; set to false to enable mouse wheel zoom
+                    mode: "xy",
+                    // percentage of zoom on a wheel event
+                    // speed: 0.1,
+                    onZoomComplete: function(t: any) { return function() { t.zoomComplete(); }; }(that)
+                }
+            }
+        };
     }
 
     public set results(r: PlottableData) {
@@ -116,6 +143,15 @@ export class ResultsGraphComponent extends ResultsComponent implements AfterCont
         return this.intlService.localizeText("INFO_PARAMFIELD_GRAPH_SELECT_Y_AXIS");
     }
 
+    private zoomComplete() {
+        this._zoomWasChanged = true;
+        this.cd.detectChanges();
+    }
+
+    public get zoomWasChanged(): boolean {
+        return this._zoomWasChanged;
+    }
+
     public updateView() {
         // (re)generate chart
         switch (this._graphTypeComponent.selectedValue) {
@@ -316,6 +352,27 @@ export class ResultsGraphComponent extends ResultsComponent implements AfterCont
         }); // defaults to image/png
     }
 
+    public resetZoom() {
+        this.chartComponent.chart.resetZoom();
+        this._zoomWasChanged = false;
+    }
+
+    public get uitextResetZoomTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_RESET_ZOOM");
+    }
+
+    public get uitextExportImageTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXPORT_IMAGE");
+    }
+
+    public get uitextEnterFSTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_ENTER_FS");
+    }
+
+    public get uitextExitFSTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXIT_FS");
+    }
+
     // interface Observer
 
     update(sender: any, data: any) {