{% 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;
      border-right: #dee2e6;
      width: fit-content;
      font-weight: 700
  }

  .report-table-wrapper table.table tr th:first-child,
  .report-table-wrapper table.table tr:nth-child(2n) td:first-child{
      background-color: #fff;
  }
  .report-table-wrapper table.table tr:not(first-child) th:first-child,
  .report-table-wrapper table.table tr td:first-child {
      box-shadow: 2px 0px 0px #dee2e6;
  }
  .report-table-wrapper table.table tr:nth-child(2n+1) td:first-child {
      background-color: #f2f2f2;
  }
  /*Add bold lines between observation/forecast/reference forecast in summary table*/
  .report-table-wrapper table.summary-stats-table-vert th[colspan="5"]:not(first-child) {
      border-right: 2px solid black;
  }
  .report-table-wrapper table.summary-stats-table-vert tr:nth-child(2) th:nth-child(5n+6) {
      border-right: 2px solid black;
  }
  .report-table-wrapper table.summary-stats-table-vert tr:nth-child(n+1) td:nth-child(5n+6) {
      border-right: 2px solid black;
  }
  .obsfx-table td:first-child {
      font-weight: 700;
  }
  details {
    border-bottom: 1px solid #dee2e6;
    padding: 0.5em;
    margin: 0.5em;
  }
  details summary > * {
    display: inline;
  }
  details[open] {
    border-bottom: unset;
  }
  details[open] > summary {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
  }
</style>
{% block report_title %}
<h1 id="report-title">{{ report_name }}</h1>
{% endblock %}
{% block report_description %}
<p>
  This report of 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 %}
  {% if report.raw_report.outages | length > 0 %}
  <ul>
    <li><a href="#outages">Outages</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="#preprocessing-procedure">Procedure</a></li>
      <li><a href="#data-validation-resampling">Validation and Resampling</a></li>
      <li><a href="#preprocessing-results">Results</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>
  {% else %}
  <ul>
    <li><a href="#metrics-plots">Metrics Plots</a></li>
  </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 report.outages != report.raw_report.outages %}
  {% do messages.append(
    "Outages have been modified since the report was last computed. "
    "Recompute to use the updated outages.")
   %}
{% endif %}

{% 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 %}
{% if report.raw_report.outages | length > 0 %}
<h4 id="outages">Outages</h4>
<p>
Forecast submissions that fall within the periods listed below are excluded from analysis.
</p>
<table class="table">
  <thead>
    <tr>
      <th>Outage Start</th>
      <th>Outage End</th>
    </tr>
  </thead>
  <tbody>
    {% for outage in report.raw_report.outages %}
    <tr>
      <td>{{ outage['start'] }}</td>
      <td>{{ outage['end'] }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% 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 below.
  <details id="timeseries-downloads">
    <summary>Download timeseries</summary>
  </details>
</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>
var 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 %}
<details id="preprocessing-procedure" open="">
  <summary>
    <h4>Procedure</h4>
  </summary>
  {% include "data_resampling_preamble" %}
</details>
{% endblock %}

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


{% if report.report_parameters.filters %}
  {{ macros.validation_metadata_table(report.report_parameters.filters) }}
  {{ 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 %}
{% else %}
  <div class="alert alert-info">No filters applied</div>
{% endif %}

<h4 id="preprocessing-results" class="anchor">Results</h4>

{{ macros.preprocessing_table(report.raw_report.processed_forecasts_observations) }}

{% include "data_resampling_postamble" %}
{% 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 available 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>
{% if "total" in report.report_parameters.categories %}
  {{ macros.summary_stats_table_vert(report.raw_report.metrics | selectattr("is_summary"), "total") }}
{% else %}
  <div class="alert alert-warning">
    <h5>Total metrics not selected in report configuration. Summary total statistics table not available. See CSV/JSON files for other summary statistics.</h5>
  </div>
{% endif %}
<br>
{% endblock %}

{% block metrics %}
<h2 id="metrics">Metrics</h2>
{% include "metrics_meta_table.html" %}

{% if "total" in report.report_parameters.categories %}
  {{ macros.metric_table_fx_vert(report.raw_report.metrics | rejectattr("is_summary"), "total", report.report_parameters.metrics, true) }}
{% else %}
  <div class="alert alert-warning">
    <h5>Total metrics not selected in report configuration. Total metrics table not available. See CSV/JSON files for other metrics.</h5>
  </div>
{% endif %}

<h3 id="metrics-plots">Metrics Plots</h3>
<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 %}
