Add zoom feature on PAB profile graph

angular.json

@@ -32,7 +32,9 @@
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeng/resources/themes/nova-light/theme.css"
             ],
-            "scripts": [],
+            "scripts": [
+              "node_modules/chartjs-plugin-zoom/chartjs-plugin-zoom.min.js"
+            ],
             "showCircularDependencies": false
           },
           "configurations": {

package-lock.json

@@ -3417,6 +3417,14 @@
         "color-name": "^1.0.0"
       }
     },
+    "chartjs-plugin-zoom": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-0.7.2.tgz",
+      "integrity": "sha512-5AtMCjlBlRsA/vxlvcBsAYKbkk0tVYE6+XX9M9LE6aSqbjqGR5NUQwYH0YvvvpmJjTZfB+HDhHaaGxJ/8aGaaw==",
+      "requires": {
+        "hammerjs": "^2.0.8"
+      }
+    },
     "cheerio": {
       "version": "1.0.0-rc.2",
       "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",

package.json

@@ -47,6 +47,7 @@
     "@types/pako": "^1.0.1",
     "@types/sprintf-js": "^1.1.2",
     "angular2-chartjs": "^0.5.1",
+    "chartjs-plugin-zoom": "^0.7.2",
     "cordova-android": "^8.0.0",
     "cordova-plugin-device": "^2.0.2",
     "core-js": "^2.6.5",

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

 <div class="graph-results-container" #graphProfile fxLayout="row wrap" fxLayoutAlign="center center">
     <div fxFlex="1 1 100%">
         <div class="graph-profile-buttons">
+            <button mat-icon-button (click)="resetZoom()">
+                <mat-icon color="primary">replay</mat-icon>
+            </button>
             <button mat-icon-button (click)="exportAsImage(graphProfile)">
                 <mat-icon color="primary">image</mat-icon>
             </button>
@@ -15,4 +18,4 @@
         <chart type="scatter" [data]="graph_data" [options]="graph_options" #graphChart>
         </chart>
     </div>
-</div>
+</div>
\ No newline at end of file

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

-import { Component } from "@angular/core";
+import { Component, ViewChild } from "@angular/core";
+
+import { ChartComponent } from "angular2-chartjs";
 
 import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
 import { I18nService } from "../../services/internationalisation/internationalisation.service";
@@ -14,6 +16,9 @@ import { PabResults } from "../../results/pab-results";
 })
 export class PabProfileGraphComponent extends ResultsComponent {
 
+    @ViewChild(ChartComponent)
+    private chartComponent;
+
     private _results: PabResults;
 
     /** size of the longest variable value */
@@ -79,6 +84,22 @@ export class PabProfileGraphComponent extends ResultsComponent {
                 }
             }]
         };
+        // enable zoom and pan (using "chartjs-plugin-zoom" package)
+        this.graph_options["plugins"] = {
+            zoom: {
+                pan: {
+                    enabled: true,
+                    mode: "xy",
+                },
+                zoom: {
+                    enabled: true,
+                    drag: false, // conflicts with pan; set to false to enable mouse wheel zoom
+                    mode: "xy",
+                    // percentage of zoom on a wheel event
+                    speed: 0.1,
+                }
+            }
+        };
     }
 
     public set results(r: PabResults) {
@@ -170,6 +191,10 @@ export class PabProfileGraphComponent extends ResultsComponent {
         }); // defaults to image/png
     }
 
+    public resetZoom() {
+        this.chartComponent.chart.resetZoom();
+    }
+
     private getXSeries(): string[] {
         const data: string[] = [];
         const nDigits = this.appSetupService.displayDigits;

src/main.ts

@@ -5,6 +5,8 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { AppModule } from "./app/app.module";
 import { environment } from "./environments/environment";
 
+import "chartjs-plugin-zoom";
+
 if (environment.production) {
   enableProdMode();
 }