Mercurial > gemma
changeset 2641:a735119e4f5c
client: waterlevel diagram: added y-axis label
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 12:36:35 +0100 |
parents | 4bcb26542767 |
children | ffef5f89b31c |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 8 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Thu Mar 14 11:23:42 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Thu Mar 14 12:36:35 2019 +0100 @@ -89,12 +89,12 @@ .append("svg") .attr("width", "100%") .attr("height", "100%"); - let mainMargin = { top: 50, right: 20, bottom: 110, left: 40 }, + let mainMargin = { top: 50, right: 20, bottom: 110, left: 80 }, navMargin = { top: svgHeight - mainMargin.top - 35, right: 20, bottom: 30, - left: 40 + left: 80 }, width = +svgWidth - mainMargin.left - mainMargin.right, mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom, @@ -150,7 +150,7 @@ // DRAWING MAINCHART - // define visible area + // define visible chart area // everything outside this area will be hidden (clipped) svg .append("defs") @@ -169,6 +169,11 @@ .append("g") .attr("transform", `translate(0, ${mainHeight})`) .call(xAxis); + mainChart // label + .append("text") + .text(this.$gettext("Waterlevels [cm]")) + .attr("text-anchor", "middle") + .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`); mainChart.append("g").call(yAxis); // waterlevel chart