Mercurial > gemma
changeset 2611:e8c97481438f
client: waterlevel diagram: added labels for reference water levels
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Wed, 13 Mar 2019 11:28:46 +0100 |
| parents | 5ce1b4b29869 |
| children | c7ce8b011bcb |
| files | client/src/components/gauge/Waterlevel.vue |
| diffstat | 1 files changed, 24 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Wed Mar 13 11:25:03 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Wed Mar 13 11:28:46 2019 +0100 @@ -28,6 +28,9 @@ stroke: green .mw-line stroke: grey + .ref-waterlevel-label + font-size: 11px + fill: #999 .brush .selection stroke: transparent @@ -177,6 +180,7 @@ // reference waterlevels let lastDate = this.waterlevels[this.waterlevels.length - 1].date; + // HDC mainChart .append("path") .datum([ @@ -185,6 +189,13 @@ ]) .attr("class", "hdc-line") .attr("d", refWaterlevelLine); + mainChart // label + .append("text") + .text("HDC") + .attr("class", "ref-waterlevel-label") + .attr("x", x(lastDate) - 20) + .attr("y", y(refWaterLevels.HDC) - 3); + // LDC mainChart .append("path") .datum([ @@ -193,6 +204,13 @@ ]) .attr("class", "ldc-line") .attr("d", refWaterlevelLine); + mainChart // label + .append("text") + .text("LDC") + .attr("class", "ref-waterlevel-label") + .attr("x", x(lastDate) - 20) + .attr("y", y(refWaterLevels.LDC) - 3); + // MW mainChart .append("path") .datum([ @@ -201,6 +219,12 @@ ]) .attr("class", "mw-line") .attr("d", refWaterlevelLine); + mainChart // label + .append("text") + .text("MW") + .attr("class", "ref-waterlevel-label") + .attr("x", x(lastDate) - 20) + .attr("y", y(refWaterLevels.MW) - 3); // DRAWING NAVCHART