{% load other_filters %}

{% if indicator.filters %}
    <div class="subtheme">
        {% if params|should_mesh_analysis:indicator %}
            <div class="fr-px-md-4w fr-px-2w fr-py-2w">
                {% include "territories_dashboard_lib/website/pages/indicators/components/title.html" with title="Répartition des valeurs de l'indicateur selon ses modalités" key="proportions" text="Survolez le graphique pour afficher les valeurs de l'indicateur pour chaque modalité. Cliquez sur les catégories de la légende pour afficher/masquer des modalités." %}
                <div style="width:100%; height: auto;">
                    <canvas id="proportionsChart" aria-describedby="proportions-export-csv"></canvas>
                </div>
                {% include "territories_dashboard_lib/website/pages/indicators/components/no-data.html" %}
                {% include "./filters-reminder.html" %}
            </div>
            {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.html" with name="Répartition par dimensions" route="proportions" pattern="show" one_indicator=True tracking_objet="repartition-dimension" %}
        {% else %}
            <div class="fr-px-md-4w fr-px-2w fr-py-2w">
                <h3 class="fr-mt-4w">Proportions</h3>
                <div>Le graphique de proporition n'est pas disponible pour la maille sélectionnée.</div>
            </div>
        {% endif %}
    </div>
{% endif %}