diff --git a/jalhyd_branch b/jalhyd_branch
index 5da74c213bbd159c5b4201e919e54b83e0e994be..1f7391f92b6a3792204e07e99f71f643cc35e7e1 100644
--- a/jalhyd_branch
+++ b/jalhyd_branch
@@ -1 +1 @@
-64-implementer-la-de-serialisation-au-niveau-du-nub
+master
diff --git a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
index 2720065f10a449408185a2f1e3d125a2495e1347..c4ace21ec7c7b7c93417e7d709af024c2a9db285 100644
--- a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
+++ b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html
@@ -1,6 +1,11 @@
+<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>
diff --git a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.scss b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.scss
index dd6b08f1e11f15ebd95e42e01156d0697f38fcfd..111eef7498f0d945ad5b49c5ca290bdfb9f6c426 100644
--- a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.scss
+++ b/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;
}
diff --git a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts b/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts
index 8d8f6e687e065910604841acb3a21415c6ffd503..0d1ad08b82e61020358e4a1cce7c4fed4f917c66 100644
--- a/src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts
+++ b/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");
}