Mercurial > gemma
changeset 3125:383720d8d98e
fairway_availability: generative code for diagram added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 29 Apr 2019 13:27:50 +0200 |
parents | 583b6748431f |
children | f6fb8803032f |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 80 insertions(+), 67 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Mon Apr 29 12:58:27 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Mon Apr 29 13:27:50 2019 +0200 @@ -5,6 +5,8 @@ </div> </template> +<style></style> + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -25,7 +27,6 @@ export default { data() { return { - plainAvailability: [], loading: false }; }, @@ -35,79 +36,91 @@ } }, methods: { - /** - * - * aggregates data exceeding certain thresholds - * - * data = [1,2,3,4,5,6,7,8] - * treshold = [2,4,6] - * - * structure: treshold: count - * - * expected result = { - * 6: 2, - * 4: 2 - * 2: 2 - * } - * - * 1,2 are dropped, because they do not exceed any of the given tresholds - * - */ - availabeDaysPerMonth(data, tresholds) { - const DESC = (a, b) => { - if (a > b) return -1; - if (a === b) return 0; - return 1; - }; - const groups = tresholds.sort(DESC); - const collection = {}; - groups.map(g => { - collection[g + ""] = 0; - }); - return this.data.reduce((current, value) => { - for (let threshold in groups) { - if (value > threshold) { - return (current[threshold] += 1); - } - } - return current; - }, collection); - }, drawDiagram() { - const margin = 60; - const width = 1000 - 2 * margin; - const height = 600 - 2 * margin; + const width = 1000; + const height = 600; + const data = [ + { month: "feb", values: [30, 20, 10, 0] }, + { month: "mar", values: [25, 23, 0, 0] }, + { month: "apr", values: [17, 18, 16, 13] } + ]; + const yScale = d3 .scaleLinear() - .range([height, 0]) - .domain([-35, 35]); - d3.select(".diagram-container svg").remove(); - let svg = d3.select(".diagram-container").append("svg"); - svg.attr("width", "100%"); - svg.attr("height", "100%"); - const chart = svg.attr("transform", `translate(${margin}, ${margin})`); - chart.append("g").call(d3.axisLeft(yScale)); - const xScale = d3 - .scaleBand() - .range([0, width]) - .domain([1, 12]) - .padding(0.2); - chart + .domain([-30, 30]) + .range([height - 30, 0]); + + const diagram = d3 + .select("svg") + .attr("width", width) + .attr("height", height); + drawBars({ diagram, data, yScale }); + drawLabel(diagram, height); + drawScale(diagram, yScale); + }, + drawBars({ diagram, data, yScale }) { + const paddingRight = 100; + const paddingTop = 30; + + const bars = diagram + .selectAll("g") + .data(data) + .enter() .append("g") - .attr("transform", `translate(0, ${height})`) - .call(d3.axisBottom(xScale)); - chart - .selectAll() - .data(this.availability) + .attr("transform", (d, i) => { + return ( + "translate(" + (paddingRight + i * 60) + "," + yScale(-1) + ")" + ); + }); + const bar = bars.append("g"); + + bar + .selectAll("rect") + .data(d => d.values) .enter() .append("rect") - .attr("x", s => xScale(s.month)) - .attr("y", s => yScale(s.days)) - .attr("height", s => height - yScale(s.days)) - .attr("width", xScale.bandwidth()); + .attr("width", 30) + .attr("height", (d, i) => { + console.log(d); + return yScale(0) - yScale(d); + }) + .attr("transform", d => { + return "translate(0 -" + (yScale(0) - yScale(d)) + ")"; + }) + .attr("fill", (d, i) => { + return colors[i]; + }); + + bars + .append("text") + .text((d, i) => { + return d.month; + }) + .attr("text-anchor", "middle") + .attr("x", 15) + .attr("y", 0) + .attr("dy", "1em"); + }, + drawLabel(diagram, height) { + const dy = height / 2; + diagram + .append("text") + .text("sum of days / Summe der Tage") + .attr("text-anchor", "middle") + .attr("x", 0) + .attr("y", 0) + .attr("dy", "1em") + .attr("transform", "translate(0, " + dy + "), rotate(-90)"); + }, + drawScale(diagram, yScale) { + const paddingLeft = 50; + const paddingTop = 10; + const yAxis = d3.axisLeft().scale(yScale); + diagram + .append("g") + .attr("transform", "translate(" + paddingLeft + " " + paddingTop + ")") + .call(yAxis); } } }; </script> - -<style></style>