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

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/filters.mjs

@@ -0,0 +1,159 @@
+function getIndicatorFilters(indicator) {
+    return Array.from(
+        document.querySelectorAll(
+            `.filter-tag[aria-pressed="true"][data-indicator="${indicator.id}"]`
+        )
+    ).map((button) => [button.dataset.dimension, button.innerText]);
+}
+
+function getCurrentFiltersForIndicatorAndDimension(indicator, dimension) {
+    return Array.from(
+        document.querySelectorAll(
+            `.filter-tag[aria-pressed="true"][data-indicator="${indicator.id}"][data-dimension="${dimension}"]`
+        )
+    ).map((button) => button.innerText);
+}
+
+function arrayAreSameSet(arr1, arr2) {
+    const xs = new Set(arr1);
+    const ys = new Set(arr2);
+    return xs.size === ys.size && [...xs].every((x) => ys.has(x));
+}
+
+async function handleFilterClick(indicator) {
+    // need for DOM to update
+    const smallAmountOfTime = 10;
+    await new Promise((resolve) => {
+        setTimeout(resolve, smallAmountOfTime);
+    });
+
+    let indicatorStorage = localStorage.getItem(indicator.name);
+    if (indicatorStorage === null) {
+        localStorage.setItem(indicator.name, "{}");
+        indicatorStorage = localStorage.getItem(indicator.name);
+    }
+    const indicatorLocalData = JSON.parse(indicatorStorage);
+
+    const filtersToSet = {};
+    indicator.filters.forEach(([dimensionObj, filtersObj]) => {
+        const filters = filtersObj.map((filterOb) => filterOb.db_name);
+        const dimension = dimensionObj.db_name;
+        const currentFilters = getCurrentFiltersForIndicatorAndDimension(
+            indicator,
+            dimension
+        );
+        filtersToSet[dimension] = arrayAreSameSet(filters, currentFilters)
+            ? null
+            : currentFilters;
+    });
+    indicatorLocalData.filtersByDimension = filtersToSet;
+
+    localStorage.setItem(indicator.name, JSON.stringify(indicatorLocalData));
+}
+
+function updateUrlWithFilters() {
+    const excludeFilters = Array.from(
+        document.querySelectorAll(
+            '.filter-tag[data-default="true"][aria-pressed="false"]'
+        )
+    ).map((b) => [b.dataset.dimension, `!${b.innerText}`]);
+    const includeFilters = Array.from(
+        document.querySelectorAll(
+            '.filter-tag[data-default="false"][aria-pressed="true"]'
+        )
+    ).map((b) => [b.dataset.dimension, b.innerText]);
+    const stringFilters = includeFilters.concat(excludeFilters);
+    const dimensions = new Set(
+        Array.from(document.querySelectorAll(".filter-tag")).map(
+            (b) => b.dataset.dimension
+        )
+    );
+    const currentUrl = new URL(window.location);
+    dimensions.forEach((dimension) => {
+        currentUrl.searchParams.delete(dimension);
+    });
+    stringFilters.forEach((f) => {
+        currentUrl.searchParams.append(f[0], f[1]);
+    });
+    window.history.replaceState({}, "", currentUrl.toString());
+}
+
+function initialFiltersByDimension(indicator, dimension) {
+    let initialFilters = [];
+    let initializedLocally = false;
+    const localRawData = localStorage.getItem(indicator.name);
+    if (localRawData) {
+        const localData = JSON.parse(localRawData);
+        if (
+            localData.filtersByDimension &&
+            localData.filtersByDimension[dimension] !== null
+        ) {
+            initialFilters = localData.filtersByDimension[dimension];
+            initializedLocally = true;
+        }
+    }
+    if (initializedLocally === false) {
+        initialFilters = Array.from(
+            document.querySelectorAll(
+                `.filter-tag[data-indicator="${indicator.id}"][data-default="true"][data-dimension="${dimension}"]`
+            )
+        ).map((button) => button.innerText);
+    }
+    Array.from(
+        document.querySelectorAll(
+            `.filter-tag[data-indicator="${indicator.id}"][data-dimension="${dimension}"]`
+        )
+    ).forEach((button) => {
+        if (button.dataset.setfromurl === "true") {
+            return;
+        }
+        const pressed = initialFilters.includes(button.innerText)
+            ? "true"
+            : "false";
+        button.setAttribute("aria-pressed", pressed);
+    });
+}
+
+function initializeFilters(indicator) {
+    indicator.filters.forEach(([dimension]) => {
+        initialFiltersByDimension(indicator, dimension.db_name);
+    });
+}
+
+function updateFiltersReminder(indicator) {
+    if (indicator.filters.length > 1) {
+        indicator.filters.forEach(([dimension]) => {
+            if (!dimension.is_breakdown) {
+                const currentFilters = Array.from(
+                    document.querySelectorAll(
+                        `.filters-dimension button[data-dimension="${dimension.db_name}"][aria-pressed="true"]`
+                    )
+                );
+                const currentFiltersHtml =
+                    currentFilters.length > 0
+                        ? currentFilters
+                              .map(
+                                  (filter) =>
+                                      `<p class="fr-tag">${filter.textContent.trim()}</p>`
+                              )
+                              .join("")
+                        : "<p class=fr-tag>Aucun filtre</p>";
+                Array.from(
+                    document.querySelectorAll(
+                        `.filters-reminder-dimension[data-dimension="${dimension.db_name}"]`
+                    )
+                ).forEach((container) => {
+                    container.innerHTML = currentFiltersHtml;
+                });
+            }
+        });
+    }
+}
+
+export {
+    initializeFilters,
+    handleFilterClick,
+    getIndicatorFilters,
+    updateUrlWithFilters,
+    updateFiltersReminder,
+};

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/format.mjs

@@ -0,0 +1,54 @@
+/* eslint-disable no-magic-numbers */
+import { MILLIONS, THOUSANDS } from "./enums.mjs";
+
+function removeUseless0(value) {
+    let newValue = value;
+    if (newValue.indexOf(".") > 0) {
+        if (newValue.slice(-2) === "00") {
+            newValue = newValue.slice(0, -2);
+        }
+        if (newValue.slice(-1) === "0") {
+            newValue = newValue.slice(0, -1);
+        }
+        if (newValue.slice(-1) === ".") {
+            newValue = newValue.slice(0, -1);
+        }
+    }
+    return newValue;
+}
+
+function getPrecision(value, forceInteger) {
+    if (forceInteger) {
+        return value.toFixed(0);
+    }
+    return value.toFixed(1);
+}
+
+function formatIndicatorValue(value, forceInteger) {
+    if (value === undefined || isNaN(value) || value === null) {
+        return "-";
+    }
+    let nb = null;
+    if (Math.abs(value) > 999999) {
+        nb =
+            removeUseless0(
+                getPrecision(
+                    (Math.sign(value) * Math.abs(value)) / 1000000,
+                    forceInteger
+                )
+            ) + MILLIONS;
+    } else if (Math.abs(value) > 999) {
+        nb =
+            removeUseless0(
+                getPrecision(
+                    (Math.sign(value) * Math.abs(value)) / 1000,
+                    forceInteger
+                )
+            ) + THOUSANDS;
+    } else {
+        nb = removeUseless0(getPrecision(value, forceInteger));
+    }
+    return nb.replace(".", ",");
+}
+
+export { formatIndicatorValue };

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/side_panel.mjs

@@ -0,0 +1,103 @@
+import { fillMethodoSidePanel } from "./dom.mjs";
+
+let buttonWhichOpenedPanel = null;
+
+function closeSidePanel() {
+    const sidePanelGeo = document.getElementById("slide-panel-geo");
+    const sidePanelMethodo = document.getElementById("slide-panel-methodo");
+    sidePanelGeo.classList.remove("tdbmd-slide-panel--show");
+    sidePanelMethodo.classList.remove("tdbmd-slide-panel--show");
+    if (sidePanelGeo.style.display === "block") {
+        setTimeout(() => {
+            sidePanelGeo.style.display = "none";
+        }, 500);
+    }
+    if (sidePanelMethodo.style.display === "block") {
+        setTimeout(() => {
+            sidePanelMethodo.style.display = "none";
+        }, 500);
+    }
+    document.querySelectorAll(".validate-territory-btn").forEach((btn) => {
+        delete btn.dataset.comparison;
+    });
+    releaseFocusTrap();
+    if (buttonWhichOpenedPanel) {
+        buttonWhichOpenedPanel.focus();
+    } else {
+        document.getElementById("contenu").focus();
+    }
+}
+
+function openSidePanel(button, type, comparison = false) {
+    buttonWhichOpenedPanel = button;
+    const panelId = `slide-panel-${type}`;
+    const sidePanel = document.getElementById(panelId);
+    sidePanel.style.display = "block";
+    setTimeout(() => sidePanel.classList.add("tdbmd-slide-panel--show"), 100);
+    if (comparison) {
+        document.querySelectorAll(".validate-territory-btn").forEach((btn) => {
+            btn.dataset.comparison = "true";
+        });
+    }
+    sidePanel.querySelector("button").focus();
+    trapFocus(sidePanel);
+}
+
+let focusTrapListener;
+
+function trapFocus(container) {
+    const focusableSelectors =
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = container.querySelectorAll(focusableSelectors);
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    focusTrapListener = function (e) {
+        if (e.key === "Tab") {
+            if (e.shiftKey && document.activeElement === firstElement) {
+                e.preventDefault();
+                lastElement.focus();
+            } else if (!e.shiftKey && document.activeElement === lastElement) {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        } else if (e.key === "Escape") {
+            closeSidePanel();
+        }
+    };
+
+    document.addEventListener("keydown", focusTrapListener);
+}
+
+function releaseFocusTrap() {
+    document.removeEventListener("keydown", focusTrapListener);
+}
+
+function openMethodoSidePanel(indicator, button) {
+    fillMethodoSidePanel(indicator);
+    openSidePanel(button, "methodo");
+}
+
+function addSidePanelListener() {
+    const button = document.querySelector(
+        'button[aria-controls="slide-panel-geo"][data-comparison="false"]'
+    );
+    if (button) {
+        button.addEventListener("click", () => openSidePanel(button, "geo"));
+    }
+    const cmpButton = document.querySelector(
+        'button[aria-controls="slide-panel-geo"][data-comparison="true"]'
+    );
+    if (cmpButton) {
+        cmpButton.addEventListener("click", () =>
+            openSidePanel(cmpButton, "geo", true)
+        );
+    }
+    document
+        .querySelectorAll('button[data-side-panel-close="true"]')
+        .forEach((closeButton) => {
+            closeButton.addEventListener("click", () => closeSidePanel());
+        });
+}
+
+export { openMethodoSidePanel, addSidePanelListener };

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/theme/history.mjs

@@ -0,0 +1,89 @@
+import {
+    getDataset,
+    getDates,
+    makeChart,
+    setBackgroundInDatasets,
+} from "../utils.mjs";
+import { getIndicatorDataScript, getParams } from "../dom.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+
+function getScales(indicatorData) {
+    const { minDate, maxDate } = getDates(indicatorData);
+
+    function xTicksCallback(value) {
+        if (typeof value === "string") {
+            return value;
+        }
+        return value % 1 === 0 ? value.toString() : "";
+    }
+    function yTicksCallback(value) {
+        if (typeof value === "string") {
+            return value;
+        }
+
+        return formatIndicatorValue(value);
+    }
+
+    return {
+        x: {
+            type: "linear",
+            position: "bottom",
+            suggestedMax: maxDate,
+            suggestedMin: minDate,
+            ticks: {
+                stepSize: 0.2,
+                callback: xTicksCallback,
+            },
+        },
+        y: {
+            beginAtZero: true,
+            ticks: {
+                callback: yTicksCallback,
+            },
+        },
+    };
+}
+
+function makeHistoryChart(indicator, indicatorData) {
+    const ctx = document.querySelector(`#card-${indicator.id} .history-chart`);
+    const params = getParams();
+    const datasets = [
+        getDataset(params.territory_name, indicatorData, indicator),
+    ];
+    setBackgroundInDatasets(datasets);
+    const data = {
+        datasets,
+    };
+    const options = {
+        layout: {
+            padding: {
+                top: 40,
+                right: 100,
+            },
+        },
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false,
+            },
+            datalabels: {
+                align: "top",
+                anchor: "end",
+                color: "black",
+            },
+        },
+        scales: getScales(indicatorData),
+    };
+    const chartType = indicatorData.length > 1 ? "line" : "bar";
+    makeChart(ctx, chartType, data, options);
+}
+
+function updateHistoryDOM(indicator) {
+    const indicatorData = getIndicatorDataScript(indicator, "values");
+    if (!indicatorData) {
+        return;
+    }
+    makeHistoryChart(indicator, indicatorData.values);
+}
+
+export { updateHistoryDOM };

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/theme/main-value.mjs

@@ -0,0 +1,22 @@
+import {
+    getIndicatorDataScript,
+    getIsAlternativeUnit,
+    removeDelaySpinner,
+} from "../dom.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+
+function updateMainValueDOM(indicator) {
+    const mainData = getIndicatorDataScript(indicator, "values");
+    if (!mainData) {
+        return;
+    }
+    const data = mainData.values[0];
+    const displayAlternative = getIsAlternativeUnit(indicator.id);
+    const val = displayAlternative ? data.valeur_alternative : data.valeur;
+    removeDelaySpinner(`#card-${indicator.id} .delay-spinner`);
+    document.querySelector(
+        `#card-${indicator.id} .main-value span:first-child`
+    ).textContent = `${formatIndicatorValue(val)}`;
+}
+
+export { updateMainValueDOM };

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/theme/page.mjs

@@ -0,0 +1,162 @@
+/* globals Chart, ChartDataLabels */
+
+import {
+    delaySpinner,
+    getApiUrls,
+    getClosestIndicator,
+    getParams,
+    makeIndicatorDataScript,
+} from "../dom.mjs";
+
+import {
+    getIndicatorFilters,
+    handleFilterClick,
+    initializeFilters,
+} from "../filters.mjs";
+import { addSidePanelListener, openMethodoSidePanel } from "../side_panel.mjs";
+
+import { exportImageAsync } from "../export-graph.mjs";
+import { exportToCSV } from "../export.mjs";
+
+import { updateHistoryDOM } from "./history.mjs";
+import { updateMainValueDOM } from "./main-value.mjs";
+import { updateStatisticsDOM } from "./statistics.mjs";
+
+Chart.register(
+    Chart.CategoryScale,
+    Chart.LinearScale,
+    Chart.BarElement,
+    Chart.Title,
+    Chart.Tooltip,
+    Chart.Legend,
+    ChartDataLabels
+);
+
+function getSearchParams(indicator) {
+    const params = getParams();
+    const filters = getIndicatorFilters(indicator);
+    const filtersQuery = filters
+        .map(([dimension, filter]) => `&${dimension}=${filter}`)
+        .join("");
+    const searchParams = new URLSearchParams(
+        `territory=${params.territory_id}-${params.territory_mesh}&submesh=${params.mesh}${filtersQuery}`
+    ).toString();
+    return searchParams;
+}
+
+function callData(indicator) {
+    const apiUrls = getApiUrls(indicator);
+    const searchParams = getSearchParams(indicator);
+    [
+        [
+            "values",
+            (ind) => {
+                updateMainValueDOM(ind);
+                updateHistoryDOM(ind);
+            },
+        ],
+        ["statistics", updateStatisticsDOM],
+    ].forEach(async ([key, callbackUpdateDOM]) => {
+        const response = await fetch(`${apiUrls[key]}?${searchParams}`);
+        if (response.ok) {
+            const data = await response.json();
+            makeIndicatorDataScript(indicator, key, data);
+            callbackUpdateDOM(indicator);
+        }
+    });
+}
+
+function makeIndicatorCards() {
+    const subThemes = JSON.parse(
+        document.getElementById("sub-themes-js").textContent
+    );
+    subThemes.forEach((subTheme) => {
+        subTheme.indicators.forEach((indicator) => {
+            initializeFilters(indicator);
+            callData(indicator);
+        });
+    });
+}
+
+function toggleIndicatorUnit(input) {
+    const indicator = getClosestIndicator(input);
+    const unity = input.checked ? indicator.unite_alternative : indicator.unite;
+    const accessibleName = input.checked
+        ? indicator.unite_alternative_nom_accessible
+        : indicator.unite_nom_accessible;
+    Array.from(
+        document.querySelectorAll(`#card-${indicator.id} .unite`)
+    ).forEach((node) => {
+        node.innerText = unity;
+        node.setAttribute("aria-label", accessibleName);
+    });
+    const ariaLiveMessage = input.checked
+        ? `L'unité affichée est : ${indicator.unite_alternative_nom_accessible}`
+        : `L'unité affichée est : ${indicator.unite_nom_accessible}`;
+    document.getElementById(`${indicator.id}-toggle-unit-messages`).innerText =
+        ariaLiveMessage;
+    updateMainValueDOM(indicator);
+    updateStatisticsDOM(indicator);
+    updateHistoryDOM(indicator);
+}
+
+delaySpinner();
+makeIndicatorCards();
+document.querySelectorAll(".indicator-card").forEach((indicatorCard) => {
+    const indicator = getClosestIndicator(indicatorCard);
+
+    indicatorCard.querySelectorAll(".filter-tag").forEach((button) => {
+        button.addEventListener("click", async () => {
+            await handleFilterClick(indicator);
+            callData(indicator);
+        });
+    });
+
+    indicatorCard.querySelectorAll(".toggle-unite").forEach((input) => {
+        input.addEventListener("input", (event) => {
+            toggleIndicatorUnit(event.target);
+        });
+    });
+
+    indicatorCard
+        .querySelectorAll('button[aria-controls="slide-panel-methodo"]')
+        .forEach((button) => {
+            button.addEventListener("click", () => {
+                openMethodoSidePanel(indicator, button);
+            });
+        });
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".toggle-unite").forEach((input) => {
+        toggleIndicatorUnit(input);
+    });
+    addSidePanelListener();
+});
+
+document
+    .querySelectorAll('button[data-type="export-csv"]')
+    .forEach((button) => {
+        const indicator = getClosestIndicator(button);
+        button.addEventListener("click", () => {
+            button.setAttribute("disabled", "true");
+            const searchParams = getSearchParams(indicator);
+            exportToCSV(button, indicator, button.dataset.route, searchParams);
+        });
+    });
+
+document
+    .querySelectorAll('button[data-type="export-png"]')
+    .forEach((button) => {
+        const indicator = getClosestIndicator(button);
+        button.addEventListener("click", async () => {
+            button.setAttribute("disabled", "true");
+            // need to wait a small amount of time for DOM update
+            await new Promise((resolve) => setTimeout(resolve, 50));
+            await exportImageAsync(
+                button.parentElement.previousElementSibling,
+                `${indicator.name} - ${button.dataset.title}`
+            );
+            button.removeAttribute("disabled");
+        });
+    });

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/theme/statistics.mjs

@@ -0,0 +1,42 @@
+import {
+    getIndicatorDataScript,
+    getIsAlternativeUnit,
+    removeDelaySpinner,
+} from "../dom.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+
+function updateStatisticsDOM(indicator) {
+    const data = getIndicatorDataScript(indicator, "statistics");
+    if (!data) {
+        return;
+    }
+    const displayAlternative = getIsAlternativeUnit(indicator.id);
+    const alternative = displayAlternative ? "_alternative" : "";
+    ["min", "med", "max"].forEach((prefix) => {
+        removeDelaySpinner(`#card-${indicator.id} .delay-spinner`);
+        const key = `${prefix}${alternative}`;
+        const name = data[`code_${key}_name`];
+        if (name !== undefined) {
+            document.querySelector(
+                `#card-${indicator.id} .${prefix}-name`
+            ).textContent = name;
+        }
+        const value = data[key];
+        document.querySelector(
+            `#card-${indicator.id} .${prefix}-value > span:first-child`
+        ).textContent =
+            value === undefined ? "-" : `${formatIndicatorValue(value)}`;
+        const count = data[`count_${key}`];
+        if (count !== undefined) {
+            const text =
+                count > 1
+                    ? `+${count - 1} autre${count - 1 > 1 ? "s" : ""}`
+                    : "";
+            document.querySelector(
+                `#card-${indicator.id} .${prefix}-count`
+            ).textContent = text;
+        }
+    });
+}
+
+export { updateStatisticsDOM };