<template>
  <div>
    <h1>Available Fairway Depth</h1>
    <UISpinnerOverlay v-if="loading" />
  </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.
 *
 * 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 {
      loading: false
    };
  },
  computed: {
    availability() {
      return this.plainAvailability;
    }
  },
  methods: {
    drawDiagram() {
      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()
        .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 allBars = diagram
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", (d, i) => {
          return "translate(" + (paddingRight + i * 95) + " 10 )";
        });
      const barPerMonth = allBars
        .selectAll("rect")
        .data(d => d.values)
        .enter()
        .append("rect")
        .attr("x", 0)
        .attr("y", yScale(0))
        .attr("height", d => {
          return Math.abs(yScale(0) - yScale(d));
        })
        .attr("transform", d => {
          if (d > 0)
            return "translate(0 -" + Math.abs(yScale(0) - yScale(d)) + ")";
          return "translate(0 " + 0 + ")";
        })
        .attr("width", 60)
        .attr("fill", (d, i) => {
          return colors[i];
        });
    },
    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>