{# The library's own line/area chart (components/chart_native.py). The SVG
   holds only the marks and is stretched to the plot box; every piece of text
   is HTML placed over it by percentage, so it keeps the page's size at any
   chart width. The drawing is aria-hidden like the pygal one: the figure's
   text equivalent is the visually hidden summary at the end. Hover readouts
   are the shared data-fcu-tip tooltip on one column per x value. #}
<div {% if c.id %}id="{{ c.id }}"{% endif %}
     class="fcu-chart fcu-chart-native {{ c.css_class if c.css_class }}"
     data-chart-type="{{ chart.kind }}"
     role="figure"
     aria-labelledby="{{ desc_id }}"
     {%- if c.height or c.width %} style="{% if c.height %}--fcu-chart-height: {{ c.height|int }}px;{% endif %}{% if c.width %} max-width: {{ c.width|int }}px;{% endif %}"{% endif %}
     up-source="{{ c.data_source }}"
     up-target="self">
  <div class="fcu-chart-body" aria-hidden="true">
    {%- if chart.marks|length > 1 %}
    <ul class="fcu-chart-legend">
      {%- for mark in chart.marks %}
      <li><span class="fcu-chart-swatch" style="background: {{ mark.color }}"></span>{{ mark.name }}</li>
      {%- endfor %}
    </ul>
    {%- endif %}
    <div class="fcu-chart-frame">
      <div class="fcu-chart-y">
        {%- for tick in chart.y_ticks %}
        <span class="fcu-chart-ytick" style="--at: {{ tick.at }}">{{ tick.label }}</span>
        {%- endfor %}
      </div>
      <div class="fcu-chart-plot">
        {%- for tick in chart.y_ticks %}
        <span class="fcu-chart-gridline" style="bottom: {{ tick.bottom }}"></span>
        {%- endfor %}
        <svg class="fcu-chart-marks" viewBox="{{ chart.viewbox }}" preserveAspectRatio="none" focusable="false">
          {%- for mark in chart.marks %}
          {%- if mark.area %}
          <path class="fcu-chart-area" d="{{ mark.area }}" style="fill: {{ mark.color }}"/>
          {%- endif %}
          {%- endfor %}
          {%- for mark in chart.marks %}
          {%- if mark.line %}
          <path class="fcu-chart-line" d="{{ mark.line }}" style="stroke: {{ mark.color }}" vector-effect="non-scaling-stroke"/>
          {%- endif %}
          {%- endfor %}
        </svg>
        {%- for mark in chart.marks %}
        {%- for dot in mark.dots %}
        <span class="fcu-chart-dot" style="left: {{ dot.left }}; bottom: {{ dot.bottom }}; background: {{ mark.color }}"></span>
        {%- endfor %}
        {%- endfor %}
        {%- for marker in chart.markers %}
        <span class="fcu-chart-marker{% if marker.end %} is-end{% endif %} {{ marker.css_class }}" style="left: {{ marker.left }}">
          {%- if marker.label %}<span class="fcu-chart-marker-label">{{ marker.label }}</span>{% endif -%}
        </span>
        {%- endfor %}
        {%- for col in chart.columns %}
        <span class="fcu-chart-col" style="left: {{ col.left }}; width: {{ col.width }}; --at: {{ col.at }}" data-fcu-tip="{{ col.tip }}"></span>
        {%- endfor %}
      </div>
      <div class="fcu-chart-x">
        {%- for tick in chart.x_ticks %}
        <span class="fcu-chart-xtick{% if tick.align %} is-{{ tick.align }}{% endif %}{% if not tick.major %} is-minor{% endif %}" style="left: {{ tick.left }}">{{ tick.label }}</span>
        {%- endfor %}
      </div>
    </div>
  </div>
  <span class="fcu-sr-only" id="{{ desc_id }}">{{ chart_label }}{% if c.title %}: {{ c.title }}{% endif %}{% if chart_summary %}. {{ chart_summary }}{% endif %}</span>
</div>