{# @description A chart built in Python with pyecharts: the space it draws into, and its options carried to the browser as JSON. #}
{# @prop chart:text | description:"The pyecharts chart to draw. Pass it with a colon, :chart, because it is a Python value." | required #}
{# @prop id:text | description:"The figure's id. The caption and the drawing surface are tied to it." | required #}
{# @prop height:text | description:"A CSS height for the chart. Leave it and aspect-ratio out and the figure fills the element around it." #}
{# @prop aspect-ratio:text | description:"The chart's shape, such as 16/9, instead of a height. Ignored when height is given." #}
{# @prop name:text | description:"Accessible name, carried as the drawing surface's aria-label." #}
{# @prop caption:text | description:"Text printed under the chart and read out with it." #}
{# @prop description:text | description:"Hidden text alternative for what the chart shows, read after the caption." #}
<c-vars chart id="" name="" caption="" description="" height="" aspect-ratio="" />
{% load mvp_charts %}
{% comment %}
  `w-full` on both children because daisyUI centres a figure's children inside a card, which leaves
  a child with no width of its own at zero width. `calc()` makes a ratio like `16/9` one number.
{% endcomment %}
<figure id="{{ id }}"
        class="flex flex-col w-full{% if not height and not aspect_ratio %} h-full{% endif %}"
        data-mvp-chart
        data-mvp-chart-renderer="{{ chart.renderer }}">
  <div class="relative w-full{% if not height and not aspect_ratio %} flex-1 min-h-0{% endif %}"
       {% if height %}style="height: {{ height }}"{% elif aspect_ratio %}style="aspect-ratio: calc({{ aspect_ratio }})"{% endif %}>
    {# Hidden from assistive technology: the surface already carries the figure's name. #}
    <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 caption and description %}aria-describedby="{{ id }}-caption {{ id }}-description"
         {% elif caption %}aria-describedby="{{ id }}-caption"
         {% elif description %}aria-describedby="{{ id }}-description"{% endif %}
         data-mvp-chart-surface></div>
  </div>
  {% if description %}
    <p id="{{ id }}-description" class="sr-only">{{ description }}</p>
  {% endif %}
  <script type="application/json" data-mvp-chart-options>{% chart_options chart %}</script>
  {# Last: HTML allows a figcaption only as a figure's first or last child. #}
  {% if caption %}
    <figcaption id="{{ id }}-caption" class="mt-2 w-full text-sm">{{ caption }}</figcaption>
  {% endif %}
</figure>