{#- Shared helpers: bilingual chrome text + dumb SVG renderers (panel-ui-refresh
    design D3/D4). Geometry comes from panel.charts; these macros only render. -#}

{% macro th(zh, en='') -%}
{#- locale-aware single-language chrome (panel-rbac-i18n-refresh): en mode
    prefers the explicit en arg, else falls back to the zh key via t() -#}
<th scope="col">{% if locale == 'en' %}{{ en or t(zh) }}{% else %}{{ zh }}{% endif %}</th>
{%- endmacro %}

{% macro lbl(zh, en='') -%}
{% if locale == 'en' %}{{ en or t(zh) }}{% else %}{{ zh }}{% endif %}
{%- endmacro %}

{#- Column chart: g = charts.bar_geometry(...); label feeds aria-label (role=img
    needs an accessible name — per-rect <title>s are only hover tooltips) -#}
{% macro svg_bars(g, label=None) -%}
<svg class="chart" viewBox="0 0 {{ g.w }} {{ g.h }}" role="img" aria-label="{{ label or t('柱状图') }}" preserveAspectRatio="xMidYMid meet">
  <line class="axis" x1="{{ g.pad }}" y1="{{ g.h - g.pad }}" x2="{{ g.w - g.pad }}" y2="{{ g.h - g.pad }}"/>
  {% for b in g.bars %}
  <rect class="bar" x="{{ b.x }}" y="{{ b.y }}" width="{{ b.bw }}" height="{{ b.bh }}" rx="2"><title>{{ b.title }}</title></rect>
  <text x="{{ b.x + b.bw / 2 }}" y="{{ g.h - g.pad + 14 }}" text-anchor="middle">{{ b.label }}</text>
  {% endfor %}
</svg>
{%- endmacro %}

{#- Grouped columns: g = charts.grouped_bar_geometry([(key, vals), ...], labels);
    series keys feed a tiny legend (registered vs verified — observatory coverage) -#}
{% macro svg_grouped_bars(g, label=None) -%}
<svg class="chart" viewBox="0 0 {{ g.w }} {{ g.h }}" role="img" aria-label="{{ label or t('分组柱状图') }}" preserveAspectRatio="xMidYMid meet">
  <line class="axis" x1="{{ g.pad }}" y1="{{ g.h - g.pad }}" x2="{{ g.w - g.pad }}" y2="{{ g.h - g.pad }}"/>
  {% for grp in g.groups %}
    {% for b in grp.bars %}
    <rect class="{{ 'bar' if b.key == g.series_keys[0] else 'bar-verified' }}" x="{{ b.x }}" y="{{ b.y }}" width="{{ b.bw }}" height="{{ b.bh }}" rx="2"><title>{{ b.title }}</title></rect>
    {% endfor %}
  <text x="{{ grp.bars[0].x + grp.bars[0].bw * (g.groups[0].bars | length) / 2 }}" y="{{ g.h - g.pad + 14 }}" text-anchor="middle" font-size="10">{{ grp.label | truncate(12, true) }}</text>
  {% endfor %}
</svg>
<div class="legend">
  {% for key in g.series_keys %}<span><span class="swatch {{ 'sw-registered' if key == g.series_keys[0] else 'sw-verified' }}"></span>{{ key }}</span>{% endfor %}
</div>
{%- endmacro %}

{#- Sparkline: g = charts.sparkline_geometry(...) -#}
{% macro svg_sparkline(g, label=None) -%}
<svg class="chart" viewBox="0 0 {{ g.w }} {{ g.h }}" role="img" aria-label="{{ label or t('趋势线') }}" preserveAspectRatio="none">
  {% if g.points %}
  <polygon class="spark-area" points="{{ g.area }}"/>
  <polyline class="spark" points="{{ g.points }}"/>
  {% endif %}
</svg>
{%- endmacro %}

{#- Stacked ok/err timeline: g = charts.timeline_geometry(...) -#}
{% macro svg_timeline(g, label=None) -%}
<svg class="chart" viewBox="0 0 {{ g.w }} {{ g.h }}" role="img" aria-label="{{ label or t('抓取时间线') }}" preserveAspectRatio="xMidYMid meet">
  <line class="axis" x1="{{ g.pad }}" y1="{{ g.h - g.pad }}" x2="{{ g.w - g.pad }}" y2="{{ g.h - g.pad }}"/>
  {% for c in g.cols %}
    {% if c.ok_h %}<rect class="bar-ok" x="{{ c.x }}" y="{{ c.ok_y }}" width="{{ c.bw }}" height="{{ c.ok_h }}"><title>{{ c.title }}</title></rect>{% endif %}
    {% if c.err_h %}<rect class="bar-err" x="{{ c.x }}" y="{{ c.err_y }}" width="{{ c.bw }}" height="{{ c.err_h }}"><title>{{ c.title }}</title></rect>{% endif %}
  {% endfor %}
</svg>
{%- endmacro %}

{#- Progress bar rendered as SVG so fill width is an attribute, not inline CSS -#}
{% macro svg_progress(value, maximum, w=120, h=10) -%}
{% set fraction = (value / maximum) if maximum else 0 %}
{% set fraction = [[fraction, 1] | min, 0] | max %}
{% set fw = (w * fraction) | round(1) %}
<svg class="progress-svg" width="{{ w }}" height="{{ h }}" viewBox="0 0 {{ w }} {{ h }}" role="img" preserveAspectRatio="none">
  <rect class="progress-track" x="0.5" y="0.5" width="{{ w - 1 }}" height="{{ h - 1 }}" rx="{{ h / 2 }}"/>
  {% if fw > 0 %}<rect class="progress-fill" x="0" y="0" width="{{ fw }}" height="{{ h }}" rx="{{ h / 2 }}"/>{% endif %}
</svg>
{%- endmacro %}

{#- Freshness heatmap tiles: g = charts.heatmap_tiles(...); link_prefix makes
    each tile drill into the filtered detail table, active_key outlines the
    currently selected bucket -#}
{% macro svg_heatmap(g, link_prefix=None, active_key=None, label=None) -%}
<svg class="chart" viewBox="0 0 {{ g.w }} {{ g.h }}" role="img" aria-label="{{ label or t('分布图') }}" preserveAspectRatio="xMidYMid meet">
  {% for t in g.tiles %}
  {% if link_prefix %}<a href="{{ link_prefix }}{{ t.key }}">{% endif %}
  <g class="{{ 'heat-active' if active_key == t.key }}">
  <rect class="heat-{{ t.key }}" x="{{ t.x }}" y="0" width="{{ t.w }}" height="{{ g.h * 0.72 }}" rx="6"><title>{{ t.title }}</title></rect>
  <text class="heat-text" x="{{ t.cx }}" y="{{ g.h * 0.45 }}" text-anchor="middle" font-size="20">{{ t.count }}</text>
  <text x="{{ t.cx }}" y="{{ g.h * 0.72 + 16 }}" text-anchor="middle">{{ t.label }}</text>
  <text x="{{ t.cx }}" y="{{ g.h * 0.72 + 30 }}" text-anchor="middle">{{ t.threshold }}</text>
  </g>
  {% if link_prefix %}</a>{% endif %}
  {% endfor %}
</svg>
{%- endmacro %}

{% macro legend_freshness() -%}
<div class="legend">
  <span><span class="swatch sw-fresh"></span>{{ lbl('新鲜 ≤7d', 'Fresh ≤7d') }}</span>
  <span><span class="swatch sw-aging"></span>{{ lbl('老化 7–30d', 'Aging 7–30d') }}</span>
  <span><span class="swatch sw-stale"></span>{{ lbl('过期 >30d', 'Stale >30d') }}</span>
  <span><span class="swatch sw-never"></span>{{ lbl('无观测', 'Never observed') }}</span>
</div>
{%- endmacro %}