Mercurial > gemma
view 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 source
<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>