From bf8654f75e896d9d56a50aa3aeada5458a22cdc7 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Mon, 20 Jul 2020 11:30:44 +0200
Subject: [PATCH] Simplified results charts components
---
.../fixedvar-results.component.html | 2 +-
.../fixedvar-results.component.ts | 2 +-
.../jet-results/jet-results.component.html | 4 +-
.../jet-trajectory-chart.component.ts | 30 +++++++-------
.../macrorugo-compound-results.component.html | 8 ++--
.../macrorugo-compound-results.component.ts | 9 ++---
.../pab-profile-chart.component.ts | 12 +++---
.../pab-results/pab-results.component.html | 3 +-
.../results-chart/results-chart.component.ts | 40 ++++++++++---------
.../formulaire/definition/form-pb-cloison.ts | 2 -
src/app/results/param-calc-results.ts | 9 -----
src/app/results/plottable-data.ts | 5 +++
.../plottable-macrorugo-compound-results.ts | 4 ++
src/app/results/plottable-pab-results.ts | 4 ++
src/app/results/var-results.ts | 29 +++++++++-----
15 files changed, 85 insertions(+), 78 deletions(-)
diff --git a/src/app/components/fixedvar-results/fixedvar-results.component.html b/src/app/components/fixedvar-results/fixedvar-results.component.html
index 6c2d779be..271a25508 100644
--- a/src/app/components/fixedvar-results/fixedvar-results.component.html
+++ b/src/app/components/fixedvar-results/fixedvar-results.component.html
@@ -2,7 +2,7 @@
<!-- journal -->
<log [log]=mergedGlobalLogs></log>
- <results-chart [hidden]="! showVarResultsChart" [results]=varResults></results-chart>
+ <results-chart [hidden]="! showVarResultsChart" [results]=varResults [resultData]=varResults?.result></results-chart>
<div>
<!-- table des résultats fixés -->
diff --git a/src/app/components/fixedvar-results/fixedvar-results.component.ts b/src/app/components/fixedvar-results/fixedvar-results.component.ts
index b80300bad..d93bcc55c 100644
--- a/src/app/components/fixedvar-results/fixedvar-results.component.ts
+++ b/src/app/components/fixedvar-results/fixedvar-results.component.ts
@@ -74,7 +74,7 @@ export class FixedVarResultsComponent extends ResultsComponentDirective {
* affichage du graphique des résultats variés
*/
public get showVarResultsChart(): boolean {
- return this._varResults && this._varResults.hasPlottableResults;
+ return this._varResults && this._varResults.hasPlottableResults();
}
public getFixedResultClass(i: number) {
diff --git a/src/app/components/jet-results/jet-results.component.html b/src/app/components/jet-results/jet-results.component.html
index 1acaf47ff..f3680821b 100644
--- a/src/app/components/jet-results/jet-results.component.html
+++ b/src/app/components/jet-results/jet-results.component.html
@@ -2,9 +2,9 @@
<!-- journal -->
<log></log>
- <results-chart *ngIf="showVarResults" [hidden]="! showVarResultsChart" [results]=varResults></results-chart>
+ <results-chart *ngIf="showVarResults" [hidden]="! showVarResultsChart" [results]=varResults [resultData]=varResults?.result></results-chart>
- <jet-trajectory-chart [hidden]="! hasValidResults" [results]=trajectoryResults></jet-trajectory-chart>
+ <jet-trajectory-chart [hidden]="! hasValidResults" [results]=trajectoryResults?.result></jet-trajectory-chart>
<div>
<!-- table des résultats fixés -->
diff --git a/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.ts b/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.ts
index f4ee238a0..2f92d72ac 100644
--- a/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.ts
+++ b/src/app/components/jet-trajectory-chart/jet-trajectory-chart.component.ts
@@ -1,16 +1,14 @@
-import { Component, ViewChild, ChangeDetectorRef, Input } from "@angular/core";
+import { Component, ViewChild, ChangeDetectorRef, Input, OnChanges } from "@angular/core";
import { ChartComponent } from "angular2-chartjs";
import { I18nService } from "../../services/internationalisation.service";
import { ResultsComponentDirective } from "../fixedvar-results/results.component";
import { IYSeries } from "../../results/y-series";
-import { FixedResults } from "../../results/fixed-results";
-import { VarResults } from "../../results/var-results";
import { fv } from "../../util";
import { AppComponent } from "../../app.component";
-import { Jet } from "jalhyd";
+import { Jet, Result } from "jalhyd";
@Component({
selector: "jet-trajectory-chart",
@@ -19,12 +17,12 @@ import { Jet } from "jalhyd";
"./jet-trajectory-chart.component.scss"
]
})
-export class JetTrajectoryChartComponent extends ResultsComponentDirective {
+export class JetTrajectoryChartComponent extends ResultsComponentDirective implements OnChanges {
@ViewChild(ChartComponent)
private chartComponent;
- private _results: FixedResults | VarResults;
+ private _results: Result;
private _zoomWasChanged = false;
@@ -133,13 +131,17 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective {
}
@Input()
- public set results(r: FixedResults | VarResults) {
+ public set results(r: Result) {
console.log("miam miam les bons résultats !", r);
this.forceRebuild(); // used for forcing redefinition of xAxes[0].ticks.min/max in generateScatterChart()
this._results = r;
+ }
- if (this._results && this._results.result) {
- const nub = this._results.result.sourceNub as Jet;
+ // redessine le graphique dès qu'une entrée change
+ public ngOnChanges() {
+ console.log("----> regenerate trajectory chart !!");
+ if (this._results) {
+ const nub = this._results.sourceNub as Jet;
const length = nub.variatingLength();
// extract variable values list for legend
if (nub.resultHasMultipleValues()) {
@@ -160,6 +162,7 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective {
}
}
}
+ this.generateScatterChart();
}
}
@@ -172,17 +175,12 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective {
return this._zoomWasChanged;
}
- public updateView() {
- console.log("----> regenerate trajectory chart !!");
- this.generateScatterChart();
- }
-
/**
* génère les données d'un graphique de type "scatter"
*/
private generateScatterChart() {
const ySeries = this.getYSeries();
- const nub = (this._results.result.sourceNub as Jet);
+ const nub = (this._results.sourceNub as Jet);
this.graph_data = {
datasets: []
@@ -263,7 +261,7 @@ export class JetTrajectoryChartComponent extends ResultsComponentDirective {
private getYSeries(): IYSeries[] {
const ret: IYSeries[] = [];
const palette = ResultsComponentDirective.distinctColors;
- const nub = (this._results.result.sourceNub as Jet);
+ const nub = (this._results.sourceNub as Jet);
const trajectories = nub.generateTrajectories();
for (let i = 0; i < trajectories.length; i++) {
diff --git a/src/app/components/macrorugo-compound-results/macrorugo-compound-results.component.html b/src/app/components/macrorugo-compound-results/macrorugo-compound-results.component.html
index ed2f042bc..9ce5cecca 100644
--- a/src/app/components/macrorugo-compound-results/macrorugo-compound-results.component.html
+++ b/src/app/components/macrorugo-compound-results/macrorugo-compound-results.component.html
@@ -21,11 +21,9 @@
<quicknav *ngIf="hasDisplayableResults" [items]="[ 'input', 'results', 'charts' ]" [currentItem]="'charts'"
[align]="'left'"></quicknav>
- <div id="macrorugo-compound-graphs-container" class="container" fxLayout="row wrap"
- fxLayoutAlign="space-around start">
- <!-- <pab-profile-chart *ngIf="hasDisplayableResults" fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
- </pab-profile-chart> -->
- <results-chart *ngIf="hasDisplayableResults" [results]=plottableResults fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
+ <div id="macrorugo-compound-graphs-container" class="container" fxLayout="row wrap" fxLayoutAlign="space-around start">
+ <results-chart *ngIf="hasDisplayableResults" [results]=plottableResults [resultData]=plottableResults?.result
+ fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
</results-chart>
</div>
diff --git a/src/app/components/macrorugo-compound-results/macrorugo-compound-results.component.ts b/src/app/components/macrorugo-compound-results/macrorugo-compound-results.component.ts
index cbe53d860..d59d27a3f 100644
--- a/src/app/components/macrorugo-compound-results/macrorugo-compound-results.component.ts
+++ b/src/app/components/macrorugo-compound-results/macrorugo-compound-results.component.ts
@@ -25,15 +25,11 @@ export class MacrorugoCompoundResultsComponent extends ResultsComponentDirective
/** résultats non mis en forme */
private _mrcResults: MacrorugoCompoundResults;
- /** résultats mis en forme pour le graphique de données (classique) */
- private _plottableResults: PlottableMacrorugoCompoundResults;
-
constructor(
private appSetupService: ApplicationSetupService,
private i18nService: I18nService,
) {
super();
- this._plottableResults = new PlottableMacrorugoCompoundResults();
}
public ngOnChanges() {
@@ -234,8 +230,9 @@ export class MacrorugoCompoundResultsComponent extends ResultsComponentDirective
/** builds a set of PlottableData from MacrorugoCompoundResults, to feed the chart */
protected get plottableResults(): PlottableData {
- this._plottableResults.setMrcResults(this.mrcResults);
- return this._plottableResults;
+ const plottableResults = new PlottableMacrorugoCompoundResults();
+ plottableResults.setMrcResults(this.mrcResults);
+ return plottableResults;
}
}
diff --git a/src/app/components/pab-profile-chart/pab-profile-chart.component.ts b/src/app/components/pab-profile-chart/pab-profile-chart.component.ts
index 6f24b8ab1..9e4e3ba5e 100644
--- a/src/app/components/pab-profile-chart/pab-profile-chart.component.ts
+++ b/src/app/components/pab-profile-chart/pab-profile-chart.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, ChangeDetectorRef, Input } from "@angular/core";
+import { Component, ViewChild, ChangeDetectorRef, Input, OnChanges } from "@angular/core";
import { ChartComponent } from "angular2-chartjs";
@@ -20,7 +20,7 @@ import { sprintf } from "sprintf-js";
"./pab-profile-chart.component.scss"
]
})
-export class PabProfileChartComponent extends ResultsComponentDirective {
+export class PabProfileChartComponent extends ResultsComponentDirective implements OnChanges {
@ViewChild(ChartComponent)
private chartComponent;
@@ -128,7 +128,10 @@ export class PabProfileChartComponent extends ResultsComponentDirective {
@Input()
public set results(r: PabResults) {
this._results = r;
+ }
+ // redessine le graphique dès qu'une entrée change
+ public ngOnChanges() {
// pre-extract variable parameters values
if (this._results) {
this.varValues = [];
@@ -146,6 +149,7 @@ export class PabProfileChartComponent extends ResultsComponentDirective {
this.varValues.push(vv);
}
}
+ this.generateScatterChart();
}
public zoomComplete() {
@@ -157,10 +161,6 @@ export class PabProfileChartComponent extends ResultsComponentDirective {
return this._zoomWasChanged;
}
- public updateView() {
- this.generateScatterChart();
- }
-
/**
* génère les données d'un graphique de type "scatter"
*/
diff --git a/src/app/components/pab-results/pab-results.component.html b/src/app/components/pab-results/pab-results.component.html
index 8dc980039..225c00f9e 100644
--- a/src/app/components/pab-results/pab-results.component.html
+++ b/src/app/components/pab-results/pab-results.component.html
@@ -20,7 +20,8 @@
<div id="pab-graphs-container" class="container" fxLayout="row wrap" fxLayoutAlign="space-around start">
<pab-profile-chart *ngIf="hasDisplayableResults" [results]=pabResults fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
</pab-profile-chart>
- <results-chart *ngIf="hasDisplayableResults" [results]=plottableResults fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
+ <results-chart *ngIf="hasDisplayableResults" [results]=plottableResults [resultData]=plottableResults?.result
+ fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
</results-chart>
</div>
diff --git a/src/app/components/results-chart/results-chart.component.ts b/src/app/components/results-chart/results-chart.component.ts
index 2995070a5..2dd547434 100644
--- a/src/app/components/results-chart/results-chart.component.ts
+++ b/src/app/components/results-chart/results-chart.component.ts
@@ -1,8 +1,8 @@
-import { Component, ViewChild, AfterContentInit, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from "@angular/core";
+import { Component, ViewChild, AfterContentInit, ChangeDetectorRef, Input, OnChanges } from "@angular/core";
import { ChartComponent } from "angular2-chartjs";
-import { Observer, ParamFamily } from "jalhyd";
+import { Observer, ParamFamily, Result } from "jalhyd";
import { ChartTypeSelectComponent } from "./chart-type.component";
import { I18nService } from "../../services/internationalisation.service";
@@ -21,7 +21,7 @@ import { AppComponent } from "../../app.component";
"./results-chart.component.scss"
]
})
-export class ResultsChartComponent extends ResultsComponentDirective implements AfterContentInit, Observer {
+export class ResultsChartComponent extends ResultsComponentDirective implements AfterContentInit, Observer, OnChanges {
@ViewChild(ChartComponent)
private chartComponent;
@@ -98,6 +98,11 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
}
}
+ @Input()
+ public set resultData(r: Result) {
+ // trick to trigger onChanges when results data changes
+ }
+
public get availableXAxis(): string[] {
if (this._results) {
return this._results.getAvailableXAxis();
@@ -124,9 +129,8 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
public set chartX(X) {
if (X !== this.chartX) {
this._results.chartX = X;
- this.forceRebuild();
// refresh chart
- this.updateView();
+ this.drawChart();
}
}
@@ -139,9 +143,8 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
public set chartY(Y) {
if (Y !== this.chartY) {
this._results.chartY = Y;
- this.forceRebuild();
// refresh chart
- this.updateView();
+ this.drawChart();
}
}
@@ -169,8 +172,15 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
return this._zoomWasChanged;
}
- public updateView() {
- console.log("----> regenerate chart !!");
+ public ngOnChanges() {
+ console.log("==> ResChart onChanges");
+ // redessiner le graphique chaque fois qu'une entrée change
+ this.drawChart();
+ }
+
+ public drawChart() {
+ console.log("----> regenerate chart !!", this._results);
+ if (this._results && this._results.hasPlottableResults()) {
switch (this._graphTypeComponent.selectedValue) {
case ChartType.Histogram:
this.graph_type = "bar";
@@ -188,6 +198,7 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
break;
}
}
+ }
public ngAfterContentInit() {
this._graphTypeComponent.addObserver(this);
@@ -212,15 +223,6 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
return l;
}
- /** forces Angular to rebuild the chart @see bug #137 */
- private forceRebuild() {
- this.displayChart = false;
- const that = this;
- setTimeout(() => { // trick
- that.displayChart = true;
- }, 10);
- }
-
/**
* génère les données d'un graphique de type "bar"
*/
@@ -482,6 +484,6 @@ export class ResultsChartComponent extends ResultsComponentDirective implements
this._results.chartType = data.value;
}
}
- this.updateView();
+ this.drawChart();
}
}
diff --git a/src/app/formulaire/definition/form-pb-cloison.ts b/src/app/formulaire/definition/form-pb-cloison.ts
index b1599380c..311f8f918 100644
--- a/src/app/formulaire/definition/form-pb-cloison.ts
+++ b/src/app/formulaire/definition/form-pb-cloison.ts
@@ -122,8 +122,6 @@ export class FormulairePbCloison extends FormulaireParallelStructure {
public reset() {
// also reset parent results (that will reset all its children results)
(this.parent as FormulairePrebarrage).reset();
- // prévenir les composants qu'il faut détecter les changements
- this.notifyReset();
}
// ensure all PBresults are reset
diff --git a/src/app/results/param-calc-results.ts b/src/app/results/param-calc-results.ts
index 6a2418848..eaca087d3 100644
--- a/src/app/results/param-calc-results.ts
+++ b/src/app/results/param-calc-results.ts
@@ -40,15 +40,6 @@ export abstract class CalculatedParamResults extends CalculatorResults {
return false;
}
return true;
- // return ! this.result.hasOnlyErrors;
- }
-
- /** return true if there is something to display on the variable results chart */
- public get hasPlottableResults(): boolean {
- if (this.result === undefined) {
- return false;
- }
- return ! this.result.hasOnlyErrors;
}
public get hasLog(): boolean {
diff --git a/src/app/results/plottable-data.ts b/src/app/results/plottable-data.ts
index 5df0f992f..a2bd574d2 100644
--- a/src/app/results/plottable-data.ts
+++ b/src/app/results/plottable-data.ts
@@ -47,4 +47,9 @@ export interface PlottableData {
* (used by tooltip functions)
*/
getVariatingParametersSymbols(): string[];
+
+ /**
+ * Returns true if results contain data
+ */
+ hasPlottableResults(): boolean;
}
diff --git a/src/app/results/plottable-macrorugo-compound-results.ts b/src/app/results/plottable-macrorugo-compound-results.ts
index f98b337af..ace4357c6 100644
--- a/src/app/results/plottable-macrorugo-compound-results.ts
+++ b/src/app/results/plottable-macrorugo-compound-results.ts
@@ -21,6 +21,10 @@ export class PlottableMacrorugoCompoundResults implements PlottableData {
this.chartY = this.chartY || "Q";
}
+ public hasPlottableResults(): boolean {
+ return this.mrcResults && this.mrcResults.hasResults;
+ }
+
/** reaffect mrcResults, for ex. when objet was contructed with empty mrcResults */
public setMrcResults(mrcResults: MacrorugoCompoundResults) {
this.mrcResults = mrcResults;
diff --git a/src/app/results/plottable-pab-results.ts b/src/app/results/plottable-pab-results.ts
index fc8235f32..ad75a959e 100644
--- a/src/app/results/plottable-pab-results.ts
+++ b/src/app/results/plottable-pab-results.ts
@@ -22,6 +22,10 @@ export class PlottablePabResults implements PlottableData {
this.chartY = this.chartY || "YMOY";
}
+ public hasPlottableResults(): boolean {
+ return this.pabResults && this.pabResults.hasResults;
+ }
+
/** reaffect pabResults, for ex. when objet was contructed with empty pabResults */
public setPabResults(pabResults: PabResults) {
this.pabResults = pabResults;
diff --git a/src/app/results/var-results.ts b/src/app/results/var-results.ts
index 312a66f1c..7b85bfb0d 100644
--- a/src/app/results/var-results.ts
+++ b/src/app/results/var-results.ts
@@ -106,19 +106,28 @@ export class VarResults extends CalculatedParamResults implements PlottableData
this.resetDefaultAxisIfNeeded();
}
- public getChartAxisLabel(symbol: string): string {
- // 1. calculated param ?
- if (this.calculatedParameter && this.calculatedParameter.symbol === symbol) {
- return this.calculatedParameterHeader;
+ public hasPlottableResults(): boolean {
+ if (this.result === undefined) {
+ return false;
}
- // 2. variated param ?
- for (let i = 0; i < this.variatedParameters.length; i++) {
- if (this._variatedParams[i].param.symbol === symbol) {
- return this.variableParamHeaders[i];
+ return ! this.result.hasOnlyErrors;
+ }
+
+ public getChartAxisLabel(symbol: string): string {
+ if (this.result) {
+ // 1. calculated param ?
+ if (this.calculatedParameter && this.calculatedParameter.symbol === symbol) {
+ return this.calculatedParameterHeader;
+ }
+ // 2. variated param ?
+ for (let i = 0; i < this.variatedParameters.length; i++) {
+ if (this._variatedParams[i].param.symbol === symbol) {
+ return this.variableParamHeaders[i];
+ }
}
+ // 3. Result element / child result
+ return this.expandLabelFromSymbol(new ParamDefinition(undefined, symbol, ParamDomainValue.ANY));
}
- // 3. Result element / child result
- return this.expandLabelFromSymbol(new ParamDefinition(undefined, symbol, ParamDomainValue.ANY));
}
/**
--
GitLab