@geo2france/api-dashboard 1.8.0 → 1.9.1

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/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/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,6 @@ 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";
+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, };

package/dist/dsl/index.js

@@ -16,4 +16,6 @@ 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";
+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, };

package/dist/utils/useBlockConfig.d.ts

@@ -0,0 +1,7 @@
+import { SimpleRecord } from "../types";
+interface BlocConfig {
+    title?: string;
+    dataExport?: SimpleRecord[];
+}
+export declare const useBlockConfig: ({ title, dataExport }: BlocConfig) => void;
+export {};

package/dist/utils/useBlockConfig.js

@@ -0,0 +1,9 @@
+import { useContext, useEffect } from "react";
+import { ChartBlockContext } from "../components/DashboardPage/Block";
+export const useBlockConfig = ({ title, dataExport }) => {
+    const blockContext = useContext(ChartBlockContext);
+    useEffect(() => blockContext?.setConfig({
+        title: title,
+        dataExport: dataExport
+    }), [title, dataExport]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",
@@ -45,6 +45,7 @@
     "test": "jest --watchAll"
   },
   "dependencies": {
+    "@iconify/react": "^6.0.1",
     "alasql": "^4.6.6",
     "arquero": "^8.0.3",
     "axios": "^1.7.4",
@@ -57,6 +58,7 @@
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
   },
   "devDependencies": {
+    "@iconify/json": "^2.2.382",
     "@tanstack/react-query": "^5.51.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
@@ -90,7 +92,6 @@
     "antd": "^5.18.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "5.4",
     "react-map-gl": "^7.1.7",
     "react-router-dom": "^6.25.1"
   }