@geo2france/api-dashboard 1.10.1 → 1.11.1

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

@@ -1,7 +1,7 @@
 import { EChartsOption } from "echarts";
-import EChartsReact from "echarts-for-react";
-interface ChartEchartsProps {
-    option?: EChartsOption;
+import EChartsReact, { EChartsReactProps } from "echarts-for-react";
+interface ChartEchartsProps extends EChartsReactProps {
+    option: EChartsOption;
 }
 export declare const ChartEcharts: import("react").ForwardRefExoticComponent<ChartEchartsProps & import("react").RefAttributes<EChartsReact>>;
 export {};

package/dist/components/Charts/ChartEcharts.js

@@ -11,7 +11,7 @@ const { useToken } = theme;
 * - 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 = {} }, ref) => {
+export const ChartEcharts = forwardRef(({ option = {}, ...restProps }, ref) => {
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []); // Pour exposer le innerref au parent
     const { token } = useToken();
@@ -31,5 +31,5 @@ export const ChartEcharts = forwardRef(({ option = {} }, ref) => {
             axisLine: { lineStyle: { color: token.colorTextSecondary } },
         },
     };
-    return (_jsx(EChartsReact, { option: deepMerge({}, default_option, option), ref: innerRef }));
+    return (_jsx(EChartsReact, { option: deepMerge({}, default_option, option), ref: innerRef, ...restProps }));
 });

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

@@ -1,5 +1,14 @@
 import { ReactElement } from "react";
+import { SimpleRecord } from "../../types";
 type comparwithType = "first" | "previous";
+interface annotation_params_type {
+    /** Valeur principale */
+    value: number;
+    /** Jeu de données utilisé */
+    data: SimpleRecord[] | undefined;
+    /** Valeur de comparaison */
+    compareValue: number;
+}
 interface StatisticsProps {
     /** Identifiant du jeu de données */
     dataset: string;
@@ -23,6 +32,8 @@ interface StatisticsProps {
     help?: string;
     /** Comparer la valeur avec la précédente ou la première du jeu de données */
     compareWith?: comparwithType;
+    /** Texte d'annotation (remplace evolution si définie) */
+    annotation?: React.ReactNode | ((param: annotation_params_type) => React.ReactNode);
 }
 /**
  * Composant `Statistics` affichant une valeur d'un dataset avec son évolution.

package/dist/components/Charts/Statistics.js

@@ -20,15 +20,23 @@ 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 }) => {
+export const Statistics = ({ dataset: dataset_id, dataKey, unit, evolutionSuffix, title, icon: icon_input, color, invertColor = false, help, compareWith, relativeEvolution = false, annotation }) => {
     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 value = dataset?.data?.slice(-1)[0][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 evolution_unit = relativeEvolution ? '%' : unit;
     const evolution_is_good = invertColor ? evolution < 0 : evolution > 0;
     const tooltip = help && _jsx(Tooltip, { title: help, children: _jsx(QuestionCircleOutlined, {}) });
+    const annotation_params = { value: value || NaN, compareValue: compare_value || NaN, data: dataset?.data || [] };
+    let subtitle;
+    if (annotation !== undefined) {
+        subtitle = typeof annotation === 'function' ? annotation(annotation_params) : annotation;
+    }
+    else if (evolution) {
+        subtitle = (_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 })] }));
+    }
     return (_jsx(Card, { title: title, style: {
             borderLeft: `4px solid ${color}`,
             height: "100%"
@@ -44,7 +52,10 @@ 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: [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 })] })] }) }));
+        }, 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 } })] }), typeof subtitle == 'string' ?
+                    _jsx(Text, { italic: true, type: "secondary", children: subtitle })
+                    :
+                        _jsx("div", { children: subtitle })] }) }));
 };
 /**
  * `StatisticsCollection` permet de regrouper plusieurs cartes statistiques

package/dist/components/DashboardPage/Block.js

@@ -4,6 +4,7 @@ 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";
 const { useToken } = theme;
 export const ChartBlockContext = createContext(undefined);
 export const DSL_ChartBlock = ({ children }) => {
@@ -36,7 +37,7 @@ export const DSL_ChartBlock = ({ children }) => {
         };
         DL();
     };
-    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 })] }) }));
+    return (_jsx(ChartBlockContext.Provider, { value: { config: config, setConfig: (e) => setConfig(e) }, children: _jsx(Card, { style: { height: '100%' }, extra: has_action && dropdown_toolbox, title: config.title, children: _jsxs(ErrorBoundary, { children: [children, _jsx(ProducersFooter, { component: children })] }) }) }));
 };
 export const useBlockConfig = ({ title, dataExport }) => {
     const blockContext = useContext(ChartBlockContext);

package/dist/components/Dataset/Dataset.js

@@ -37,8 +37,8 @@ export const DSL_Dataset = ({ children, id, provider: provider_input, type: prov
                     inner: { left: false, right: false },
                 }[join_type] ?? { left: false, right: false };
                 const otherData = allDatasets?.find((d) => d.id === props.dataset)?.data;
-                if (!otherData)
-                    return undefined; // ou [] ou data selon la logique souhaitée
+                if (!otherData || otherData.length < 1)
+                    return undefined; // prevent arquero from crash on missed data
                 return from(data).join(from(otherData), props.joinKey, undefined, aq_join_option).objects();
             };
             return funct;

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: { 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/Layout/Error.d.ts

@@ -1,2 +1,7 @@
 import React from "react";
 export declare const ErrorComponent: React.FC;
+interface ErrorBoundaryProps {
+    children?: React.ReactNode;
+}
+export declare const ErrorBoundary: React.FC<ErrorBoundaryProps>;
+export {};

package/dist/components/Layout/Error.js

@@ -1,6 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Result, Typography, Space } from "antd";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Result, Typography, Space, Alert } from "antd";
+import { ErrorBoundary as ErrorBoundaryBase } from "react-error-boundary";
+import { Icon } from "@iconify/react";
 const { Text } = Typography;
 export const ErrorComponent = () => {
     return (_jsx(Result, { status: "404", title: "404", extra: _jsx(Space, { direction: "vertical", size: "large", children: _jsx(Space, { children: _jsx(Text, { children: "La page n'existe pas" }) }) }) }));
 };
+export const ErrorBoundary = ({ children }) => {
+    const fallback = (_jsx(Alert, { message: _jsx(Icon, { icon: "garden:face-very-sad-stroke-12", fontSize: 25 }), description: _jsxs("div", { children: [_jsx("p", { children: " Cette visualisation ne peux malheureusement pas s'afficher." }), _jsx("p", { children: " Contactez l'administrateur\u00B7rice du tableau de bord si le probl\u00E8me persiste." })] }), type: "warning" }));
+    return (_jsx(ErrorBoundaryBase, { fallback: fallback, children: children }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.10.1",
+  "version": "1.11.1",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",
@@ -56,6 +56,7 @@
     "echarts": "^6.0.0",
     "echarts-for-react": "^3.0.4",
     "query-string": "~7.1.3",
+    "react-error-boundary": "^6.0.0",
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"