{#
  The chart macros. Every SVG on /progress comes through here, and every coordinate in it
  was computed by core/chart.py — this file prints, it does not calculate. That split is
  the whole point: the geometry has tests (tests/test_chart.py), and a Jinja loop that
  builds polyline points out of `{% set %}` list mutation does not.

  🔴 NO LIBRARY, AND NOT AS A SACRIFICE. The app's CSP is `default-src 'self'` and
  nothing on this box is fetched from anywhere. A line chart is a list of coordinates.

  🔴 THE GAP RULE IS VISIBLE HERE: a series renders as SEVERAL polylines, one per run of
  consecutive measured points, plus dots for the runs of one. A single polyline through
  the lot would draw a confident line across a fortnight nobody measured.
#}

{% macro axes(c) %}
  {% for g in c.grid %}
  <line class="gl" x1="{{ c.box.x }}" y1="{{ g.y }}" x2="{{ c.box.x1 }}" y2="{{ g.y }}"/>
  <text class="gt" x="{{ c.box.x - 6 }}" y="{{ g.y + 3.5 }}" text-anchor="end">{{ g.label }}</text>
  {% endfor %}
  {% for t in c.xticks %}
  <text class="xt" x="{{ t.x }}" y="{{ c.h - 6 }}" text-anchor="{{ t.anchor }}">{{ t.label }}</text>
  {% endfor %}
{% endmacro %}

{% macro empty(c) %}
  {# A chart that cannot be drawn says so in words. Drawing it anyway yields a flat
     stroke, and a flat stroke reads as "steady" about a thing measured once. #}
  <p class="hint nodata">{{ c.why }}</p>
{% endmacro %}

{% macro line(c, note="") %}
<figure class="chart">
  {% if not c.ok %}{{ empty(c) }}{% else %}
  <svg class="chartsvg" viewBox="0 0 {{ c.w }} {{ c.h }}" role="img" aria-label="{{ c.aria }}">
    {{ axes(c) }}
    {% for s in c.series %}{% if not s.empty %}
      {% for pts in s.runs %}<polyline class="ln" points="{{ pts }}" stroke="{{ s.color }}"/>{% endfor %}
      {% for d in s.dots %}<circle class="dot" cx="{{ d.x }}" cy="{{ d.y }}" r="2.4" fill="{{ s.color }}"/>{% endfor %}
    {% endif %}{% endfor %}
  </svg>
  <figcaption class="legend">
    {% for s in c.series %}
    <span class="key{{ ' off' if s.empty }}"><i style="background:{{ s.color }}"></i>{{ s.label }}
      <small>{{ s.range }}{% if not s.empty %} · {{ s.n }}/{{ c.n }} measured{% endif %}</small></span>
    {% endfor %}
  </figcaption>
  {% if c.normalise == 'each' %}
  {# 🔴 LOAD-BEARING SENTENCE, not a caveat. With each line scaled to its own range the
     vertical DISTANCE between two of them means nothing at all, and a reader who is not
     told that will read it as a comparison. The shared thing is the time axis. #}
  <p class="hint axiswarn">Each line is scaled to its own range (shown above) so they fit one
    picture. Only the <b>time axis is shared</b> — how far apart two lines sit means nothing.</p>
  {% endif %}
  {% if note %}<p class="hint">{{ note }}</p>{% endif %}
  {% endif %}
</figure>
{% endmacro %}

{% macro bar(c, note="", compact=false) %}
<figure class="chart">
  {% if not c.ok %}{{ empty(c) }}{% else %}
  <svg class="chartsvg" viewBox="0 0 {{ c.w }} {{ c.h }}" role="img" aria-label="{{ c.aria }}">
    {{ axes(c) }}
    {% for b in c.bars %}
      {% if b.known %}
      <rect class="br{{ ' part' if b.partial }}" x="{{ b.x }}" y="{{ b.y }}" width="{{ b.w }}"
            height="{{ b.h }}" fill="{{ c.color }}"><title>{{ b.label }} · {{ b.text }}{{ ' · ' ~ c.partial_note if b.partial }}</title></rect>
      {% else %}
      {# 🔴 NOT A ZERO BAR, AND NOT AN EMPTY SLOT EITHER. A week before the log began is a
         week nobody was watching; a zero-height bar there is visually identical to a week
         you did nothing, which is the exact confusion the None exists to prevent. It is
         drawn as a faint FULL-HEIGHT band, so the un-watched stretch reads as "off the
         chart" rather than as a run of zeros. #}
      <rect class="br none" x="{{ b.x }}" y="{{ c.box.y }}" width="{{ b.w }}" height="{{ c.box.h }}"><title>{{ b.label }} · no data — before this log began</title></rect>
      {% endif %}
    {% endfor %}
  </svg>
  {# `compact` drops the legend because the grid it sits in states it once. Three
     identical three-line legends under three small charts is noise, and it crowds out
     the charts themselves. #}
  {% if not compact %}
  <figcaption class="legend">
    <span class="key"><i style="background:{{ c.color }}"></i>{{ c.title }}</span>
    {% if c.partial is not none %}<span class="key"><i class="hollow"></i>this week so far — {{ c.partial_note }}</span>{% endif %}
    {% if c.bars | rejectattr('known') | list %}<span class="key"><i class="nodata"></i>before this log began</span>{% endif %}
  </figcaption>
  {% endif %}
  {% if note %}<p class="hint">{{ note }}</p>{% endif %}
  {% endif %}
</figure>
{% endmacro %}

{% macro panel(title, body, note="", doc="") %}
<section class="card chartcard">
  <h3>{{ title }}{% if doc %}<a class="gear" href="/guide/{{ doc }}" title="what this measures">📖</a>{% endif %}</h3>
  {% if note %}<p class="hint">{{ note }}</p>{% endif %}
  {{ body }}
</section>
{% endmacro %}