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/details/proportions.mjs

@@ -0,0 +1,77 @@
+import { getIndicatorDataScript, getParams } from "../dom.mjs";
+import { getToolTip, makeChart, setBackgroundInDatasets } from "../utils.mjs";
+
+import { COLORS } from "../enums.mjs";
+import { addEmptyGraphMessage } from "./utils.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+
+function getPlugins(indicator) {
+    return {
+        datalabels: {
+            display: true,
+            color: (context) => {
+                const bgColor = context.dataset.backgroundColor;
+                return COLORS[bgColor] || "white";
+            },
+            anchor: "center",
+            align: "center",
+            font: {
+                weight: "bold",
+            },
+            formatter: (value) =>
+                `${formatIndicatorValue(value)} ${indicator.unite}`,
+        },
+        tooltip: getToolTip(indicator.unite),
+    };
+}
+
+function makeProportionsChart(indicator) {
+    const { territory_name: label } = getParams();
+
+    const ctx = document.getElementById("proportionsChart");
+    if (ctx === null) {
+        return;
+    }
+
+    const proportionsData = getIndicatorDataScript(indicator, "proportions");
+    if (!proportionsData) {
+        return;
+    }
+
+    const datasets = proportionsData.values;
+
+    const emptyDatasets = datasets
+        .map((ds) => ds.data)
+        .flat()
+        .every((d) => d === null);
+    if (datasets.length === 0 || emptyDatasets) {
+        addEmptyGraphMessage(ctx);
+        return;
+    }
+
+    setBackgroundInDatasets(datasets);
+
+    const data = {
+        labels: [label],
+        datasets,
+    };
+    const options = {
+        indexAxis: "y",
+        maintainAspectRatio: false,
+        plugins: getPlugins(indicator),
+        scales: {
+            x: {
+                display: false,
+                stacked: true,
+            },
+            y: {
+                display: false,
+                stacked: true,
+            },
+        },
+    };
+
+    makeChart(ctx, "bar", data, options);
+}
+
+export { makeProportionsChart };

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

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

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

@@ -0,0 +1,229 @@
+import { getApiUrls, getIndicator, getParams } from "../dom.mjs";
+import { getIndicatorFilters } from "../filters.mjs";
+
+function addClickEventOnTableHeader(tableContainer) {
+    tableContainer.querySelectorAll("thead th").forEach((element) => {
+        element.addEventListener("click", () => {
+            const orderflow =
+                element.dataset.orderflow === "ASC" ? "DESC" : "ASC";
+            updateTable({
+                tableContainer,
+                columnOrder: element.dataset.name,
+                columnOrderFlow: orderflow,
+                pagination: 1,
+                focus: true,
+            });
+        });
+    });
+}
+
+function addClickEventOnPagination(tableContainer) {
+    tableContainer.querySelectorAll(".fr-pagination__link").forEach((page) => {
+        page.addEventListener("click", () => {
+            const pagination = page.dataset.page;
+            updateTable({ tableContainer, pagination, focus: true });
+        });
+    });
+}
+
+function addOnSelectLimitInput(tableContainer) {
+    tableContainer
+        .querySelector(".select-table-limit")
+        .addEventListener("input", (event) => {
+            const limit = event.target.value;
+            updateTable({ tableContainer, limit, focus: true });
+        });
+}
+
+function addOnSearchInput(tableContainer) {
+    tableContainer
+        .querySelector(".table-search")
+        .addEventListener("change", (event) => {
+            const search = event.target.value;
+            updateTable({ tableContainer, pagination: 1, search, focus: true });
+        });
+}
+
+function addOnExportButtonClick(tableContainer, isFlows) {
+    const params = getParams();
+    const indicator = getIndicator();
+    const apiUrls = getApiUrls(indicator);
+
+    tableContainer.querySelectorAll(".table-export").forEach((button) => {
+        button.addEventListener("click", async () => {
+            const searchParams = new URLSearchParams(
+                `territory=${params.territory_id}-${params.territory_mesh}&submesh=${params.mesh}`
+            );
+            if (button.dataset.year) {
+                searchParams.set("year", button.dataset.year);
+            }
+            if (isFlows) {
+                searchParams.set("flows", true);
+            }
+            const response = await fetch(
+                `${apiUrls["details-table-export"]}?${searchParams.toString()}`
+            );
+            if (response.ok) {
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = url;
+                const name = isFlows ? "flux" : indicator.name;
+                a.download = `${name}${
+                    button.dataset.year ? `_${button.dataset.year}` : ""
+                }_export.csv`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            }
+        });
+    });
+}
+
+function addFocusToLine(tableContainer) {
+    const table = tableContainer.querySelector("table");
+    const lineFocus = table.dataset.linefocus;
+    if (lineFocus) {
+        const line = table.querySelector(`tbody > tr:nth-child(${lineFocus})`);
+        line.focus();
+    }
+}
+
+function getDefaultValue({
+    table,
+    columnOrder,
+    columnOrderFlow,
+    pagination,
+    limit,
+    search,
+}) {
+    let colOrder = columnOrder;
+    let colOrderFlow = columnOrderFlow;
+    if (table && colOrder === undefined) {
+        colOrder = table.dataset.sort;
+    }
+    if (table && colOrderFlow === undefined) {
+        colOrderFlow = table.dataset.orderflow;
+    }
+    let newLimit = limit;
+    if (table && newLimit === undefined) {
+        newLimit = table.dataset.limit;
+    }
+    let newSearch = search;
+    if (table && newSearch === undefined) {
+        newSearch = table.dataset.search;
+    }
+    let page = pagination;
+    if (table && page === undefined) {
+        page = table.dataset.page;
+    }
+
+    return { colOrder, colOrderFlow, newLimit, page, newSearch };
+}
+
+function getSearchParams({
+    indicator,
+    isFlows,
+    colOrder,
+    colOrderFlow,
+    newLimit,
+    newSearch,
+    page,
+    table,
+    focus,
+}) {
+    const params = getParams();
+    const filters = getIndicatorFilters(indicator);
+    let filtersQuery = filters
+        .map(([dimension, filter]) => `&${dimension}=${filter}`)
+        .join("");
+    if (isFlows) {
+        filtersQuery = "";
+    }
+    const searchParams = new URLSearchParams(
+        `territory=${params.territory_id}-${params.territory_mesh}&submesh=${params.mesh}${filtersQuery}`
+    );
+    if (colOrder !== undefined) {
+        searchParams.set("column_order", colOrder);
+    }
+    if (colOrderFlow !== undefined) {
+        searchParams.set("column_order_flow", colOrderFlow);
+    }
+    if (page !== undefined) {
+        searchParams.set("pagination", page);
+    }
+    if (table) {
+        searchParams.set("previous_limit", table.dataset.limit);
+    }
+    if (newLimit !== undefined) {
+        searchParams.set("limit", newLimit);
+    }
+    if (newSearch !== undefined && newSearch !== "") {
+        searchParams.set("search", newSearch);
+    }
+    if (isFlows) {
+        searchParams.set("flows", true);
+    }
+    if (focus) {
+        searchParams.set("focus", true);
+    }
+    return searchParams;
+}
+
+async function updateTable({
+    tableContainer,
+    columnOrder,
+    columnOrderFlow,
+    pagination,
+    limit,
+    search,
+    focus,
+}) {
+    const isFlows = tableContainer.dataset.source === "flows";
+    const indicator = getIndicator();
+    const apiUrls = getApiUrls(indicator);
+    const table = tableContainer.querySelector("table");
+    const { colOrder, colOrderFlow, newLimit, page, newSearch } =
+        getDefaultValue({
+            table,
+            columnOrder,
+            columnOrderFlow,
+            pagination,
+            limit,
+            search,
+        });
+    const searchParams = getSearchParams({
+        indicator,
+        isFlows,
+        table,
+        colOrder,
+        colOrderFlow,
+        newLimit,
+        page,
+        newSearch,
+        focus,
+    });
+    const response = await fetch(
+        `${apiUrls["details-table"]}?${searchParams.toString()}`
+    );
+    if (response.ok) {
+        const htmlData = await response.text();
+        tableContainer.innerHTML = htmlData;
+        addClickEventOnTableHeader(tableContainer);
+        addClickEventOnPagination(tableContainer);
+        addOnSelectLimitInput(tableContainer);
+        addOnSearchInput(tableContainer);
+        addOnExportButtonClick(tableContainer, isFlows);
+        addFocusToLine(tableContainer);
+    }
+}
+
+function makeTables() {
+    const tableContainers = document.querySelectorAll(".data-table");
+    tableContainers.forEach((tableContainer) => {
+        updateTable({ tableContainer });
+    });
+}
+
+export { makeTables };

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

@@ -0,0 +1,76 @@
+import { getToolTip, makeChart, setBackgroundInDatasets } from "../utils.mjs";
+
+import { addEmptyGraphMessage } from "./utils.mjs";
+import { formatIndicatorValue } from "../format.mjs";
+import { getIndicatorDataScript } from "../dom.mjs";
+
+function getPlugins(indicator) {
+    return {
+        datalabels: {
+            display: function (context) {
+                return (
+                    context.chart.isDatasetVisible(context.datasetIndex) &&
+                    context.active
+                );
+            },
+            anchor: "center",
+            align: "center",
+            color: "white",
+            formatter: function (value) {
+                return formatIndicatorValue(value);
+            },
+        },
+        tooltip: getToolTip(indicator.unite),
+    };
+}
+
+function makeTop10Chart(indicator) {
+    const top10Data = getIndicatorDataScript(indicator, "top-10");
+    if (!top10Data) {
+        return;
+    }
+    const { datasetsTopBarChart: datasets, labelsTopBarChart: labels } =
+        top10Data;
+
+    setBackgroundInDatasets(datasets);
+
+    const ctx = document.getElementById("top10Chart");
+    const data = {
+        labels: labels.map((label, index) => {
+            const v = datasets.reduce(
+                (acc, dataset) => acc + dataset.data[index],
+                0
+            );
+            if (datasets.length > 0) {
+                return `${label} (${formatIndicatorValue(v)} ${
+                    indicator.unite
+                })`;
+            }
+            return label;
+        }),
+        datasets,
+    };
+
+    if (data.labels.length === 0) {
+        addEmptyGraphMessage(ctx);
+        return;
+    }
+
+    const options = {
+        indexAxis: "y",
+        plugins: getPlugins(indicator),
+        scales: {
+            x: {
+                stacked: true,
+            },
+            y: {
+                beginAtZero: true,
+                stacked: true,
+            },
+        },
+    };
+
+    makeChart(ctx, "bar", data, options);
+}
+
+export { makeTop10Chart };

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

@@ -0,0 +1,8 @@
+function addEmptyGraphMessage(ctx) {
+    const div = document.createElement("div");
+    div.textContent =
+        "Il n'y a pas assez de données pour afficher le graphique.";
+    ctx.parentNode.insertBefore(div, ctx);
+}
+
+export { addEmptyGraphMessage };

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

@@ -0,0 +1,92 @@
+function fillMethodoSidePanel(indicator) {
+    const container = document.getElementById(
+        "slide-panel-content-methodo-markdown"
+    );
+    container.innerHTML = indicator.methodo_html;
+    const exportButton = document.getElementById("methodo-export-button");
+    exportButton.dataset.indicatorName = indicator.name;
+    exportButton.dataset.indicatorTitle = indicator.title;
+    document.getElementById("slide-panel-methodo-indicator-title").textContent =
+        indicator.title;
+    document.getElementById("slide-panel-methodo-theme-title").textContent =
+        indicator.theme;
+}
+
+function getClosestIndicator(element) {
+    const indicatorId = element.closest(".indicator-card").dataset.indicator;
+    return JSON.parse(document.getElementById(indicatorId).textContent);
+}
+
+function getIndicator() {
+    return JSON.parse(document.getElementById("indicator-js").textContent);
+}
+
+function getScriptId(indicator, key) {
+    return `${indicator.id}-data-${key}`;
+}
+
+function makeIndicatorDataScript(indicator, key, data) {
+    const scriptId = getScriptId(indicator, key);
+
+    const existingScript = document.getElementById(scriptId);
+    if (existingScript) {
+        existingScript.remove();
+    }
+
+    const script = document.createElement("script");
+    script.id = scriptId;
+    script.type = "application/json";
+    script.textContent = JSON.stringify(data);
+
+    let container = document.getElementById(`card-${indicator.id}`);
+    if (container === null) {
+        container = document.querySelector("body");
+    }
+    container.insertBefore(script, container.firstChild);
+}
+
+function getIndicatorDataScript(indicator, key) {
+    const scriptId = getScriptId(indicator, key);
+    const script = document.getElementById(scriptId);
+    return script ? JSON.parse(script.textContent) : null;
+}
+
+function getIsAlternativeUnit(indicatorId) {
+    const input = document.getElementById(`${indicatorId}-toggle-unit`);
+    return input && input.checked;
+}
+
+function getParams() {
+    return JSON.parse(document.getElementById("params-js").textContent);
+}
+
+function getApiUrls(indicator) {
+    return JSON.parse(
+        document.getElementById(`${indicator.id}-api-urls`).textContent
+    );
+}
+
+function removeDelaySpinner(selector) {
+    document.querySelectorAll(selector).forEach((el) => {
+        el.classList.remove("delay-spinner");
+    });
+}
+
+function delaySpinner() {
+    setTimeout(() => {
+        removeDelaySpinner(".delay-spinner");
+    }, 1000);
+}
+
+export {
+    delaySpinner,
+    getClosestIndicator,
+    fillMethodoSidePanel,
+    makeIndicatorDataScript,
+    getIndicatorDataScript,
+    getIsAlternativeUnit,
+    getParams,
+    getIndicator,
+    getApiUrls,
+    removeDelaySpinner,
+};

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

@@ -0,0 +1,104 @@
+const THOUSANDS = "k";
+const MILLIONS = "M";
+
+const MeshLevel = {
+    National: "fr",
+    Region: "reg",
+    Department: "dep",
+    Epci: "epci",
+    Town: "com",
+};
+
+const COLORS = {
+    "#6A6AF4": "white",
+    "#000091": "white",
+    "#E1000F": "white",
+    "#B7A73F": "black",
+    "#66673D": "white",
+    "#68A532": "black",
+    "#447049": "white",
+    "#00A95F": "black",
+    "#297254": "white",
+    "#009081": "black",
+    "#37635F": "white",
+    "#009099": "black",
+    "#006A6F": "white",
+    "#465F9D": "white",
+    "#2F4077": "white",
+    "#417DC4": "black",
+    "#3558A2": "white",
+    "#A558A0": "black",
+    "#6E445A": "white",
+    "#E18B76": "black",
+    "#8D533E": "white",
+    "#CE614A": "black",
+    "#A94645": "white",
+    "#C8AA39": "black",
+    "#716043": "white",
+    "#C3992A": "black",
+    "#695240": "white",
+    "#E4794A": "black",
+    "#755348": "white",
+    "#D1B781": "black",
+    "#685C48": "white",
+    "#C08C65": "black",
+    "#845d48": "white",
+    "#BD987A": "black",
+    "#745B47": "white",
+    "#AEA397": "black",
+    "#6A6156": "white",
+    "#C9191E": "white",
+};
+
+const PATTERNS = [
+    "plus",
+    "square",
+    "zigzag",
+    "dash",
+    "dot",
+    "cross",
+    "weave",
+    "triangle",
+    "disc",
+    "box",
+    "ring",
+    "line",
+    "diagonal",
+    "cross-dash",
+    "dot-dash",
+    "triangle-inverted",
+    "diamond",
+    "line-vertical",
+    "zigzag-vertical",
+    "diagonal-right-left",
+    "diamond-box",
+];
+
+function getMeshLevelTitle(meshLevel) {
+    switch (meshLevel) {
+        case MeshLevel.Region:
+            return "Région";
+        case MeshLevel.Department:
+            return "Département";
+        case MeshLevel.Epci:
+            return "Intercommunalité";
+        case MeshLevel.Town:
+            return "Commune";
+        case MeshLevel.National:
+            return "France entière";
+    }
+}
+
+const MAX_TERRITORIES_BEFORE_HIDE = 5;
+const SHORT_MESH_NUMBER_OF_LETTERS = 3;
+
+export {
+    MILLIONS,
+    THOUSANDS,
+    COLORS,
+    MeshLevel,
+    getMeshLevelTitle,
+    MAX_TERRITORIES_BEFORE_HIDE,
+    SHORT_MESH_NUMBER_OF_LETTERS,
+    PATTERNS,
+};

territories_dashboard_lib/website_lib/static/territories_dashboard_lib/website/js/pages/indicators/export-graph.mjs

@@ -0,0 +1,15 @@
+/* globals html2canvas */
+
+async function exportImageAsync(element, fileName) {
+    const canvas = await html2canvas(element);
+    const image = canvas.toDataURL("image/png", 1.0);
+    const tempLink = document.createElement("a");
+    tempLink.download = fileName;
+    tempLink.href = image;
+    document.body.appendChild(tempLink);
+    tempLink.click();
+    document.body.removeChild(tempLink);
+    tempLink.remove();
+}
+
+export { exportImageAsync };

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

@@ -0,0 +1,20 @@
+import { getApiUrls } from "./dom.mjs";
+
+async function exportToCSV(button, indicator, route, searchParams) {
+    const apiUrls = getApiUrls(indicator);
+    const response = await fetch(`${apiUrls[route]}export/?${searchParams}`);
+    button.removeAttribute("disabled");
+    if (response.ok) {
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `${indicator.name} - ${button.dataset.title}.csv`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+    }
+}
+
+export { exportToCSV };