territories-dashboard-lib 0.1.0__py3-none-any.whl → 0.1.2__py3-none-any.whl

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/indicators/details/page.html

@@ -0,0 +1,166 @@
+ {% extends "territories_dashboard_lib/website/layout/base.html" %}
+
+{% load static %}
+{% load other_filters %}
+
+{% block page_title %}{{indicator.title}}{% endblock %}
+
+{% block extra_head%}
+    <script defer src="{% static 'territories_dashboard_lib/website/js/react18.js' %}"></script>
+    <script defer src="{% static 'territories_dashboard_lib/website/js/reactdom18.js' %}"></script>
+    <script defer src="{% static 'territories_dashboard_lib/website/js/html2canvas.js' %}"></script>
+    <script defer src="{% static 'territories_dashboard_lib/website/js/chart.js' %}"></script>
+    <script defer src="{% static 'territories_dashboard_lib/website/js/chartjs-plugin-datalabels.js' %}"></script>
+    <script defer src="{% static 'territories_dashboard_lib/website/js/patternomaly.js' %}"></script>
+    {{ params|json_script:"params-js" }}
+    {{ indicator|json_script:"indicator-js" }}
+    {% with indicator.id|stringformat:"i"|add:"-api-urls" as script_name %}
+        {{ indicator|indicator_api_urls|json_script:script_name }}
+    {% endwith %}
+    <script defer src="{% static 'territories_dashboard_lib/website/react/indicatorMap.bundle.js' %}"></script>
+    <script defer src="{% static 'territories_dashboard_lib/website/react/sankeyGraph.bundle.js' %}"></script>
+    <script defer type="module" src="{% static 'territories_dashboard_lib/website/js/pages/indicators/details/page.mjs' %}"></script>
+{% endblock %}
+
+{% block main %}
+<div class="tdbmd-thematics">
+    <div class="fr-grid-row">
+        <aside id="left-menu" class="fr-col-md-3 fr-col-12 fr-pt-md-5w fr-pt-0">
+            {% include "territories_dashboard_lib/website/pages/indicators/components/themes-nav.html" %}
+        </aside>
+        <main role="main" class="tdbmd-thematics__content tdbmd-content fr-col-12 fr-col-md-9" id="contenu" tabindex="-1">
+            {% include "territories_dashboard_lib/website/pages/indicators/components/geo_params.html" %}
+            {% include "territories_dashboard_lib/website/pages/indicators/components/themes-list.html" %}
+            <div class="fr-mt-8w">
+                <div class="fr-px-md-4w fr-px-2w fr-mb-6w">
+                    <nav role="navigation" class="fr-breadcrumb" aria-label="vous êtes ici :">
+                        <button class="fr-breadcrumb__button" aria-expanded="false" aria-controls="breadcrumb-1">Voir le fil d’Ariane</button>
+                        <div class="fr-collapse" id="breadcrumb-1">
+                            <ol class="fr-breadcrumb__list">
+                                <li>
+                                    <a class="fr-breadcrumb__link" href="/">Accueil</a>
+                                </li>
+                                <li>
+                                    <a class="fr-breadcrumb__link" href="{% url 'website:theme' theme_name=theme.name %}">{{theme.title}}</a>
+                                </li>
+                                <li>
+                                    <a class="fr-breadcrumb__link" href="{% url 'website:theme' theme_name=theme.name %}#{{subtheme.name}}">{{subtheme.title}}</a>
+                                </li>
+                                <li>
+                                    <a class="fr-breadcrumb__link" aria-current="page">{{indicator.title}}</a>
+                                </li>
+                            </ol>
+                        </div>
+                    </nav>
+                    <h1>{{ indicator.title }}</h1>
+                    {% if indicator.source %}
+                        <p class="tdbmd-indicator-source">
+                            <span class="tdbmd-indicator-source__title">Source</span>
+                            <span>:</span>
+                            {{indicator.source}}
+                        </p>
+                    {% endif %}
+                    <button
+                    class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-file-line fr-btn--icon-right"
+                    aria-label="Afficher la fiche méthodologique dans la barre latérale"
+                    aria-controls="slide-panel-methodo"
+                    >
+                        Fiche méthodologique
+                    </button>
+                </div>
+                <div class="fr-px-md-4w fr-px-2w">
+                    <div id="filtres" class="fr-tag-list fr-mt-4w" role="group" aria-label="Filtres disponibles">
+                            {% for dimension_filters in filters %}
+                                <div class="filters-dimension" data-dimension="{{ dimension_filters.0.db_name }}" data-breakdown="{{ dimension_filters.0.is_breakdown|yesno:'true,false' }}">
+                                    {% if filters|length > 1 %}
+                                        <label>{{ dimension_filters.0.title }}</label>
+                                    {% endif %}
+                                    <div >
+                                        {% for filter in dimension_filters.1 %}
+                                            <button
+                                                class="fr-tag filter-tag"
+                                                data-indicator="{{ indicator.id }}"
+                                                data-dimension="{{ dimension_filters.0.db_name }}"
+                                                data-default="{{ filter.default|yesno:'true,false' }}"
+                                                data-setfromurl="{{ filter.set_from_url|yesno:'true,false' }}"
+                                                aria-pressed="{% if filter.current %}true{% endif %}"
+                                            >
+                                                {{filter.db_name}}
+                                            </button>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            {% endfor %}
+                    </div>
+                </div>
+                <div class="subtheme fr-px-md-4w fr-p-2w">
+                    <div id="indicator-map"></div>
+                </div>
+                {% if indicator.flows_db_table_prefix %}
+                <div class="subtheme">
+                    <div class="fr-px-md-4w fr-px-2w fr-py-2w">
+                        {% include "territories_dashboard_lib/website/pages/indicators/components/title.html" with title="Top 10 des flux par origine-destination (diagramme de Sankey)" key="sankey" text="Survolez les flux sur le graphique pour afficher les valeurs. Vous pouvez filtrer selon le mode de déplacement en sélectionnant les filtres disponibles sous le titre du graphique. Précisions : Seuls les flux entre les 10 territoires qui génèrent le plus de flux depuis/vers le territoire sélectionné sont affichés." %}
+                        <div style="width:100%; height: auto;">
+                        <div id="sankey-graph"></div>
+                        </div>
+                    </div>
+                    <button
+                        data-title="Sankey"
+                        class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-line-chart-line fr-btn--icon-right fr-mx-4w fr-mt-4w fr-mb-4w btn-download">
+                        <span>Exporter le graphique</span>
+                    </button>
+                </div>
+                {% endif %}
+                {% if indicator.filters %}
+                    <div class="subtheme">
+                        <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 "./components/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 %}
+                    </div>
+                {% endif %}
+                <div class="subtheme">
+                    <div class="fr-px-md-4w fr-px-2w fr-py-2w">
+                        {% include "territories_dashboard_lib/website/pages/indicators/components/title.html" with title="Top 10 des territoires" key="top10" text="Survolez les graphiques 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. Précisions : Ce graphique varie selon la maille sélectionnée." %}
+                        <div style="width:100%; height: auto;">
+                            <canvas id="top10Chart" aria-describedby="top-10-export-csv"></canvas>
+                        </div>
+                        {% include "./components/filters-reminder.html" %}
+                    </div>
+                    {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.html" with name="Top 10" route="top-10" pattern="show" one_indicator=True %}
+                </div>
+                <div id="histogramContainer" class="subtheme">
+                    <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 territoires selon les valeurs de l'indicateur" key="repartition" text="Le nom des territoires s'affiche au survol ds'il y a moins de 6 territoires. Précisions : Ce graphique varie selon la maille sélectionnée." %}
+                        <div style="width:100%; height: 400px;">
+                            <canvas id="histogramChart" aria-describedby="histogram-export-csv"></canvas>
+                        </div>
+                        {% include "./components/filters-reminder.html" %}
+                    </div>
+                    {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.html" with name="Répartition par valeurs" route="histogram" one_indicator=True %}
+                </div>
+                <div class="subtheme" id="values-table-section">
+                    <div class="fr-px-md-4w fr-px-2w fr-py-2w">
+                        <h3 class="fr-mt-4w">Tableau des valeurs de l'indicateur</h3>
+                        <div class="data-table" data-source="indicator"></div>
+                    </div>
+                </div>
+                {% if indicator.flows_db_table_prefix %}
+                <div class="subtheme">
+                    <div class="fr-px-md-4w fr-px-2w fr-py-2w">
+                        <h3 class="fr-mt-4w">Tableau des flux</h3>
+                        <div class="data-table" data-source="flows"></div>
+                    </div>
+                </div>
+                {% endif %}
+            </div>
+            {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_geo.html" %}
+            {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_methodo.html" %}
+        </div>
+    </div>
+</div>
+{% endblock %}

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/indicators/themes/components/extremum.html

@@ -0,0 +1,15 @@
+<div class="fr-col-4 tdbmd-indicator-card__comparisons-col">
+    <div class="tdbmd-indicator-card__comparisons-card fr-p-1w">
+        <h5 class="tdbmd-indicator-card__comparisons-card-title">{{ title }}</h5>
+        <p class="tdbmd-indicator-card__comparisons-card-number delay-spinner">
+            <strong class="{{ prefix }}-value">
+                <span>{% include "territories_dashboard_lib/website/pages/indicators/components/loader.html" with width=28 %}</span>
+                <span class="unite" aria-label="{{indicator.unite_nom_accessible}}">{{indicator.unite}}</span>
+            </strong>
+        </p>
+        <p class="tdbmd-indicator-card__comparisons-card-info" style="margin">
+            <span class="{{ prefix }}-name"></span>
+            <span class="{{ prefix }}-count"></span>
+        </p>
+    </div>
+</div>

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/indicators/themes/components/indicateur-card.html

@@ -0,0 +1,76 @@
+{% load htmlparams %}
+
+{% htmlparams %}
+	{% htmlparam body %}
+        <div class="tdbmd-indicator-card__data fr-mt-5w fr-mb-3w">
+            <div class="fr-grid-row fr-grid-row--middle">
+                <div class="fr-col-12 fr-grid-row tdbmd-indicator-card__data-container fr-grid-row--middle">
+                    <p class="main-value tdbmd-indicator-card__data-number delay-spinner">
+                        <span>{% include "territories_dashboard_lib/website/pages/indicators/components/loader.html" with width=32 %}</span>
+                        <span class="unite" aria-label="{{indicator.unite_nom_accessible}}">{{indicator.unite}}</span>
+                    </p>
+                </div>
+                <div class="fr-col-12">
+                    <div class="fr-toggle">
+                        {% if indicator.unite_alternative and indicator.show_alternative %}
+                            <input
+                                type="checkbox"
+                                class="fr-toggle__input toggle-unite"
+                                aria-label="Modifier l'unité - {{ indicator.title }}"
+                                aria-describedby="{{indicator.id}}-toggle-unit-messages"
+                                id="{{indicator.id}}-toggle-unit"
+                            >
+                            <label aria-label="{{indicator.unite_alternative_nom_accessible}}" class="fr-toggle__label" for="{{indicator.id}}-toggle-unit">
+                                {{ indicator.unite_alternative }}
+                            </label>
+                            <div
+                                class="fr-messages-group fr-sr-only"
+                                id="{{indicator.id}}-toggle-unit-messages"
+                                aria-live="polite"
+                            ></div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <section class="tdbmd-indicator-card__comparisons fr-grid-row fr-grid-row--gutters">
+            <h4 class="fr-sr-only">Statistiques</h4>
+            {% include "./extremum.html" with title="Minimum" prefix="min" %}
+            {% include "./extremum.html" with title="Mediane" prefix="med" %}
+            {% include "./extremum.html" with title="Maximum" prefix="max" %}
+        </section>
+	{% endhtmlparam %}
+
+    {% htmlparam footer %}
+        <section class="fr-accordion tdbmd-indicator-accordion">
+            <h4 class="fr-accordion__title">
+                <button
+                    class="fr-accordion__btn"
+                    aria-expanded="false"
+                    aria-controls="accordion-{{indicator.id}}"
+                    aria-label="Historique - {{ indicator.title }}"
+                >
+                    Historique
+                </button>
+            </h4>
+            <div
+                class="fr-collapse"
+                id="accordion-{{indicator.id}}"
+            >
+                <div style="height: 300px;">
+                    <canvas class="history-chart" aria-describedby="{{indicator.id}}values-export-csv"></canvas>
+                </div>
+                {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.html" with name="Historique" route="values" indicator=indicator no_pb=True %}
+            </div>
+        </section>
+        <a
+            class="fr-btn fr-btn--tertiary fr-icon-external-link-fill fr-btn--icon-right tdbmd-indicator-btn"
+            href="/indicateurs/details/{{indicator.name}}/"
+            aria-label="Voir les graphiques avancés - {{ indicator.title }}"
+        >
+            Voir les graphiques avancés
+        </a>
+    {% endhtmlparam %}
+
+    {% include "territories_dashboard_lib/website/pages/indicators/components/indicator-card.html" with indicator=indicator %}
+{% endhtmlparams %}

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/indicators/themes/page.html

@@ -0,0 +1,66 @@
+{% extends "territories_dashboard_lib/website/layout/base.html" %}
+
+{% load static %}
+{% load other_filters %}
+
+{% block page_title %}{{theme.title}}{% endblock %}
+
+{% block extra_head %}
+    <script defer src="{% static 'territories_dashboard_lib/website/js/chart.js' %}"></script>
+    <script defer src="{% static 'territories_dashboard_lib/website/js/chartjs-plugin-datalabels.js' %}"></script>
+    <script defer src="{% static 'territories_dashboard_lib/website/js/html2canvas.js' %}"></script>
+    {{ params|json_script:"params-js" }}
+    {{ sub_themes|json_script:"sub-themes-js" }}
+    <script defer type="module" src="{% static 'territories_dashboard_lib/website/js/pages/indicators/theme/page.mjs' %}"></script>
+{% endblock %}
+
+{% block main %}
+
+<div class="tdbmd-thematics">
+    <div class="fr-grid-row">
+        <aside class="fr-col-md-3 fr-col-12 fr-pt-md-5w fr-pt-0">
+            {% include "territories_dashboard_lib/website/pages/indicators/components/themes-nav.html" %}
+        </aside>
+        <main role="main" class="tdbmd-thematics__content tdbmd-content fr-col-12 fr-col-md-9" id="contenu" tabindex="-1">
+            {% include "territories_dashboard_lib/website/pages/indicators/components/geo_params.html" %}
+            {% include "territories_dashboard_lib/website/pages/indicators/components/themes-list.html" %}
+            <div>
+                <div class="fr-pr-md-4w fr-pl-md-4w fr-pr-2w fr-pl-2w fr-mt-4w">
+                    <h1>{{ theme.title }}</h1>
+                    <div class="fr-grid-row">
+                        <div class="fr-col-12 fr-col-md-6">
+                            <p class="fr-text--sm fr-mb-0">
+                                <strong>Objectif</strong>
+                            </p>
+                            <p class="fr-text--sm">{{ theme.objectif_theme }}</p>
+                            </div>
+                            <div class="fr-col-12 fr-col-md-6">
+                            <p class="fr-text--sm fr-mb-0">
+                                <strong>Action(s) visée(s)</strong>
+                            </p>
+                            <p class="fr-text--sm">{{ theme.action_theme }}</p>
+                        </div>
+                    </div>
+                </div>
+                {% for sub_theme in sub_themes %}
+                    <section
+                        id="{{sub_theme.name}}"
+                        class="subtheme fr-pr-md-4w fr-pl-md-4w fr-pr-2w fr-pl-2w fr-pt-5w fr-pb-5w"
+                    >
+                        <h2>{{ sub_theme.title }}</h2>
+                        {% for indicator in sub_theme.indicators %}
+                            {% with indicator.id|stringformat:"i"|add:"-api-urls" as script_name %}
+                                {{ indicator|indicator_api_urls|json_script:script_name }}
+                            {% endwith %}
+                            {% include "./components/indicateur-card.html" with indicator=indicator %}
+                        {% endfor %}
+                    </section>
+                {% endfor %}
+                {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_geo.html" %}
+                {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_methodo.html" %}
+            </div>
+        </main>
+    </div>
+</div>
+
+{% endblock %}

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/lexique/page.html

@@ -0,0 +1,17 @@
+{% extends "territories_dashboard_lib/website/layout/base.html" %}
+{% load static %}
+{% block page_title %}Lexique{% endblock %}
+
+{% block main %}
+<main role="main" class="fr-container glossary staticPage fr-pt-md-8w fr-pb-md-10w fr-pt-4w fr-pb-6w" id="contenu" tabindex="-1">
+    <h2>Lexique</h2> 
+    <dl class="definitions">
+        {% for item in lexique %}
+        <div>
+            <dt><strong>{{ item.word }}</strong></dt>
+            <dd>{{ item.definition }}</dd>
+        </div>
+        {% endfor %}
+    </dl>
+</main>
+{% endblock %}

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/page.html

@@ -0,0 +1,14 @@
+{% extends "territories_dashboard_lib/website/layout/base.html" %}
+
+{% load static %}
+
+{% block page_title %}Accueil - {{ main_conf.title }}{% endblock %}
+
+{% block main %}
+
+<main role="main" id="contenu" tabindex="-1" class="fr-container fr-pt-10w fr-pb-10w">
+    <h1>{{ landing_page.title }}</h1>
+    {{ landing_page.body_html|safe }}
+    <a class="fr-btn" href="{{ landing_page.button.href }}">{{ landing_page.button.title }}</a>
+</main>
+{% endblock %}

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/sitemap/page.html

@@ -0,0 +1,71 @@
+{% extends "territories_dashboard_lib/website/layout/base.html" %}
+
+{% load static %}
+
+{% block page_title %}Plan du site{% endblock %}
+
+{% block main %}
+<main role="main" class="fr-container fr-pt-md-8w fr-pb-md-10w fr-pt-4w fr-pb-6w" id="contenu" tabindex="-1">
+  <h2>Plan du site</h2>
+  <ul>
+    <li>
+        <a href="{% url 'website:landing-page' %}">Accueil</a>
+    </li>
+  </ul>
+  <br/>
+  <h3>Thématiques</h3>
+  <ul>
+    {% for theme in themes %}
+      <li>
+        <a href="{% url 'website:theme' theme_name=theme.name %}">{{theme.title}}</a>
+      </li>
+    {% endfor %}
+  </ul>
+  <br/>
+  <h3>Comparaison par thématiques</h3>
+  <ul>
+    {% for theme in themes %}
+      <li>
+        <a href="{% url 'website:comparison' theme_name=theme.name %}">{{theme.title}}</a>
+      </li>
+    {% endfor %}
+  </ul>
+  <br/>
+  <h3>Détails des indicateurs</h3>
+  <ul>
+    {% for indicator in indicators %}
+      <li>
+        <a href="{% url 'website:indicator-details' indicator_name=indicator.name %}">{{indicator.title}}</a>
+      </li>
+    {% endfor %}
+  </ul>
+  <br/>
+  {% if ENABLE_SUPERSET and dashboards %}
+    <h3>Portraits de territoires</h3>
+    <ul>
+      {% for dashboard in dashboards %}
+        <li>
+          <a href="{% url 'website:superset' dashboard_name=dashboard.short_name %}">{{dashboard.label}}</a>
+        </li>
+      {% endfor %}
+    </ul>
+    <br/>
+  {% endif %}
+  <h3>Autres pages</h3>
+  <ul>
+    {% for static_page in static_pages %}
+    <li>
+      <a href="{{ static_page.url }}">{{ static_page.title }}</a>
+    </li>
+    {% endfor %}
+    {% if lexique %}
+        <li>
+            <a href="{% url 'website:lexique' %}">Lexique</a>
+        </li>
+    {% endif %}
+    <li>
+      <a href="{% url 'website:sitemap' %}">Plan du site</a>
+    </li>
+  </ul>
+</main>
+{% endblock %}

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/static/page.html

@@ -0,0 +1,16 @@
+{% extends "territories_dashboard_lib/website/layout/base.html" %}
+
+{% load static %}
+
+{% block page_title %}{{ static_page.name }}{% endblock %}
+
+{% block extra_head%}
+    <script defer type="module" src="{% static 'territories_dashboard_lib/website/js/pages/static/page.mjs' %}"></script>
+{% endblock %}
+
+{% block main %}
+
+<main role="main" id="contenu" tabindex="-1" class="staticPage fr-container fr-pt-10w fr-pb-10w">
+    {{ static_page.body_html|safe }}
+</main>
+{% endblock %}

territories_dashboard_lib/website_lib/templates/territories_dashboard_lib/website/pages/superset/page.html

@@ -0,0 +1,55 @@
+{% extends "territories_dashboard_lib/website/layout/base.html" %}
+
+{% load static %}
+
+{% block page_title %}{{dashboard.label}}{% endblock %}
+
+{% block extra_head%}
+    <script src="{% static 'territories_dashboard_lib/website/js/supersetEmbed.js' %}"></script>
+    <script>
+      const dashboardID = "{{ dashboard.superset_id }}";
+      async function fetchGuestToken() {
+        const response = await fetch(
+          `/api/superset/guest-token/?dashboard=${dashboardID}`,
+        );
+        if (response.ok) {
+          const guestToken = await response.text();
+          return guestToken;
+        } else {
+          throw Error("could not fetch guest token");
+        }
+      }
+
+      const dashboardUiConfig = {
+        hideTitle: false,
+        filters: {
+          expanded: true,
+        }
+      };
+
+      {% if dashboard_filter %}
+        {% autoescape off %}
+          dashboardUiConfig["urlParams"] = { native_filters: `{{dashboard_filter}}` };
+        {% endautoescape %}
+      {% endif %}
+
+
+      document.addEventListener("DOMContentLoaded", () => {
+          supersetEmbeddedSdk.embedDashboard({
+          id: dashboardID,
+          supersetDomain:
+            "https://mobilite-durable-tdb.dataviz.din.developpement-durable.gouv.fr",
+          mountPoint: document.getElementById("superset-container"),
+          fetchGuestToken,
+          dashboardUiConfig,
+          iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox']
+        });
+      })
+  </script>
+{% endblock %}
+
+{% block main %}
+<main role="main" id="contenu" tabindex="-1">
+  <div id="superset-container"></div>
+</main>
+{% endblock %}

territories_dashboard_lib/website_lib/templatetags/htmlparams.py

@@ -0,0 +1,75 @@
+from django import template
+
+register = template.Library()
+
+"""
+This tag is used to give some html as argument to an {% include %} tag.
+
+For instance:
+
+{% htmlparams %}
+    {% htmlparam content %}
+        <span>click me</span>
+    {% endhtmlparam %}
+    {% include "website/components/button.html"%}
+{% endhtmlparams %}
+
+you have to wrap {% include %} within {% htmlparams %} then you can add {% htmlparam VARIABLE_NAME %} with some html within and use the variable within the component.
+
+Included button:
+
+<button>
+    {{ content }}
+</button>
+
+"""
+
+
+class HtmlParamNode(template.Node):
+    def __init__(self, var_name, nodelist):
+        self.var_name = var_name
+        self.nodelist = nodelist
+
+    def render(self, context):
+        # do not render anything but stores the output in the context
+        output = self.nodelist.render(context)
+        context[self.var_name] = output
+        return ""
+
+
+class HtmlParamsNode(template.Node):
+    def __init__(self, nodelist):
+        self.nodelist = template.NodeList()
+        self.paramnodelist = template.NodeList()
+        for node in nodelist:
+            if isinstance(node, HtmlParamNode):
+                self.paramnodelist.append(node)
+            else:
+                self.nodelist.append(node)
+
+    def render(self, context):
+        with context.push():
+            ## Render the htmlparam nodes to update the context
+            self.paramnodelist.render(context)
+            output = self.nodelist.render(context)
+        return output
+
+
+@register.tag(name="htmlparam")
+def do_htmlparam(parser, token):
+    try:
+        tag_name, var_name = token.split_contents()
+    except ValueError:
+        raise template.TemplateSyntaxError(
+            "%r tag requires a single argument" % token.contents.split()[0]
+        )
+    nodelist = parser.parse(("endhtmlparam",))
+    parser.delete_first_token()
+    return HtmlParamNode(var_name, nodelist)
+
+
+@register.tag(name="htmlparams")
+def do_htmlparams(parser, token):
+    nodelist = parser.parse(("endhtmlparams",))
+    parser.delete_first_token()
+    return HtmlParamsNode(nodelist)

territories_dashboard_lib/website_lib/templatetags/other_filters.py

@@ -0,0 +1,30 @@
+from django import template
+from django.urls import reverse
+
+register = template.Library()
+
+
+@register.filter
+def get_item(dictionary, key):
+    return dictionary.get(key)
+
+
+@register.filter
+def indicator_api_urls(indicator_dict):
+    view_names = [
+        "download-indicator-methodo",
+        "statistics",
+        "values",
+        "histogram",
+        "top-10",
+        "details-table",
+        "details-table-export",
+        "comparison-histogram",
+        "proportions",
+    ]
+    return {
+        view_name: reverse(
+            f"indicators-api:{view_name}", kwargs={"name": indicator_dict["name"]}
+        )
+        for view_name in view_names
+    }