Fix #109 choisir l'abscisse et l'ordonnée des graphiques de résultats variés

src/app/components/results-graph/graph-type.component.scss

 :host {
     display: block;
     margin-top: 5px;
-    text-align: center;
+}
+
+mat-form-field {
+    width: 100%;
 }
 
 mat-select {

src/app/components/results-graph/results-graph.component.html

@@ -18,3 +18,23 @@
 </div>
 
 <graph-type></graph-type>
+
+<div class="select-x-y-axis" fxLayout="row wrap" fxLayoutAlign="space-between start">
+    <mat-form-field fxFlex.gt-xs="1 0 auto" fxFlex.lt-sm="1 0 100%">
+        <mat-select id="selectX" [placeholder]="uitextSelectX" [(value)]="chartX">
+            <mat-option *ngFor="let x of availableChartAxis" [value]="x">
+                {{ getChartAxisLabel(x) }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <div fxHide.xs fxFlex.gt-xs="0 0 16px"></div>
+
+    <mat-form-field fxFlex.gt-xs="1 0 auto" fxFlex.lt-sm="1 0 100%">
+        <mat-select id="selectY" [placeholder]="uitextSelectY" [(value)]="chartY">
+            <mat-option *ngFor="let y of availableChartAxis" [value]="y">
+                {{ getChartAxisLabel(y) }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+</div>

src/app/components/results-graph/results-graph.component.scss

@@ -21,3 +21,14 @@
         }
     }
 }
+
+mat-select {
+
+    ::ng-deep .mat-select-value {
+        > span {
+            > span {
+                line-height: 1.3em;
+            }
+        }
+    }
+}

src/app/components/results-graph/results-graph.component.ts

@@ -5,6 +5,7 @@ import { Observer } from "jalhyd";
 import { VarResults, GraphType } from "../../results/var-results";
 import { GraphTypeSelectComponent } from "./graph-type.component";
 import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
 
 @Component({
     selector: "results-graph",
@@ -45,7 +46,8 @@ export class ResultsGraphComponent implements AfterContentInit, Observer {
     }
 
     public constructor(
-        private appSetup: ApplicationSetupService
+        private appSetup: ApplicationSetupService,
+        private intlService: I18nService
     ) {
         // limit display precision according to app preferences
         const nDigits = this.appSetup.displayDigits;
@@ -58,7 +60,67 @@ export class ResultsGraphComponent implements AfterContentInit, Observer {
         }
     }
 
+    public get availableChartAxis() {
+        if (this._results) {
+            return this._results.getAvailableChartAxis();
+        }
+    }
+
+    public get chartX() {
+        if (this._results) {
+            return this._results.chartX;
+        }
+    }
+
+    public set chartX(X) {
+        if (X !== this.chartX) {
+            this._results.chartX = X;
+            // refresh chart
+            this.updateView();
+        }
+    }
+
+    public get chartY() {
+        if (this._results) {
+            return this._results.chartY;
+        }
+    }
+
+    public set chartY(Y) {
+        if (Y !== this.chartY) {
+            this._results.chartY = Y;
+            // refresh chart
+            this.updateView();
+        }
+    }
+
+    /**
+     * Returns a human readable description of any param / result symbol
+     */
+    public getChartAxisLabel(symbol: string) {
+        // 1. calculated param ?
+        if (this._results.calculatedParameter.symbol === symbol) {
+            return this._results.calculatedParameterHeader;
+        } else
+        // 2. variated param ?
+        if (this._results.variatedParameter.symbol === symbol) {
+            return this._results.variableParamHeader;
+        } else {
+            // 3. Result element ?
+            return this.intlService.getExtraResLabel(symbol);
+        }
+    }
+
+    public get uitextSelectX() {
+        return this.intlService.localizeText("INFO_PARAMFIELD_GRAPH_SELECT_X_AXIS");
+    }
+
+    public get uitextSelectY() {
+        return this.intlService.localizeText("INFO_PARAMFIELD_GRAPH_SELECT_Y_AXIS");
+    }
+
     public updateView() {
+        // (re)generate chart
         switch (this._graphTypeComponent.selectedValue) {
             case GraphType.Histogram:
                 this.graph_type = "bar";
@@ -87,15 +149,16 @@ export class ResultsGraphComponent implements AfterContentInit, Observer {
     private generateLineGraph() {
         const labs = [];
         const dat = [];
-        let i = 0;
-        for (const x of this._results.variatedParameter.valuesIterator) {
-            labs.push(x);
-            const y = this._results.yValues[i];
-            dat.push(y);
-            i++;
+        const xSeries = this._results.getValuesSeries(this.chartX);
+        const ySeries = this._results.getValuesSeries(this.chartY);
+        // both series are supposed to be the same length
+        for (let i = 0; i < xSeries.length; i++) {
+            labs.push(xSeries[i]);
+            dat.push(ySeries[i]);
         }
 
-        this.graph_options.title.text = this._results.graphTitle;
+        // @see bug #137
+        this.graph_options.title.text = this.chartY + " = f ( " + this.chartX + " )";
 
         this.graph_data = {
             labels: labs,
@@ -112,15 +175,17 @@ export class ResultsGraphComponent implements AfterContentInit, Observer {
     private generateBarGraph() {
         const labs = [];
         const dat = [];
-        let i = 0;
-        for (const x of this._results.variatedParameter.valuesIterator) {
-            labs.push(x);
-            const y = this._results.yValues[i];
-            dat.push(y);
-            i++;
+        const xSeries = this._results.getValuesSeries(this.chartX);
+        const ySeries = this._results.getValuesSeries(this.chartY);
+        // both series are supposed to be the same length
+        for (let i = 0; i < xSeries.length; i++) {
+            labs.push(xSeries[i]);
+            dat.push(ySeries[i]);
         }
 
-        this.graph_options.title.text = this._results.graphTitle;
+        // @see bug #137
+        this.graph_options.title.text = this.chartY + " = f ( " + this.chartX + " )";
+
         const nDigits = this.appSetup.displayDigits;
         this.graph_options["scales"] = {
             xAxes: [{
@@ -157,17 +222,19 @@ export class ResultsGraphComponent implements AfterContentInit, Observer {
      */
     private generateScatterGraph() {
         const dat = [];
-        let i = 0;
-        for (const x of this._results.variatedParameter.valuesIterator) {
-            const y = this._results.yValues[i];
+        const xSeries = this._results.getValuesSeries(this.chartX);
+        const ySeries = this._results.getValuesSeries(this.chartY);
+        // both series are supposed to be the same length
+        for (let i = 0; i < xSeries.length; i++) {
             dat.push({
-                x: x,
-                y: y
+                x: xSeries[i],
+                y: ySeries[i]
             });
-            i++;
         }
 
-        this.graph_options.title.text = this._results.graphTitle;
+        // @see bug #137
+        this.graph_options.title.text = this.chartY + " = f ( " + this.chartX + " )";
+
         const nDigits = this.appSetup.displayDigits;
         this.graph_options["scales"] = {
             xAxes: [{

src/app/formulaire/definition/form-compute-fixedvar.ts

@@ -61,7 +61,6 @@ export class FormComputeFixedVar extends FormCompute {
             this.formResult.varResults.calculatedParameter = computedParam;
 
             this.formResult.varResults.result = res;
-            this.formResult.graphTitle = computedParam.symbol + " = f( " + varParam.symbol + " )";
             this.formResult.varResults.update(false);
         }
     }

src/app/formulaire/definition/form-compute-section-parametree.ts

@@ -50,7 +50,6 @@ export class FormComputeSectionParametree extends FormCompute {
         this._varResults.calculatedParameter = computedParam;
 
         this._varResults.result = this.runNubCalc(sectNub, computedParam);
-        this._varResults.graphTitle = computedParamInfo.symbol + " = f( " + varParam.symbol + " )";
         this._varResults.update(false);
     }
 

src/app/formulaire/definition/form-result-fixedvar.ts

@@ -54,10 +54,6 @@ export class FormResultFixedVar extends FormResult {
         this._varResults.graphType = t;
     }
 
-    public set graphTitle(t: string) {
-        this._varResults.graphTitle = t;
-    }
-
     public get hasResults(): boolean {
         return this._fixedResults.hasResults || this._varResults.hasResults;
     }

src/app/results/var-results.ts

@@ -47,14 +47,18 @@ export class VarResults extends CalculatedParamResults {
     private _extraResultHeaders: string[];
 
     /**
-     * titre du graphe des résultats variés
+     * type de graphe
      */
-    private _graphTitle: string;
+    public graphType: GraphType = GraphType.Scatter;
 
     /**
-     * type de graphe
+     * variated parameter or result displayed as chart's X-axis
      */
-    public graphType: GraphType = GraphType.Scatter;
+    public chartX: string;
+    /**
+     * variated parameter or result displayed as chart's Y-axis
+     */
+    public chartY: string;
 
     /**
      * tableau des ordonnées du graphe des résultats variés
@@ -72,7 +76,6 @@ export class VarResults extends CalculatedParamResults {
         this._extraResultHeaders = [];
         this._extraResultKeys = [];
         this._yValues = [];
-        this._graphTitle = undefined;
     }
 
     public get variatedParameter(): NgParameter {
@@ -96,14 +99,6 @@ export class VarResults extends CalculatedParamResults {
         return this.result.resultElements;
     }
 
-    public get graphTitle() {
-        return this._graphTitle;
-    }
-
-    public set graphTitle(t: string) {
-        this._graphTitle = t;
-    }
-
     public get extraResultHeaders() {
         return this._extraResultHeaders;
     }
@@ -116,11 +111,64 @@ export class VarResults extends CalculatedParamResults {
         this._extraResultKeys = k;
     }
 
+    /**
+     * Returns the series of values for the required variated parameter / result element
+     * @param symbol parameter / result symbol (ex: "Q")
+     */
+    public getValuesSeries(symbol: string) {
+        // console.log("GVS for symbol", symbol);
+        const series = [];
+        // 1. calculated param ?
+        if (this._calculatedParam.symbol === symbol) {
+            if (this.result) {
+                for (const r of this.result.resultElements) {
+                    series.push(r.vCalc);
+                }
+            }
+        } else
+        // 2. variated param ?
+        if (this.variatedParameter.symbol === symbol) {
+            for (const v of this.variatedParameter.valuesIterator) {
+                series.push(v);
+            }
+        } else {
+            // 3. Result element ?
+            for (const r of this.result.resultElements) { // re:ResultElement
+                for (const k in r.extraResults) {
+                    if (k === symbol) {
+                        series.push(r.extraResults[k]);
+                    }
+                }
+            }
+        }
+
+        return series;
+    }
+
+    /**
+     * Returns a list of plottable parameters / result elements, that can be defined
+     * as X or Y chart axis
+     * @param except exclude this symbol from the list
+     */
+    public getAvailableChartAxis() {
+        const res = [];
+        res.push(this.calculatedParameter.symbol);
+        res.push(this.variatedParameter.symbol);
+        for (const erk of this.extraResultKeys) {
+            res.push(erk);
+        }
+        return res;
+    }
+
     public update(displaySymbol: boolean) {
         if (this._variableParamHeader === undefined) {
             this._variableParamHeader = CalculatorResults.paramLabel(this.variatedParameter, displaySymbol);
         }
 
+        // set axis selectors values the first time
+        this.chartX = this.chartX || this.variatedParameter.symbol;
+        this.chartY = this.chartY || this.calculatedParameter.symbol;
+
         // valeurs du paramètre à calculer
         for (const r of this.result.resultElements) {
             this._yValues.push(r.vCalc);
@@ -144,5 +192,15 @@ export class VarResults extends CalculatedParamResults {
         for (const k of this._extraResultKeys) {
             this._extraResultHeaders.push(intlService.getExtraResLabel(k));
         }
+
+        // when variable parameter changes, ensure the X / Y current values are still availble
+        // (might be the previous variated parameter, that is not accessible anymore)
+        const aca = this.getAvailableChartAxis();
+        if (! aca.includes(this.chartX)) {
+            this.chartX = this.variatedParameter.symbol;
+        }
+        if (! aca.includes(this.chartY)) {
+            this.chartY = this.variatedParameter.symbol;
+        }
     }
 }

src/locale/messages.en.json

@@ -154,6 +154,8 @@
     "INFO_PARALLELSTRUCTURE_TITRE_COURT": "// structures",
     "INFO_PARAMFIELD_GRAPH_TYPE": "Graph type",
     "INFO_PARAMFIELD_GRAPH_TYPE_HISTOGRAM": "Histogram",
+    "INFO_PARAMFIELD_GRAPH_SELECT_X_AXIS": "Variable for X axis",
+    "INFO_PARAMFIELD_GRAPH_SELECT_Y_AXIS": "Variable for Y axis",
     "INFO_PARAMFIELD_IN_CALCULATION": "In calculation",
     "INFO_PARAMFIELD_IN_CALCULATION_INITIAL_VALUE": "initial value",
     "INFO_PARAMFIELD_PARAMCALCULER": "Calculate",

src/locale/messages.fr.json

@@ -154,6 +154,8 @@
     "INFO_PARALLELSTRUCTURE_TITRE_COURT": "Ouvrages",
     "INFO_PARAMFIELD_GRAPH_TYPE": "Type de graphe",
     "INFO_PARAMFIELD_GRAPH_TYPE_HISTOGRAM": "Histogramme",
+    "INFO_PARAMFIELD_GRAPH_SELECT_X_AXIS": "Variable en abscisse",
+    "INFO_PARAMFIELD_GRAPH_SELECT_Y_AXIS": "Variable en ordonnée",
     "INFO_PARAMFIELD_IN_CALCULATION": "En calcul",
     "INFO_PARAMFIELD_IN_CALCULATION_INITIAL_VALUE": "valeur initiale",
     "INFO_PARAMFIELD_PARAMCALCULER": "calculer",