@geo2france/api-dashboard 1.6.2 → 1.8.0

package/README.MD

@@ -29,7 +29,15 @@ Les composants sont actuellement utilisés pour le [tableau de bord de l'Odema](
 
 ## Installation
 
-`npm i @geo2france/api-dashboard`
+Pour créer un nouveau tableau de bord :
+
+```sh
+npm init @geo2france/api-dashboard@latest nom-du-projet
+cd nom-du-projet && npm install
+
+# Lancer le serveur de développement
+npm run dev
+```
 
 Consulter la [documentation](https://geo2france.github.io/api-dashboard/) du projet.
 

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

@@ -5,6 +5,7 @@ interface IChartPieProps {
     unit?: string;
     title?: string;
     donut?: boolean;
+    other?: number | null;
 }
 export declare const ChartPie: React.FC<IChartPieProps>;
 export {};

package/dist/components/Charts/Pie.js

@@ -5,7 +5,8 @@ import { ChartBlockContext } from "../DashboardPage/Block";
 import { usePalette } from "../Palette/Palette";
 import { from, op } from "arquero";
 import { ChartEcharts } from "./ChartEcharts";
-export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, donut = false }) => {
+import { merge_others } from "../..";
+export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, donut = false, other = 5 }) => {
     const dataset = useDataset(dataset_id);
     const blockConfig = useContext(ChartBlockContext);
     const data = dataset?.data;
@@ -14,10 +15,17 @@ export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, d
         dataExport: data
     };
     useEffect(() => blockConfig?.setConfig(block_config), [data]);
-    const chart_data = data && from(data).groupby(nameKey).rollup({ value: op.sum(dataKey) }).objects().map((d) => ({
-        name: d[nameKey],
-        value: d.value,
-    }));
+    const chart_data1 = data && data.length > 0
+        ? from(data)
+            .groupby(nameKey)
+            .rollup({ value: op.sum(dataKey) })
+            .objects()
+            .map((d) => ({
+            name: d[nameKey],
+            value: d.value,
+        }))
+        : [];
+    const chart_data = merge_others({ dataset: chart_data1 || [], min: other || -1 });
     const option = {
         color: usePalette({ nColors: chart_data?.length }),
         xAxis: { show: false }, yAxis: { show: false },

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

@@ -4,7 +4,6 @@
 interface IYearSerieProps {
     dataset: string;
     title?: string;
-    yearControl?: string;
     yearKey: string;
     valueKey: string;
     categoryKey?: string;

package/dist/components/Charts/YearSerie.js

@@ -6,27 +6,39 @@ import { from, op } from "arquero";
 import { useDataset } from "../Dataset/hooks";
 import { usePalette } from "../Palette/Palette";
 import { ChartEcharts } from "./ChartEcharts";
-export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yearKey, yearMark, stack: stack_input, type: chart_type = 'bar', yearControl = 'year' }) => {
+import { useContext, useEffect } from "react";
+import { ChartBlockContext } from "../DashboardPage/Block";
+export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yearKey, yearMark, stack: stack_input, title, type: chart_type = 'bar' }) => {
     const stack = stack_input || chart_type == 'line' ? false : true; // Pas de stack par défaut pour le type line
     const dataset = useDataset(dataset_id);
     const data = dataset?.data;
-    const chart_data = categoryKey ? data && from(data).groupby(yearKey, categoryKey) //Somme par année et categorykey
-        .rollup({ [valueKey]: op.sum(valueKey) })
-        .groupby(yearKey).orderby(yearKey).objects()
-        :
-            data && from(data).groupby(yearKey) //Somme par année seulement
-                .rollup({ [valueKey]: op.sum(valueKey) }).orderby(yearKey)
-                .objects();
-    const distinct_cat = categoryKey ?
-        data && from(data).rollup({ cat: op.array_agg_distinct(categoryKey) }).object().cat
-        :
-            [valueKey];
+    let chart_data = [];
+    let distinct_cat = [];
+    const blockConfig = useContext(ChartBlockContext); //TODO : créer un hook pour simplifier la config du block
+    const block_config = {
+        title: title,
+        dataExport: data
+    };
+    useEffect(() => blockConfig?.setConfig(block_config), [title, data]);
+    if (data && data.length > 0) {
+        const grouped_data = categoryKey ? from(data).groupby(yearKey, categoryKey) //Somme par année et categorykey
+            .rollup({ [valueKey]: op.sum(valueKey) })
+            .groupby(yearKey).orderby(yearKey)
+            :
+                from(data).groupby(yearKey) //Somme par année seulement
+                    .rollup({ [valueKey]: op.sum(valueKey) }).orderby(yearKey);
+        const all_years = from(data).groupby(yearKey).rollup({ [yearKey]: op.any(yearKey) });
+        const all_cats = categoryKey ? (from(data).groupby(categoryKey).rollup({ [categoryKey]: op.any(categoryKey) })) : from([{ 'cat': valueKey }]);
+        const full = all_years.cross(all_cats); // Contient chaque annee x catégorie (pour éviter les trous)
+        distinct_cat = all_cats.array(categoryKey || 'cat'); // Pour générer chaque serie
+        chart_data = full.join_left(grouped_data).objects();
+    }
     const COLORS = usePalette({ nColors: distinct_cat?.length }) || [];
-    const series = distinct_cat ? distinct_cat.map((cat, idx) => ({
+    const series = distinct_cat.map((cat, idx) => ({
         name: cat,
         type: chart_type === 'area' ? 'line' : chart_type,
-        data: categoryKey ? chart_data?.filter((row) => row[categoryKey] === cat).map((row) => ([String(row[yearKey]), row[valueKey]]))
-            : chart_data?.map((row) => ([String(row[yearKey]), row[valueKey]])),
+        data: categoryKey ? chart_data?.filter((row) => row[categoryKey] === cat).map((row) => ([String(row[yearKey]), row[valueKey] || 0]))
+            : chart_data?.map((row) => ([String(row[yearKey]), row[valueKey] || 0])),
         itemStyle: {
             color: COLORS && COLORS[idx % COLORS.length],
         },
@@ -38,7 +50,7 @@ export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yea
                 { xAxis: String(yearMark) }
             ]
         } : undefined
-    })) : [];
+    }));
     function tooltipFormatter(params) {
         if (!params || params.length === 0)
             return '';

package/dist/components/Control/Control.js

@@ -15,6 +15,7 @@ const Control = ({ children, style = {} }) => {
             backgroundColor: "#fff",
             height: "auto",
             width: "100%",
+            borderBottom: "1px solid #ccc",
             ...style,
         }, children: children }));
 };

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

@@ -39,5 +39,6 @@ interface IDSLDashboardPageProps {
     children: React.ReactNode;
     name?: string;
     columns?: number;
+    debug?: boolean;
 }
 export declare const DSL_DashboardPage: React.FC<IDSLDashboardPageProps>;

package/dist/components/DashboardPage/Page.js

@@ -40,7 +40,7 @@ export default DashboardPage;
 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 }) => {
+export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, children, debug = false }) => {
     const [datasets, setdatasets] = useState({});
     const [palette, setPalette] = useState(DEFAULT_PALETTE);
     //const allDatasetLoaded = Object.values(datasets).every(d => !d.isFetching);
@@ -68,6 +68,9 @@ 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');
+    if (debug && !logic_components.some((c) => typeof c.type !== "string" && c.type.name === Debug.name)) {
+        logic_components.push(_jsx(Debug, {}, "debug_property"));
+    }
     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",

package/dist/components/Layout/DashboardApp.js

@@ -41,6 +41,6 @@ const DashboardApp = ({ routes, theme, logo, brands, title, subtitle }) => {
             ...c
         }));
     };
-    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(ControlContext.Provider, { value: { values: controls, pushValue: pushControl }, children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsxs(Route, { element: _jsxs(Layout, { children: [_jsxs(Layout, { children: [_jsx(DashboardSider, { route_config: routes }), _jsx(Content, { style: { width: "85%" }, children: _jsx(Outlet, {}) })] }), _jsx(DasbhoardFooter, { brands: brands })] }), 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(ControlContext.Provider, { value: { values: controls, pushValue: pushControl }, 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 })] })] }), children: [generateRoutes(routes), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }));
 };
 export default DashboardApp;

package/dist/components/Layout/Footer.js

@@ -1,9 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Layout, Typography } from "antd";
+import { Button, Layout, Typography } from "antd";
 import { useContext, useState } from "react";
 import { UpOutlined, DownOutlined } from "@ant-design/icons";
 import { AppContext } from "./DashboardApp";
-const { Text, Link } = Typography;
+const { Text } = Typography;
 export const DasbhoardFooter = ({ brands }) => {
     const [isCollapsed, setIsCollapsed] = useState(window.innerWidth < 768 ? true : false);
     const toggleCollapse = () => {
@@ -11,7 +11,7 @@ export const DasbhoardFooter = ({ brands }) => {
     };
     const app_context = useContext(AppContext);
     const style_img = {
-        height: "60px",
+        maxHeight: "60px",
         marginRight: "20px",
     };
     return (_jsxs(Layout.Footer, { style: {
@@ -22,26 +22,16 @@ export const DasbhoardFooter = ({ brands }) => {
             position: "sticky",
             right: "0",
             width: "100%",
-            height: isCollapsed ? "0px" : "150px",
+            padding: 2,
+            height: isCollapsed ? "40px" : "80px",
             transition: "height 0.5s ease-in-out",
             overflow: "hidden",
             borderTop: "1px solid #ccc",
             zIndex: 600, // maplibre top zIndex if 500
-        }, children: [isCollapsed && (_jsx("div", { style: {
-                    color: "#000",
-                    fontSize: "14px",
-                    marginTop: -15,
-                }, children: _jsx(Link, { href: "/", target: "_blank", children: _jsxs(Text, { children: [app_context?.title, " - ", app_context?.subtitle] }) }) })), _jsx("div", { style: { display: isCollapsed ? "none" : "block", padding: "10px 0" }, children: brands?.map((p) => (_jsx("a", { href: p.url, children: _jsx("img", { style: style_img, src: p.logo, alt: p.name }) }, p.name))) }), _jsx("div", { style: {
+        }, children: [isCollapsed && (_jsxs(Text, { type: "secondary", children: [app_context?.title, " - ", app_context?.subtitle] })), _jsx("div", { style: { display: isCollapsed ? "none" : "block", padding: "10px 0" }, children: brands?.map((p) => (_jsx("a", { href: p.url, children: _jsx("img", { style: style_img, src: p.logo, alt: p.name }) }, p.name))) }), _jsx(Button, { style: {
                     position: "absolute",
                     bottom: "5px",
                     right: "10px",
-                    cursor: "pointer",
                     zIndex: 1001,
-                    backgroundColor: "#dead8f",
-                    padding: "5px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "4px",
-                }, onClick: toggleCollapse, children: isCollapsed ? (_jsx(UpOutlined, { style: { fontSize: "16px", color: "#fff" } })) : (_jsx(DownOutlined, { style: { fontSize: "16px", color: "#fff" } })) })] }));
+                }, type: "primary", onClick: toggleCollapse, "aria-label": isCollapsed ? "Développer le footer" : "Réduire le footer", children: isCollapsed ? _jsx(UpOutlined, {}) : _jsx(DownOutlined, {}) })] }));
 };

package/dist/components/Layout/Sider.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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";
@@ -23,26 +23,30 @@ const DashboardSider = ({ style, logo, route_config }) => {
         setCollapsed(!collapsed);
     };
     const siderStyle = {
+        overflow: 'auto',
         height: "100vh",
         backgroundColor: token.colorBgContainer,
         zIndex: 2,
+        position: 'sticky',
+        top: '0',
+        borderRight: "1px solid #ccc",
         ...style
     };
-    return (_jsx(_Fragment, { children: _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(MdOutlineKeyboardDoubleArrowRight, {}) : _jsx(MdOutlineKeyboardDoubleArrowLeft, {}), 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 (_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(MdOutlineKeyboardDoubleArrowRight, {}) : _jsx(MdOutlineKeyboardDoubleArrowLeft, {}), 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%" } }) })] }) }));
 };
 export default DashboardSider;

package/dist/data_providers/datafair/utils/generateFilter.js

@@ -15,7 +15,6 @@ export const generateFilter = (filters) => {
                         case "endswith":
                             return `*${filter.value}`;
                         case "in":
-                            console.log(filter.value);
                             return filter.value.join(' ');
                     }
                 })();

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/utils/merge_others.d.ts

@@ -0,0 +1,8 @@
+import { SimpleRecord } from "../types";
+interface MergeOthersOpts {
+    dataset: SimpleRecord[];
+    min: number;
+    other_cat_name?: string;
+}
+export declare const merge_others: ({ dataset, min, other_cat_name }: MergeOthersOpts) => SimpleRecord[];
+export {};

package/dist/utils/merge_others.js

@@ -0,0 +1,14 @@
+import { from, op } from "arquero";
+export const merge_others = ({ dataset, min, other_cat_name = 'Autres' }) => {
+    const total = dataset.reduce((acc, d) => acc + d.value, 0);
+    const small = dataset.filter(d => (d.value / total) * 100 < min);
+    const large = dataset.filter(d => (d.value / total) * 100 >= min);
+    if (small.length > 1) {
+        const others_row = from(small).rollup({ value: op.sum('value') }).objects().map((d) => ({
+            name: other_cat_name,
+            value: d.value
+        }));
+        return [...large, ...others_row];
+    }
+    return dataset;
+};

package/package.json

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