- remous : ajout des légendes au résultat graphique

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

@@ -82,11 +82,13 @@ export class RemousResultsComponent {
             duration: 0
         },
         legend: {
-            display: false
+            display: true,
+            position: "right"
         },
         title: {
-            display: false,
-            text: ""
+            display: true,
+            text: "Abscisse (m)",
+            position: "bottom"
         }
     };
 
@@ -115,12 +117,12 @@ export class RemousResultsComponent {
         return y + d;
     }
 
-    private drawLine(y0: number, ymax: number, color: string, fillColor: string = undefined) {
+    private drawLine(y0: number, ymax: number, color: string, lbl: string, fillColor: string = undefined) {
         let ys = [];
         ys.push({ x: 0, y: this.mapY(0, y0) });
         ys.push({ x: this._longBief, y: this.mapY(this._longBief, ymax) });
         // return { data: yFond, fill: true, tension: 0, borderColor: "#753F00", backgroundColor: "#753F00", pointRadius: 0 };
-        return { data: ys, fill: fillColor != undefined, tension: 0, borderColor: color, backgroundColor: fillColor, pointRadius: 0 };
+        return { label: lbl, data: ys, fill: fillColor != undefined, tension: 0, borderColor: color, backgroundColor: fillColor, pointRadius: 0 };
     }
 
     public generateGraph() {
@@ -135,16 +137,16 @@ export class RemousResultsComponent {
             labs.push(+r["abs"]);
 
         // ligne de fond
-        ds.push(this.drawLine(0, 0, "#753F00", "#753F00"));
+        ds.push(this.drawLine(0, 0, "#753F00", "Fond", "#753F00"));
 
         // ligne de berge
-        ds.push(this.drawLine(this._hautBerge, this._hautBerge, "#C58F50"));
+        ds.push(this.drawLine(this._hautBerge, this._hautBerge, "#C58F50", "Berge"));
 
         // hauteur normale
-        ds.push(this.drawLine(this._hautNormale, this._hautNormale, "#A4C537"));
+        ds.push(this.drawLine(this._hautNormale, this._hautNormale, "#A4C537", "Tirant d'eau normal"));
 
         // hauteur critique
-        ds.push(this.drawLine(this._hautCritique, this._hautCritique, "#FF0000"));
+        ds.push(this.drawLine(this._hautCritique, this._hautCritique, "#FF0000", "Tirant d'eau critique"));
 
         // lignes d'eau torrentielle et fluviale
 
@@ -159,8 +161,8 @@ export class RemousResultsComponent {
             if (yTor != undefined && yTor != "")
                 dataTor.push(this.mapY(x, +yTor));
         }
-        ds.push({ data: dataTor, tension: 0, borderColor: "#77A3CD", pointRadius: 5, backgroundColor: "#D1D0D4" });
-        ds.push({ data: dataFlu, tension: 0, borderColor: "#0093BD", pointRadius: 5, backgroundColor: "#D1D0D4" });
+        ds.push({ label: "Ligne d'eau torrentielle", data: dataTor, tension: 0, borderColor: "#77A3CD", pointRadius: 5, backgroundColor: "#D1D0D4" });
+        ds.push({ label: "Ligne d'eau fluviale", data: dataFlu, tension: 0, borderColor: "#0093BD", pointRadius: 5, backgroundColor: "#D1D0D4" });
 
         this.graph_data = {
             labels: labs,