Merge branch '108-mode-de-parametre-varier-afficher-la-courbe-d-evolution' into 'master'

Resolve "Mode de paramètre "varier": afficher la courbe d'évolution"

Closes #108

See merge request !38

src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html

+<button mat-icon-button id="show-values-chart" (click)="toggleViewChart()">
+    <mat-icon *ngIf="! viewChart">show_chart</mat-icon>
+    <mat-icon *ngIf="viewChart">mode_edit</mat-icon>
+</button>
+
 <h1 mat-dialog-title [innerHTML]="uitextEditParamVariableValues"></h1>
 
-  <div mat-dialog-content>
+  <div mat-dialog-content *ngIf="! viewChart">
 
     <mat-form-field>
       <mat-select [placeholder]="uiTextModeSelection" [(value)]="selectedValueMode" (selectionChange)="onValueModeChange($event)"
@@ -102,13 +107,18 @@
 
   </div>
 
+  <div mat-dialog-content *ngIf="viewChart">
+        <chart id="values-chart" type="scatter" [data]="chartData" [options]="chartOptions">
+        </chart>
+  </div>
+
   <div mat-dialog-actions>
-    <div *ngIf="isMinMax">
+    <div *ngIf="isMinMax || viewChart">
         <button mat-raised-button [mat-dialog-close]="true" cdkFocusInitial>
             {{ uitextClose }}
         </button>
     </div>
-    <div *ngIf="isListe">
+    <div *ngIf="isListe && ! viewChart">
         <button mat-raised-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>
             {{ uitextCancel }}
         </button>

src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.scss

@@ -12,6 +12,11 @@ mat-form-field {
     }
 }
 
+#show-values-chart {
+    float: right;
+    margin-top: -5px;
+}
+
 .min-max-step-container {
     margin-top: -8px;
 }

src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts

@@ -5,6 +5,7 @@ import { I18nService } from "../../services/internationalisation/internationalis
 import { NgParameter } from "../../formulaire/ngparam";
 import { ParamValueMode } from "jalhyd";
 import { sprintf } from "sprintf-js";
+import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
 
 @Component({
     selector: "dialog-edit-param-values",
@@ -27,9 +28,16 @@ export class DialogEditParamValuesComponent implements OnInit {
 
     public valuesListForm: FormGroup;
 
+    /** when true, shows the values chart instead of the edit form */
+    public viewChart = false;
+    // chart config
+    public chartData = {};
+    public chartOptions;
+
     constructor(
         public dialogRef: MatDialogRef<DialogEditParamValuesComponent>,
         private intlService: I18nService,
+        private appSetupService: ApplicationSetupService,
         private fb: FormBuilder,
         @Inject(MAT_DIALOG_DATA) public data: any
     ) {
@@ -68,6 +76,42 @@ export class DialogEditParamValuesComponent implements OnInit {
             }
         ];
         this.decimalSeparator = this.decimalSeparators[0].value;
+
+        // chart configuration
+        const nDigits = this.appSetupService.displayDigits;
+        this.chartOptions = {
+            responsive: true,
+            maintainAspectRatio: true,
+            animation: {
+                duration: 0
+            },
+            legend: {
+                display: false
+            },
+            scales: {
+                xAxes: [{
+                    type: "linear",
+                    position: "bottom",
+                    ticks: {
+                        precision: nDigits
+                    }
+                }],
+                yAxes: [{
+                    type: "linear",
+                    position: "left",
+                    ticks: {
+                        precision: nDigits
+                    }
+                }]
+            },
+            tooltips: {
+                callbacks: {
+                    label: function(tooltipItem) {
+                        return  Number(tooltipItem.yLabel).toFixed(nDigits);
+                    }
+                }
+            }
+        };
     }
 
     /**
@@ -131,15 +175,36 @@ export class DialogEditParamValuesComponent implements OnInit {
         this.param.valueList = vals;
     }
 
-    public onValidate() {
+    public toggleViewChart() {
+        // validate list values before switching views ?
+        if (! this.viewChart && this.param.valueMode === ParamValueMode.LISTE) {
+            if (this.onValidate(false)) {
+                // toggle
+                this.viewChart = ! this.viewChart;
+            }
+        } else {
+            // toggle
+            this.viewChart = ! this.viewChart;
+        }
+        // refresh chart when displaying it only
+        if (this.viewChart) {
+            this.drawChart();
+        }
+    }
+
+    public onValidate(close = true) {
         const status = this.validateValuesListString(this.valuesListForm.controls.valuesList.value);
 
         if (status.ok) {
             this.valuesListForm.controls.valuesList.setErrors(null);
             this.valuesList = this.valuesListForm.controls.valuesList.value;
-            this.dialogRef.close();
+            if (close) {
+                this.dialogRef.close();
+            }
+            return true;
         } else {
             this.valuesListForm.controls.valuesList.setErrors({ "model": status.message });
+            return false;
         }
     }
 
@@ -240,6 +305,30 @@ export class DialogEditParamValuesComponent implements OnInit {
         }
     }
 
+    /**
+     * (re)Génère le graphique d'évolution des valeurs
+     */
+    private drawChart() {
+        const data = [];
+        let i = 0;
+        for (const v of this.param.valuesIterator) {
+            data.push({
+                x: i,
+                y: v
+            });
+            i++;
+        }
+        this.chartData = {
+            datasets: [{
+                label: "",
+                data: data,
+                borderColor: "#808080", // couleur de la ligne
+                backgroundColor: "rgba(0,0,0,0)",  // couleur de remplissage sous la courbe : transparent
+                showLine: "true"
+            }]
+        };
+    }
+
     public get uiTextModeSelection() {
         return this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_MODE");
     }