@geo2france/api-dashboard 1.7.0 → 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/YearSerie.js

@@ -6,12 +6,20 @@ 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' }) => {
+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;
     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) })

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/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/package.json

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