Mercurial > gemma
changeset 2645:6374fc404fdc
client: waterlevel diagram: draw filled area between HDC and LDC
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 13:36:13 +0100 |
parents | 50cfb12a54a4 |
children | 30697735a7bc |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 17 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Thu Mar 14 13:16:43 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Thu Mar 14 13:36:13 2019 +0100 @@ -31,6 +31,8 @@ .ref-waterlevel-label font-size: 11px fill: #999 + .hdc-ldc-area + fill: rgba(0, 255, 0, 0.15) .brush .selection stroke: transparent @@ -176,14 +178,16 @@ .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`); mainChart.append("g").call(yAxis); - // waterlevel chart + // reference waterlevels + // filling area between HDC and LDC mainChart - .append("path") - .datum(this.waterlevels) - .attr("class", "line") - .attr("d", mainLineChart); + .append("rect") + .attr("class", "hdc-ldc-area") + .attr("x", 0) + .attr("y", y(refWaterLevels.HDC)) + .attr("width", width) + .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC)); - // reference waterlevels let lastDate = this.waterlevels[this.waterlevels.length - 1].date; // HDC mainChart @@ -231,6 +235,13 @@ .attr("x", x(lastDate) - 20) .attr("y", y(refWaterLevels.MW) - 3); + // waterlevel chart + mainChart + .append("path") + .datum(this.waterlevels) + .attr("class", "line") + .attr("d", mainLineChart); + // DRAWING NAVCHART let navChart = svg