Mercurial > gemma
changeset 3299:ef52926ce2fc
available_fairwaydepth_vs_lnwl: Scales adjusted
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 16 May 2019 16:37:21 +0200 |
parents | ec27ee21f7bc |
children | e37b8afd7bd9 |
files | client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/store/fairwayavailability.js |
diffstat | 2 files changed, 7 insertions(+), 70 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Thu May 16 16:33:29 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Thu May 16 16:37:21 2019 +0200 @@ -76,8 +76,6 @@ import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; -const hoursInDays = x => x / 24; - export default { mixins: [diagram, pdfgen], components: { @@ -85,7 +83,7 @@ }, data() { return { - containerId: "availablefairwaydepth", + containerId: "availablefairwaydepthlnwl", loading: false, width: 1000, height: 600, @@ -171,7 +169,7 @@ computed: { ...mapState("fairwayavailability", [ "selectedFairwayAvailabilityFeature", - "fwData", + "fwLNWLData", "from", "to", "frequency", @@ -408,7 +406,7 @@ }); this.yScale = d3 .scaleLinear() - .domain([-33, 33]) + .domain([0, 100]) .range([this.dimensions.mainHeight - 30, 0]); d3.select(".diagram-container svg").remove(); this.generateDiagramContainer(); @@ -426,69 +424,7 @@ .append("g") .attr("transform", `translate(0 ${this.paddingTop})`); }, - drawBars() { - const everyBar = this.diagram - .selectAll("g") - .data(this.fwData) - .enter() - .append("g") - .attr("transform", (d, i) => { - const dx = this.paddingRight + i * this.spaceBetween; - return `translate(${dx})`; - }); - this.drawSingleBars(everyBar); - this.drawLabelPerBar(everyBar); - }, - drawSingleBars(everyBar) { - this.drawLDC(everyBar); - this.drawHighestLevel(everyBar); - this.drawLowerLevels(everyBar); - }, - drawLowerLevels(everyBar) { - everyBar - .selectAll("g") - .data(d => d.lowerLevels.reverse()) - .enter() - .append("rect") - .attr("y", this.yScale(0)) - .attr("height", d => { - return this.yScale(0) - this.yScale(hoursInDays(d)); - }) - .attr("width", this.barsWidth) - .attr("fill", (d, i) => { - return this.$options.COLORS.REST[i]; - }); - }, - fnheight(name) { - return d => this.yScale(0) - this.yScale(hoursInDays(d[name])); - }, - drawLDC(everyBar) { - const height = this.fnheight("ldc"); - everyBar - .append("rect") - .attr("y", this.yScale(0)) - .attr("height", height) - .attr("width", this.barsWidth) - .attr("transform", d => `translate(0 ${-1 * height(d)})`) - .attr("fill", this.$options.COLORS.LDC) - .attr("id", "ldc"); - }, - drawHighestLevel(everyBar) { - const height = this.fnheight("highestLevel"); - everyBar - .append("rect") - .attr("y", this.yScale(0)) - .attr("height", height) - .attr("width", this.barsWidth - 5) - .attr("transform", d => `translate(0 ${-1 * height(d)})`) - .attr("fill", this.$options.COLORS.HIGHEST); - }, - drawLabelPerBar(everyBar) { - everyBar - .append("text") - .text(d => d.label) - .attr("y", this.yScale(0) + this.labelPaddingTop); - }, + drawBars() {}, drawScaleLabel() { const center = this.dimensions.mainHeight / 2; this.diagram @@ -517,11 +453,11 @@ } }, watch: { - fwData() { + fwLNWLData() { this.drawDiagram(); } }, - LEGEND: app.$gettext("Sum of days"), + LEGEND: app.$gettext("Percent"), COLORS: { LDC: "#cdcdcd", HIGHEST: "#3675ff",
--- a/client/src/store/fairwayavailability.js Thu May 16 16:33:29 2019 +0200 +++ b/client/src/store/fairwayavailability.js Thu May 16 16:37:21 2019 +0200 @@ -23,6 +23,7 @@ from: format(subYears(new Date(), 1), "YYYY-MM-DD"), frequency: "monthly", fwData: null, + fwLNWLData: null, legend: null, LOS: 3 };