Mercurial > gemma
changeset 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 | 50d40ed6e3da |
| children | 9be91acbe49a |
| files | client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/store/fairwayavailability.js |
| diffstat | 2 files changed, 86 insertions(+), 58 deletions(-) [+] |
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" } };
--- a/client/src/store/fairwayavailability.js Fri May 24 22:01:32 2019 +0200 +++ b/client/src/store/fairwayavailability.js Sun May 26 16:33:02 2019 +0200 @@ -26,18 +26,6 @@ endOfQuarter } from "date-fns"; -const LNWLDIAGRAMMOCKDATA = { - lnwl: [ - { level: "LDC", value: 162, percent: 70 }, - { level: "HDC", value: 564, percent: 30 } - ], - afd: [ - { value: 200, percent: 20 }, - { value: 230, percent: 30 }, - { value: 250, percent: 50 } - ] -}; - const LIMITINGFACTORS = { WIDTH: "width", DEPTH: "depth" @@ -345,20 +333,20 @@ loadAvailableFairwayDepthLNWLDiagram: ({ commit, dispatch }, options) => { dispatch("loadAvailableFairwayDepthLNWL", options).then(response => { commit("setCSV", response); - //const data = response; - let data = LNWLDIAGRAMMOCKDATA; - data["lnwl"] = data["lnwl"].filter(v => v.level !== "HDC"); - data["afd"] = data.afd.reverse(); - Object.keys(data).forEach(diagramComponent => { - let sum = 0; - data[diagramComponent].map(elem => { - elem["translateY"] = Number(elem["percent"]) + sum; - sum += Number(elem["percent"]); - return elem; - }); + let data = response.split("\n").filter(d => d); + data.shift(); // remove header line + data = data.map(d => { + let columns = d.split(","); + return { + date: columns[0], + ldc: Number(columns[2]), + below: Number(columns[3]), + between: Number(columns[4]), + above: Number(columns[5]) + }; }); - // transformAFDLNWL commit("setFwLNWLData", data); + return data; }); }, loadAvailableFairwayDepthLNWLForMap: ({ dispatch }, options) => { @@ -369,10 +357,10 @@ data = data.map(d => { let columns = d.split(","); return { - ldc: columns[2], - below: columns[3], - between: columns[4], - above: columns[5] + ldc: Number(columns[2]), + below: Number(columns[3]), + between: Number(columns[4]), + above: Number(columns[5]) }; }); return data[0];