<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>