{% extends base_template %}
{% import "macros.j2" as macros with context %}
{% set report_name = report.report_parameters.name %}

{% block body %}
<style type="text/css" scoped>
  .report-table-wrapper{
      max-width: 100%;
      max-height: 100%;
      position: relative;
      overflow-x: scroll;
  }
  .report-table-wrapper caption{
      max-width: 40vw;
      position: sticky;
      left: 0;
      top: 0;
  }
  .report-table-wrapper table.table{
      overflow: unset;
      table-layout: auto;
  }
  .report-table-wrapper table.table tr th:first-child,
  .report-table-wrapper table.table tr td:first-child{
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      top: auto;
      background-color: #fff;
      border-right: #dee2e6;
      width: fit-content;
      font-weight: 700
  }
</style>
{% block report_title %}
<h1 id="report-title">{{ report_name }}</h1>
{% endblock %}
{% block report_description %}
<p>
  This report of solar forecast accuracy was automatically generated using the
  <a href="https://solarforecastarbiter.org">Solar Forecast Arbiter</a>.
</p>
{% endblock %}
{% block download %}{% endblock %}

{% block toc %}
<ul>
  <li><a href="#report-metadata">Report Metadata</a></li>
  {% if report.report_parameters.costs | length > 0 %}
  <ul>
    <li><a href="#costparams">Cost Parameters</a></li>
  </ul>
  {% endif %}
  <li><a href="#data">Data</a></li>
  <ul>
    <li><a href="#observations-and-forecasts">Observations and Forecasts</a></li>
    <li><a href="#data-preprocessing">Data Preprocessing</a></li>
    <ul>
      <li><a href="#data-preprocessing-summary">Summary</a></li>
      <li><a href="#data-validation-resampling">Validation and Resampling</a></li>
    </ul>
    <li><a href="#summarystats">Summary Statistics</a></li>
  </ul>
  <li><a href="#metrics">Metrics</a></li>
  {% if include_metrics_toc | default(True) %}
  <ul>
    {% for category in report.report_parameters.categories %}
      <li><a href="#{{ category }}-analysis">{{ human_categories[category].title() }} Analysis</a></li>
    {% endfor %}
  </ul>
  {% endif %}
  <li><a href="#versions">Versions</a></li>
</ul>
{% endblock %}

{% block errors %}
{% set messages = (report.raw_report.messages | map(attribute="message") | list) + (templating_messages | default([]))%}
{% if messages | length > 0 %}
<div class="alert alert-warning">
  {% for mesg in messages %}
  <h5>{{ mesg }}</h5>
  {% endfor %}
</div>
{% endif %}
{% endblock %}

{% block reportmetadata %}
<h2 id="report-metadata">Report Metadata</h2>
<ul>
  <li>Name: {{ report_name }}</li>
  <li>Start: {{ report.report_parameters.start }}</li>
  <li>End: {{ report.report_parameters.end }}</li>
  <li>Generated at: {{ report.raw_report.generated_at }}</li>
</ul>

{% set costs = report.report_parameters.costs %}
{% if costs | length > 0 %}
<h4 id="costparams">Cost Parameters</h4>
{% for cost in costs %}
<div id="cost-{{ cost.name | figure_name_filter }}" class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapse-{{ cost.name | figure_name_filter }}">
      <h5>{{ cost.name }}</h5>
    </a>
  </div>
  <div id="collapse-{{ cost.name | figure_name_filter }}" class="collapse" data-parent="#cost-{{ cost.name | figure_name_filter }}">
    <div class="card-body">
      <pre>{{ cost.to_dict() | pretty_json }}</pre>
    </div>
  </div>
</div>
{% endfor %}
{% endif %}
{% endblock %}

{% block data %}
<h2 id="data">Data</h2>
<p>
  This report includes forecast and observation data available from {{ report.report_parameters.start }} to {{ report.report_parameters.end }}.
{% endblock %}
{% block obsandfx %}
<h3 id="observations-and-forecasts">Observations and Forecasts</h3>
{% include "obsfx_table.html" %}

<p>
  More metadata for the objects in this report may be downloaded in
  <a href="javascript:download_metadata_as_json('{{ report_name }}')">JSON format</a>.
</p>

{% if timeseries_spec is defined %}
<p>
  The plots below show the filtered, resampled, and aligned time series of
  observation and forecast data as well as the distribution of forecast vs.
  observation data.
  This resampled and realigned timeseries data may also be downloaded in
  <a href="javascript:download_timeseries_data_as_csv('{{ report_name }}')">CSV format</a>.
</p>

<p>Controls to pan, zoom, and save the plot are shown on the
right. Clicking on an item in the legend will hide/show it.</p>

<div id="timeseries-div"></div>
{% if includes_distribution %}
<p>
  For forecasts parameterized symmetrically around the 50th percentile,
  brighter colors indicate percentiles farther from the 50th percentile and
  darker colors indicate percentiles closer to the 50th percentile. For forecasts
  parameterized asymmetrically around the 50th percentile, brighter colors
  indicate smaller percentiles and darker colors indicate larger percentiles.
  Use the hover tool to determine the percentile.
</p>
{% endif %}

<script>
ts_plot = JSON.parse('{{ timeseries_spec | safe }}');
Object.assign(ts_plot,{config: {responsive: true}});
Plotly.newPlot("timeseries-div", ts_plot);
</script>
{{ macros.download_timeseries_script () | safe }}
{% endif %}

<div id="scatter-div"></div>

{% if scatter_spec is defined %}
<script>
scat_plot = JSON.parse('{{ scatter_spec | safe }}');
Object.assign(scat_plot,{config: {responsive: true}});
Plotly.newPlot("scatter-div", scat_plot);
</script>
{% endif %}

{% if timeseries_prob_spec is defined %}
<p>The plot below shows probability vs. time for probabilistic forecasts
  with <em>axis='x'</em>.
</p>
<div id="timeseries-prob-div"></div>
<script>
  ts_prob_plot = JSON.parse('{{ timeseries_prob_spec | safe }}');
  Object.assign(ts_prob_plot,{config: {responsive: true}});
  Plotly.newPlot("timeseries-prob-div", ts_prob_plot);
</script>
{% endif %}
{% include "load_metadata.html" %}
{{ macros.download_metadata_script () | safe }}
{% endblock %}

<h3 id="data-preprocessing">Data Preprocessing</h3>
{% block dataresampleandalign %}
<h4 id="data-preprocessing-summary">Summary</h4>
{% include "data_resampling_preamble" %}
{{ macros.preprocessing_table(report.raw_report.processed_forecasts_observations) }}
<br>
{% include "data_resampling_postamble" %}
{% endblock %}

{% block datavalidation %}
<h4 id="data-validation-resampling">Validation and Resampling</h4>
{% include "data_validation_pre_text" %}

{% if report.report_parameters.filters %}
  {{ macros.validation_metadata_table(report.report_parameters.filters) }}
  <br>
  {{ macros.validation_results_table(report.raw_report.processed_forecasts_observations, true) }}
  {% if report.raw_report.processed_forecasts_observations | unique_flags_filter(false) | length %}
  {{ macros.validation_results_table(report.raw_report.processed_forecasts_observations, false) }}
  {% else %}
  No filters with discard after resample were available because this report was created with Solar Forecast Arbiter version 1.0rc3 or earlier (find the <a href="#versions">version information</a> at the end of the report).
  Recompute the report to apply the revised data filtering and resampling procedures.<br>
  {% endif %}
  <br>
{% else %}
  <div class="alert alert-info">No filters applied</div>
{% endif %}

{% include "data_validation_post_text" %}
{% endblock %}

{% block summarystat %}
<h3 id="summarystats">Summary Statistics</h2>
<p>
  A table of summary statistics for the resampled observations and deterministic
  forecasts over the entire study period is shown below. Statistics for other
  categories may be downloaded in
  <a href="javascript:download_stats_as_csv('{{ report_name }}')">CSV format</a>
  or <a href="javascript:download_stats_as_json('{{ report_name }}')">JSON format</a>.
</p>
{{ macros.summary_stats_table_vert(report.raw_report.metrics | selectattr("is_summary"), "total") }}
<br>
{% endblock %}

{% block metrics %}
<h2 id="metrics">Metrics</h2>
{% include "metrics_meta_table.html" %}
<p>
  A table of metrics over the entire study period and figures for the selected
  categories are shown below.
  Metrics may be downloaded in
  <a href="javascript:download_metrics_as_csv('{{ report_name }}')">CSV format</a>
  or <a href="javascript:download_metrics_as_json('{{ report_name }}')">JSON format</a>.
</p>

{{ macros.metric_table_fx_vert(report.raw_report.metrics | rejectattr("is_summary"), "total", report.report_parameters.metrics) }}

<script>var metric_plots = {};</script>
<div id="metric-plot-wrapper">
{% for category in report.report_parameters.categories %}
<h3 id="{{ category }}-analysis">{{ human_categories[category].title() }} Analysis</h3>
  {% if category_blurbs is defined %}
<p>{{ category_blurbs[category] }}</p>
  {% endif %}
<br>
  {% for metric in report.report_parameters.metrics %}
    {% for rep_fig in report.raw_report.plots.figures %}
      {% if rep_fig.category == category and rep_fig.metric == metric %}
      {% set plot_id = (category+'_'+metric+'_'+rep_fig.name) | figure_name_filter %}
    <div class="metric-block" id="{{ plot_id }}" data-category="{{ rep_fig.category }}" data-metric="{{ rep_fig.metric }}" data-forecast="{{ rep_fig.name }}">
        <script>plot=JSON.parse({{ rep_fig.spec | tojson }});
                Object.assign(plot,{config: {responsive: true}});
                metric_plots['{{plot_id}}'] = plot;</script></div>
      {% endif %}
    {% endfor %}
  {% endfor %}
{% endfor %}
</div>
{% include "load_metrics.html" %}
{{ macros.download_metrics_script () | safe }}
{% endblock %}


{% block versions %}
<h2 id="versions">Versions</h2>
{% include "versions.html" %}
{% endblock %}
{% endblock %}
