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 9cc7da3ae52e07a8790230efcfb1e03d6483dfcf..de364b5e3a6c04d9ec1772460f3d74580ced18cb 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 @@ -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) { diff --git a/src/app/components/results-graph/results-graph.component.html b/src/app/components/results-graph/results-graph.component.html index c30eebd7b950b4b1df94e68a27a8b31ed4c7ae61..1c15bdcc25844e4fcb2681d0ed6559a9757eb38d 100644 --- a/src/app/components/results-graph/results-graph.component.html +++ b/src/app/components/results-graph/results-graph.component.html @@ -1,13 +1,16 @@ <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> diff --git a/src/app/components/results-graph/results-graph.component.scss b/src/app/components/results-graph/results-graph.component.scss index c50b430fde0e544b56c71b98f899ce694674414b..4eab50fee6ca30b52c952b3aed76d350a987e95f 100644 --- a/src/app/components/results-graph/results-graph.component.scss +++ b/src/app/components/results-graph/results-graph.component.scss @@ -19,6 +19,12 @@ transform: scale(1.2); } } + + &:disabled { + mat-icon { + color: #bfbfbf; + } + } } } diff --git a/src/app/components/results-graph/results-graph.component.ts b/src/app/components/results-graph/results-graph.component.ts index 7e775c89a5dd14cd0f761a21cb7ea25b6326f6d5..abda1f85a7f479a5189ca28114d2c81b37d21c02 100644 --- a/src/app/components/results-graph/results-graph.component.ts +++ b/src/app/components/results-graph/results-graph.component.ts @@ -1,4 +1,6 @@ -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) {