From 5c467ff590bc0620e4dfbf22327b850813df50f2 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Thu, 11 Jul 2019 10:32:13 +0200
Subject: [PATCH] Add zoom feature on PAB profile graph
---
angular.json | 4 ++-
package-lock.json | 8 ++++++
package.json | 1 +
.../pab-profile-graph.component.html | 5 +++-
.../pab-profile-graph.component.ts | 27 ++++++++++++++++++-
src/main.ts | 2 ++
6 files changed, 44 insertions(+), 3 deletions(-)
diff --git a/angular.json b/angular.json
index daa02deb9..5482a7544 100644
--- a/angular.json
+++ b/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": {
diff --git a/package-lock.json b/package-lock.json
index 72d12202a..23fc51a46 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index e39372066..d3fda3c44 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.html b/src/app/components/pab-profile-graph/pab-profile-graph.component.html
index bfbe7c551..954f059c1 100644
--- a/src/app/components/pab-profile-graph/pab-profile-graph.component.html
+++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.html
@@ -1,6 +1,9 @@
<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
diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.ts b/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
index 9c61cf609..526b2d9fd 100644
--- a/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
+++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
@@ -1,4 +1,6 @@
-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;
diff --git a/src/main.ts b/src/main.ts
index 9b8fff7b9..018a6f867 100644
--- a/src/main.ts
+++ b/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();
}
--
GitLab