@geo2france/api-dashboard 1.11.2 → 1.13.0

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

@@ -1,11 +1,13 @@
 import { ReactElement } from "react";
 import { SimpleRecord } from "../../types";
 type comparwithType = "first" | "previous";
-interface annotation_params_type {
+interface ICallbackParams {
     /** Valeur principale */
     value: number;
     /** Jeu de données utilisé */
     data: SimpleRecord[] | undefined;
+    /** Ligne courante (pour accéder aux autres champs) */
+    row: SimpleRecord | undefined;
     /** Valeur de comparaison */
     compareValue: number;
 }
@@ -33,7 +35,9 @@ interface StatisticsProps {
     /** 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);
+    annotation?: React.ReactNode | ((param: ICallbackParams) => React.ReactNode);
+    /** Fonction a appliquer avant rendu */
+    valueFormatter?: ((param: ICallbackParams) => React.ReactNode);
 }
 /**
  * Composant `Statistics` affichant une valeur d'un dataset avec son évolution.

package/dist/components/Charts/Statistics.js

@@ -20,19 +20,20 @@ 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, 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 }) => {
     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. Caster en Number ?
+    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 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 || [] };
+    const CallbackParams = { value: value || NaN, compareValue: compare_value || NaN, data: dataset?.data || [], row: row };
     let subtitle;
     if (annotation !== undefined) {
-        subtitle = typeof annotation === 'function' ? annotation(annotation_params) : annotation;
+        subtitle = typeof annotation === 'function' ? annotation(CallbackParams) : 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 })] }));
@@ -52,7 +53,7 @@ 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 } })] }), typeof subtitle == 'string' ?
+        }, 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' ?
                     _jsx(Text, { italic: true, type: "secondary", children: subtitle })
                     :
                         _jsx("div", { children: subtitle })] }) }));

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

@@ -2,6 +2,7 @@ import { RowProps } from "antd";
 import DashboardElement from "../DashboardElement/DashboardElement";
 import React from "react";
 import { SimpleRecord } from "../../types";
+import { Section } from "./Section";
 type Section = {
     key: string;
     libel?: string;

package/dist/components/DashboardPage/Page.js

@@ -1,13 +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 } from "antd";
+import { Button, Col, Dropdown, Flex, Grid, Layout, Radio, Row, Tabs, theme } from "antd";
 import React, { isValidElement, useState, createContext, } from "react";
 import { Helmet } from "react-helmet-async";
 import { useSearchParamsState } from "../../utils/useSearchParamsState";
 import Control, { DSL_Control } from "../Control/Control";
 import { Dataset, Debug, Provider } from "../../dsl";
-import { DSL_ChartBlock } from "./Block";
 import { DEFAULT_PALETTE, Palette, PaletteContext } from "../Palette/Palette";
+import { Section } from "./Section";
+import { Icon } from "@iconify/react";
 const { Header } = Layout;
+const { useToken } = theme;
 const getSection = (child) => React.isValidElement(child) ? child.props.section : undefined;
 const DashboardPage = ({ children: children_input, control, row_gutter = [8, 8], sections }) => {
     let sections_std = [];
@@ -41,6 +43,7 @@ export const DatasetContext = createContext({});
 export const DatasetRegistryContext = createContext(() => { }); // A modifier, utiliser un seul context
 export const ControlContext = createContext(undefined);
 export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, children, debug = false }) => {
+    const { token } = useToken();
     const [datasets, setdatasets] = useState({});
     const [palette, setPalette] = useState(DEFAULT_PALETTE);
     //const allDatasetLoaded = Object.values(datasets).every(d => !d.isFetching);
@@ -61,6 +64,9 @@ export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, child
         else if (typeof (c.type) != 'string' && c.type.name == DSL_Control.name) {
             return "control";
         }
+        else if (typeof (c.type) != 'string' && c.type.name == Section.name) {
+            return "section";
+        }
         else {
             return "other";
         }
@@ -68,9 +74,23 @@ export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, child
     const visible_components = childrenArray.filter((c) => c && getComponentKind(c) == 'other');
     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');
     if (debug && !logic_components.some((c) => typeof c.type !== "string" && c.type.name === Debug.name)) {
         logic_components.push(_jsx(Debug, {}, "debug_property"));
     }
+    const items = section_components.map((s) => ({
+        key: s.props.title,
+        label: s.props.title,
+        children: s,
+        icon: typeof (s.props.icon) === 'string' ? (_jsx(Icon, { icon: s.props.icon, fontSize: 18, style: { marginInlineEnd: -6 } })) : s.props.icon,
+    }));
+    if (visible_components.length > 0) {
+        items.push({
+            key: "99 - Autres",
+            label: '-',
+            children: _jsx(Section, { title: 'Autres', children: visible_components })
+        });
+    }
     return (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: name }) }), _jsx(DatasetRegistryContext.Provider, { value: pushDataset, children: _jsx(DatasetContext.Provider, { value: datasets, children: _jsxs(PaletteContext.Provider, { value: { palette, setPalette }, children: [control_components.length > 0 && _jsx(Header, { style: {
                                     padding: 12,
                                     position: "sticky",
@@ -79,5 +99,12 @@ export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, child
                                     backgroundColor: "#fff",
                                     height: "auto",
                                     width: "100%",
-                                }, children: control_components }), _jsx(Row, { gutter: [8, 8], style: { margin: 16 }, children: visible_components.map((component, idx) => _jsx(Col, { xl: 24 / columns, xs: 24, children: _jsx(DSL_ChartBlock, { children: component }) }, idx)) }), logic_components] }) }) })] }));
+                                }, children: control_components }), items.length > 1 ?
+                                _jsx(Tabs, { defaultActiveKey: "1", items: items, centered: true, tabBarStyle: { margin: 6,
+                                        padding: 4,
+                                        background: token.colorBgContainer,
+                                        borderRadius: token.borderRadiusLG }, style: { margin: 4 } })
+                                :
+                                    _jsxs("div", { style: { margin: 4 }, children: [" ", items?.[0].children, " "] }) //Show content without tabs if only one
+                            , logic_components] }) }) })] }));
 };

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

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SectionProps {
+    title: string;
+    children?: React.ReactElement | React.ReactElement[];
+    icon?: React.ReactElement | string;
+}
+export declare const Section: React.FC<SectionProps>;

package/dist/components/DashboardPage/Section.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Col, Row } from "antd";
+import React, { isValidElement } from "react";
+import { DSL_ChartBlock } from "./Block";
+export const Section = ({ children }) => {
+    const columns = 2;
+    const childrenArray = React.Children.toArray(children).filter(isValidElement);
+    return (_jsx(Row, { gutter: [8, 8], style: { margin: 0 }, children: childrenArray.map((component, idx) => (_jsx(Col, { xl: 24 / columns, xs: 24, children: _jsx(DSL_ChartBlock, { children: component }) }, idx))) }));
+};

package/dist/dsl/index.d.ts

@@ -19,4 +19,5 @@ import { ChartEcharts } from "../components/Charts/ChartEcharts";
 import { useBlockConfig } from "../components/DashboardPage/Block";
 import { Statistics, StatisticsCollection } from "../components/Charts/Statistics";
 import { MapLayer, Map } from "../components/Map/Map";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, Map, MapLayer };
+import { Section } from "../components/DashboardPage/Section";
+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, PalettePreview, Debug, Map, MapLayer };

package/dist/dsl/index.js

@@ -19,4 +19,5 @@ import { ChartEcharts } from "../components/Charts/ChartEcharts";
 import { useBlockConfig } from "../components/DashboardPage/Block";
 import { Statistics, StatisticsCollection } from "../components/Charts/Statistics";
 import { MapLayer, Map } from "../components/Map/Map";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, Map, MapLayer };
+import { Section } from "../components/DashboardPage/Section";
+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, PalettePreview, Debug, Map, MapLayer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.11.2",
+  "version": "1.13.0",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",