thermograph/frontend/server/internal/render/templates/records.html.tmpl

{{/* Ported from templates/records.html.j2. Extra data (formatted by the
     handler inside unit_for_country scope, as in Python):
     .Breadcrumb; .City (needs .Slug); .Display/.Name string; .YearRange [2]int;
     .Rows []{Label string; High, Low template.HTML; HighDate, LowDate string}
       — Low is either the formatted metric value or the "N-day dry spell"
       text, LowDate already "—"-defaulted (content.py records_page);
     .Monthly []{Name, Slug string; High, Low side} and
     .Seasonal []{Name, Span string; High, Low side} where a side is
       {Warm, Cold *{Cls string; Txt template.HTML; Date string}};
     .Hemisphere string; .AllTime contentapi.AllTimeRecords (raw floats —
     .Fmt.Temp runs in the template, like Jinja's temp());
     .ToolHref string (full "{base}/#{lat:.5f},{lon:.5f}" — composed inline the
     fragment comma would be %-escaped by html/template's urlEscaper);
     .JSONLDStr template.JS (compacted raw payload bytes — the |safe site;
     trusted backend-owned JSON-LD, never re-marshaled through a Go map). */}}
{{/* A metric's two extremes — ▲ warmest and ▼ coldest it has ever been — as tinted
   chips with the date each occurred. Used for the daytime-high and overnight-low
   columns of the month and season tables. (Jinja macro `extremes`.) */}}
{{define "extremes" -}}
{{if and .Warm .Cold -}}
<div class="rec-ext"><span class="rec-arrow up" aria-hidden="true">▲</span><span class="t-inline t-{{.Warm.Cls}}">{{.Warm.Txt}}</span><span class="rec-on">{{.Warm.Date}}</span></div>
<div class="rec-ext"><span class="rec-arrow down" aria-hidden="true">▼</span><span class="t-inline t-{{.Cold.Cls}}">{{.Cold.Txt}}</span><span class="rec-on">{{.Cold.Date}}</span></div>
{{else -}}
—{{end}}{{end}}{{template "base_head_start" .}}{{template "base_head_end" .}}<script type="application/ld+json">{{.JSONLDStr}}</script>{{template "base_body_start" .}}{{template "breadcrumb" .}}
<article class="climate-page">
  <h1>{{.Display}} weather records</h1>
  <p class="lede">Record high and low temperatures for <b>{{.Display}}</b>, by month, by season, and
     all-time, with the dates they occurred, across {{index .YearRange 0}}–{{index .YearRange 1}} of daily
     climate history.{{if and .AllTime.Tmax .AllTime.Tmin}} Its hottest day on record reached
     {{.Fmt.Temp .AllTime.Tmax.Max}} on {{.AllTime.Tmax.MaxDate}}; its coldest fell to
     {{.Fmt.Temp .AllTime.Tmin.Min}} on {{.AllTime.Tmin.MinDate}}.{{end}}</p>

  <section class="climate-records-section">
    <h2>Records by month</h2>
    <p>The warmest (▲) and coldest (▼) both the daytime high and the overnight low have ever been in
       each calendar month, so each column shows its record high <i>and</i> its record low. Tap a
       month for its full averages and typical range.</p>
    <div class="table-wrap">
      <table class="normals-table records-table records-ext">
        <thead><tr><th>Month</th><th>Daytime high</th><th>Overnight low</th></tr></thead>
        <tbody>
{{range .Monthly}}          <tr>
            <td><a href="{{$.Base}}/climate/{{$.City.Slug}}/{{.Slug}}">{{.Name}}</a></td>
            <td>{{template "extremes" .High}}</td>
            <td>{{template "extremes" .Low}}</td>
          </tr>
{{end}}        </tbody>
      </table>
    </div>
  </section>

  <section class="climate-records-section">
    <h2>Records by season</h2>
    <p>The warmest (▲) and coldest (▼) both the daytime high and the overnight low have reached in each
       meteorological season ({{.Hemisphere}} Hemisphere, each a three-month span).</p>
    <div class="table-wrap">
      <table class="normals-table records-table records-ext">
        <thead><tr><th>Season</th><th>Daytime high</th><th>Overnight low</th></tr></thead>
        <tbody>
{{range .Seasonal}}          <tr>
            <td>{{.Name}} <span class="season-span">({{.Span}})</span></td>
            <td>{{template "extremes" .High}}</td>
            <td>{{template "extremes" .Low}}</td>
          </tr>
{{end}}        </tbody>
      </table>
    </div>
  </section>

  <section class="climate-records-section">
    <h2>All-time records</h2>
    <p>The most extreme value {{.Name}} has recorded for each metric across its entire history.</p>
    <div class="records-grid">
{{range .Rows}}      <div class="record-card">
        <h3 class="rc-metric">{{.Label}}</h3>
        <div class="rc-row rc-high">
          <span class="rc-tag">{{if eq .Label "Precip"}}Wettest{{else}}Highest{{end}}</span>
          <span class="rc-val">{{.High}}</span>
          <span class="rc-date">{{.HighDate}}</span>
        </div>
        <div class="rc-row rc-low">
          <span class="rc-tag">{{if eq .Label "Precip"}}Driest{{else}}Lowest{{end}}</span>
          <span class="rc-val">{{.Low}}</span>
          <span class="rc-date">{{.LowDate}}</span>
        </div>
      </div>
{{end}}    </div>
    <p class="records-note muted">For rainfall, the “driest” figure is the <b>longest run of consecutive
       days without measurable rain</b>, dated to when that dry spell began.</p>
  </section>

  <p><a class="cta" href="{{.ToolHref}}">Grade {{.Name}}'s weather now →</a></p>
  <p class="climate-foot muted"><a href="{{.Base}}/climate/{{.City.Slug}}">‹ Back to {{.Name}} climate</a></p>
</article>
{{template "base_body_end" .}}{{template "base_scripts_default" .}}{{template "base_tail" .}}