<template>
  <div>
    <h1>Available Fairway Depth</h1>
    <UISpinnerOverlay v-if="loading" />
    <div class="d-flex flex-row ml-3">
      <div class="mr-3 ml-auto">
        <select class="mr-3">
          <option>Monthly</option>
          <option>Quaterly</option>
          <option>Yearly</option>
        </select>
      </div>
      <div class="mr-3">
        <label for="from" class="mr-3"><translate>from</translate></label
        ><input />
      </div>
      <div class="mr-auto">
        <label for="to" class="mr-3"><translate>to</translate></label
        ><input />
      </div>
    </div>
    <div class="diagram-container"></div>
  </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";
import app from "@/main";

export default {
  data() {
    return {
      loading: false,
      colors: ["red", "green", "blue", "purple"],
      fwData: null,
      width: 1000,
      height: 600
    };
  },
  mounted() {
    this.loadData();
    this.drawDiagram();
  },
  computed: {
    availability() {
      return this.plainAvailability;
    }
  },
  methods: {
    loadData() {},
    drawDiagram() {
      const data = [
        { month: "feb", values: [30, 20, 10, 0] },
        { month: "mar", values: [25, 23, 0, 0] },
        { month: "apr", values: [17, 18, 16, 13] }
      ];

      d3.select(".diagram-container svg").remove();
      const yScale = d3
        .scaleLinear()
        .domain([-30, 30])
        .range([this.height - 30, 0]);

      const diagram = d3
        .select(".diagram-container")
        .append("svg")
        .attr("width", this.width)
        .attr("height", this.height);
      this.drawBars({ diagram, data, yScale });
      this.drawLabel(diagram, this.height);
      this.drawScale(diagram, yScale);
    },
    drawBars({ diagram, data, yScale }) {
      const paddingRight = 100;
      const paddingTop = 10;

      const allBars = diagram
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", (d, i) => {
          return `translate(${paddingRight + i * 95} ${paddingTop})`;
        });
      // bars per month
      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 this.colors[i];
        });
    },
    drawLabel(diagram, height) {
      const center = height / 2;
      diagram
        .append("text")
        .text(this.$options.LEGEND)
        .attr("text-anchor", "middle")
        .attr("x", 0)
        .attr("y", 0)
        .attr("dy", "1em")
        .attr("transform", `translate(0, ${center}), 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);
    }
  },
  LEGEND: app.$gettext("sum of days / Summe der Tage")
};
</script>