@geo2france/api-dashboard 1.8.0 → 1.10.0

package/dist/components/Attributions/Attributions.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip, Typography } from 'antd';
-import { FaCreativeCommons, FaCreativeCommonsBy, FaCreativeCommonsNc, FaCreativeCommonsPd, FaCreativeCommonsSa, FaCreativeCommonsZero } from 'react-icons/fa';
+import { Icon } from '@iconify/react';
 const { Text, Link } = Typography;
 const LogoLicence = ({ license, style }) => {
     switch (license) {
         case "CC":
-            return _jsx(FaCreativeCommons, { style: style });
+            return _jsx(Icon, { icon: "cib:creative-commons", style: style });
         case "BY":
-            return _jsx(FaCreativeCommonsBy, { style: style });
+            return _jsx(Icon, { icon: "cib:creative-commons-by", style: style });
         case "NC":
-            return _jsx(FaCreativeCommonsNc, { style: style });
+            return _jsx(Icon, { icon: "cib:creative-commons-nc", style: style });
         case "PD":
-            return _jsx(FaCreativeCommonsPd, { style: style });
+            return _jsx(Icon, { icon: "cib:creative-commons-pd", style: style });
         case "SA":
-            return _jsx(FaCreativeCommonsSa, { style: style });
+            return _jsx(Icon, { icon: "cib:creative-commons-sa", style: style });
         case "ZERO":
-            return _jsx(FaCreativeCommonsZero, { style: style });
+            return _jsx(Icon, { icon: "cib:creative-commons-zero", style: style });
     }
 };
 const Attribution = ({ data, style, licenses }) => {

package/dist/components/Charts/Pie.js

@@ -1,20 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect } from "react";
 import { useDataset } from "../Dataset/hooks";
-import { ChartBlockContext } from "../DashboardPage/Block";
 import { usePalette } from "../Palette/Palette";
 import { from, op } from "arquero";
 import { ChartEcharts } from "./ChartEcharts";
 import { merge_others } from "../..";
+import { useBlockConfig } from "../DashboardPage/Block";
 export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, donut = false, other = 5 }) => {
     const dataset = useDataset(dataset_id);
-    const blockConfig = useContext(ChartBlockContext);
     const data = dataset?.data;
-    const block_config = {
+    useBlockConfig({
         title: title,
         dataExport: data
-    };
-    useEffect(() => blockConfig?.setConfig(block_config), [data]);
+    });
     const chart_data1 = data && data.length > 0
         ? from(data)
             .groupby(nameKey)

package/dist/components/Charts/Statistics.d.ts

@@ -0,0 +1,64 @@
+import { ReactElement } from "react";
+type comparwithType = "first" | "previous";
+interface StatisticsProps {
+    /** Identifiant du jeu de données */
+    dataset: string;
+    /** Nom de la colonne qui contient les valeurs */
+    dataKey: string;
+    /** Texte à afficher après l'évolution */
+    evolutionSuffix?: string;
+    /** Afficher l'évolution en % (sinon dans la même unité que la valeur) */
+    relativeEvolution?: boolean;
+    /** Titre */
+    title?: string;
+    /** Couleur */
+    color?: string;
+    /** Unité de la valeur */
+    unit?: string;
+    /** Inverser les couleurs (rouge/vert) de l'évolution */
+    invertColor?: boolean;
+    /** Icône (composant ou nom de l'icône sur Iconify.js ) */
+    icon?: ReactElement | string;
+    /** Texte à afficher dans le tooltip d'aide */
+    help?: string;
+    /** Comparer la valeur avec la précédente ou la première du jeu de données */
+    compareWith?: comparwithType;
+}
+/**
+ * Composant `Statistics` affichant une valeur d'un dataset avec son évolution.
+ *
+ * Affiche :
+ * - La dernière valeur du dataset
+ * - Unité et picto
+ * - Évolution par rapport à la première ou l'avant-dernière valeur
+ * - Couleur selon évolution positive/négative
+ * - Tooltip d'aide si fourni
+ *
+ * @param {StatisticsProps} props - Propriétés du composant
+ * @returns {ReactElement} Carte statistique
+ */
+export declare const Statistics: React.FC<StatisticsProps>;
+type StatisticsCollectionProps = {
+    /**
+     * Un ou plusieurs composants `<Statistics>`.
+     */
+    children: ReactElement<typeof Statistics> | ReactElement<typeof Statistics>[];
+    /**
+     * Nombre de colonnes (défaut : 3)
+     */
+    columns?: number;
+    /**
+     * Titre du bloc.
+     */
+    title?: string;
+};
+/**
+ * `StatisticsCollection` permet de regrouper plusieurs cartes statistiques
+ * dans un bloc
+ *
+ * @param {StatisticsProps} props - Propriétés du composant
+ * @returns {ReactElement} Collection de cartes statistiques
+ * ```
+ */
+export declare const StatisticsCollection: React.FC<StatisticsCollectionProps>;
+export {};

package/dist/components/Charts/Statistics.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { Avatar, Card, Col, Flex, Row, Tooltip, Typography } from "antd";
+import { Children } from "react";
+import { useDataset } from "../Dataset/hooks";
+import { Icon } from "@iconify/react";
+import { useBlockConfig } from "../DashboardPage/Block";
+const { Text, Paragraph } = Typography;
+// DEV : modele cf https://bootstrapbrain.com/component/bootstrap-statistics-card-example/
+/**
+ * Composant `Statistics` affichant une valeur d'un dataset avec son évolution.
+ *
+ * Affiche :
+ * - La dernière valeur du dataset
+ * - Unité et picto
+ * - Évolution par rapport à la première ou l'avant-dernière valeur
+ * - Couleur selon évolution positive/négative
+ * - Tooltip d'aide si fourni
+ *
+ * @param {StatisticsProps} props - Propriétés du composant
+ * @returns {ReactElement} Carte statistique
+ */
+export const Statistics = ({ dataset: dataset_id, dataKey, unit, evolutionSuffix, title, icon: icon_input, color, invertColor = false, help, compareWith, relativeEvolution = false }) => {
+    const icon = typeof icon_input === "string" ? _jsx(Icon, { icon: icon_input }) : icon_input;
+    const dataset = useDataset(dataset_id);
+    const value = dataset?.data?.slice(-1)[0][dataKey]; // Dernière valeur du dataset
+    const compare_value = compareWith === 'previous' ? dataset?.data?.slice(-2)[0][dataKey] : dataset?.data?.slice(0, 1)[0][dataKey]; //Première ou avant dernière
+    const evolution = relativeEvolution ? 100 * ((value - compare_value) / compare_value) : value - compare_value;
+    const evolution_unit = relativeEvolution ? '%' : unit;
+    const evolution_is_good = invertColor ? evolution < 0 : evolution > 0;
+    const tooltip = help && _jsx(Tooltip, { title: help, children: _jsx(QuestionCircleOutlined, {}) });
+    return (_jsx(Card, { title: title, style: {
+            borderLeft: `4px solid ${color}`,
+            height: "100%"
+        }, styles: {
+            body: {
+                padding: 16,
+                paddingTop: 8,
+                paddingBottom: 8
+            },
+            header: {
+                padding: "5px",
+                paddingLeft: "15px",
+                fontSize: 14,
+                minHeight: 35,
+            },
+        }, extra: tooltip, children: _jsxs(Flex, { vertical: true, children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Text, { style: { fontSize: "150%", paddingTop: 8, paddingBottom: 8, paddingLeft: 0 }, children: [value?.toLocaleString(), " ", unit] }), icon && _jsx(Avatar, { size: 32 + 8, icon: icon, style: { backgroundColor: color } })] }), evolution && _jsxs(Paragraph, { style: { marginBottom: "0.5rem" }, children: [_jsxs(Text, { strong: true, type: evolution_is_good ? "success" : "danger", style: { fontSize: "120%" }, children: [evolution < 0.1 ? '' : '+', evolution.toLocaleString(undefined, { maximumFractionDigits: 1 }), "\u00A0", evolution_unit] }), " ", _jsx(Text, { italic: true, type: "secondary", children: evolutionSuffix })] })] }) }));
+};
+/**
+ * `StatisticsCollection` permet de regrouper plusieurs cartes statistiques
+ * dans un bloc
+ *
+ * @param {StatisticsProps} props - Propriétés du composant
+ * @returns {ReactElement} Collection de cartes statistiques
+ * ```
+ */
+export const StatisticsCollection = ({ children, columns = 3, title }) => {
+    const arrayChildren = Children.toArray(children);
+    useBlockConfig({ title: title });
+    return (_jsx(Row, { gutter: [8, 8], children: arrayChildren.map((c, index) => (_jsx(Col, { xl: 24 / columns, xs: 24, children: c }, index))) }));
+};

package/dist/components/Charts/YearSerie.js

@@ -6,20 +6,17 @@ import { from, op } from "arquero";
 import { useDataset } from "../Dataset/hooks";
 import { usePalette } from "../Palette/Palette";
 import { ChartEcharts } from "./ChartEcharts";
-import { useContext, useEffect } from "react";
-import { ChartBlockContext } from "../DashboardPage/Block";
+import { useBlockConfig } from "../DashboardPage/Block";
 export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yearKey, yearMark, stack: stack_input, title, type: chart_type = 'bar' }) => {
     const stack = stack_input || chart_type == 'line' ? false : true; // Pas de stack par défaut pour le type line
     const dataset = useDataset(dataset_id);
     const data = dataset?.data;
     let chart_data = [];
     let distinct_cat = [];
-    const blockConfig = useContext(ChartBlockContext); //TODO : créer un hook pour simplifier la config du block
-    const block_config = {
+    useBlockConfig({
         title: title,
         dataExport: data
-    };
-    useEffect(() => blockConfig?.setConfig(block_config), [title, data]);
+    });
     if (data && data.length > 0) {
         const grouped_data = categoryKey ? from(data).groupby(yearKey, categoryKey) //Somme par année et categorykey
             .rollup({ [valueKey]: op.sum(valueKey) })

package/dist/components/Control/Select.js

@@ -19,7 +19,8 @@ export const Select = ({ name, dataset: datasetSource, options: input_options =
     if (data_options === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsx(NextPrevSelect, { name: name, options: data_options, defaultValue: initial_value == null || initial_value == false
-            ? undefined
-            : initial_value, arrows: arrows, optionFilterProp: "label", ...rest }));
+    const value = initial_value == null || initial_value == false
+        ? undefined
+        : initial_value;
+    return (_jsx(NextPrevSelect, { name: name, options: data_options, defaultValue: value, value: value, arrows: arrows, optionFilterProp: "label", ...rest }));
 };

package/dist/components/DashboardElement/DashboardElement.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DownloadOutlined, FileImageOutlined, FullscreenOutlined, MoreOutlined, } from "@ant-design/icons";
-import { HiQuestionMarkCircle } from "react-icons/hi2";
+import { DownloadOutlined, FileImageOutlined, FullscreenOutlined, MoreOutlined, QuestionCircleOutlined, } from "@ant-design/icons";
 import { Card, theme, Modal, Dropdown, Flex, Button, Popover, Typography } from "antd";
 import React, { createContext, useEffect, useState } from "react";
 import Attribution from "../Attributions/Attributions";
@@ -103,6 +102,6 @@ const DashboardElement = ({ children, title, header = true, attributions, isFetc
                 }, variant: virtual ? 'borderless' : 'outlined', title: header && !virtual &&
                     _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx("span", { style: { overflow: "hidden", paddingRight: 15 }, children: title }), _jsx("div", { style: { marginRight: 5, fontSize: 16 }, children: toolbox && dropdown_toolbox })] }), children: _jsxs(Flex, { vertical: true, justify: "space-between", style: { height: "100%" }, children: [_jsx(chartContext.Provider, { value: { chartRef, setchartRef, setData, setNodata }, children: _jsx(LoadingContainer, { isFetching: isFetching, noData: nodata, children: children }) }), _jsxs(Flex, { justify: "flex-end", align: "flex-end", style: { marginRight: 5 }, children: [attributions && (_jsx("div", { style: { marginTop: "auto" }, children: _jsx(Attribution, { licenses: licenses, data: attributions }) })), description && (_jsx(Popover, { content: _jsx("div", { style: { maxWidth: 800 }, children: typeof description === "string" ?
                                             _jsxs(Text, { italic: true, type: "secondary", children: [" ", description, " "] })
-                                            : _jsx(_Fragment, { children: description }) }), children: _jsx(Button, { type: "link", icon: _jsx(HiQuestionMarkCircle, {}), style: { fontSize: "150%" } }) }))] })] }) }), toolbox && fullscreen && (_jsxs(Modal, { forceRender: true, title: title, open: modalIsOpen, onCancel: () => setModalIsOpen(false), onOk: () => setModalIsOpen(false), footer: null, wrapClassName: "modal-fullscreen", children: [fullscreenChildren, attributions && _jsx(Attribution, { data: attributions })] }))] }));
+                                            : _jsx(_Fragment, { children: description }) }), children: _jsx(Button, { type: "link", icon: _jsx(QuestionCircleOutlined, {}), style: { fontSize: "150%" } }) }))] })] }) }), toolbox && fullscreen && (_jsxs(Modal, { forceRender: true, title: title, open: modalIsOpen, onCancel: () => setModalIsOpen(false), onOk: () => setModalIsOpen(false), footer: null, wrapClassName: "modal-fullscreen", children: [fullscreenChildren, attributions && _jsx(Attribution, { data: attributions })] }))] }));
 };
 export default DashboardElement;

package/dist/components/DashboardPage/Block.d.ts

@@ -12,4 +12,5 @@ interface IChartBlockProps {
     children: React.ReactElement;
 }
 export declare const DSL_ChartBlock: React.FC<IChartBlockProps>;
+export declare const useBlockConfig: ({ title, dataExport }: ChartBlockConfig) => void;
 export {};

package/dist/components/DashboardPage/Block.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, Dropdown, theme } from "antd";
-import { createContext, useId, useState } from "react";
-import { FaFileCsv } from "react-icons/fa";
-import { AiOutlineMore } from "react-icons/ai";
+import { createContext, useContext, useEffect, useId, useState } from "react";
+import { Icon } from "@iconify/react";
 import { ProducersFooter } from "../Dataset/Producer";
+import { MoreOutlined } from '@ant-design/icons';
 const { useToken } = theme;
 export const ChartBlockContext = createContext(undefined);
 export const DSL_ChartBlock = ({ children }) => {
@@ -13,12 +13,12 @@ export const DSL_ChartBlock = ({ children }) => {
     const menu_items = [
         {
             key: "export_data_csv",
-            label: (_jsxs("a", { onClick: () => handleExportData(), children: [_jsx(FaFileCsv, {}), " CSV"] })),
+            label: (_jsxs("a", { onClick: () => handleExportData(), children: [_jsx(Icon, { icon: "hugeicons:csv-01" }), " CSV"] })),
             disabled: config.dataExport === undefined
         },
     ];
     const has_action = menu_items.some(item => !item.disabled);
-    const dropdown_toolbox = (_jsx(Dropdown, { menu: { items: menu_items }, children: _jsx("a", { style: { color: token.colorTextBase }, children: _jsx(AiOutlineMore, {}) }) }));
+    const dropdown_toolbox = (_jsx(Dropdown, { menu: { items: menu_items }, children: _jsx("a", { style: { color: token.colorTextBase }, children: _jsx(MoreOutlined, {}) }) }));
     const handleExportData = () => {
         console.log('datadl');
         console.log(config.dataExport);
@@ -38,3 +38,10 @@ export const DSL_ChartBlock = ({ children }) => {
     };
     return (_jsx(ChartBlockContext.Provider, { value: { config: config, setConfig: (e) => setConfig(e) }, children: _jsxs(Card, { style: { height: '100%' }, extra: has_action && dropdown_toolbox, title: config.title, children: [children, _jsx(ProducersFooter, { component: children })] }) }));
 };
+export const useBlockConfig = ({ title, dataExport }) => {
+    const blockContext = useContext(ChartBlockContext);
+    useEffect(() => blockContext?.setConfig({
+        title: title,
+        dataExport: dataExport
+    }), [title, dataExport]);
+};

package/dist/components/DashboardPage/Page.d.ts

@@ -24,6 +24,7 @@ type dataset = {
     isFetching: boolean;
     isError: boolean;
     producers?: any[];
+    geojson?: any;
 };
 type ControlContextType = {
     values: Record<string, any>;

package/dist/components/Dataset/Dataset.js

@@ -86,7 +86,7 @@ export const DSL_Dataset = ({ children, id, provider: provider_input, type: prov
     useEffect(() => {
         const finalData = data?.data && transformers.reduce((datat, fn) => fn(datat), data.data);
         if (datasetRegistryContext) {
-            datasetRegistryContext({ id: id, resource: resource, data: finalData, isFetching: isFetching, isError: isError, producers: producers });
+            datasetRegistryContext({ id: id, resource: resource, data: finalData, isFetching: isFetching, isError: isError, producers: producers, geojson: data?.geojson });
             //Ajouter une info pour distinguer les erreurs du fourniseurs et celles des transformers ?
         }
     }, [resource, data, isFetching, someFetching, children]);

package/dist/components/Dataset/hooks.d.ts

@@ -5,6 +5,7 @@ export declare const useDataset: (dataset_id?: string) => {
     isFetching: boolean;
     isError: boolean;
     producers?: any[];
+    geojson?: any;
 } | undefined;
 export declare const useDatasets: (dataset_ids?: string[]) => {
     id: string;
@@ -13,6 +14,7 @@ export declare const useDatasets: (dataset_ids?: string[]) => {
     isFetching: boolean;
     isError: boolean;
     producers?: any[];
+    geojson?: any;
 }[] | undefined;
 export declare const useAllDatasets: () => {
     id: string;
@@ -21,4 +23,5 @@ export declare const useAllDatasets: () => {
     isFetching: boolean;
     isError: boolean;
     producers?: any[];
+    geojson?: any;
 }[] | undefined;

package/dist/components/Debug/Debug.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Badge, Collapse, Divider, FloatButton, Modal, theme, Typography } from "antd";
 import { DataPreview, PalettePreview } from "../../dsl";
 import { useAllDatasets } from "../Dataset/hooks";
-import { AiOutlineBug } from "react-icons/ai";
+import { BugOutlined } from "@ant-design/icons";
 import { useState } from "react";
 import { DatasetBadgeStatus } from "../Dataset/DataPreview";
 import { ControlPreview } from "../Control/Control";
@@ -20,5 +20,5 @@ export const Debug = () => {
         label: _jsxs("span", { children: [_jsx(DatasetBadgeStatus, { isError: dataset?.isError, isFetching: dataset?.isFetching }), " ", dataset.id, " ", " ", _jsxs(Text, { type: "secondary", children: [" ", dataset?.resource, " "] }), " ", _jsx(Badge, { color: token.colorInfo, overflowCount: 9999, count: dataset?.data?.length })] }),
         children: _jsx(DataPreview, { dataset: dataset.id, pageSize: 3 })
     }));
-    return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: _jsx(AiOutlineBug, {}), type: "primary", onClick: () => setIsModalOpen(true), style: { top: 5 }, className: "debugFloatButton" }), ";", _jsxs(Modal, { title: "Information concepteur", width: "90%", centered: true, styles: { content: { 'width': "100%", padding: 36 } }, closable: { 'aria-label': 'Custom Close Button' }, open: isModalOpen, onCancel: () => setIsModalOpen(false), footer: null, children: [_jsx(Title, { level: 5, children: "Jeux de donn\u00E9es " }), _jsx(Collapse, { accordion: true, items: items }), _jsx(Divider, {}), _jsx(Title, { level: 5, children: "Contr\u00F4les utilisateur " }), _jsx(ControlPreview, {}), _jsx(Divider, {}), _jsx(Title, { level: 5, children: "Palette " }), _jsx(PalettePreview, {})] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: _jsx(BugOutlined, {}), type: "primary", onClick: () => setIsModalOpen(true), style: { top: 5 }, className: "debugFloatButton" }), ";", _jsxs(Modal, { title: "Information concepteur", width: "90%", centered: true, styles: { content: { 'width': "100%", padding: 36 } }, closable: { 'aria-label': 'Custom Close Button' }, open: isModalOpen, onCancel: () => setIsModalOpen(false), footer: null, children: [_jsx(Title, { level: 5, children: "Jeux de donn\u00E9es " }), _jsx(Collapse, { accordion: true, items: items }), _jsx(Divider, {}), _jsx(Title, { level: 5, children: "Contr\u00F4les utilisateur " }), _jsx(ControlPreview, {}), _jsx(Divider, {}), _jsx(Title, { level: 5, children: "Palette " }), _jsx(PalettePreview, {})] })] }));
 };

package/dist/components/FlipCard/FlipCard.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useRef } from 'react';
 import { Button, Card, Typography } from "antd";
 import { useState } from "react";
-import { BsInfoCircle, BsInfoCircleFill } from "react-icons/bs";
 import { cardStyles } from "../../utils/cardStyles";
+import { InfoCircleFilled, InfoCircleOutlined } from "@ant-design/icons";
 const { Text } = Typography;
 /**
  * Une card qui peux se retourner et afficher des informations a son verso
@@ -19,7 +19,7 @@ const FlipCard = ({ title, information, children }) => {
         width: "100%",
     };
     const InfoButton = ({ filled = false }) => {
-        return (_jsx(Button, { type: "text", shape: "circle", "aria-label": "info", onClick: toggleFlipped, children: filled ? _jsx(BsInfoCircleFill, {}) : _jsx(BsInfoCircle, {}) }));
+        return (_jsx(Button, { type: "text", shape: "circle", "aria-label": "info", onClick: toggleFlipped, children: filled ? _jsx(InfoCircleFilled, {}) : _jsx(InfoCircleOutlined, {}) }));
     };
     return (_jsxs("div", { style: { position: "relative", height: "100%" }, children: [_jsx(Card, { title: title, extra: _jsxs(_Fragment, { children: [information && _jsx(InfoButton, { filled: flipped }), " "] }), style: {
                     transform: flipped ? "rotateY(180deg)" : "",

package/dist/components/Layout/Sider.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { Layout, Menu, theme, Row, Col, Button, Divider } from "antd";
 import { NavLink, useLocation } from "react-router-dom";
-import { MdOutlineKeyboardDoubleArrowLeft, MdOutlineKeyboardDoubleArrowRight } from "react-icons/md";
 import { generateMenuItems } from "../../utils/route_utils";
 import { AppContext } from "./DashboardApp";
+import { Icon } from "@iconify/react";
 const style_img = {
     height: 52,
     maxWidth: "100%",
@@ -41,7 +41,7 @@ const DashboardSider = ({ style, logo, route_config }) => {
                         }, children: [_jsx(NavLink, { to: "", style: {
                                     display: collapsed ? 'none' : undefined,
                                     marginTop: 8, marginLeft: 8
-                                }, children: _jsx("img", { style: style_img, src: appLogo, alt: title }) }), _jsx(Divider, { style: { display: collapsed ? 'none' : undefined }, type: "vertical" }), _jsx(Button, { type: "text", onClick: () => setCollapsed(!collapsed), icon: collapsed ? _jsx(MdOutlineKeyboardDoubleArrowRight, {}) : _jsx(MdOutlineKeyboardDoubleArrowLeft, {}), style: {
+                                }, children: _jsx("img", { style: style_img, src: appLogo, alt: title }) }), _jsx(Divider, { style: { display: collapsed ? 'none' : undefined }, type: "vertical" }), _jsx(Button, { type: "text", onClick: () => setCollapsed(!collapsed), icon: collapsed ? _jsx(Icon, { icon: "material-symbols:keyboard-double-arrow-right-rounded" }) : _jsx(Icon, { icon: "material-symbols:keyboard-double-arrow-left-rounded" }), style: {
                                     fontSize: '28px',
                                     width: 32,
                                     height: 32,

package/dist/components/LoadingContainer/LoadingContainer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Empty, Spin, theme } from 'antd';
-import { PiEmptyFill } from "react-icons/pi";
+import { Icon } from '@iconify/react';
 /**
  * Composant qui ajoute un effet de flou pendant le chargement (si temps de chargement > delay) et affiche un spinner au centre du contenu.
  * @param isLoading Indique si le chargement est en cours ou non
@@ -28,6 +28,6 @@ const LoadingContainer = ({ isFetching, children, blurRadius = '10px', delay = 5
     return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     filter: blur ? `blur(${blurRadius})` : undefined,
                     display: noData ? "none" : undefined
-                }, children: children }), noData && _jsx(Empty, { style: { position: "relative", top: "50%", right: "50%", marginBottom: 50, transform: "translate(50%, -50%)" }, description: "Pas de donn\u00E9es disponibles", image: _jsx(PiEmptyFill, { size: 80, color: token.colorPrimary }) }), blur ? _jsx(Spin, { size: "large", style: { position: 'absolute', left: '50%', top: '50%' } }) : _jsx(_Fragment, {})] }));
+                }, children: children }), noData && _jsx(Empty, { style: { position: "relative", top: "50%", right: "50%", marginBottom: 50, transform: "translate(50%, -50%)" }, description: "Pas de donn\u00E9es disponibles", image: _jsx(Icon, { icon: "ph:empty-fill", width: 80, color: token.colorPrimary }) }), blur ? _jsx(Spin, { size: "large", style: { position: 'absolute', left: '50%', top: '50%' } }) : _jsx(_Fragment, {})] }));
 };
 export default LoadingContainer;

package/dist/components/Map/Map.d.ts

@@ -0,0 +1,59 @@
+import type { AnyLayer } from 'react-map-gl/maplibre';
+import { AnyPaint } from 'mapbox-gl';
+import React from 'react';
+import 'maplibre-gl/dist/maplibre-gl.css';
+type LayerType = AnyLayer["type"];
+export declare const map_locale: {
+    'CooperativeGesturesHandler.WindowsHelpText': string;
+    'CooperativeGesturesHandler.MacHelpText': string;
+    'CooperativeGesturesHandler.MobileHelpText': string;
+};
+/**
+ * Une carto simple avec un layer
+ *
+ *  */
+interface MapProps extends MapLayerProps {
+    /** Afficher une popup après un click sur la carte */
+    popup?: boolean;
+    /** Titre du graphique */
+    title?: string;
+}
+export declare const Map: React.FC<MapProps>;
+interface MapLayerProps {
+    /** Identifiant du jeu de données */
+    dataset: string;
+    /** Couleur des symboles */
+    color?: string;
+    /** Layer Type */
+    type?: LayerType;
+    /** Les paint properties de maplibre cf. https://maplibre.org/maplibre-style-spec/layers/#paint */
+    paint?: AnyPaint;
+    /** Colonne contenant la variable à représenter */
+    categoryKey?: string;
+    /** Colonne contenant la coordonnée x / longitude */
+    xKey?: string;
+    /** Colonne contenant la coordonnées y / latitude */
+    yKey?: string;
+}
+/**
+ * Composant à utiliser comme enfant d'une <Map>
+ * Ajoute une couche (layer) à partir d'un dataset
+ *
+ * @param { MapLayerProps } props
+ * @returns { ReactElement }
+ */
+export declare const MapLayer: React.FC<MapLayerProps>;
+export interface IMapBaseLayerProps {
+    layer: 'osm' | 'ortho';
+    tileSize?: number;
+}
+/**
+ * Composant à utiliser comme enfant d'une <Map>
+ * Permet d'ajouter un fond de plan (OSM ou orthophoto)
+ * devnote : couches spécifiques Hauts-de-France
+ *
+ * @param { IMapBaseLayerProps } props
+ * @returns { ReactElement }
+ */
+export declare const BaseLayer: React.FC<IMapBaseLayerProps>;
+export {};

package/dist/components/Map/Map.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Composant carto
+import Maplibre, { Layer, Source, useMap, Popup } from 'react-map-gl/maplibre';
+import { useEffect, useRef, useState } from "react";
+import { useDataset } from '../Dataset/hooks';
+import bbox from '@turf/bbox';
+import { getType } from '@turf/invariant';
+import { featureCollection, point } from '@turf/helpers';
+import { usePalette } from '../Palette/Palette';
+import { from, op } from 'arquero';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { LegendControl } from '../MapLegend/MapLegend';
+import { useBlockConfig } from '../DashboardPage/Block';
+import { parseNumber } from '../../utils/parsers';
+export const map_locale = {
+    'CooperativeGesturesHandler.WindowsHelpText': 'Utilisez Ctrl + molette pour zommer sur la carte.',
+    'CooperativeGesturesHandler.MacHelpText': 'Utilisez ⌘ + molette pour zommer sur la carte.',
+    'CooperativeGesturesHandler.MobileHelpText': 'Utilisez deux doights pour déplacer la carte.',
+};
+/** Construire un geojson a partir d'un tableau de données*/
+const build_geojson = (params) => {
+    const { data, xKey, yKey } = params;
+    const features_collection = featureCollection(data.map((e) => {
+        const [x, y] = [parseNumber(e[xKey]), parseNumber(e[yKey])];
+        return point([x, y], { ...e });
+    }));
+    return features_collection;
+};
+export const Map = ({ dataset, color, type, paint, categoryKey, popup = false, title, xKey, yKey }) => {
+    const mapRef = useRef(null);
+    const [clickedFeature, setClickedFeature] = useState(undefined);
+    useBlockConfig({ title: title });
+    const onClickMap = (evt) => {
+        setClickedFeature({ ...evt.features[0], ...{ lngLat: evt.lngLat } });
+    };
+    const onMouseMoveMap = (evt) => {
+        if (!mapRef.current) {
+            return;
+        }
+        if (evt?.features.length > 0 && popup) {
+            mapRef.current.getCanvasContainer().style.cursor = 'pointer';
+        }
+        else {
+            mapRef.current.getCanvasContainer().style.cursor = 'grab';
+        }
+    };
+    return (_jsxs(Maplibre, { cooperativeGestures: true, locale: map_locale, ref: mapRef, interactiveLayerIds: [dataset], onClick: onClickMap, onMouseMove: onMouseMoveMap, style: { width: '100%', height: '500px' }, children: [_jsx(BaseLayer, { layer: "osm" }), _jsx(MapLayer, { dataset: dataset, color: color, type: type, paint: paint, categoryKey: categoryKey, xKey: xKey, yKey: yKey }), clickedFeature?.properties && categoryKey && popup &&
+                _jsxs(Popup, { longitude: clickedFeature.lngLat.lng, latitude: clickedFeature.lngLat.lat, onClose: () => { setClickedFeature(null); }, children: [_jsxs("div", { children: [" ", clickedFeature.properties[categoryKey], " "] }), " "] })] }));
+};
+/**
+ * Composant à utiliser comme enfant d'une <Map>
+ * Ajoute une couche (layer) à partir d'un dataset
+ *
+ * @param { MapLayerProps } props
+ * @returns { ReactElement }
+ */
+export const MapLayer = ({ dataset, categoryKey, color = 'red', type = 'circle', paint, xKey, yKey }) => {
+    const { current: map } = useMap();
+    const data = useDataset(dataset);
+    // src (lib proj4 pour convertir)
+    // Si x et y sont definie, on construit le geojson
+    const geojson = xKey && yKey && data?.data ?
+        build_geojson({ data: data.data, xKey: xKey, yKey: yKey })
+        : data?.geojson; // Sinon on utilise le geojson (fournisseur wfs)
+    const geom_type = geojson?.features?.[0] && getType(geojson?.features?.[0]);
+    /** Type de données dans categoryKey (string ou number) */
+    const type_value = categoryKey && typeof (data?.data?.[0][categoryKey]);
+    /** Valeurs distinctes (si type string) */
+    const values = (type_value === 'string') && categoryKey && data?.data && from(data?.data).rollup({ a: op.array_agg_distinct(categoryKey) }).get('a', 0) || undefined;
+    /** Couleurs de la palette */
+    const colors = usePalette({ nColors: Array.isArray(values) ? values?.length : 1 });
+    const match = Array.isArray(values) ? values?.map((v, i) => ({
+        val: v,
+        color: colors?.[i],
+    })) : undefined;
+    /** Expression mapLibre qui permet de mapper les valeurs et les couleurs de la palette */
+    const expression = match && categoryKey
+        ? [
+            "match",
+            ["get", categoryKey],
+            ...match?.flatMap((s) => [s.val, s.color]),
+            "purple" // fallback
+        ]
+        : undefined;
+    const legendItems = match?.map((e) => ({ color: e.color, label: e.val })).sort((a, b) => a.label.localeCompare(b.label)) || [];
+    const layers = [];
+    /** POINT */
+    if (geom_type === 'Point' || geom_type === 'MultiPoint') {
+        const default_paint = { "circle-color": expression ?? color ?? colors[0] };
+        type = 'circle';
+        layers.push(_jsx(Layer, { id: dataset, type: "circle", paint: (paint ?? default_paint) }, dataset));
+    }
+    /** POLYGON */
+    else if (geom_type === 'Polygon' || geom_type === 'MultiPolygon') {
+        const default_paint = { "fill-color": expression ?? color ?? colors[0] };
+        type = 'fill';
+        layers.push(_jsx(Layer, { id: dataset, type: "fill", paint: (paint ?? default_paint) }, dataset));
+        layers.push(_jsx(Layer, { id: dataset + '_line', type: 'line', paint: { "line-width": 0.5, "line-color": '#fff' } }, dataset + '_line'));
+    }
+    /** LINESTRING */
+    else if (geom_type === 'LineString' || geom_type === 'MultiLineString') {
+        const default_paint = { "line-color": expression ?? color ?? colors[0] };
+        type = 'line';
+        layers.push(_jsx(Layer, { id: dataset, type: "line", paint: (paint ?? default_paint) }, dataset));
+    }
+    //devnote : regarder la colonne contenant les valeurs pour proposer une représentation (catégorie ou choroplèthe)
+    useEffect(() => {
+        if (geojson) {
+            const box = bbox(geojson).slice(0, 4);
+            map?.fitBounds(box, { padding: 20 });
+        }
+    }, [geojson, map]);
+    return (_jsxs(_Fragment, { children: [geojson &&
+                _jsx(Source, { type: "geojson", data: geojson, children: layers }), _jsx(LegendControl, { items: legendItems })] }));
+};
+/**
+ * Composant à utiliser comme enfant d'une <Map>
+ * Permet d'ajouter un fond de plan (OSM ou orthophoto)
+ * devnote : couches spécifiques Hauts-de-France
+ *
+ * @param { IMapBaseLayerProps } props
+ * @returns { ReactElement }
+ */
+export const BaseLayer = ({ layer, tileSize = 256 }) => {
+    //TODO : ne pas utiliser par défaut le fond de plan geo2france ?
+    const t = (() => {
+        switch (layer) {
+            case 'osm':
+                return `https://osm.geo2france.fr/mapcache/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&LAYERS=grey&TILED=true&WIDTH=${tileSize}&HEIGHT=${tileSize}&SRS=EPSG%3A3857&STYLES=&BBOX={bbox-epsg-3857}`;
+            case 'ortho':
+                return `https://www.geo2france.fr/geoserver/geo2france/ows/?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&srs=EPSG:3857&transparent=true&width=${tileSize}&height=${tileSize}&layers=ortho_regionale_2018_rvb`;
+        }
+    })();
+    const source_raster = {
+        type: 'raster',
+        attribution: 'OpenStreetMap', //fixme
+        tiles: [
+            t
+        ],
+        tileSize: tileSize
+    };
+    const layer_raster = {
+        'type': 'raster',
+        'paint': {}
+    };
+    return (_jsx(Source, { ...source_raster, children: _jsx(Layer, { ...layer_raster }) }));
+};

package/dist/components/MapLegend/MapLegend.d.ts

@@ -10,3 +10,9 @@ interface MapLegendProps {
 }
 declare const MapLegend: React.FC<MapLegendProps>;
 export default MapLegend;
+interface LegendControlProps {
+    /** Elements de légende */
+    items: LegendItem[];
+}
+/** Un control pour Maplibre qui permet d'afficher une légende */
+export declare const LegendControl: React.FC<LegendControlProps>;

package/dist/components/MapLegend/MapLegend.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { useControl } from "react-map-gl/maplibre";
 const default_style = {
     backgroundColor: 'rgba(256,256,256,0.8)',
     padding: '10px',
@@ -17,3 +20,29 @@ const MapLegend = ({ items, style }) => {
                     } }), _jsx("span", { children: item.label })] }, index))) }));
 };
 export default MapLegend;
+/** Un control pour Maplibre qui permet d'afficher une légende */
+export const LegendControl = ({ items }) => {
+    const rootRef = useRef(null);
+    useControl(() => {
+        const container = document.createElement("div");
+        //container.className = "maplibregl-ctrl"; // pour hériter du style par défaut
+        const root = createRoot(container);
+        rootRef.current = root;
+        const control = {
+            onAdd: (_map) => {
+                root.render(_jsx(MapLegend, { items: items }));
+                return container;
+            },
+            onRemove: () => {
+                container.parentNode?.removeChild(container);
+            },
+        };
+        return control;
+    }, { position: "top-right" });
+    useEffect(() => {
+        if (rootRef.current) {
+            rootRef.current.render(_jsx(MapLegend, { items: items }));
+        }
+    }, [items]);
+    return null;
+};

package/dist/components/NextPrevSelect/NextPrevSelect.js

@@ -27,7 +27,7 @@ const NextPrevSelect = ({ name, options: input_options = [], style, value, defau
     const [current_value, setCurrent_value] = useState(value);
     const form = Form.useFormInstance();
     useEffect(() => {
-        setCurrent_value(value);
+        value && handleChange(value);
     }, [value]);
     const options = list_to_options(input_options);
     const current_index = options?.findIndex((o) => o.value == form?.getFieldValue(name) || o.value == current_value);

package/dist/dsl/index.d.ts

@@ -16,4 +16,7 @@ import { Palette, usePalette, PalettePreview } from "../components/Palette/Palet
 import { Debug } from "../components/Debug/Debug";
 import { Join } from "../components/Dataset/Join";
 import { ChartEcharts } from "../components/Charts/ChartEcharts";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, useDataset, useDatasets, useAllDatasets, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, };
+import { useBlockConfig } from "../components/DashboardPage/Block";
+import { Statistics, StatisticsCollection } from "../components/Charts/Statistics";
+import { MapLayer, Map } from "../components/Map/Map";
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, Map, MapLayer };

package/dist/dsl/index.js

@@ -16,4 +16,7 @@ import { Palette, usePalette, PalettePreview } from "../components/Palette/Palet
 import { Debug } from "../components/Debug/Debug";
 import { Join } from "../components/Dataset/Join";
 import { ChartEcharts } from "../components/Charts/ChartEcharts";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, useDataset, useDatasets, useAllDatasets, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, };
+import { useBlockConfig } from "../components/DashboardPage/Block";
+import { Statistics, StatisticsCollection } from "../components/Charts/Statistics";
+import { MapLayer, Map } from "../components/Map/Map";
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, Map, MapLayer };

package/dist/utils/parsers.d.ts

@@ -0,0 +1,2 @@
+/** Parser automatiquement un nombre au format : 0.6, "0.6" ou "0,6" */
+export declare const parseNumber: (value: string | number) => number;

package/dist/utils/parsers.js

@@ -0,0 +1,14 @@
+/** Parser automatiquement un nombre au format : 0.6, "0.6" ou "0,6" */
+export const parseNumber = (value) => {
+    if (typeof value === "number") {
+        return value;
+    }
+    if (typeof value === "string") {
+        const normalized = value.replace(",", ".");
+        const num = parseFloat(normalized);
+        if (!isNaN(num)) {
+            return num;
+        }
+    }
+    return NaN;
+};

package/dist/utils/useMapControl.d.ts

@@ -4,5 +4,8 @@ interface useMapControlProps {
     legendElement: React.ReactElement;
     position?: ControlPosition;
 }
+/** A déprécier ? utiliser plutôt le composant LegendControl ?
+ * Uniquement pour legacy
+ */
 export declare const useMapControl: ({ mapRef, legendElement, position }: useMapControlProps) => void;
 export {};

package/dist/utils/useMapControl.js

@@ -1,6 +1,9 @@
 // Ajouter un control (element HTML) sur une carte
 import { useEffect } from "react";
 import { createRoot } from 'react-dom/client';
+/** A déprécier ? utiliser plutôt le composant LegendControl ?
+ * Uniquement pour legacy
+ */
 export const useMapControl = ({ mapRef, legendElement, position = 'top-right' }) => {
     useEffect(() => {
         if (mapRef?.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",
@@ -45,18 +45,24 @@
     "test": "jest --watchAll"
   },
   "dependencies": {
+    "@iconify/react": "^6.0.1",
+    "@turf/bbox": "^7.2.0",
+    "@turf/helpers": "^7.2.0",
+    "@turf/invariant": "^7.2.0",
     "alasql": "^4.6.6",
     "arquero": "^8.0.3",
-    "axios": "^1.7.4",
+    "axios": "^1.12.2",
     "chroma-js": "^3.1.2",
-    "echarts": "^5.5.1",
-    "echarts-for-react": "^3.0.2",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.4",
     "query-string": "~7.1.3",
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
   },
   "devDependencies": {
+    "@ant-design/icons": "^6.0.2",
+    "@iconify/json": "^2.2.382",
     "@tanstack/react-query": "^5.51.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
@@ -76,7 +82,9 @@
     "antd": "^5.24.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "maplibre-gl": "^4.7.1",
     "react": "^18.3.1",
+    "react-map-gl": "^7.1.9",
     "react-router-dom": "^6.25.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
@@ -86,12 +94,13 @@
     "vite-plugin-svgr": "^4.2.0"
   },
   "peerDependencies": {
+    "@ant-design/icons": "^6.0.2",
     "@tanstack/react-query": "^5.51.11",
     "antd": "^5.18.3",
+    "maplibre-gl": "^4.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "5.4",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^7.1.9",
     "react-router-dom": "^6.25.1"
   }
 }

package/dist/data_providers/wfs/utils/mapOperator.d.ts

@@ -1 +0,0 @@
-export declare const mapOperator: (operator: any) => string;

package/dist/data_providers/wfs/utils/mapOperator.js

@@ -1,36 +0,0 @@
-export const mapOperator = (operator) => {
-    switch (operator) {
-        case "ne":
-            return '<>';
-        case "gte":
-            return '>=';
-        case "gt":
-            return '>';
-        case "lte":
-            return `<=`;
-        case "lt":
-            return `<`;
-        case "eq":
-            return "=";
-        case "contains":
-        case "startswith":
-        case "endswith":
-            return "ilike";
-        case "containss":
-        case "startswiths":
-        case "endswiths":
-            return "like";
-        case "ncontains":
-        case "nstartswith":
-        case "nendswith":
-            return "not ilike";
-        case "ncontainss":
-        case "nstartswiths":
-        case "nendswiths":
-            return "not like";
-        case "in":
-            return operator;
-        default:
-            return "";
-    }
-};