Mercurial > gemma
diff client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3461:b43cf476d791
client: spuc05: implemented new data structure (CSV) and added support for multiple charts
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Sun, 26 May 2019 16:33:02 +0200 |
parents | 213b703bdd85 |
children | 6f4dad7473d7 |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri May 24 22:01:32 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Sun May 26 16:33:02 2019 +0200 @@ -84,16 +84,11 @@ return { containerId: "availablefairwaydepthlnwl", loading: false, - width: 1000, - height: 600, - paddingRight: 100, - spaceBetween: 80, labelPaddingTop: 15, scalePaddingLeft: 50, paddingTop: 10, diagram: null, yScale: null, - barsWidth: 60, dimensions: null, pdf: { doc: null, @@ -203,6 +198,22 @@ }, featureName() { return this.selectedFairwayAvailabilityFeature.properties.name; + }, + widthPerItem() { + return Math.min( + (this.dimensions.width - this.scalePaddingLeft) / + this.fwLNWLData.length, + 180 + ); + }, + ldcWidth() { + return this.widthPerItem * 0.3; + }, + afdWidth() { + return this.widthPerItem * 0.5; + }, + spaceBetween() { + return this.widthPerItem * 0.2; } }, methods: { @@ -431,7 +442,7 @@ drawTooltip() { this.diagram .append("text") - .text("banane") + .text("") .attr("font-size", "0.8em") .attr("opacity", 0) .attr("id", "tooltip"); @@ -447,19 +458,39 @@ .attr("transform", `translate(0 ${this.paddingTop})`); }, drawBars() { - if (this.fwLNWLData) this.drawLNWL(); - if (this.fwLNWLData) this.drawAFD(); + if (this.fwLNWLData) { + this.fwLNWLData.forEach((data, i) => { + this.drawLNWL(data, i); + this.drawAFD(data, i); + this.drawLabel(data.date, i); + }); + } }, - drawAFD() { + drawLabel(date, i) { + this.diagram + .append("text") + .text(date) + .attr("text-anchor", "middle") + .attr( + "transform", + `translate(${this.scalePaddingLeft + + this.widthPerItem * i + + this.widthPerItem / 2} ${this.dimensions.mainHeight - 15})` + ); + }, + drawAFD(data, i) { let afd = this.diagram .append("g") .attr( "transform", - `translate(${this.paddingRight + this.barsWidth / 2})` + `translate(${this.scalePaddingLeft + + this.spaceBetween / 2 + + this.widthPerItem * i + + this.ldcWidth})` ); afd .selectAll("rect") - .data(this.fwLNWLData.afd) + .data([data.above, data.between, data.below]) .enter() .append("rect") .on("mouseover", function() { @@ -475,34 +506,44 @@ const dy = document .querySelector(".diagram-container") .getBoundingClientRect().left; - const value = d.percent; d3.select("#tooltip") - .text(value) + .text(d.toFixed(2)) .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("height", d => { - return this.yScale(0) - this.yScale(d.percent); + return this.yScale(0) - this.yScale(d); }) - .attr("y", d => { - return this.yScale(d.translateY); + .attr("y", (d, i) => { + if (i === 0) { + return this.yScale(d); + } + if (i === 1) { + return this.yScale(data.above + d); + } + if (i === 2) { + return this.yScale(data.above + data.between + d); + } }) - .attr("width", this.barsWidth) + .attr("width", this.afdWidth) .attr("fill", (d, i) => { return this.$options.AFDCOLORS[i]; }); }, - drawLNWL() { + drawLNWL(data, i) { let lnwl = this.diagram .append("g") - .attr("transform", `translate(${this.paddingRight})`); + .attr( + "transform", + `translate(${this.scalePaddingLeft + + this.spaceBetween / 2 + + this.widthPerItem * i})` + ); lnwl - .selectAll("rect") - .data(this.fwLNWLData.lnwl) - .enter() .append("rect") + .datum([data.ldc]) .on("mouseover", function() { d3.select(this).attr("opacity", "0.8"); d3.select("#tooltip").attr("opacity", 1); @@ -516,23 +557,22 @@ const dy = document .querySelector(".diagram-container") .getBoundingClientRect().left; - const value = d.percent; d3.select("#tooltip") - .text(value) + .text(d[0].toFixed(2)) .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("height", d => { - return this.yScale(0) - this.yScale(d.percent); + return this.yScale(0) - this.yScale(d); }) .attr("y", d => { - return this.yScale(d.translateY); + return this.yScale(d); }) - .attr("width", this.barsWidth / 2) + .attr("width", this.ldcWidth) .attr("fill", d => { - return this.$options.LWNLCOLORS[d.level]; + return this.$options.LWNLCOLORS.LDC; }); }, drawScaleLabel() { @@ -568,9 +608,9 @@ } }, LEGEND: app.$gettext("Percent"), - AFDCOLORS: ["#3675ff", "#ff6c6c", "#782121"], + AFDCOLORS: ["#3636ff", "#f49b7f", "#e15472"], LWNLCOLORS: { - LDC: "#aaaaaa", + LDC: "#97ddf3", HDC: "#43FFE1" } };