{# ============================================================ #}
{# <c-chart> — the one component this package ships              #}
{#                                                               #}
{# Draws a chart built in Python with pyecharts. The view makes  #}
{# the chart and puts it in the context; this renders the space  #}
{# it draws into and carries its options to the browser as JSON. #}
{#                                                               #}
{# Props:                                                        #}
{#   :chart      – a pyecharts chart, with a colon. Required.    #}
{#   id          – element id, the author's to give. Required:   #}
{#                 the caption and the drawing surface are tied  #}
{#                 to it, and an id invented here would shift    #}
{#                 the moment a second chart went above it.      #}
{#   height      – a CSS height for the figure. Optional.        #}
{#   aspect-ratio – the shape of the figure instead of its       #}
{#                 height: the figure takes the width it is      #}
{#                 given and derives a height from it. Optional, #}
{#                 and ignored when height is also given.        #}
{#                 Leave both out and the figure fills the       #}
{#                 element around it instead.                    #}
{#   name        – accessible name. Optional; carried as the     #}
{#                 drawing surface's aria-label when given.      #}
{#   description – text alternative for what the chart shows.    #}
{#                 Optional; carried as a figcaption when given. #}
{#                                                               #}
{# Everything else about the chart — its type, its data, its     #}
{# axes, its colours, its tooltip — is set on the chart object   #}
{# in Python. This component names none of it.                   #}
{#                                                               #}
{# The options travel as data in a script tag, never as script   #}
{# this package wrote. mvp-charts.js reads them, and the project #}
{# loads that file and the charting library from its own base    #}
{# template.                                                     #}
{# ============================================================ #}
<c-vars chart id="" name="" description="" height="" aspect-ratio="" />
{% load mvp_charts %}
{# `calc()` is what makes a ratio written as `16/9` one number rather than two. #}
<figure id="{{ id }}"
        class="relative w-full{% if not height and not aspect_ratio %} h-full{% endif %}"
        {% if height %}style="height: {{ height }}"{% elif aspect_ratio %}style="aspect-ratio: calc({{ aspect_ratio }})"{% endif %}
        data-mvp-chart>
  {% comment %}
    Every figure waits before it draws, so every figure says so, and the module
    takes this out once the chart is on the surface. One element, with no box
    around it to sit in the middle of: `inset-0` with automatic margins centres
    an absolutely positioned element on both axes, and daisyUI gives the
    spinner a definite width and a square ratio for those margins to divide up.

    It is hidden from assistive technology because the surface below already
    carries the figure's accessible name, and a second announcement of one
    figure is one too many.
  {% endcomment %}
  <span class="loading loading-spinner loading-lg absolute inset-0 m-auto"
        aria-hidden="true"
        data-mvp-chart-placeholder></span>
  <div class="absolute inset-0"
       {% if name %}role="img" aria-label="{{ name }}"{% endif %}
       {% if description %}aria-describedby="{{ id }}-description"{% endif %}
       data-mvp-chart-surface></div>
  {% if description %}
    <figcaption id="{{ id }}-description" class="sr-only">{{ description }}</figcaption>
  {% endif %}
  <script type="application/json" data-mvp-chart-options>{% chart_options chart %}</script>
</figure>