@geo2france/api-dashboard 1.17.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,13 +22,12 @@ 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 { 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 * ((value - compare_value) / compare_value) : value - compare_value;
+    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, {}) });
@@ -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/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.js

@@ -9,6 +9,7 @@ import { DEFAULT_PALETTE, Palette, PaletteContext } from "../Palette/Palette";
 import { Section } from "./Section";
 import { Icon } from "@iconify/react";
 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;
@@ -59,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";
         }
@@ -73,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"));
     }
@@ -104,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] })] }));
 };

package/dist/components/Dataset/hooks.js

@@ -1,7 +1,28 @@
 import { useCallback, useContext, useState } from "react";
 import { DatasetRegistryContext } from "./context";
+const demo_dataset = {
+    id: 'demo_dataset',
+    isError: false,
+    isFetching: false,
+    resource: 'demo_dataset',
+    data: [
+        { name: 'Mercure', type: 'Planète', satellites: 0, diameter_km: 4879 },
+        { name: 'Vénus', type: 'Planète', satellites: 0, diameter_km: 12104 },
+        { name: 'Terre', type: 'Planète', satellites: 1, diameter_km: 12742 },
+        { name: 'Mars', type: 'Planète', satellites: 2, diameter_km: 6779 },
+        { name: 'Jupiter', type: 'Planète', satellites: 79, diameter_km: 139820 },
+        { name: 'Saturne', type: 'Planète', satellites: 83, diameter_km: 116460 },
+        { name: 'Uranus', type: 'Planète', satellites: 27, diameter_km: 50724 },
+        { name: 'Neptune', type: 'Planète', satellites: 14, diameter_km: 49244 },
+        { name: 'Pluton', type: 'Planète naine', satellites: 5, diameter_km: 2370 },
+        { name: 'Cérès', type: 'Astéroïde', satellites: 0, diameter_km: 946 },
+    ]
+};
 // 🔹 Hook pour récupérer un dataset unique
 export const useDataset = (dataset_id) => {
+    if (dataset_id == 'demo_dataset') {
+        return demo_dataset;
+    }
     const datasetRegistry = useContext(DatasetRegistryContext);
     if (dataset_id) {
         return datasetRegistry.get(dataset_id);

package/dist/components/Debug/Debug.js

@@ -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(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, {})] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: _jsx(BugOutlined, {}), type: "primary", onClick: () => setIsModalOpen(true), style: { bottom: 8, left: 8 }, className: "debugFloatButton" }), _jsxs(Modal, { title: "Information concepteur", width: "90%", centered: true, styles: { body: { '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/Layout/DashboardApp.d.ts

@@ -35,6 +35,10 @@ export interface DashboardConfig {
      * Active ou désactive le mode “slider” dans le pied de page (faire défiler les logos de partenaires).
     */
     footerSlider?: boolean;
+    /**
+     * Désactiver la mention à Géo2France
+     */
+    disablePoweredBy?: boolean;
 }
 declare const DashboardApp: React.FC<DashboardConfig>;
 export default DashboardApp;

package/dist/components/Layout/DashboardApp.js

@@ -33,8 +33,8 @@ const default_theme = {
     }
 };
 export const AppContext = createContext({});
-const DashboardApp = ({ routes, theme, logo, brands, footerSlider, title, subtitle }) => {
+const DashboardApp = ({ routes, theme, logo, brands, footerSlider, title, subtitle, disablePoweredBy = false }) => {
     const context_values = { title, subtitle, logo };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ConfigProvider, { theme: theme || default_theme /* Merger plutôt ?*/, children: _jsx(HelmetProvider, { children: _jsx(AppContext.Provider, { value: context_values, children: _jsx(DatasetRegistryContext.Provider, { value: createDatasetRegistry(), children: _jsx(ControlContext.Provider, { value: CreateControlesRegistry(), children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsxs(Route, { element: _jsxs(Layout, { hasSider: true, style: { minHeight: '100vh' }, children: [_jsx(DashboardSider, { route_config: routes }), _jsxs(Layout, { children: [_jsx(Content, { style: { width: "100%" }, children: _jsx(Outlet, {}) }), _jsx(DasbhoardFooter, { brands: brands, slider: footerSlider })] })] }), children: [generateRoutes(routes), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ConfigProvider, { theme: theme || default_theme /* Merger plutôt ?*/, children: _jsx(HelmetProvider, { children: _jsx(AppContext.Provider, { value: context_values, children: _jsx(DatasetRegistryContext.Provider, { value: createDatasetRegistry(), children: _jsx(ControlContext.Provider, { value: CreateControlesRegistry(), children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsxs(Route, { element: _jsxs(Layout, { hasSider: true, style: { minHeight: '100vh' }, children: [_jsx(DashboardSider, { route_config: routes, poweredBy: !disablePoweredBy }), _jsxs(Layout, { children: [_jsx(Content, { style: { width: "100%" }, children: _jsx(Outlet, {}) }), _jsx(DasbhoardFooter, { brands: brands, slider: footerSlider })] })] }), children: [generateRoutes(routes), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }) }));
 };
 export default DashboardApp;

package/dist/components/Layout/Sider.d.ts

@@ -4,6 +4,7 @@ interface DbSiderProps {
     logo?: string;
     route_config?: RouteConfig[];
     style?: CSSProperties;
+    poweredBy?: boolean;
 }
 declare const DashboardSider: React.FC<DbSiderProps>;
 export default DashboardSider;

package/dist/components/Layout/Sider.js

@@ -1,16 +1,17 @@
 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 { Layout, Menu, theme, Row, Col, Button, Divider, Typography } from "antd";
+import { Link, NavLink, useLocation } from "react-router-dom";
 import { generateMenuItems } from "../../utils/route_utils";
 import { AppContext } from "./DashboardApp";
 import { Icon } from "@iconify/react";
+const { Text } = Typography;
 const style_img = {
     height: 52,
     maxWidth: "100%",
     objectFit: "contain"
 };
-const DashboardSider = ({ style, logo, route_config }) => {
+const DashboardSider = ({ style, logo, route_config, poweredBy = true }) => {
     const { logo: appLogo, title } = useContext(AppContext);
     const { token } = theme.useToken();
     const { pathname: selectedKey } = useLocation();
@@ -32,21 +33,21 @@ const DashboardSider = ({ style, logo, route_config }) => {
         borderRight: "1px solid #ccc",
         ...style
     };
-    return (_jsx(Layout.Sider, { theme: "light", collapsible: true, collapsedWidth: isMobile ? 40 : 80, collapsed: collapsed, onCollapse: toggleCollapsed, style: siderStyle, width: isMobile ? '80%' : 220, trigger: null, children: _jsxs(Row, { justify: "center", children: [_jsx(Col, { span: 24, children: _jsxs("div", { style: {
-                            margin: 4,
-                            display: "flex",
-                            justifyContent: "center",
-                            alignItems: "center",
-                            backgroundColor: token.colorBgElevated,
-                        }, 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(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,
-                                    //backgroundColor: token.colorFillSecondary,
-                                    marginTop: 8
-                                } })] }) }), _jsx(Col, { span: 24, children: _jsx(Menu, { items: route_config && generateMenuItems(route_config), selectedKeys: [selectedKey], mode: "inline", style: { marginTop: "20px", width: "100%" } }) })] }) }));
+    return (_jsxs(Layout.Sider, { theme: "light", collapsible: true, collapsedWidth: isMobile ? 40 : 80, collapsed: collapsed, onCollapse: toggleCollapsed, style: siderStyle, width: isMobile ? '80%' : 220, trigger: null, children: [_jsxs(Row, { justify: "center", children: [_jsx(Col, { span: 24, children: _jsxs("div", { style: {
+                                margin: 4,
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                backgroundColor: token.colorBgElevated,
+                            }, 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(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,
+                                        //backgroundColor: token.colorFillSecondary,
+                                        marginTop: 8
+                                    } })] }) }), _jsx(Col, { span: 24, children: _jsx(Menu, { items: route_config && generateMenuItems(route_config), selectedKeys: [selectedKey], mode: "inline", style: { marginTop: "20px", width: "100%" } }) })] }), (poweredBy && !collapsed) && _jsxs(Text, { type: "secondary", style: { position: "absolute", bottom: 0, left: 0, margin: 4 }, children: ["Propuls\u00E9 et fait avec \u2764\uFE0F par", " ", _jsx(Link, { to: "https://github.com/geo2france/api-dashboard", children: "G\u00E9o2France" })] })] }));
 };
 export default DashboardSider;

package/dist/data_providers/file/utils/axios.js

@@ -1,20 +1,7 @@
 import axios from "axios";
 const axiosInstance = axios.create();
-axiosInstance.interceptors.response.use(
-// API WFS retourne toujours un code http 200, y compris en cas d'erreur.
-// Une réponse est présumée valide si elle renvoie un objet json valide. (Sinon c'est un xml)
-// TODO parser le XML retourné en cas d'erreur
-(response) => {
-    if (typeof response.data === "object") {
-        return response;
-    }
-    else {
-        const customError = {
-            message: response.data,
-            statusCode: response.status,
-        };
-        return Promise.reject(customError);
-    }
+axiosInstance.interceptors.response.use((response) => {
+    return response;
 }, (error) => {
     const customError = {
         ...error,

package/dist/dsl/index.d.ts

@@ -21,4 +21,5 @@ import { Statistics, StatisticsCollection } from "../components/Charts/Statistic
 import { MapLayer, Map } from "../components/Map/Map";
 import { Section } from "../components/DashboardPage/Section";
 import { LegendControl } from "../components/MapLegend/MapLegend";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer, LegendControl };
+import { Intro } from "../components/DashboardPage/Intro";
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, Intro, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer, LegendControl };

package/dist/dsl/index.js

@@ -21,4 +21,5 @@ import { Statistics, StatisticsCollection } from "../components/Charts/Statistic
 import { MapLayer, Map } from "../components/Map/Map";
 import { Section } from "../components/DashboardPage/Section";
 import { LegendControl } from "../components/MapLegend/MapLegend";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer, LegendControl };
+import { Intro } from "../components/DashboardPage/Intro";
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, Intro, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer, LegendControl };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { useMapControl } from "./utils/useMapControl";
 export { BaseRecordToGeojsonPoint } from "./utils/baserecordtogeojsonpoint";
 export { cardStyles } from "./utils/cardStyles";
 export { merge_others } from "./utils/merge_others";
+export { aggregator } from "./utils/aggregator";
 import KeyFigure from "./components/KeyFigure/KeyFigure";
 import LoadingContainer from "./components/LoadingContainer/LoadingContainer";
 import FlipCard from "./components/FlipCard/FlipCard";

package/dist/index.js

@@ -9,6 +9,7 @@ export { useMapControl } from "./utils/useMapControl";
 export { BaseRecordToGeojsonPoint } from "./utils/baserecordtogeojsonpoint";
 export { cardStyles } from "./utils/cardStyles";
 export { merge_others } from "./utils/merge_others";
+export { aggregator } from "./utils/aggregator";
 // Components
 import KeyFigure from "./components/KeyFigure/KeyFigure";
 import LoadingContainer from "./components/LoadingContainer/LoadingContainer";

package/dist/utils/aggregator.d.ts

@@ -0,0 +1,18 @@
+import { SimpleRecord } from "../types";
+interface AggregatorParams {
+    /** Tableau de données */
+    data?: SimpleRecord[];
+    /** Colonne à aggréger */
+    dataKey?: string;
+    /** Agregat */
+    aggregate: "last" | "first" | "sum" | "lastNotNull" | "min" | "max" | "count" | "mean" | "countDistinct" | "countMissing";
+}
+interface AggregatorResult {
+    /** Ligne retenue (pour "last", "first", "lastNotNull") */
+    row?: SimpleRecord;
+    /** Valeur agrégée */
+    value?: number;
+}
+/** Fonction permettant d'agréger une colonne d'un dataset */
+export declare const aggregator: ({ data, dataKey, aggregate }: AggregatorParams) => AggregatorResult;
+export {};

package/dist/utils/aggregator.js

@@ -0,0 +1,49 @@
+import { from, op } from "arquero";
+/** Fonction permettant d'agréger une colonne d'un dataset */
+export const aggregator = ({ data, dataKey, aggregate }) => {
+    if (data == undefined || dataKey == undefined || data.length < 1) {
+        return { row: undefined, value: undefined };
+    }
+    switch (aggregate) {
+        case "last": {
+            const row = data.slice(-1)[0];
+            return { row, value: Number(row[dataKey]) };
+        }
+        case "first": {
+            const row = data[0];
+            return { row, value: Number(row[dataKey]) };
+        }
+        case "lastNotNull": {
+            const row = data.filter(r => r[dataKey] != null).slice(-1)?.[0];
+            return { row, value: Number(row?.[dataKey]) };
+        }
+        case "sum": {
+            const value = from(data).rollup({ value: op.sum(dataKey) }).object().value;
+            return { row: undefined, value };
+        }
+        case "min": {
+            const value = from(data).rollup({ value: op.min(dataKey) }).object().value;
+            return { row: undefined, value };
+        }
+        case "max": {
+            const value = from(data).rollup({ value: op.max(dataKey) }).object().value;
+            return { row: undefined, value };
+        }
+        case "count": {
+            const value = from(data).rollup({ value: op.valid(dataKey) }).object().value;
+            return { row: undefined, value };
+        }
+        case "mean": {
+            const value = from(data).rollup({ value: op.average(dataKey) }).object().value;
+            return { row: undefined, value };
+        }
+        case "countDistinct": {
+            const value = from(data).rollup({ value: op.distinct(dataKey) }).object().value;
+            return { row: undefined, value };
+        }
+        case "countMissing": {
+            const value = from(data).rollup({ value: op.invalid(dataKey) }).object().value;
+            return { row: undefined, value };
+        }
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",
@@ -42,7 +42,9 @@
   },
   "scripts": {
     "tsc": "tsc",
-    "test": "jest --watchAll"
+    "test": "jest --watchAll",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@ant-design/react-slick": "^1.1.2",
@@ -57,6 +59,7 @@
     "echarts": "^6.0.0",
     "echarts-for-react": "^3.0.4",
     "query-string": "~7.1.3",
+    "react-countup": "^6.5.3",
     "react-error-boundary": "^6.0.0",
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
@@ -65,7 +68,13 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^6.0.2",
+    "@chromatic-com/storybook": "^5.0.0",
     "@iconify/json": "^2.2.382",
+    "@storybook/addon-a11y": "^10.2.1",
+    "@storybook/addon-docs": "^10.2.1",
+    "@storybook/addon-onboarding": "^10.2.1",
+    "@storybook/addon-vitest": "^10.2.1",
+    "@storybook/react-vite": "^10.2.1",
     "@tanstack/react-query": "^5.51.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
@@ -74,36 +83,41 @@
     "@types/chroma-js": "^3.1.1",
     "@types/geojson": "^7946.0.14",
     "@types/jest": "^29.5.13",
-    "@types/node": "^22.7.4",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^25.1.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@types/react-helmet-async": "^1.0.1",
     "@types/react-icons": "^2.2.7",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.24.3",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "antd": "^6.2.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "maplibre-gl": "^4.7.1",
+    "playwright": "^1.58.0",
     "react": "^18.3.1",
     "react-map-gl": "^7.1.9",
-    "react-router-dom": "^6.25.1",
+    "react-router-dom": "^7.13.0",
+    "storybook": "^10.2.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tsup": "^8.5.0",
     "typescript": "^5.5.2",
-    "vite": "^5.3.4",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite": "^7.3.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "@ant-design/icons": "^6.0.2",
     "@tanstack/react-query": "^5.51.11",
-    "antd": "^5.18.3",
+    "antd": "^6.2.2",
     "maplibre-gl": "^4.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-map-gl": "^7.1.9",
-    "react-router-dom": "^6.25.1"
+    "react-router-dom": "^7.13.0"
   }
 }