{% extends "base.html" %}

{% block title %}
{{__('Welcome - Home')}}
{% endblock %}

{% block content %}

  <!--  Section 1: 6 services -->
  <div class="flex flex-wrap sm:-mx-2 mb-4">
    <!-- build report -->
    <div class="rounded-lg overflow-hidden shadow-lg my-2 w-full sm:my-4 sm:w-1/2 sm:mx-auto md:my-4 md:w-1/2 lg:my-4 lg:w-1/3 xl:my-4 xl:w-1/6 px-1">
      <a href="/build-report/">
        <img class="w-full bg-edsdarkgreen2" src="/static/img/svg/document.svg" alt="Build Report" style="height: 140px;">
      </a>
      <div class="px-6 py-4">
        <p class="font-bold text-2xl text-edsdarkgreen2 text-uppercase">
            {{ __('Build Report') }}
        </p>
        <p class="content text-edsdarkgreen2 text-xl">
            {{__('A quick and user-friendly access to manual data extraction based on selection of market data.')}}
        </p>
      </div>
      <div class="flex justify-end mb-3">
        <a href="/build-report/" class="bg-edsyellow rounded-full px-6 py-3 text-base text-edsdarkgreen2 mr-2 hover:no-underline">
          {{ __('GO TO SERVICE') }}
        </a>
      </div>
    </div>

    <!-- inspiration universe -->
    <div class="rounded-lg overflow-hidden shadow-lg my-2 w-full sm:my-4 sm:w-1/2 sm:mx-auto md:my-4 md:w-1/2 lg:my-4 lg:w-1/3 xl:my-4 xl:w-1/6 px-1">
      <a href="/inspiration">
        <img class="w-full bg-edsdarkgreen2" src="/static/img/svg/brain-bulb.svg" alt="Inspiration Universe"style="height: 140px;">
      </a>
      <div class="px-6 py-4">
        <p class="font-bold text-2xl text-edsdarkgreen2 w-screen text-uppercase">
            {{ __('Inspiration Universe') }}
        </p>
        <p class="content text-edsdarkgreen2 text-xl">
            {{ __('Find inspiration about the use, application and collaboration of energy data.') }}
        </p>
      </div>
      <div class="flex justify-end mb-3">
        <a href="/inspiration" class="bg-edsyellow rounded-full px-6 py-3 text-base text-edsdarkgreen2 mr-2 hover:no-underline">
        {{ __('GO TO SERVICE') }}</a>
      </div>
    </div>

    <!-- visualizations -->
    <div class="rounded-lg overflow-hidden shadow-lg my-2 w-full sm:my-4 sm:w-1/2 sm:mx-auto md:my-4 md:w-1/2 lg:my-4 lg:w-1/3 xl:my-4 xl:w-1/6 px-1">
      <a href="/visualizations">
        <img class="w-full bg-edsdarkgreen2" src="/static/img/svg/visualizations.svg" alt="Visualizations" style="height: 140px;">
      </a>
      <div class="px-6 py-4">
        <p class="font-bold text-2xl text-edsdarkgreen2 text-uppercase">
            {{ __('Visualizations') }}
        </p>
        <p class="content text-edsdarkgreen2 text-xl">
            {{ __('User-friendly visualizations based on raw data.') }}
        </p>
      </div>
      <div class="flex justify-end mb-3">
        <a href="/visualizations" class="bg-edsyellow rounded-full px-6 py-3 text-base text-edsdarkgreen2 mr-2 hover:no-underline">
        {{ __('GO TO SERVICE') }}</a>
      </div>
    </div>

    <!-- publications -->
    <div class="rounded-lg overflow-hidden shadow-lg my-2 w-full sm:my-4 sm:w-1/2 sm:mx-auto md:my-4 md:w-1/2 lg:my-4 lg:w-1/3 xl:my-4 xl:w-1/6 px-1">
      <a href="/publications">
        <img class="w-full bg-edsdarkgreen2" src="/static/img/svg/publications.svg" alt="Publications" style="height: 140px;">
      </a>
      <div class="px-6 py-4">
        <p class="font-bold text-2xl text-edsdarkgreen2 text-uppercase">
            {{ __('Publications') }}
        </p>
        <p class="content text-edsdarkgreen2 text-xl">
            {{ __('Find some of Energinet’s publications here.') }}
        </p>
      </div>
      <div class="flex justify-end mb-3">
        <a href="/publications" class="bg-edsyellow rounded-full px-6 py-3 text-base text-edsdarkgreen2 mr-2 hover:no-underline">
        {{ __('GO TO SERVICE') }}</a>
      </div>
    </div>

    <!-- energidataservice.dk -->
    <div class="rounded-lg overflow-hidden shadow-lg my-2 w-full sm:my-4 sm:w-1/2 sm:mx-auto md:my-4 md:w-1/2 lg:my-4 lg:w-1/3 xl:my-4 xl:w-1/6 px-1">
        <a href="https://www.energidataservice.dk/dataset" target="_blank">
          <img class="w-full bg-edsdarkgreen2 py-6" src="/static/img/svg/eds-logo.svg" alt="Energi Data Service" style="height: 140px;">
        </a>
        <div class="px-6 py-4">
          <p class="font-bold text-2xl text-edsdarkgreen2 text-uppercase">
              {{ __('Raw Data') }}
          </p>
          <p class="content text-edsdarkgreen2 text-xl">
              {{ __('All raw data from Energy Data Service, where data can be extracted by calling APIs') }}
          </p>
        </div>
        <div class="flex justify-end mb-3">
          <a href="https://www.energidataservice.dk/dataset" target="_blank" class="bg-edsyellow flex text-right rounded-full px-6 py-3 text-base text-edsdarkgreen2 mr-2 hover:no-underline">
            {{ __('GO TO SERVICE') }}
            <img src="static/img/svg/external-link-icon.svg" class="ml-2 w-4">
          </a>
        </div>
    </div>

     <!-- eloverblik -->
      <div class="rounded-lg overflow-hidden shadow-lg my-2 w-full sm:my-4 sm:w-1/2 sm:mx-auto md:my-4 md:w-1/2 lg:my-4 lg:w-1/3 xl:my-4 xl:w-1/6 px-1">
        <a href="https://eloverblik.dk/welcome" target="_blank">
          <img class="w-full bg-edsdarkgreen2" src="/static/img/svg/eloverblik.svg" alt="Eloverblik" style="height: 140px;">
        </a>
        <div class="px-6 py-4">
          <p class="font-bold text-2xl text-edsdarkgreen2 text-uppercase">
              {{ __('Eloverblik') }}
          </p>
          <p class="content text-edsdarkgreen2 text-xl">
              {{ __('A platform that delivers consumption and production data to individuals, traders and third parties.') }}
          </p>
        </div>
        <div class="flex justify-end mb-3">
          <a href="https://eloverblik.dk/welcome" target="_blank" class="bg-edsyellow flex rounded-full px-6 py-3 text-base text-edsdarkgreen2 mr-2 hover:no-underline">
            {{ __('GO TO SERVICE') }}
            <img src="static/img/svg/external-link-icon.svg" class="ml-2 w-4">
          </a>
        </div>
      </div>
  </div>
  <!-- End of section for services -->

    <!-- Section 2: quick facts charts -->
    <div class="lg:flex mt-10 mb-12">
      <div class="w-full h-full">
        <div class="lg:flex h-1/2">
          <div class="lg:w-1/4 mb-3 lg:mr-3 bg-edslightgray h-full" style="min-height: 330px;">
            <a href="https://www.energidataservice.dk/dataset/elspotprices" target="_blank">
              <div class="react-me h-1/1" id="quick-fact-0">
                <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
              </div>
            </a>
          </div>
          <div class="lg:w-2/4 mb-3 lg:mr-3 bg-edslightgray h-full" style="min-height: 330px;">
            <a href="https://www.energidataservice.dk/dataset/elspotprices" target="_blank">
              <div class="react-me h-1/1" id="quick-fact-1">
                <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
              </div>
            </a>
          </div>

          <div class="lg:w-1/4 mb-3 p-10 bg-edslightgray">
            <h2 class="text-3xl font-thin text-edsdarkgreen">{{__('Top 5 data sets')}}</h2>
            <div class="after:dataset-line relative max-w-full mt-6 mb-1 ml-6">
              {% for item in topFiveDatasets %}
                <div class="relative pl-12 py-2 text-2xl">
                  <a id="top-dataset-{{ item.slug }}" class="{{'after:dataset-circle-first' if loop.index0 == 0 else 'after:dataset-circle'}} text-edsgreen" target="_blank" href="https://www.energidataservice.dk/dataset/{{ item.slug }}">{{ item.title }}</a>
                </div>
              {% endfor %}
            </div>
          </div>

        </div>
        <div class="lg:flex h-1/2">
          <div class="lg:w-2/4 mb-3 lg:mr-3" style="height: 330px;">
            <a href="https://www.energidataservice.dk/dataset/co2emisprog" target="_blank">
              <div class="react-me h-1/1" id="quick-fact-2">
                <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
              </div>
            </a>
          </div>
          <div class="lg:w-1/4 mb-3 lg:mr-3" style="height: 330px;">
            <a href="https://www.energidataservice.dk/dataset/electricityprodex5minrealtime" target="_blank">
              <div class="react-me h-1/1" id="quick-fact-3">
                <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
              </div>
            </a>
          </div>
          <div class="lg:w-1/4 mb-3" style="height: 330px;">
            <a href="https://www.energidataservice.dk/dataset/gasflow" target="_blank">
              <div class="react-me h-1/1" id="quick-fact-4">
                <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- End of section 2 -->

    <!-- Section 3 -->
    <div class="blockedHTML">
    {% include "partials/cookie-consent-placeholder.njk" %}
      <template class="cookieConsent">
        <div class="lg:flex justify-between">
          <!-- News and operational status -->
          <div class="lg:w-1/3 lg:h-full">
            <div class="lg:flex-col">
              <!-- List of news -->
              <div class="mx-5 mb-5">
                <h2 class="text-5xl uppercase font-thin text-edsdarkgreen">{{__('News')}}</h2>
                <div class="after:news relative max-w-full mt-0 mb-1">
                  {% for item in posts %}
                  <div class="relative pl-12 py-2 border-gray-300 border-solid border-1 text-2xl">
                    <a class="{{'after:post-last' if loop.index0 == 0 else 'after:post'}}" href="/news/{{ item.slug }}">{{ item.title }}</a>
                    <p>
                      <span class="text-gray-400 text-sm">{{ item.modified }}</span>
                    </p>
                  </div>
                  {% endfor %}
                </div>
                <a class="text-edsdarkgreen uppercase text-2xl" href="/news">{{__('See all news')}} &rsaquo;</a>
              </div>
              <!-- End of list of news -->
            </div>
          </div>
          <!-- End of News and operational status -->

          <!-- Operational status -->
            <div class="text-edsdarkgreen p-5 lg:w-2/5">
              <p class="text-5xl uppercase font-thin">OPERATIONAL STATUS</p>
              {% for operationalStatus in operationalStatusPosts %}
              <a href="/news/{{ operationalStatus.slug }}">
                <div class="py-2">
                  <div class="text-2xl text-gray-500">{{ operationalStatus.modified }}</div>
                  <div class="text-2xl text-edsgreen">{{ operationalStatus.title| safe | truncate(100) }}</div>
                </div>
              </a>
              {% endfor %}
            </div>
          <!-- End of operational status -->

          <!-- Newsletter subscription form -->
          <div class="lg:w-1/3 lg:h-full lg:-mt-2">
            <div>
              {% include "subscription-form/form.html" %}
            </div>
          </div>
          <!-- End of Newsletter subscription form -->
        </div>
      </template>
    </div>
    <!-- End of section 3 -->


{% endblock %}

{% block scripts %}
  {% include "subscription-form/import-scripts.html" %}

  <!-- Update top 5 dataset titles -->
  <script>

    async function updateTopFiveDatasetTitles() {
      try {

        const topFiveDatasets = {{ topFiveDatasets | dump | safe }}

        const searchForTopDatasetsUrl = '/metastore/' +
          'search?q=name:' +
          topFiveDatasets.map(d => d.slug).join(" ")

        const metastoreResponseJson =
          await
            (await fetch(searchForTopDatasetsUrl).catch(console.error))
          .json().catch(console.error)

        const metastoreData = metastoreResponseJson.results || []

        metastoreData.forEach( m => {
          const title = m.title
          if (title) {
            const titleElement = document.getElementById('top-dataset-' + m.name)
            if (titleElement) {
              titleElement.textContent = title
            }
          }
        })

      } catch (e) {
        console.log(e)
      }
    }

    updateTopFiveDatasetTitles()

  </script>

<script>
  $(document).ready(function(){
    // Add smooth scrolling to all links
    $("a").on('click', function(event) {

      // Make sure this.hash has a value before overriding default behavior
      if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();

        // Store hash
        var hash = this.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800, function(){

          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        });
      } // End if
    });
  });
</script>

<!-- Add JSX support -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load React and React-dom -->
<script src="https://unpkg.com/react@16.12.0/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js" crossorigin></script>
<!-- Load datapackage-views-js -->
<script src="/static/js/datapackage-views-js/2.e2aff063.chunk.js"></script>
<script src="/static/js/datapackage-views-js/main.5f387688.chunk.js"></script>
<script src="/static/js/datapackage-views-js/runtime~main.a8a9905a.js"></script>
<!-- Prep compiled views so that datapckage-views-js renders quick fact charts: -->
<script type="text/babel">

  const CHART_HEIGHT = 330;
  const TITLE_X_POSITION = 0.05;
  const CHARTS_BG_COLOR = '#F6F6F6';
  const CHARTS_FONT_COLOR = "#08505D";
  const DARK_FONT_COLOR = "#293A4C";
  const TICK_FONT_COLOR = "#9D9C9C";
  const AXES_TICKS = {
    "ticks": "outside",
    "zeroline": false,
    "tickcolor": "#E0E0E0",
    "ticklen": 8,
    tickfont: {
      color: TICK_FONT_COLOR
    },
    fixedrange: true
  };

  const Y_AXIS = {
    ...AXES_TICKS,

  };


  function datastoreSearchUrl(sqlRequest) {
    const apiPath = '/proxy/api/datastore_search_sql';
    return (apiPath + sqlRequest).replace(/\s/g, ' ').replace(/\+/g, '%2B');
  }


  function handleError(err, el) {
    console.error(err);
    el.innerText = `We couldn't fetch data for this graph. Please, try again later.`;
  }
  // 2 elspot price charts - graph and figure

  const elspotPriceSQL = `?sql=
  WITH md AS
          (SELECT max("HourUTC") AS maxTS
          FROM "elspotprices"
          WHERE "HourUTC" < date_trunc('hour', (CURRENT_TIMESTAMP AT TIME ZONE 'UTC') + INTERVAL '1 days')),
       c AS
          (SELECT "HourUTC" AS utc, avg("SpotPriceDKK") AS price
          FROM md, "elspotprices"
          WHERE "PriceArea" IN ('DK1', 'DK2') AND "HourUTC" <= maxTS
          GROUP BY "HourUTC"
          ORDER BY "HourUTC" DESC
          LIMIT 24)
  SELECT "HourDK" AS ts,
          date_trunc('hour', CURRENT_TIMESTAMP AT TIME ZONE 'CEST') as cts,
         price
  FROM c
  INNER JOIN "elspotprices" ON utc = "HourUTC"
  WHERE "PriceArea" = 'DK1'
  `;
  const elspotPriceUrl = datastoreSearchUrl(elspotPriceSQL);
  const quickFact1Container = document.querySelector('#quick-fact-1');
  const quickFact0Container = document.querySelector('#quick-fact-0');
  fetch(elspotPriceUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error(`${response.status} for ${elspotPriceUrl}`);
      }

      response.json()
        .then(responseJson => {
          // data source can respond with nulls, see https://gitlab.com/datopian/eds/eds-pm/issues/170
          // clean data to get only present prices
          let time = [];
          let price = [];
          let currentElspotPrice = "...";
          for (const record of responseJson.result.records) {
            if (record.price && !isNaN(record.price)) {

              let recordPrice = record.price.toFixed(2)
              price.push(recordPrice);

              if (record.ts ===  record.cts) {
                currentElspotPrice = recordPrice;
              }

              time.push(record.ts);
            }
          }

          // elspotPrice graph

          const dataUnit = 'DKK / MWh';

          const resource = {
            name: "elspotPrice",
            _values: responseJson.result.records,
          };

          const datapackage = {
            "views": [
              {
                "id": 1,
                "resources": [resource],
                "specType": "plotly",
                "spec": {
                  "data": [
                    {
                      x: time,
                      y: price,
                      type: "bar",
                      opacity: 0.8,
                      hovertemplate: `%{y} ${dataUnit}<extra></extra>`,
                      hoverinfo: "text",
                    }
                  ],
                  "layout": {
                    "title": {
                      text: `{{ __('Elspot prices') }} - {{ __('electricity prices in the') }}<br>{{ __('Nordic Day Ahead marked') }}, {{ __('in DKK/MWh') }}`,
                      x: TITLE_X_POSITION,
                    },
                    "annotations": [{
                      xref: 'paper',
                      yref: 'paper',
                      xanchor: 'right',
                      xshift: -8,
                      yanchor: 'bottom',
                      yshift: 4,
                      x: 0,
                      y: 1,
                      text: 'DKK',
                      showarrow: false,
                      font: {
                        color: TICK_FONT_COLOR
                      }
                    }],
                    "autosize": true,
                    "plot_bgcolor": CHARTS_BG_COLOR,
                    "paper_bgcolor": CHARTS_BG_COLOR,
                    "font": {
                      "color": CHARTS_FONT_COLOR,
                    },
                    "height": CHART_HEIGHT,
                    "xaxis": {
                      ...AXES_TICKS
                    },
                    "yaxis": {
                      ...Y_AXIS
                    },
                    "colorway": ["#FBD236"],
                  },
                  "config": {
                    "staticPlot": false,
                    "displayModeBar": false,
                    "autosizable": true,
                    "responsive": true
                  },
                  "useResizeHandler": true,
                  "style": {
                    "width": "100%",
                    "height": "100%"
                  }
                }
              }
            ]
          };

          const props = {datapackage: datapackage};
          ReactDOM.render(<DatapackageView {...props} />, quickFact1Container);

          const currentElspotPriceDatapackage = {
            "views": [
              {
                "id": 1,
                "resources": [
                  resource,
                ],
                "specType": "plotly",
                "spec": {
                  "data": [
                    {
                      x: [0],
                      y: [0],
                      mode: 'text',
                      type: "scatter",
                      text: [`${currentElspotPrice}`],
                      hoverinfo: "none",
                      textfont: {
                        size: 42,
                        color: DARK_FONT_COLOR,
                      },
                    }
                  ],
                  "layout": {
                    "title": {
                      text: `{{ __('Current elspot price') }},<br>{{ __('in DKK/MWh') }}`,
                      x: TITLE_X_POSITION,
                    },
                    "autosize": true,
                    "margin": {
                      "l": 10,
                      "r": 10,
                    },
                    "plot_bgcolor": CHARTS_BG_COLOR,
                    "paper_bgcolor": CHARTS_BG_COLOR,
                    "font": {
                      "color": CHARTS_FONT_COLOR
                    },
                    "height": CHART_HEIGHT,
                    "xaxis": {
                      "ticks": "",
                      "showgrid": false,
                      "zeroline": false,
                      "showticklabels": false,
                      fixedrange: true
                    },
                    "yaxis": {
                      "ticks": "",
                      "showgrid": false,
                      "zeroline": false,
                      "showticklabels": false,
                      fixedrange: true
                    },
                  },
                  "config": {
                    "staticPlot": false,
                    "displayModeBar": false,
                    "autosizable": true,
                    "responsive": true
                  },
                  "useResizeHandler": true,
                  "style": {
                    "width": "100%",
                    "height": "100%"
                  }
                }
              }
            ]
          };

          const currentElspotPriceProps = {datapackage: currentElspotPriceDatapackage};

          let currentElspotPriceChart = <DatapackageView {...currentElspotPriceProps} />;
          ReactDOM.render(currentElspotPriceChart, quickFact0Container);

        }).catch(err => {
          handleError(err, quickFact1Container);
          handleError(err, quickFact0Container);
          return;
        })
    }).catch(err => {
      handleError(err, quickFact1Container);
      handleError(err, quickFact0Container);
      return;
    });

  // CO2 emissions
  const numberOfHours = 8;
  const co2emisSQL = `?sql=
    WITH b AS
      (SELECT "Minutes5UTC",
              date_trunc('hour', "Minutes5UTC") AS hourutc,
              date_trunc('hour', "Minutes5DK") AS hourdk,
              "PriceArea",
              "CO2Emission"
       FROM "co2emisprog"
       WHERE "PriceArea" = 'DK1'
         AND "Minutes5UTC" >= date_trunc('hour', (CURRENT_TIMESTAMP AT TIME ZONE 'UTC'))
         AND "Minutes5UTC" < date_trunc('hour', ((CURRENT_TIMESTAMP AT TIME ZONE 'UTC') + INTERVAL '${numberOfHours} hours')) ) ,
         a AS
      (SELECT hourutc,
              CAST(AVG("CO2Emission") AS INTEGER) AS CO2
       FROM b
       GROUP BY hourutc
       ORDER BY hourutc ASC
       LIMIT ${numberOfHours})
    SELECT DISTINCT to_char(b.hourDK, 'HH24:MI') AS "Minutes5DK",
                    b."PriceArea",
                    b.hourDK,
                    a.CO2 AS "CO2Emission"
    FROM a
    INNER JOIN b ON a.hourutc = b.hourutc
    ORDER BY b.hourDK ASC
    LIMIT ${numberOfHours}
  `;
  const co2emisUrl = datastoreSearchUrl(co2emisSQL);
  const quickFact2Container = document.querySelector('#quick-fact-2');
  fetch(co2emisUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error(`${response.status} for ${co2emisUrl}`);
      }

      response.json().then(responseJson => {
        var resource = {
          name: 'co2emission',
          _values: responseJson.result.records,
        };

        let x = responseJson.result.records.map(r => r.Minutes5DK);
        let y = responseJson.result.records.map(r => r.CO2Emission);

        const dataUnit = "g / kWh";

        const dataFormat = {
          x: x,
          y: y,
          "type": "scatter",
          "fill": 'tozeroy',
          hovertemplate: `%{y} ${dataUnit}<extra></extra>`,
          hoverinfo: "text",
        };

        const datapackage = {
          "views": [
            {
              "id": 1,
              "resources": [
                resource,
              ],
              "specType": "plotly",
              "spec": {
                "data": [
                  Object.assign({
                    }, dataFormat
                  )
                ],
                "layout": {
                  "title": {
                    text: `CO<sub>2</sub> {{ __('emission') }} {{ __('from electricity production') }}<br>{{ __('next 8 hours') }}, {{ __('in g/kWh') }}`,
                    x: TITLE_X_POSITION,
                  },
                  "annotations": [{
                    xref: 'paper',
                    yref: 'paper',
                    xanchor: 'right',
                    xshift: -8,
                    yanchor: 'middle',
                    yshift: 4,
                    x: 0,
                    y: 1,
                    text: dataUnit,
                    showarrow: false,
                    font: {
                      color: TICK_FONT_COLOR
                    }
                  }],
                  "autosize": true,
                  "plot_bgcolor": CHARTS_BG_COLOR,
                  "paper_bgcolor": CHARTS_BG_COLOR,
                  "font": {
                    "color": CHARTS_FONT_COLOR
                  },
                  "height": CHART_HEIGHT,
                  "xaxis": {
                    ...AXES_TICKS
                  },
                  "yaxis": {
                    ...Y_AXIS,
                  },
                  "barmode": "stack",
                  "colorway": ["#F8AE3C"],
                },
                "config": {
                  "staticPlot": false,
                  "displayModeBar": false,
                  "autosizable": true,
                  "responsive": true
                },
                "useResizeHandler": true,
                "style": {
                  "width": "100%",
                  "height": "100%"
                }
              }
            }
          ]
        };
        const props = {datapackage: datapackage};

        ReactDOM.render(<DatapackageView {...props} />, quickFact2Container);
      }).catch(err => {
        handleError(err, quickFact2Container);
        return;
      })
    })
    .catch(err => {
      handleError(err, quickFact2Container);
      return;
    });

  const pieChartTemplate = {
    "views": [
      {
        "id": 1,
        "resources": [
          {
            "name": "pie_chart_resource",
            "_values": [
              {}
            ]
          },
        ],
        "specType": "plotly",
        "spec": {
          "data": [
            {
              "type": "pie",
              "hole": 0.75,
              "textposition": 'inside',
              "textfont": {
                "size": 22,
                color: "#08505D",
              },
              textinfo: "text",
              hoverinfo: "label+percent",
              direction: "clockwise",
              sort: false,
            }
          ],
          "layout": {
            "title": {
              text: "",
              x: TITLE_X_POSITION,
              y: 0.9,
            },
            annotations: [
              {
                font: {
                  size: 30,
                  color: DARK_FONT_COLOR,
                },
                showarrow: false,
                text: '',
                x: 0.5,
                y: 0.5
              },
            ],
            "autosize": true,
            "plot_bgcolor": CHARTS_BG_COLOR,
            "paper_bgcolor": CHARTS_BG_COLOR,
            "font": {
              "color": CHARTS_FONT_COLOR,
            },
            "height": CHART_HEIGHT,
            "margin": {
              "l": 10,
              "r": 10,
            },
            "xaxis": {
              "ticks": 'outside',
              "zeroline": false,
              fixedrange: true
            },
            "yaxis": {
              "ticks": "",
              "showgrid": false,
              "zeroline": false,
              "showticklabels": false,
              fixedrange: true
            },
            showlegend: false,
          },
          "config": {
            "staticPlot": false,
            "displayModeBar": false,
            "autosizable": true,
            "responsive": true
          },
          "useResizeHandler": true,
          "style": {
            "width": "100%",
            "height": "100%"
          }
        }
      }
    ]
  };

  const renewableSQL = `?sql=
  SELECT cast(("s1"+"s2")/("s1"+"s2"+"p1"+"p2")*100 AS int) AS "proc", ts
  FROM
    (SELECT *
     FROM (
             (SELECT "OffshoreWindPower" + "OnshoreWindPower" + "SolarPower" AS s1,
                                             "ProductionLt100MW" + "ProductionGe100MW" AS p1,
                                            "Minutes5DK" AS ts,
                                            "Minutes5UTC" AS h1
              FROM electricityprodex5minrealtime
              WHERE "SolarPower" IS NOT NULL
                AND "PriceArea" = 'DK1') AS dk1
           INNER JOIN
             (SELECT "OffshoreWindPower" + "OnshoreWindPower" + "SolarPower" AS s2,
                                             "ProductionLt100MW" + "ProductionGe100MW" AS p2,
                                            "Minutes5DK" AS ts2,
                                            "Minutes5UTC" AS h2
              FROM electricityprodex5minrealtime
              WHERE "SolarPower" IS NOT NULL
                AND "PriceArea" = 'DK2') AS dk2 ON h1 = h2)
     ORDER BY h1 DESC
     LIMIT 1) AS detail
  `;
  const renewableUrl = datastoreSearchUrl(renewableSQL);
  const quickFact3Container = document.querySelector('#quick-fact-3');
  fetch(renewableUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error(`${response.status} for ${renewableUrl}`);
      }

      response.json().then(responseJson => {
        const datapackage = JSON.parse(JSON.stringify(pieChartTemplate));

        const shareOfRenewables = responseJson.result.records[0].proc;

        if (Number.isNaN(shareOfRenewables)) {
          throw "shareOfRenewables is not a number!";
        }

        datapackage.views[0].spec.data[0].values = [shareOfRenewables, 100 - shareOfRenewables,];
        datapackage.views[0].spec.data[0].labels = ["renewables", "other"];

        datapackage.views[0].spec.layout.annotations[0].text = `${shareOfRenewables}%`;
        datapackage.views[0].spec.layout.annotations[0].hovertext = `${shareOfRenewables}%`;

        let titleLines = ["{{ __('Share of renewables') }}", "{{ __('in electricity production') }}"]
        const locale = '{{ language }}'
        const dateOptions = {dateStyle: 'long', timeStyle: 'short'}
        titleLines.push(new Date(responseJson.result.records[0].ts).toLocaleString(locale, dateOptions))

        datapackage.views[0].spec.layout.title.text = titleLines.join('<br>');
        datapackage.views[0].spec.layout.colorway = ["#9FCD91", "#E4F1E1"];

        const props = {datapackage: datapackage};

        ReactDOM.render(<DatapackageView {...props} />, quickFact3Container);
      }).catch(err => {
        handleError(err, quickFact3Container);
        return;
      })
    })
    .catch(err => {
      handleError(err, quickFact3Container);
      return;
    });

  const shareOfBioGas = `?sql=
    SELECT "GasDay",
           "KWhFromBiogas",
           "KWhToDenmark",
           round(CAST(float8 ("KWhFromBiogas" * 100 / ABS("KWhToDenmark")) AS numeric), 1) AS "Share"
    FROM "gasflow"
    ORDER BY "GasDay" DESC
    LIMIT 1`;
  const shareOfBioGasUrl = datastoreSearchUrl(shareOfBioGas);
  const quickFact4Container = document.querySelector('#quick-fact-4');
  fetch(shareOfBioGasUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error(`${response.status} for ${shareOfBioGasUrl}`);
      }

      response.json().then(responseJson => {
        const datapackage = JSON.parse(JSON.stringify(pieChartTemplate));

        const shareOfBioGas = parseFloat(responseJson.result.records[0].Share);

        if (Number.isNaN(shareOfBioGas)) {
          throw "shareOfBioGas is not a number!";
        }

        datapackage.views[0].spec.data[0].values = [shareOfBioGas, 100 - shareOfBioGas];
        datapackage.views[0].spec.data[0].labels = ["biogas", "other"];

        datapackage.views[0].spec.layout.annotations[0].text = `${shareOfBioGas}%`;

        let titleLines = ["{{ __('Share of biogas') }}", "{{ __('in the gas system') }}"]
        const locale = '{{ language }}'
        const dateOptions = {dateStyle: 'long'}
        titleLines.push(new Date(responseJson.result.records[0].GasDay).toLocaleString(locale, dateOptions))

        datapackage.views[0].spec.layout.title.text = titleLines.join('<br>');
        datapackage.views[0].spec.layout.colorway = ["#00A6BC", "#E7F6F8"];

        const props = {datapackage: datapackage};
        ReactDOM.render(<DatapackageView {...props} />, quickFact4Container);
      }).catch(err => {
        handleError(err, quickFact4Container);
        return;
      })
    })
    .catch(err => {
      handleError(err, quickFact4Container);
      return;
    })

</script>
{% endblock %}