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

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

@@ -0,0 +1,98 @@
+import {
+    getDataset,
+    getDates,
+    makeChart,
+    setBackgroundInDatasets,
+} from "../utils.mjs";
+import { getIndicatorDataScript, getParams } from "../dom.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+
+function getScales(minDate, maxDate, maxValue) {
+    return {
+        x: {
+            beginAtZero: false,
+            suggestedMax: maxDate,
+            suggestedMin: minDate,
+            type: "linear",
+            ticks: {
+                callback: function (value) {
+                    if (typeof value === "string") {
+                        return value;
+                    }
+                    return value % 1 === 0 ? value.toString() : "";
+                },
+            },
+        },
+        y: {
+            beginAtZero: true,
+            suggestedMax: Math.ceil(maxValue * 1.2),
+            // stacked: true,
+            type: "linear",
+            ticks: {
+                callback: function (value) {
+                    if (typeof value === "string") {
+                        return value;
+                    }
+                    return formatIndicatorValue(value);
+                },
+            },
+        },
+    };
+}
+
+function getMaxValue(history, comparedHistory) {
+    history.map((v) => v.valeur);
+    return Math.max(
+        ...history.map((v) => v.valeur),
+        ...comparedHistory.map((v) => v.valeur)
+    );
+}
+
+function makeHistoryChart(indicator, history, comparedHistory) {
+    const maxValue = getMaxValue(history, comparedHistory);
+    const { minDate, maxDate } = getDates(history);
+
+    const ctx = document.querySelector(`#card-${indicator.id} .history-chart`);
+    const params = getParams();
+    const datasets = [
+        getDataset(params.territory_name, history, indicator),
+        getDataset(params.cmp_territory_name, comparedHistory, indicator),
+    ];
+    const chartType = history.length > 1 ? "line" : "bar";
+    setBackgroundInDatasets(datasets, true, chartType);
+    const data = { datasets };
+    const options = {
+        layout: {
+            padding: {
+                top: 30,
+            },
+        },
+        interaction: {
+            intersect: false,
+            mode: "x",
+        },
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: true,
+            },
+            datalabels: {
+                anchor: "end",
+                align: "end",
+                color: "black",
+            },
+        },
+        scales: getScales(minDate, maxDate, maxValue),
+    };
+
+    makeChart(ctx, chartType, data, options);
+}
+
+function updateHistoryDOM(indicator) {
+    const history = getIndicatorDataScript(indicator, "values");
+    if (history) {
+        makeHistoryChart(indicator, history.values, history.cmp_values);
+    }
+}
+
+export { updateHistoryDOM };

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/comparaison/main-values.mjs

@@ -0,0 +1,30 @@
+import {
+    getIndicatorDataScript,
+    getParams,
+    removeDelaySpinner,
+} from "../dom.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+
+function updateMainValues(indicator) {
+    const params = getParams();
+    const data = getIndicatorDataScript(indicator, "values");
+    if (!data) {
+        return;
+    }
+    removeDelaySpinner(`#card-${indicator.id} .delay-spinner`);
+
+    const element = document.querySelector(
+        `#card-${indicator.id} .territory-value > span:first-child`
+    );
+
+    const value = formatIndicatorValue(data.values[0].valeur);
+    element.innerHTML = `<strong>${params.territory_name} : </strong>${value}`;
+
+    const cmpElement = document.querySelector(
+        `#card-${indicator.id} .compared-territory-value > span:first-child`
+    );
+    const cmpValue = formatIndicatorValue(data.cmp_values[0].valeur);
+    cmpElement.innerHTML = `<strong>${params.cmp_territory_name} : </strong>${cmpValue}`;
+}
+
+export { updateMainValues };

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

@@ -0,0 +1,105 @@
+/* globals Chart, ChartDataLabels */
+import { callData, getSearchParams } from "./data.mjs";
+import { delaySpinner, getClosestIndicator } from "../dom.mjs";
+import { handleFilterClick, initializeFilters } from "../filters.mjs";
+import { addSidePanelListener, openMethodoSidePanel } from "../side_panel.mjs";
+
+import { exportImageAsync } from "../export-graph.mjs";
+import { exportToCSV } from "../export.mjs";
+
+Chart.register(
+    Chart.CategoryScale,
+    Chart.LinearScale,
+    Chart.BarElement,
+    Chart.PointElement,
+    Chart.LineElement,
+    Chart.Title,
+    Chart.Tooltip,
+    Chart.Legend,
+    Chart.LogarithmicScale,
+    ChartDataLabels
+);
+
+function makeIndicatorCards() {
+    const subThemes = JSON.parse(
+        document.getElementById("sub-themes-js").textContent
+    );
+    subThemes.forEach((subTheme) => {
+        subTheme.indicators.forEach((indicator) => {
+            initializeFilters(indicator);
+            callData(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('button[aria-controls="slide-panel-methodo"]')
+        .forEach((button) => {
+            button.addEventListener("click", () => {
+                openMethodoSidePanel(indicator, button);
+            });
+        });
+});
+
+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");
+        });
+    });
+
+document.addEventListener("DOMContentLoaded", () => {
+    const withPattern = localStorage.getItem("pattern") === "true";
+    document.querySelectorAll(".pattern-toggle").forEach((button) => {
+        button.checked = withPattern;
+        button.addEventListener("click", () => {
+            localStorage.setItem("pattern", button.checked ? "true" : "false");
+            setTimeout(() => {
+                document
+                    .querySelectorAll(".indicator-card")
+                    .forEach((indicatorCard) => {
+                        const indicator = getClosestIndicator(indicatorCard);
+                        callData(indicator);
+                    });
+            }, 100);
+            document.querySelectorAll(".pattern-toggle").forEach((b) => {
+                const withUpdatedPattern =
+                    localStorage.getItem("pattern") === "true";
+                b.checked = withUpdatedPattern;
+            });
+        });
+    });
+    addSidePanelListener();
+});

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/comparaison/territory-chart.mjs

@@ -0,0 +1,141 @@
+import { getIndicatorDataScript, getParams } from "../dom.mjs";
+import { MAX_TERRITORIES_BEFORE_HIDE } from "../enums.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+import { makeChart, setBackgroundInDatasets } from "../utils.mjs";
+
+function getChartData(histogram, params) {
+    const labels = histogram.buckets.map(
+        (bucket) =>
+            `${formatIndicatorValue(bucket[0])}-${formatIndicatorValue(
+                bucket[1]
+            )}`
+    );
+    const dataMain = Object.entries(histogram.values).map((entries) => ({
+        x: labels[Number(entries[0]) - 1],
+        y: entries[1].length,
+        territories: entries[1],
+    }));
+    const dataCompared = Object.entries(histogram.comparedValues).map(
+        (entries) => ({
+            x: labels[Number(entries[0]) - 1],
+            y: entries[1].length * -1,
+            territories: entries[1],
+        })
+    );
+    const datasets = [
+        {
+            label: params.territory_name.split(" - ")[0],
+            data: dataMain,
+            backgroundColor: "#6A6AF4",
+            barPercentage: 1.0,
+        },
+        {
+            label: params.cmp_territory_name.split(" - ")[0],
+            data: dataCompared,
+            backgroundColor: "#000091",
+            barPercentage: 1.0,
+        },
+    ];
+    setBackgroundInDatasets(datasets);
+    return {
+        labels: labels,
+        datasets,
+    };
+}
+
+function getScales() {
+    const zeroLineWidth = 2;
+    return {
+        x: {
+            beginAtZero: false,
+            display: true,
+            type: "category",
+            stacked: true,
+        },
+        y: {
+            beginAtZero: true,
+            display: true,
+            stacked: true,
+            ticks: {
+                callback: function (value) {
+                    if (typeof value === "number") {
+                        return formatIndicatorValue(Math.abs(value));
+                    }
+                    return value;
+                },
+            },
+            grid: {
+                drawBorder: true,
+                color: (context) =>
+                    // Couleur distincte pour la ligne du zéro
+                    context.tick.value === 0 ? "#000" : "#ccc",
+                // Épaisseur de la ligne zéro
+                lineWidth: (context) =>
+                    context.tick.value === 0 ? zeroLineWidth : 1,
+            },
+        },
+    };
+}
+
+function getOptions(params) {
+    const { mesh } = params;
+
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        minBarLength: 8,
+        layout: {
+            padding: {
+                top: 40,
+                right: 100,
+            },
+        },
+        plugins: {
+            legend: {
+                display: true,
+            },
+            title: {
+                display: true,
+                text: "Comparaison des valeurs",
+            },
+            datalabels: {
+                display: false,
+            },
+            tooltip: {
+                callbacks: {
+                    label: function (context) {
+                        const multiplier = context.datasetIndex === 0 ? 1 : -1;
+                        const numberOfTerritories = context.raw.y * multiplier;
+                        return numberOfTerritories > MAX_TERRITORIES_BEFORE_HIDE
+                            ? `${numberOfTerritories} ${mesh}${
+                                  numberOfTerritories > 1 ? "s" : ""
+                              }`
+                            : context.raw.territories;
+                    },
+                },
+            },
+        },
+        scales: getScales(),
+    };
+}
+
+function makeComparedTerritoryChart(indicator) {
+    const indicatorData = getIndicatorDataScript(
+        indicator,
+        "comparison-histogram"
+    );
+    if (!indicatorData) {
+        return;
+    }
+    const params = getParams();
+
+    const ctx = document.querySelector(
+        `#card-${indicator.id} .comparison-chart`
+    );
+    const chartData = getChartData(indicatorData, params);
+    const options = getOptions(params);
+
+    makeChart(ctx, "bar", chartData, options);
+}
+
+export { makeComparedTerritoryChart };

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/details/data.mjs

@@ -0,0 +1,59 @@
+import { getApiUrls, getParams, makeIndicatorDataScript } from "../dom.mjs";
+import { getIndicatorFilters } from "../filters.mjs";
+
+import { makeHistogramChart } from "./histogram.mjs";
+import { makeProportionsChart } from "./proportions.mjs";
+import { makeTables } from "./table.mjs";
+import { makeTop10Chart } from "./top10.mjs";
+
+async function fetchHistogram(indicator, apiUrls, searchParams) {
+    const response = await fetch(`${apiUrls.histogram}?${searchParams}`);
+    if (response.ok) {
+        const data = await response.json();
+        makeIndicatorDataScript(indicator, "histogram", data);
+        makeHistogramChart(indicator);
+    }
+}
+
+async function fetchTop10(indicator, apiUrls, searchParams) {
+    const response = await fetch(`${apiUrls["top-10"]}?${searchParams}`);
+    if (response.ok) {
+        const data = await response.json();
+        makeIndicatorDataScript(indicator, "top-10", data);
+        makeTop10Chart(indicator);
+    }
+}
+
+async function fetchProportions(indicator, apiUrls, searchParams) {
+    if (indicator.filters.length > 0) {
+        const response = await fetch(`${apiUrls.proportions}?${searchParams}`);
+        if (response.ok) {
+            const data = await response.json();
+            makeIndicatorDataScript(indicator, "proportions", data);
+            makeProportionsChart(indicator);
+        }
+    }
+}
+
+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);
+    fetchHistogram(indicator, apiUrls, searchParams);
+    fetchTop10(indicator, apiUrls, searchParams);
+    fetchProportions(indicator, apiUrls, searchParams);
+    makeTables();
+}
+
+export { callData, getSearchParams };

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/details/histogram.mjs

@@ -0,0 +1,130 @@
+import { getIndicatorDataScript, getParams } from "../dom.mjs";
+import {
+    getMeshLevelTitle,
+    MAX_TERRITORIES_BEFORE_HIDE,
+    MILLIONS,
+    SHORT_MESH_NUMBER_OF_LETTERS,
+    THOUSANDS,
+} from "../enums.mjs";
+import { makeChart, setBackgroundInDatasets } from "../utils.mjs";
+
+import { addEmptyGraphMessage } from "./utils.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+
+function getDatalabels(dataset, mesh) {
+    return {
+        anchor: "end",
+        align: "end",
+        color: "black",
+        font: {
+            weight: "bold",
+        },
+        formatter: function (value, context) {
+            const formatted = formatIndicatorValue(value.y, true);
+            if (!formatted) {
+                return "";
+            }
+            if (
+                context.active &&
+                dataset.comments.length > context.dataIndex &&
+                dataset.comments[context.dataIndex] !== "" &&
+                dataset.comments[context.dataIndex].split("\n").length <=
+                    MAX_TERRITORIES_BEFORE_HIDE
+            ) {
+                return dataset.comments[context.dataIndex];
+            }
+            return `${formatted} ${getMeshLevelTitle(mesh).slice(
+                0,
+                SHORT_MESH_NUMBER_OF_LETTERS
+            )}.${value.y > 1 ? "s" : ""}`;
+        },
+    };
+}
+
+function getScales(labels, maxFromData) {
+    return {
+        x: {
+            beginAtZero: false,
+            grid: {
+                display: false,
+            },
+            ticks: {
+                callback: function (value) {
+                    function formatLabel(v) {
+                        if (
+                            [THOUSANDS, MILLIONS].some((s) =>
+                                labels[v].includes(s)
+                            )
+                        ) {
+                            return labels[v];
+                        }
+                        return formatIndicatorValue(
+                            Number.parseFloat(labels[v]),
+                            true
+                        );
+                    }
+                    if (value === labels.length - 1) {
+                        return `${formatLabel(value)} +`;
+                    }
+                    return `${formatLabel(value)} - ${formatLabel(value + 1)}`;
+                },
+            },
+        },
+        y: {
+            beginAtZero: true,
+            grid: {
+                display: false,
+            },
+            max:
+                maxFromData <= MAX_TERRITORIES_BEFORE_HIDE
+                    ? maxFromData + 1
+                    : maxFromData,
+        },
+    };
+}
+
+export function makeHistogramChart(indicator) {
+    const { mesh } = getParams();
+    const histogramData = getIndicatorDataScript(indicator, "histogram");
+    if (!histogramData) {
+        return;
+    }
+    const { datasetsHistogramBarChart: dataset, deciles } = histogramData;
+
+    const ctx = document.getElementById("histogramChart");
+    if (Object.keys(dataset).length === 0) {
+        addEmptyGraphMessage(ctx);
+        return;
+    }
+
+    const labels = deciles.map((decile) => formatIndicatorValue(decile));
+
+    setBackgroundInDatasets([dataset], false);
+
+    const data = {
+        labels: labels,
+        datasets: [dataset],
+    };
+    const maxFromData = Math.max(...dataset.data.map((data) => data.y));
+    const options = {
+        indexAxis: "x",
+        layout: {
+            padding: {
+                top: 30,
+            },
+        },
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false,
+            },
+            tooltip: {
+                enabled: false,
+            },
+            datalabels: getDatalabels(dataset, mesh),
+        },
+        scales: getScales(labels, maxFromData),
+    };
+
+    makeChart(ctx, "bar", data, options);
+}

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/details/map.mjs

@@ -0,0 +1,25 @@
+/* globals ReactDOM, React, IndicatorMap */
+
+import { getParams } from "../dom.mjs";
+
+function makeMap(indicator) {
+    const params = getParams();
+    const container = document.getElementById("indicator-map");
+    const root = ReactDOM.createRoot(container);
+    const element = React.createElement(
+        IndicatorMap,
+        {
+            indicator,
+            mesh: params.mesh,
+            territory: {
+                geoId: params.territory_id,
+                geoLevel: params.territory_mesh,
+                label: params.territory_name,
+            },
+        },
+        null
+    );
+    root.render(element);
+}
+
+export { makeMap };

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

@@ -0,0 +1,96 @@
+/* globals Chart, ChartDataLabels */
+
+import { callData, getSearchParams } from "./data.mjs";
+import {
+    handleFilterClick,
+    initializeFilters,
+    updateFiltersReminder,
+    updateUrlWithFilters,
+} from "../filters.mjs";
+import { addSidePanelListener, openMethodoSidePanel } from "../side_panel.mjs";
+
+import { exportImageAsync } from "../export-graph.mjs";
+import { exportToCSV } from "../export.mjs";
+import { makeMap } from "./map.mjs";
+import { makeProportionsChart } from "./proportions.mjs";
+import { makeSankeyGraph } from "./sankey.mjs";
+import { makeTop10Chart } from "./top10.mjs";
+
+Chart.register(
+    Chart.CategoryScale,
+    Chart.LinearScale,
+    Chart.BarElement,
+    Chart.Title,
+    Chart.Tooltip,
+    Chart.Legend,
+    ChartDataLabels
+);
+
+const indicator = JSON.parse(
+    document.getElementById("indicator-js").textContent
+);
+initializeFilters(indicator);
+callData(indicator);
+makeMap(indicator);
+makeSankeyGraph(indicator);
+const openMethodoButton = document.querySelector(
+    'button[aria-controls="slide-panel-methodo"]'
+);
+openMethodoButton.addEventListener("click", () => {
+    openMethodoSidePanel(indicator, openMethodoButton);
+});
+document.querySelectorAll(".filter-tag").forEach((button) => {
+    button.addEventListener("click", async () => {
+        await handleFilterClick(indicator);
+        updateUrlWithFilters();
+        updateFiltersReminder(indicator);
+        callData(indicator);
+    });
+});
+updateUrlWithFilters();
+updateFiltersReminder(indicator);
+
+document
+    .querySelectorAll('button[data-type="export-png"]')
+    .forEach((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");
+        });
+    });
+
+document
+    .querySelectorAll('button[data-type="export-csv"]')
+    .forEach((button) => {
+        button.addEventListener("click", () => {
+            button.setAttribute("disabled", "true");
+            const searchParams = getSearchParams(indicator);
+            exportToCSV(button, indicator, button.dataset.route, searchParams);
+        });
+    });
+
+document.addEventListener("DOMContentLoaded", () => {
+    const withPattern = localStorage.getItem("pattern") === "true";
+    document.querySelectorAll(".pattern-toggle").forEach((button) => {
+        button.checked = withPattern;
+        button.addEventListener("click", () => {
+            localStorage.setItem("pattern", button.checked ? "true" : "false");
+            setTimeout(() => {
+                makeProportionsChart(indicator);
+                makeTop10Chart(indicator);
+            }, 100);
+            document.querySelectorAll(".pattern-toggle").forEach((b) => {
+                const withUpdatedPattern =
+                    localStorage.getItem("pattern") === "true";
+                b.checked = withUpdatedPattern;
+            });
+        });
+    });
+    addSidePanelListener();
+});