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"); }