@geo2france/api-dashboard 1.16.0 → 1.18.0

package/README.MD

@@ -2,33 +2,35 @@
 
 Collection de composants React pour faciliter la création de **tableaux de bords territoriaux**.
 
-Le projet permet la mise en place d'un tableau de bord facile à déployer sur une **infrastucture légère**.
-Le tableau de bord, une fois compilé, peut-être mis à disposition des utilisateurs via un **simple server web** (HTTP/HTTPS) sans configuration particulière.
-Il s'agit d'une application React (Javascript) s'executant dans le navigateur des utilisateurs. Il n'y a pas **backend à installer**,
-l'application récupère les données via API **auprès d'un partenaire** (plateforme régionale, portail open-data, etc.) ou sur **votre serveur de données**.
-Les données sont ensuites traitées par le client et présentées à l'utilisateur via des graphiques ou cartes.
+Demo : 
+- [Odema](https://www.geo2france.fr/public/odema/dashboard/) ([code source](https://github.com/geo2france/odema-dashboard))
+- [Clicnat](https://dashboard.clicnat.fr/)
 
-Le tableau de bord est construit de manière déclarative **JSX** (accronyme de JavaScript XML).
-Comme son nom l'indique, il permet de combiner la clarté et l'efficacité du XML, avec la souplesse et la puissance du JavaScript.
+![capture d'écran](screenshot.png)
 
-Les API suivantes sont actuellement supportées (interrogation, filtre, pagination, etc. ) :
-- [WFS](src/data_providers/wfs/) : API proposée par la plupart des serveurs geographiques (QGIS Server, GeoServer, ArcGIS server, etc.)
-- [Data Fair](src/data_providers/datafair/) : API de la solution open source Data Fair.
-- En développement : OGC API Features, TJS
+## Points forts
 
-![diag](architecture_1.png)
+- ✅ Compatible avec de **nombreux fournisseurs de données** (WFS, Datafair, fichiers statiques csv ou json, etc.),
+- ✅ **Traitements** de données possibles (filtres, agréations, etc. via SQL ou JavaScript),
+- ✅ Créez vos dataviz en utilisants [Apache ECharts](https://echarts.apache.org/) ou n'importe quelle bibliothèque web,
+- ✅ Application cliente : peut-être mise à disposition des utilisateurs via un **simple server web** (HTTP/HTTPS) sans configuration particulière,
+- ✅ Ecriture des tableaux de bord en **JSX/TSX** : combiner la clarté du XML avec la souplesse et puissance du JavaScript/TypeScript.
 
-En bref : 
 
-- ✅ Déploiement facile et rapide (_client side_)
-- ✅ Présentez au même endroit des données tierces, vos données et celles de vos partenaires
-- ✅ Possibilité de visualiser des données sensibles
-- ✅ Flexibilité
+## Installation
 
-Les composants sont actuellement utilisés pour le [tableau de bord de l'Odema](https://github.com/geo2france/odema-dashboard).
+## Installer nvm et Node.js
 
-## Installation
+- Sur Windows : https://github.com/coreybutler/nvm-windows?tab=readme-ov-file#install-nvm-windows
+- Sur Linux : `apt install nvm`
 
+Ensuite, depuis un terminal ([Powershell](https://learn.microsoft.com/fr-fr/powershell/scripting/install/install-powershell-on-windows?view=powershell-7.5) ou autre) : 
+```bash
+# Installer la dernière vers LTS de Node.js
+nvm install --lts
+```
+
+## Créer un tableau de bord
 Pour créer un nouveau tableau de bord :
 
 ```sh
@@ -41,3 +43,4 @@ npm run dev
 
 Consulter la [documentation](https://geo2france.github.io/api-dashboard/) du projet.
 
+

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

@@ -1,7 +1,11 @@
 import { EChartsOption } from "echarts";
 import EChartsReact, { EChartsReactProps } from "echarts-for-react";
-interface ChartEchartsProps extends EChartsReactProps {
+export interface ChartEchartsProps extends EChartsReactProps {
     option: EChartsOption;
 }
+/**
+* Ce composant peut servir de base aux développements d'autres composants ou être utilisé directement dans une page (non conseillé).
+* - Applique la palette utilisateur
+* - Utilise le style de texte de l'application
+*/
 export declare const ChartEcharts: import("react").ForwardRefExoticComponent<ChartEchartsProps & import("react").RefAttributes<EChartsReact>>;
-export {};

package/dist/components/Charts/ChartEcharts.js

@@ -5,11 +5,10 @@ import EChartsReact from "echarts-for-react";
 import { usePalette } from "../Palette/Palette";
 import deepMerge from "../../utils/deepmerge";
 const { useToken } = theme;
-/*
+/**
 * Ce composant peut servir de base aux développements d'autres composants ou être utilisé directement dans une page (non conseillé).
 * - Applique la palette utilisateur
 * - Utilise le style de texte de l'application
-* devnote : A partir de React 19, ne plus utiliser forwardRef https://react.dev/reference/react/forwardRef
 */
 export const ChartEcharts = forwardRef(({ option = {}, ...restProps }, ref) => {
     const innerRef = useRef(null);

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

@@ -1,11 +1,29 @@
-interface IChartPieProps {
+import { EChartsOption, LabelFormatterCallback } from "echarts";
+import type { CallbackDataParams } from 'echarts/types/dist/shared';
+export interface IChartPieProps {
+    /** Identifiant du dataset */
     dataset?: string;
+    /** Nom de la colonne qui contient les valeurs numériques */
     dataKey: string;
+    /** Nom de la colonne qui contient les catégories */
     nameKey: string;
+    /** Unité à afficher */
     unit?: string;
+    /** Titre du graphique */
     title?: string;
+    /** Donut ou camembert ? */
     donut?: boolean;
+    /** Merge categorie with less than `other` percent */
     other?: number | null;
+    /** Nombre de décimales après la virgule à afficher (1 par défaut)
+     */
+    precision?: number;
+    /** Personnaliser le formatter des labels de la série
+     * cf. https://echarts.apache.org/en/option.html#series-pie.label.formatter */
+    labelFormatter?: string | LabelFormatterCallback<CallbackDataParams>;
+    /** Options suplémentaires passées à Echarts
+     * @see https://echarts.apache.org/en/option.html
+    */
+    option?: EChartsOption;
 }
-export declare const ChartPie: React.FC<IChartPieProps>;
-export {};
+export declare const ChartPie: ({ dataset: dataset_id, nameKey, dataKey, unit, title, donut, other, labelFormatter, precision, option: customOption }: IChartPieProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/Pie.js

@@ -5,7 +5,8 @@ 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 }) => {
+import deepMerge from "../../utils/deepmerge";
+export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, donut = false, other = 5, labelFormatter, precision = 1, option: customOption = {} }) => {
     const dataset = useDataset(dataset_id);
     const data = dataset?.data;
     useBlockConfig({
@@ -22,6 +23,9 @@ export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, d
             value: d.value,
         }))
         : [];
+    //@ts-ignore
+    const total = chart_data1.length > 0 && from(chart_data1).rollup({ value: op.sum('value') }).object()?.value;
+    console.log('total', total);
     const chart_data = merge_others({ dataset: chart_data1 || [], min: other || -1 });
     const colors = usePalette({ nColors: chart_data?.length });
     const colors_labels = usePaletteLabels();
@@ -36,11 +40,26 @@ export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, d
                 },
                 data: chart_data,
                 radius: donut ? ['40%', '75%'] : [0, '75%'],
+                label: {
+                    formatter: labelFormatter,
+                    overflow: "break"
+                }
             }],
         tooltip: {
             show: true,
-            valueFormatter: v => `${v?.toLocaleString()} ${unit || ''} `
+            valueFormatter: v => `${v?.toLocaleString(undefined, { maximumFractionDigits: precision })} ${unit || ''} `
+        },
+        graphic: {
+            type: 'text',
+            left: 'center',
+            top: 'center',
+            style: {
+                text: `${total.toLocaleString(undefined, { maximumFractionDigits: precision })} ${unit}`,
+                fontSize: 24,
+                fontWeight: 'bold',
+                fill: '#333',
+            }
         }
     };
-    return _jsx(ChartEcharts, { option: option });
+    return _jsx(ChartEcharts, { option: deepMerge({}, option, customOption) });
 };

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

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { SimpleRecord } from "../../types";
 type comparwithType = "first" | "previous";
+type aggregateType = "last" | "first" | "sum" | "lastNotNull" | "min" | "max" | "count" | "mean" | "countDistinct" | "countMissing";
 interface ICallbackParams {
     /** Valeur principale */
     value: number;
@@ -11,7 +12,7 @@ interface ICallbackParams {
     /** Valeur de comparaison */
     compareValue: number;
 }
-interface StatisticsProps {
+export interface StatisticsProps {
     /** Identifiant du jeu de données */
     dataset: string;
     /** Nom de la colonne qui contient les valeurs */
@@ -37,7 +38,11 @@ interface StatisticsProps {
     /** Texte d'annotation (remplace evolution si définie) */
     annotation?: React.ReactNode | ((param: ICallbackParams) => React.ReactNode);
     /** Fonction a appliquer avant rendu */
-    valueFormatter?: ((param: ICallbackParams) => React.ReactNode);
+    valueFormatter?: ((param: ICallbackParams) => string);
+    /** Méthode d'aggrégation */
+    aggregate?: aggregateType;
+    /** Afficher une animation (Count-up) */
+    animation?: boolean;
 }
 /**
  * Composant `Statistics` affichant une valeur d'un dataset avec son évolution.
@@ -53,7 +58,7 @@ interface StatisticsProps {
  * @returns {ReactElement} Carte statistique
  */
 export declare const Statistics: React.FC<StatisticsProps>;
-type StatisticsCollectionProps = {
+export interface StatisticsCollectionProps {
     /**
      * Un ou plusieurs composants `<Statistics>`.
      */
@@ -66,13 +71,10 @@ type StatisticsCollectionProps = {
      * 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>;

package/dist/components/Charts/Statistics.js

@@ -5,6 +5,8 @@ import { Children } from "react";
 import { useDataset } from "../Dataset/hooks";
 import { Icon } from "@iconify/react";
 import { useBlockConfig } from "../DashboardPage/Block";
+import { aggregator } from "../../utils/aggregator";
+import CountUp from "react-countup";
 const { Text, Paragraph } = Typography;
 // DEV : modele cf https://bootstrapbrain.com/component/bootstrap-statistics-card-example/
 /**
@@ -20,17 +22,16 @@ const { Text, Paragraph } = Typography;
  * @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, valueFormatter = (param) => (param.value.toLocaleString()), annotation }) => {
+export const Statistics = ({ dataset: dataset_id, dataKey, unit, evolutionSuffix, title, icon: icon_input, color, invertColor = false, help, compareWith, relativeEvolution = false, valueFormatter = (param) => (param.value.toLocaleString()), annotation, aggregate = "last", animation = false }) => {
     const icon = typeof icon_input === "string" ? _jsx(Icon, { icon: icon_input }) : icon_input;
     const dataset = useDataset(dataset_id);
-    const row = dataset?.data?.slice(-1)[0];
-    const value = row?.[dataKey]; // Dernière valeur du dataset. Caster en Number ?
-    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 { row, value } = aggregator({ data: dataset?.data, dataKey, aggregate });
+    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 * ((Number(value) - compare_value) / compare_value) : Number(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, {}) });
-    const CallbackParams = { value: value || NaN, compareValue: compare_value || NaN, data: dataset?.data || [], row: row };
+    const CallbackParams = { value: value ?? NaN, compareValue: compare_value ?? NaN, data: dataset?.data ?? [], row: row };
     let subtitle;
     if (annotation !== undefined) {
         subtitle = typeof annotation === 'function' ? annotation(CallbackParams) : annotation;
@@ -53,17 +54,18 @@ export const Statistics = ({ dataset: dataset_id, dataKey, unit, evolutionSuffix
                 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: [valueFormatter(CallbackParams), " ", unit] }), icon && _jsx(Avatar, { size: 32 + 8, icon: icon, style: { backgroundColor: color } })] }), typeof subtitle == 'string' ?
+        }, extra: tooltip, children: _jsxs(Flex, { vertical: true, children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Text, { style: { fontSize: "150%", paddingTop: 8, paddingBottom: 8, paddingLeft: 0 }, children: animation ?
+                                _jsx(CountUp, { formattingFn: (v) => `${valueFormatter({ ...CallbackParams, value: v })} ${unit}`, duration: 1.5, end: value || NaN })
+                                :
+                                    _jsxs("span", { children: [valueFormatter(CallbackParams), " ", unit] }) }), icon && _jsx(Avatar, { size: 32 + 8, icon: icon, style: { backgroundColor: color } })] }), typeof subtitle == 'string' ?
                     _jsx(Text, { italic: true, type: "secondary", children: subtitle })
                     :
                         _jsx("div", { children: subtitle })] }) }));
 };
+;
 /**
  * `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 }) => {

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

@@ -2,7 +2,7 @@
  * Graphique standard pour afficher des données annuelles
  */
 import { EChartsOption, SeriesOption } from "echarts";
-interface IYearSerieProps {
+export interface IYearSerieProps {
     dataset: string;
     title?: string;
     yearKey: string;
@@ -25,4 +25,3 @@ interface IYearSerieProps {
     options?: Partial<EChartsOption>;
 }
 export declare const ChartYearSerie: React.FC<IYearSerieProps>;
-export {};

package/dist/components/Charts/YearSerie.js

@@ -40,6 +40,7 @@ export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, sec
             .derive({ part: d => 100 * d.value / op.sum(d.value) }) // Data for normalized view
             .rename({ value: valueKey, part: `${valueKey}_pct`, secondaryValue: secondaryValueKey || '' }) // Rename to original var name
         ).objects();
+        chart_data.sort((a, b) => a[yearKey] - b[yearKey]);
     }
     const COLORS = usePalette({ nColors: distinct_cat?.length }) || [];
     const colors_labels = usePaletteLabels();

package/dist/components/Control/Control.d.ts

@@ -7,15 +7,31 @@ declare const Control: React.FC<IControlProps>;
 export default Control;
 export declare const useControl: (name: string) => string | undefined;
 export declare const useAllControls: () => Record<string, any>;
-export declare const list_to_options: (input?: string[] | number[] | {
-    label: string | number;
-    value: string | number;
+export declare const list_to_options: (input?: string[] | {
+    label: string;
+    value: string;
 }[]) => {
-    label: string | number;
-    value: string | number;
+    label: string;
+    value: string;
 }[];
 interface IControlProps {
     children: ReactElement | ReactElement[];
 }
 export declare const DSL_Control: React.FC<IControlProps>;
 export declare const ControlPreview: React.FC;
+type ControlContextType = {
+    values: Record<string, any>;
+    register: (control: {
+        name: string;
+        value: any;
+    }) => void;
+    clear: () => void;
+    getAll: () => Record<string, any>;
+};
+export declare const ControlContext: React.Context<ControlContextType | undefined>;
+export declare const CreateControlesRegistry: () => {
+    register: (c: Record<string, any>) => void;
+    clear: () => void;
+    getAll: () => Record<string, any>;
+    values: Record<string, any>;
+};

package/dist/components/Control/Control.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Descriptions, Form, Layout } from "antd";
-import React, { useContext, useEffect } from "react";
-import { ControlContext } from "../DashboardPage/Page";
+import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
 const { Header } = Layout;
 /*
  * Composant destiné à recevoir un Form avec les contrôles de la page
@@ -28,7 +27,7 @@ export const useControl = (name) => {
     if (!context_controls) {
         throw new Error("useControl must be used within a ControlProvider");
     }
-    const { values } = context_controls;
+    const values = context_controls.getAll();
     const value = values[name];
     return value;
 };
@@ -49,8 +48,8 @@ export const list_to_options = (input = []) => {
         return [];
     }
     return input.map((o) => {
-        if (typeof o == "string" || typeof o == "number") {
-            return { label: String(o), value: o };
+        if (typeof o == "string") {
+            return { label: String(o), value: String(o) };
         }
         return o;
     });
@@ -64,7 +63,7 @@ export const DSL_Control = ({ children }) => {
     if (!context_controls) { //Le contexte peut être nul ?
         throw new Error("useControl must be used within a ControlProvider");
     }
-    const { values: _control, pushValue: pushControl } = context_controls;
+    const { values: _control, register: pushControl } = context_controls;
     const childrenArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
     //Ajout des nouvelles valeurs de controles dans le contexte de la page
     const handleChange = (changed_value) => {
@@ -83,3 +82,26 @@ export const ControlPreview = ({}) => {
     }));
     return (_jsx(Descriptions, { items: items }));
 };
+export const ControlContext = createContext(undefined);
+export const CreateControlesRegistry = () => {
+    /* CONTROLS */
+    const [controls, setControles] = useState({});
+    const pushControl = useCallback((c) => {
+        setControles(prev => ({
+            ...prev,
+            ...c
+        }));
+    }, []);
+    const clear = useCallback(() => {
+        setControles({});
+    }, []);
+    const getAll = useCallback(() => {
+        return controls;
+    }, [controls]);
+    return ({
+        register: pushControl,
+        clear,
+        getAll,
+        values: controls
+    });
+};

package/dist/components/Control/Radio.d.ts

@@ -2,18 +2,18 @@ import type { RadioGroupProps } from 'antd';
 import { SimpleRecord } from '../../types';
 export declare const buildOptionsFromData: (data: SimpleRecord[], labelField?: string, valueField?: string) => {
     label: string;
-    value: string | number;
+    value: string;
 }[];
 type ExtendedRadioGroupProps = RadioGroupProps & {
     name?: string;
     dataset?: string;
     options?: {
         label: string;
-        value: string | number;
-    }[] | string[] | number[];
+        value: string;
+    }[] | string[];
     labelField?: string;
     valueField?: string;
-    initalValue?: string | number;
+    initalValue?: string;
 };
 export declare const Radio: React.FC<ExtendedRadioGroupProps>;
 export {};

package/dist/components/Control/Radio.js

@@ -6,6 +6,9 @@ import { list_to_options } from './Control';
 // On construit les options depuis le tableau de données, utiliser pour Radio et Select
 export const buildOptionsFromData = (data, labelField = 'label', valueField = 'value') => {
     const t = from(data);
+    if (data.length <= 0) { //Avoir arquero error on empty data
+        return [];
+    }
     return (t.select(labelField, valueField)
         .dedupe(valueField)
         .objects()

package/dist/components/Control/Select.d.ts

@@ -3,13 +3,15 @@ type ExtendedSelectProps = Omit<SelectProps<any>, 'options'> & {
     dataset?: string;
     options?: {
         label: string;
-        value: string | number;
-    }[] | string[] | number[];
-    initial_value?: string | number;
+        value: string;
+    }[] | string[];
+    initial_value?: string;
     labelField?: string;
     valueField?: string;
     name?: string;
+    label?: string;
     arrows?: boolean;
+    reverse?: boolean;
 };
 export declare const Select: React.FC<ExtendedSelectProps>;
 export {};

package/dist/components/Control/Select.js

@@ -5,13 +5,13 @@ import NextPrevSelect from '../NextPrevSelect/NextPrevSelect';
 import { list_to_options } from './Control';
 // TODO : a fusionner avec NextPrevSelect pour n'avoir qu'un seul composant
 // Actuellement, Select apporte seulement le fait de choisir les valeurs depuis un
-export const Select = ({ name, dataset: datasetSource, options: input_options = [], labelField = 'label', valueField = 'value', arrows = false, initial_value: initial_value_in, ...rest }) => {
+export const Select = ({ name, dataset: datasetSource, options: input_options = [], labelField = 'label', valueField = 'value', arrows = false, reverse = false, label, initial_value: initial_value_in, ...rest }) => {
     const options = list_to_options(input_options);
     const data = useDataset(datasetSource)?.data;
     const data_options = datasetSource ? (data && buildOptionsFromData(data, labelField, valueField)) : options;
     const myOptions = data_options && data_options.map((o) => {
-        if (typeof o == "string" || typeof o == "number") {
-            return { label: o, value: o };
+        if (typeof o == "string") {
+            return { label: o, value: String(o) };
         }
         return o;
     });
@@ -22,5 +22,5 @@ export const Select = ({ name, dataset: datasetSource, options: input_options =
     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 }));
+    return (_jsx(NextPrevSelect, { name: name, label: label ?? name, options: data_options, defaultValue: value, value: value, arrows: arrows, reverse: reverse, optionFilterProp: "label", ...rest }));
 };

package/dist/components/DashboardPage/Block.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Dropdown, theme } from "antd";
+import { Card, Dropdown, Spin, theme } from "antd";
 import { createContext, useContext, useEffect, useId, useState } from "react";
 import { Icon } from "@iconify/react";
 import { ProducersFooter } from "../Dataset/Producer";
 import { MoreOutlined } from '@ant-design/icons';
 import { ErrorBoundary } from "../Layout/Error";
 import { cardStyles } from "../../utils/cardStyles";
+import { useDataset } from "../../dsl";
 const { useToken } = theme;
 export const ChartBlockContext = createContext(undefined);
 export const DSL_ChartBlock = ({ children }) => {
     const id = useId();
     const [config, setConfig] = useState({});
     const { token } = useToken();
+    const dataset = useDataset(children.props.dataset);
     const menu_items = [
         {
             key: "export_data_csv",
@@ -38,7 +40,7 @@ export const DSL_ChartBlock = ({ children }) => {
         };
         DL();
     };
-    return (_jsx(ChartBlockContext.Provider, { value: { config: config, setConfig: (e) => setConfig(e) }, children: _jsx(Card, { className: "dashboard-element", style: { height: '100%' }, styles: cardStyles, extra: has_action && dropdown_toolbox, title: config.title, children: _jsxs(ErrorBoundary, { children: [children, _jsx(ProducersFooter, { component: children })] }) }) }));
+    return (_jsx(ChartBlockContext.Provider, { value: { config: config, setConfig: (e) => setConfig(e) }, children: _jsx(Card, { className: "dashboard-element", style: { height: '100%' }, styles: cardStyles, extra: has_action && dropdown_toolbox, title: config.title, children: _jsx(ErrorBoundary, { children: _jsxs(Spin, { spinning: dataset?.isFetching || false, size: "large", delay: 250, children: [children, _jsx(ProducersFooter, { component: children })] }) }) }) }));
 };
 export const useBlockConfig = ({ title, dataExport }) => {
     const blockContext = useContext(ChartBlockContext);

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

@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+interface IntroProps {
+    children: ReactElement;
+    /** Titre de la modal */
+    title?: string;
+}
+/**
+ * Texte introductif optionnel
+ * Modal accessible via un bouton flottant dans le coin supérieur droit
+ */
+export declare const Intro: React.FC<IntroProps>;
+export {};

package/dist/components/DashboardPage/Intro.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@iconify/react";
+import { FloatButton, Modal } from "antd";
+import { useState } from "react";
+/**
+ * Texte introductif optionnel
+ * Modal accessible via un bouton flottant dans le coin supérieur droit
+ */
+export const Intro = ({ children, title }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const showModal = () => {
+        setIsModalOpen(true);
+    };
+    const handleOk = () => {
+        setIsModalOpen(false);
+    };
+    const handleCancel = () => {
+        setIsModalOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { type: "primary", onClick: showModal, className: "IntroButton", style: { top: 5, height: 25 }, icon: _jsx(Icon, { icon: "fontisto:info" }), shape: "square" }), _jsx(Modal, { title: title, open: isModalOpen, onOk: handleOk, onCancel: handleCancel, footer: null, width: { xs: '100%', xl: '80%', xxl: '80%' }, children: children })] }));
+};

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

@@ -17,14 +17,6 @@ interface IDashboardPageProps {
 }
 declare const DashboardPage: React.FC<IDashboardPageProps>;
 export default DashboardPage;
-type ControlContextType = {
-    values: Record<string, any>;
-    pushValue: (control: {
-        name: string;
-        value: any;
-    }) => void;
-};
-export declare const ControlContext: React.Context<ControlContextType | undefined>;
 interface IDSLDashboardPageProps {
     children: React.ReactNode;
     name?: string;

package/dist/components/DashboardPage/Page.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Col, Dropdown, Flex, Grid, Layout, Radio, Row, Tabs, theme } from "antd";
-import React, { isValidElement, useState, createContext, useEffect } from "react";
+import React, { isValidElement, useState, useEffect, useContext } from "react";
 import { Helmet } from "react-helmet-async";
 import { useSearchParamsState } from "../../utils/useSearchParamsState";
-import Control, { DSL_Control } from "../Control/Control";
+import Control, { ControlContext, DSL_Control } from "../Control/Control";
 import { Dataset, Debug, Provider } from "../../dsl";
 import { DEFAULT_PALETTE, Palette, PaletteContext } from "../Palette/Palette";
 import { Section } from "./Section";
 import { Icon } from "@iconify/react";
-import { useDatasetRegistry } from "../Dataset/hooks";
+import { DatasetRegistryContext } from "../Dataset/context";
+import { Intro } from "./Intro";
 const { Header } = Layout;
 const { useToken } = theme;
 const getSection = (child) => React.isValidElement(child) ? child.props.section : undefined;
@@ -40,14 +41,15 @@ const DashboardPage = ({ children: children_input, control, row_gutter = [8, 8],
                                 })), value: activeTab, onChange: (e) => setActiveTab(e.target.value) }), control] }) }), _jsx(Row, { gutter: row_gutter, style: { margin: 16 }, children: children.map((child, idx) => ({ child, idx })).filter(({ child }) => (getSection(child) ?? 'Autres') == activeTab).map(({ child, idx }) => _jsx(Col, { xl: 12, xs: 24, children: child }, idx)) })] }));
 };
 export default DashboardPage;
-export const ControlContext = createContext(undefined);
 export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, children, debug = false }) => {
     const { token } = useToken();
     const [palette, setPalette] = useState(DEFAULT_PALETTE);
-    const datasetRegistry = useDatasetRegistry();
+    const datasetRegistry = useContext(DatasetRegistryContext);
+    const controlesRegistry = useContext(ControlContext);
     useEffect(() => {
         return () => {
             datasetRegistry.clear();
+            controlesRegistry?.clear();
         };
     }, []);
     //const allDatasetLoaded = Object.values(datasets).every(d => !d.isFetching);
@@ -58,6 +60,9 @@ export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, child
         if (typeof (c.type) != 'string' && logicalComponents.includes(c.type.name)) {
             return "logical";
         }
+        else if (typeof (c.type) != 'string' && c.type.name == Intro.name) {
+            return "intro";
+        }
         else if (typeof (c.type) != 'string' && c.type.name == DSL_Control.name) {
             return "control";
         }
@@ -72,6 +77,7 @@ export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, child
     const logic_components = childrenArray.filter((c) => getComponentKind(c) == 'logical');
     const control_components = childrenArray.filter((c) => getComponentKind(c) == 'control');
     const section_components = childrenArray.filter((c) => getComponentKind(c) == 'section');
+    const intro_component = childrenArray.find((c) => getComponentKind(c) == 'intro');
     if (debug && !logic_components.some((c) => typeof c.type !== "string" && c.type.name === Debug.name)) {
         logic_components.push(_jsx(Debug, {}, "debug_property"));
     }
@@ -103,5 +109,5 @@ export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, child
                                 borderRadius: token.borderRadiusLG }, style: { margin: 4 } })
                         :
                             _jsxs("div", { style: { margin: 4 }, children: [" ", items?.[0].children, " "] }) //Show content without tabs if only one
-                    , logic_components] })] }));
+                    , logic_components, intro_component] })] }));
 };