diff --git a/src/app/components/remous-results/remous-results.component.ts b/src/app/components/remous-results/remous-results.component.ts index 1a372893b6834f4b3eff368dc4ebe02352809cdf..c3dda2a70038d12b49e67b9654fd61de4db5b044 100644 --- a/src/app/components/remous-results/remous-results.component.ts +++ b/src/app/components/remous-results/remous-results.component.ts @@ -157,6 +157,64 @@ export class RemousResultsComponent { return { label: lbl, data: ys, fill: fillColor != undefined, tension: 0, borderColor: color, backgroundColor: fillColor, pointRadius: 0 }; } + private searchObjectInArray(array: any[], key: string, value: any) { + for (let o of array) + if (o[key] == value) + return o; + + return undefined; + } + + private connectRessaut(tX: string[], dataFlu: any[], dataTor: any[]) { + tX.sort((a, b) => { + if (+a > +b) + return 1; + if (+a < +b) + return -1; + return 0; + }); + + let minXflu; // abscisse de début de la courbe fluviale + for (let x of tX) { + let r = this.searchObjectInArray(this._results, "abs", x); + if (r["flu"] != "") { + minXflu = x; + break; + } + } + + if (minXflu != undefined && minXflu != tX[0]) { + // la courbe fluviale ne démarre pas au début, on ajoute un point de raccord avec la ligne torrentielle + + let i = tX.indexOf(minXflu); + let xflu = tX[i - 1]; + let tor = this.searchObjectInArray(dataTor, "x", xflu); + let yflu = tor["y"]; + dataFlu.unshift({ "x": +xflu, "y": yflu }); // ill faut insérer le point au bon endroit car ChartJS ignore le champ "x"... + } + + let maxXtor; // abscisse de fin de la courbe torrentielle + tX.reverse(); + for (let x of tX) { + let r = this.searchObjectInArray(this._results, "abs", x); + if (r["tor"] != "") { + maxXtor = x; + break; + } + } + tX.reverse(); + + if (maxXtor != undefined && maxXtor != tX[tX.length - 1]) { + // la courbe torrentielle ne finit pas à la fin des abscisses, on ajoute un point de raccord avec la ligne fluviale + + let i = tX.indexOf(maxXtor); + let xflu = tX[i + 1]; + let flu = this.searchObjectInArray(dataFlu, "x", xflu); + let yflu = flu["y"]; + dataTor.push({ "x": +xflu, "y": yflu }); + } + } + public generateGraph() { // http://www.chartjs.org/docs/latest/charts/line.html @@ -190,11 +248,14 @@ export class RemousResultsComponent { let dataFlu = []; let dataTor = []; let dataExtra = []; + let tX = []; for (let r of this._results) { let x: number = +r["abs"]; let yFlu: string = r["flu"]; let yTor: string = r["tor"]; + tX.push(r["abs"]); + let yExtra: string = r["extraFlu"]; if (yExtra == "") yExtra = r["extraTor"]; @@ -210,6 +271,13 @@ export class RemousResultsComponent { ds2.push({ label: this._extraParamLabel, data: dataExtra, tension: 0, borderColor: "#0093BD", pointRadius: 5 }); else ds1.push({ label: this._extraParamLabel, data: dataExtra, tension: 0, borderColor: "#C17AF0", pointRadius: 5 }); + + // raccordement ligne fluviale -> torrentielle pour dessiner le ressaut + + this.connectRessaut(tX, dataFlu, dataTor); + + // ajout des données au graphique + ds1.push({ label: "Ligne d'eau torrentielle", data: dataTor, tension: 0, borderColor: "#77A3CD", pointRadius: 5, backgroundColor: "#D1D0D4" }); ds1.push({ label: "Ligne d'eau fluviale", data: dataFlu, tension: 0, borderColor: "#0093BD", pointRadius: 5, backgroundColor: "#D1D0D4" });