Mercurial > gemma
changeset 4361:8a26225b6133 fa-round-in-backend
client: change AvailableFairwayDepth diagram
* Use days from the backend to draw the AvailableFairwayDepth diagram,
by removing the hoursInDays() function.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Mon, 09 Sep 2019 17:24:14 +0200 |
parents | 60efb69c4245 |
children | 89d2d9309a38 |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 14 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Mon Sep 09 15:17:13 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Mon Sep 09 17:24:14 2019 +0200 @@ -93,15 +93,6 @@ import { FREQUENCIES } from "@/store/fairwayavailability"; import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; -// FIXME This is a rounding methods that shows that we have fractions, -// because we are coming from hours. Users will understand the underlying -// math better and we can see if this is wanted. -// With the backend just giving us the summarized hours, we cannot do -// a classification of each day into a category. -// (The name of the function is kept to keep the diff more readable and -// should changed if this is more clarified.) -const hoursInDays = x => Math.round((x * 10) / 24) / 10; - export default { mixins: [diagram, pdfgen, templateLoader], components: { @@ -475,19 +466,15 @@ .querySelector(".diagram-container") .getBoundingClientRect().left; d3.select("#tooltip") - .text(hoursInDays(d.height)) + .text(d.height) .attr("y", y - 10) .attr("x", d3.event.pageX - dy); //d3.event.pageX gives coordinates relative to SVG //dy gives offset of svg on page }) - .attr("y", d => { - return ( - 2 * yScale(0) - yScale(hoursInDays(d.translateY)) + this.paddingTop - ); - }) + .attr("y", d => 2 * yScale(0) - yScale(d.translateY) + this.paddingTop) .attr("height", d => { - return yScale(0) - yScale(hoursInDays(d.height)); + return yScale(0) - yScale(d.height); }) .attr("x", ldcOffset + spaceBetween / 2) .attr("width", widthPerItem - ldcOffset - spaceBetween) @@ -500,19 +487,19 @@ .selectAll("g.bars") .data(d => d.lowerLevels) .enter() - .filter(d => hoursInDays(d.height) > 0) + .filter(d => d.height > 0) .insert("text") .attr("y", d => { return ( 2 * yScale(0) - - yScale(hoursInDays(d.translateY)) + + yScale(d.translateY) + this.paddingTop + - (yScale(0) - yScale(hoursInDays(d.height))) + + (yScale(0) - yScale(d.height)) + (yScale(0) - yScale(1.9)) //instead o alignment-baseline hanging ); }) .attr("x", widthPerItem / 2) - .text(d => hoursInDays(d.height)) + .text(d => d.height) // does not work with svg2pdf .attr("alignment-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-size", "8") @@ -520,7 +507,7 @@ } }, fnheight({ name, yScale }) { - return d => yScale(0) - yScale(hoursInDays(d[name])); + return d => yScale(0) - yScale(d[name]); }, drawLDC({ everyBar, yScale, widthPerItem, spaceBetween, ldcOffset }) { const height = this.fnheight({ name: "ldc", yScale }); @@ -540,7 +527,7 @@ .querySelector(".diagram-container") .getBoundingClientRect().left; d3.select("#tooltip") - .text(hoursInDays(d.ldc)) + .text(d.ldc) .attr("y", y - 50) .attr("x", d3.event.pageX - dy); //d3.event.pageX gives coordinates relative to SVG @@ -558,11 +545,11 @@ .attr("id", "ldc"); if (this.showNumbers) { everyBar - .filter(d => hoursInDays(d.ldc) > 0) + .filter(d => d.ldc > 0) .append("text") .attr("y", yScale(0.5)) // some distance from the bar .attr("x", spaceBetween / 2) - .text(d => hoursInDays(d.ldc)) + .text(d => d.ldc) .attr("text-anchor", "left") .attr("font-size", "8") .attr( @@ -596,7 +583,7 @@ .querySelector(".diagram-container") .getBoundingClientRect().left; d3.select("#tooltip") - .text(hoursInDays(d.highestLevel)) + .text(d.highestLevel) .attr("y", y - 50) .attr("x", d3.event.pageX - dy); //d3.event.pageX gives coordinates relative to SVG @@ -613,11 +600,11 @@ .attr("fill", this.$options.COLORS.HIGHEST); if (this.showNumbers) { everyBar - .filter(d => hoursInDays(d.highestLevel) > 0) + .filter(d => d.highestLevel > 0) .append("text") .attr("y", yScale(0.5)) // some distance from the bar .attr("x", widthPerItem / 2) - .text(d => hoursInDays(d.highestLevel)) + .text(d => d.highestLevel) .attr("text-anchor", "middle") .attr("font-size", "8") .attr(