Mercurial > gemma
changeset 3576:1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Mon, 03 Jun 2019 16:58:02 +0200 |
| parents | 818cc2deff98 |
| children | 959312a236a0 |
| files | client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/filters.js |
| diffstat | 4 files changed, 41 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Mon Jun 03 16:20:35 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Mon Jun 03 16:58:02 2019 +0200 @@ -212,7 +212,11 @@ dates.map(d => this.$options.filters.dateTime(d, true)); return `${this.$gettext("Fairwayprofile")}: ${ this.selectedBottleneck - } (${dates.join(", ")}) WL: ${waterlevelLabel} (${this.waterlevel} cm)`; + } (${dates.join( + ", " + )}) WL: ${waterlevelLabel} (${this.$options.filters.waterlevel( + this.waterlevel + )} m)`; }, currentData() { if ( @@ -580,7 +584,7 @@ .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) .attr("fill", "black") .style("text-anchor", "middle") - .text("Waterlevel [cm]"); + .text("Waterlevel [m]"); graph .append("text") .attr("y", -50) @@ -621,7 +625,9 @@ let xAxis = d3.axisBottom(xScale).ticks(5); let yAxisRight = d3.axisRight(yScaleRight); - let yAxisLeft = d3.axisLeft(yScaleLeft); + let yAxisLeft = d3 + .axisLeft(yScaleLeft) + .tickFormat(d => this.$options.filters.waterlevel(d)); let graph = svg .append("g")
--- a/client/src/components/gauge/HydrologicalConditions.vue Mon Jun 03 16:20:35 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Mon Jun 03 16:58:02 2019 +0200 @@ -733,7 +733,8 @@ y: d3 .axisRight(this.scale.y) .tickSizeInner(this.dimensions.width) - .tickSizeOuter(0), + .tickSizeOuter(0) + .tickFormat(d => this.$options.filters.waterlevel(d)), x2: d3.axisBottom(this.scale.x2) }; }, @@ -799,7 +800,7 @@ .attr("y", 15); this.diagram // label .append("text") - .text(this.$gettext("Waterlevel [cm]")) + .text(this.$gettext("Waterlevel [m]")) .attr("text-anchor", "middle") .attr( "transform", @@ -891,7 +892,11 @@ .attr("height", 12); this.diagram .append("text") - .text(`${ref} (${refWaterLevels[ref]})`) + .text( + `${ref} (${this.$options.filters.waterlevel( + refWaterLevels[ref] + )})` + ) .attr("class", "ref-waterlevel-label") .attr("x", 5) .attr("y", this.scale.y(refWaterLevels[ref]) - 3); @@ -1031,7 +1036,7 @@ .attr("dy", "1.4em") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") - .text(`Q75%: ${d.q75} cm`); + .text(`Q75%: ${this.$options.filters.waterlevel(d.q75)} m`); tooltipText .append("tspan") .attr("x", 0) @@ -1039,7 +1044,7 @@ .attr("dy", "2.6em") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") - .text(`Median: ${d.median} cm`); + .text(`Median: ${this.$options.filters.waterlevel(d.median)} m`); tooltipText .append("tspan") .attr("x", 0) @@ -1047,7 +1052,7 @@ .attr("dy", "3.8em") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") - .text(`Q25%: ${d.q25} cm`); + .text(`Q25%: ${this.$options.filters.waterlevel(d.q25)} m`); tooltipText .append("tspan") .attr("x", 0) @@ -1055,7 +1060,7 @@ .attr("dy", "5em") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") - .text(`Max: ${d.max} cm`); + .text(`Max: ${this.$options.filters.waterlevel(d.max)} m`); tooltipText .append("tspan") .attr("x", 0) @@ -1063,7 +1068,7 @@ .attr("dy", "6.2em") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") - .text(`Min: ${d.min} cm`); + .text(`Min: ${this.$options.filters.waterlevel(d.min)} m`); const dYear = this.yearWaterlevels.find( ywl => ywl.date.getTime() === d.date.getTime()
--- a/client/src/components/gauge/Waterlevel.vue Mon Jun 03 16:20:35 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Mon Jun 03 16:58:02 2019 +0200 @@ -497,7 +497,8 @@ y: d3 .axisRight(this.scale.y) .tickSizeInner(this.dimensions.width) - .tickSizeOuter(0), + .tickSizeOuter(0) + .tickFormat(d => this.$options.filters.waterlevel(d)), x2: d3.axisBottom(this.scale.x2) }; @@ -774,7 +775,7 @@ .attr("y", 15); this.diagram // label .append("text") - .text(this.$gettext("Waterlevel [cm]")) + .text(this.$gettext("Waterlevel [m]")) .attr("text-anchor", "middle") .attr( "transform", @@ -963,7 +964,11 @@ .attr("height", 12); this.diagram .append("text") - .text(`${ref} (${refWaterLevels[ref]})`) + .text( + `${ref} (${this.$options.filters.waterlevel( + refWaterLevels[ref] + )})` + ) .attr("class", "ref-waterlevel-label") .attr("x", 5) .attr("y", this.scale.y(refWaterLevels[ref]) - 3); @@ -1170,7 +1175,7 @@ .attr("dy", "1.4em") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") - .text(d.max + " cm"); + .text(this.$options.filters.waterlevel(d.max) + " m"); tooltipText .append("tspan") .attr("x", 0) @@ -1179,7 +1184,7 @@ .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("class", "font-weight-bold") - .text(d.waterlevel + " cm"); + .text(this.$options.filters.waterlevel(d.waterlevel) + " m"); tooltipText .append("tspan") .attr("x", 0) @@ -1187,7 +1192,7 @@ .attr("dy", "3.8em") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") - .text(d.min + " cm"); + .text(this.$options.filters.waterlevel(d.min) + " m"); } else { tooltipText .append("tspan") @@ -1197,7 +1202,7 @@ .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("class", "font-weight-bold") - .text(d.waterlevel + " cm"); + .text(this.$options.filters.waterlevel(d.waterlevel) + " m"); } // get text dimensions
--- a/client/src/lib/filters.js Mon Jun 03 16:20:35 2019 +0200 +++ b/client/src/lib/filters.js Mon Jun 03 16:58:02 2019 +0200 @@ -64,5 +64,12 @@ } return sortedData; + }, + // converts cm to m and formats based on locale + waterlevel(n) { + return (n / 100).toLocaleString(locale2, { + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }); } };