@geo2france/api-dashboard 1.10.0 → 1.11.0

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/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/dist/components/Map/Map.js

@@ -64,7 +64,7 @@ export const MapLayer = ({ dataset, categoryKey, color = 'red', type = 'circle',
         : data?.geojson; // Sinon on utilise le geojson (fournisseur wfs)
     const geom_type = geojson?.features?.[0] && getType(geojson?.features?.[0]);
     /** Type de données dans categoryKey (string ou number) */
-    const type_value = categoryKey && typeof (data?.data?.[0][categoryKey]);
+    const type_value = categoryKey && typeof (data?.data?.[0]?.[categoryKey]);
     /** Valeurs distinctes (si type string) */
     const values = (type_value === 'string') && categoryKey && data?.data && from(data?.data).rollup({ a: op.array_agg_distinct(categoryKey) }).get('a', 0) || undefined;
     /** Couleurs de la palette */
@@ -105,7 +105,7 @@ export const MapLayer = ({ dataset, categoryKey, color = 'red', type = 'circle',
     }
     //devnote : regarder la colonne contenant les valeurs pour proposer une représentation (catégorie ou choroplèthe)
     useEffect(() => {
-        if (geojson) {
+        if (geojson && geojson.features.length > 0) { // do not fitbound if no features
             const box = bbox(geojson).slice(0, 4);
             map?.fitBounds(box, { padding: 20 });
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "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"