Mercurial > gemma
changeset 4359:057787583b12
client: add showNumbers option to AvailableFairwayDepthLNWL
* Add code similiar to AvailableFairwayDepth.vue, but slightly different
because the bars are drawn differently. Each draw function uses its own
method to select the svg elements to modify.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Mon, 09 Sep 2019 17:03:27 +0200 |
parents | a7196b55c064 |
children | 90b72e811efd |
files | client/src/components/fairway/AvailableFairwayDepthLNWL.vue |
diffstat | 1 files changed, 53 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Mon Sep 09 16:13:26 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Mon Sep 09 17:03:27 2019 +0200 @@ -42,6 +42,17 @@ >Download CSV</a > </div> + <div class="btn-group-toggle w-100 mt-2"> + <label + class="btn btn-outline-secondary btn-sm" + :class="{ active: showNumbers }" + ><input + type="checkbox" + v-model="showNumbers" + autocomplete="off" + />Numbers + </label> + </div> </DiagramLegend> <div ref="diagramContainer" @@ -69,6 +80,7 @@ * * Thomas Junk <thomas.junk@intevation.de> * * Markus Kottländer <markus.kottlaender@intevation.de> * * Fadi Abbud <fadi.abbud@intevation.de> + * * Bernhard Reiter <bernhard.reiter@intevation.de> */ import * as d3 from "d3"; import app from "@/main"; @@ -103,7 +115,8 @@ }, templateData: null, templates: [], - defaultTemplate: defaultDiagramTemplate + defaultTemplate: defaultDiagramTemplate, + showNumbers: false }; }, created() { @@ -477,6 +490,28 @@ .attr("fill", (d, i) => { return this.$options.AFDCOLORS[i]; }); + if (this.showNumbers) { + afd + .selectAll("text") + .data([data.above, data.between, data.below]) + .enter() + .append("text") + .attr("fill", "black") + .attr("text-anchor", "middle") + .attr("x", ldcWidth / 2) + .attr("y", (d, i) => { + let h = d; // i == 0 + if (i > 0) { + h += data.above; + } + if (i > 1) { + h += data.between; + } + return yScale(h + 0.8) + this.paddingTop; + }) + .text(d => (d > 0 ? Math.round(d) : "")) + .attr("font-size", "8"); + } }, drawLNWL(data, i, diagram, spaceBetween, widthPerItem, ldcWidth, yScale) { let lnwl = diagram @@ -510,17 +545,24 @@ //d3.event.pageX gives coordinates relative to SVG //dy gives offset of svg on page }) - .attr("height", d => { - return yScale(0) - yScale(d); - }) - .attr("y", d => { - return yScale(d); - }) + .attr("height", d => yScale(0) - yScale(d)) + .attr("y", d => yScale(d)) .attr("transform", `translate(0 ${this.paddingTop})`) .attr("width", ldcWidth) .attr("fill", () => { return this.$options.LWNLCOLORS.LDC; }); + if (this.showNumbers) { + // we do not need to bind data or a datum as the forEach in drawBars + // already brings us only one datum in data + lnwl + .append("text") + .attr("y", yScale(data.ldc + 0.8) + this.paddingTop) + .text(data.ldc) + .attr("text-anchor", "left") + .attr("fill", "black") + .attr("font-size", "8"); + } }, drawScaleLabel({ diagram, dimensions }) { diagram @@ -530,6 +572,7 @@ .attr("x", 0) .attr("y", 0) .attr("dy", "20") + .attr("fill", "black") // translate a few mm to the right to allow for slightly higher letters .attr( "transform", @@ -603,6 +646,9 @@ watch: { fwLNWLData() { this.drawDiagram(); + }, + showNumbers() { + this.drawDiagram(); } }, LEGEND: app.$gettext("Percent"),