Mercurial > gemma
diff client/src/components/fairway/AvailableFairwayDepth.vue @ 3033:c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 12 Apr 2019 13:35:02 +0200 |
parents | |
children | 383720d8d98e |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Apr 12 13:35:02 2019 +0200 @@ -0,0 +1,113 @@ +<template> + <div> + <h1>Available Fairway Depth</h1> + <UISpinnerOverlay v-if="loading" /> + </div> +</template> + +<script> +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + * Markus Kottländer <markus.kottlaender@intevation.de> + */ +import * as d3 from "d3"; + +export default { + data() { + return { + plainAvailability: [], + loading: false + }; + }, + computed: { + availability() { + return this.plainAvailability; + } + }, + 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 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 + .append("g") + .attr("transform", `translate(0, ${height})`) + .call(d3.axisBottom(xScale)); + chart + .selectAll() + .data(this.availability) + .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()); + } + } +}; +</script> + +<style></style>