{% extends "base.html" %}

{% block title %}
  {{__(title)}}
{% endblock %}

{% block stylesheet %}
<style>
  .js-plotly-plot .plotly .modebar-group {
      display: flex !important;
  }
</style>
{% endblock %}

{% block socialMediaMeta %}
  <!-- Open Graph -->
  <meta property="og:title" content="{{title}}" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="{{__('ENERGI DATA PORTAL')}}" />
  <meta property="og:image" content="{{'/static/img/bulb.png'}}" />
  <meta property="og:image:alt" content="Energinet Development in Electricity Consumption" />
  <meta property="og:description" content="{{description or 'Open energy data from Energinet to society'}}" />
{% endblock %}

{% block content %}
  <noscript>{{__('You need to enable JavaScript to run this app.')}}</noscript>

  <h2 class="text-edsdarkgreen2">{{__(title)}}</h1>

  <div id='charts-loading-placeholder' class="my-12 w-full bg-edslightgray p-12 text-center text-2xl" style="height: 1500px;">
    {{ __('Loading...') }}
  </div>

  <div id='chart-1' class="my-12"></div>
  <div id='chart-2' class="my-12"></div>
  <div id='chart-3' class="my-12"></div>

  <div class="flex justify-center items-center">
    <h4 class="py-5 px-10">{{ __('Download') }}:</h4>
    <button id="download-json" class="py-5 px-5 font-bold hover:bg-edsgreen hover:text-white">JSON</button>
    <button id="download-csv" class="py-5 px-5 font-bold hover:bg-edsgreen hover:text-white">CSV</button>
  </div>

  <div class="mt-16 bg-edslightgray pt-3 pb-6">
    <h2 class="text-edsgreen ml-6">{{ __('Data sources') }}</h2>
    <div class="flex flex-col sm:flex-row">
      <ul class="my-auto ml-12 text-2xl">
        <li><a 
          href="https://www.energidataservice.dk/tso-electricity/productionconsumptionsettlement"
          target="_blank"
          >
          Production and Consumption - Settlement
          <span class="text-sm">
            <i class="fa fa-external-link" aria-hidden="true"></i>
          </span>
        </a></li>
      </ul>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script src='https://cdn.plot.ly/plotly-basic-1.57.1.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-dsv/1.0.8/d3-dsv.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.min.js'></script>


  <script>

    try {

      const allTimeRecordsResponse = JSON.parse('{{ allTimeRecordsResponse }}'.replace(/&quot;/g,'"'))

      if (!allTimeRecordsResponse.records) {
        throw new Error(`Unexpected response from data sourse: ${JSON.stringify(allTimeRecordsResponse, null, 2)}`, )
      }

      // console.log(allTimeRecordsResponse)
      const records = allTimeRecordsResponse.records


      // Plotly layout settings
      const axesLayout = {
          ticks: "outside",
          zeroline: false,
          tickcolor: "#E0E0E0",
          ticklen: 8,
          tickfont: {
            color: "#293A4C"
          },
        }

      const layout = {
        colorway: [
          "#09505D",
          "#00A58D",
          "#FFD424",
          "#83CCD8",
          "#008A8B",
          "#F8AE3C",
          "#A0C1C2",
          "#9FCD91",
          "#00A6BC",
          "#7D7C7C",
          "#BDBCBC",
        ], 
        font: {
          color: "#293A4C"
        },
        paper_bgcolor: "#F6F6F6",
        plot_bgcolor: "#F6F6F6",
        xaxis: {
          ...axesLayout,
          type: 'date'
        },
        yaxis: {
          ...axesLayout,
        },
        modebar: {
          activecolor: '#09505D'
        },
        annotations: [{
          xref: 'paper',
          yref: 'paper',
          xanchor: 'right',
          xshift: -8,
          yanchor: 'middle',
          yshift: 4,
          x: 0,
          y: 1.02,
          text: 'MWh',
          showarrow: false,
          font: {
            color: "#7D7C7C"
          },
        }],
        hovermode: 'closest',
      }

      const config = {
        responsive: true,
        displaylogo: false,
        // displayModeBar: true,
      }

      // prep data

      // e.g. 2020-08
      let months = []
      let years = []
      let consumption = []
      let allData = []
      for (let year in records) {

        years.push(year)

        for (let month in records[year]) {
          
          months.push(`${year}-${month}`)
          
          const currConsumption = records[year][month]["GrossConsumptionMWh"]
          
          allData.push({
            year: year,
            month: month,
            consumption: currConsumption,
          })
          
          consumption.push(currConsumption)
        }
      }

      let monthDict = ("{{ language }}" || "en") === "da" ?
        // source: https://github.com/plotly/plotly.js/blob/master/lib/locales/da.js
        {1:'Jan', 2:'Feb', 3:'Mar', 4:'Apr', 5:'Maj', 6:'Jun', 7:'Jul', 8:'Aug', 9:'Sep', 10:'Okt', 11:'Nov', 12:'Dec'}
        :
        {1:'Jan', 2:'Feb', 3:'Mar', 4:'Apr', 5:'May', 6:'Jun', 7:'Jul', 8:'Aug', 9:'Sep', 10:'Oct', 11:'Nov', 12:'Dec'}


      // chart 1
      
      const tracesByMonth = []
      let minY = consumption[0]
      let maxY = consumption[0]

      for (let year in records) {
        
        let consumptionForCurrentYear = []
        for (let month in records[year]) {
          
          const currConsumption = records[year][month]["GrossConsumptionMWh"]
          if (currConsumption > maxY) { 
            maxY = currConsumption
          }
          if (currConsumption < minY) {
            minY = currConsumption
          }
          
          consumptionForCurrentYear.push(currConsumption)
        }

        tracesByMonth.push({
            x: Object.values(monthDict),
            y: consumptionForCurrentYear,
            type: 'bar', 
            hovertemplate: `%{y} MWh (%{x} ${year})<extra></extra>`,
            name: year,
            // auto select last three years 
            visible: years.slice(-3).includes(year) ? true : "legendonly",
        })
        
      }

      // draw chart starting from a little bit lower 
      // than the minimum consumption value
      if (minY > 0) {
        minY = minY * 0.95
      }

      Plotly.newPlot('chart-1', tracesByMonth, {
        ...layout,
        legend: {
          ...layout.legend,
          traceorder: 'reversed',
        },
        title: {
          text: "{{ __('Consumption over months in a given year') }}",
        },
        barmode: 'group',
        xaxis: {
          ...axesLayout,
        },
        yaxis: {
          ...axesLayout,
          range: [minY, maxY]
        },
      }, config)


      // chart 2
      const tracesByYear = []

      for (const [monthNumber, monthName] of Object.entries(monthDict)) {
        
        let consumptionForCurrentMonth = []
        for (let year in records) {
          const currentYearMonth = records[year][monthNumber.toString()]
          
          if (currentYearMonth) {
            const currentConsumption = currentYearMonth["GrossConsumptionMWh"]
            consumptionForCurrentMonth.push(currentConsumption)
          }
        }
        
        tracesByYear.push({
            x: years,
            y: consumptionForCurrentMonth,
            mode: 'lines+markers',
            type: 'scatter', 
            hovertemplate: `%{y} MWh (${monthName} %{x})<extra></extra>`,
            name: monthName,
            visible: ['Jan', 'Feb', 'Jul', 'Aug' ].includes(monthName) ? true : "legendonly",
        })
      }

      Plotly.newPlot('chart-2', tracesByYear, {
        ...layout,
        title: "{{ __('Consumption over years in a given month') }}",
        xaxis: {
          ...axesLayout,
          type: 'category'
        }
      }, config);


      // chart 3
      
      Plotly.newPlot
      ('chart-3', 
        [{
          x: months,
          y: consumption,
          mode: 'lines',
          type: 'scatter',
          fill: 'tozeroy',
          hovertemplate: `%{y} MWh (%{x})<extra></extra>`,
        }], 
      {
        ...layout,
        colorway: ["#00A58D"],
        title: "{{ __('Consumption overview') }}"
      }, config);
      
      function downloadData(dataString, options = {type: 'application/json'}) {
        try {
          const data = new Blob([dataString], options)
          const tempUrl = (window.URL || window.webkitURL).createObjectURL(data)
          
          let a = document.createElement('a')
          a.href = tempUrl
          a.download = (
            'consumption-' + 
            (new Date()).toISOString().split('T')[0] + 
            (options.type === 'application/json' ? '.json' : '.csv')
          )

          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        } catch(e) {
          console.error(e, e.stack)
        }

      }

      d3.select("#download-csv")
        .on("click", function(event) {
          downloadData(d3.csvFormat(allData), {type: 'text/csv'})
        })

      d3.select("#download-json")
        .on("click", function(event) {
          downloadData(JSON.stringify(allData, null, 2))
        })

      d3.select('#charts-loading-placeholder').style('display', 'none')


    } catch (e) {
      console.error(e)
      d3.select('#charts-loading-placeholder').text(`{{ __("We could not fetch data for this visualization. Please, try again later.") }}`)
    }
  </script>
{% endblock %}