Commit 490ef638 authored by Mathias Chouet's avatar Mathias Chouet :spaghetti:
Browse files

Add zoom feature on PAB profile graph

Showing with 44 additions and 3 deletions
+44 -3
......@@ -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": {
......
......@@ -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",
......
<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
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;
......
......@@ -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();
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment