@geo2france/api-dashboard 1.13.0 → 1.14.0

package/dist/components/Dataset/Dataset.js

@@ -47,7 +47,7 @@ export const DSL_Dataset = ({ children, id, provider: provider_input, type: prov
                     : [props.joinKey, props.joinKey];
                 const leftTable = data.length >= 1 ? data : [{ [leftKey]: null }];
                 const rightTable = otherData.length >= 1 ? otherData : [{ [rightKey]: null }];
-                return from(leftTable).join(from(rightTable), props.joinKey, undefined, aq_join_option).objects();
+                return from(leftTable).join(from(rightTable), props.joinKey, undefined, { suffix: ['', '_2'], ...aq_join_option }).objects();
             };
             return funct;
         }

package/dist/components/Layout/DashboardApp.d.ts

@@ -7,12 +7,34 @@ interface AppContextProps {
 }
 export declare const AppContext: import("react").Context<AppContextProps>;
 export interface DashboardConfig {
+    /**
+    * Titre principal du tableau de bord (affiché dans le header ou le titre de page).
+    */
     title?: string;
+    /**
+     * Sous-titre du tableau de bord (optionnel, peut être affiché sous le titre principal).
+    */
     subtitle?: string;
+    /**
+     * Liste des routes de l'application (chaque route correspond à une page du tableau de bord).
+    */
     routes: RouteConfig[];
+    /**
+     * Configuration du thème Ant Design (permet de personnaliser les couleurs, la typographie, etc.).
+    */
     theme?: ThemeConfig;
+    /**
+     * URL ou chemin du logo à afficher dans le tableau de bord.
+    */
     logo: string;
+    /**
+     * Liste optionnelle de partenaires ou marques à afficher dans le footer ou ailleurs.
+    */
     brands?: Partner[];
+    /**
+     * Active ou désactive le mode “slider” dans le pied de page (faire défiler les logos de partenaires).
+    */
+    footerSlider?: boolean;
 }
 declare const DashboardApp: React.FC<DashboardConfig>;
 export default DashboardApp;

package/dist/components/Layout/DashboardApp.js

@@ -31,7 +31,7 @@ const default_theme = {
     }
 };
 export const AppContext = createContext({});
-const DashboardApp = ({ routes, theme, logo, brands, title, subtitle }) => {
+const DashboardApp = ({ routes, theme, logo, brands, footerSlider, title, subtitle }) => {
     const context_values = { title, subtitle, logo };
     /* CONTROLS */
     const [controls, setControles] = useState({});
@@ -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, { 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, {}) })] }) }) }) }) }) }) }) }));
+    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, slider: footerSlider })] })] }), children: [generateRoutes(routes), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }));
 };
 export default DashboardApp;

package/dist/components/Layout/Footer.d.ts

@@ -1,6 +1,9 @@
 import { Partner } from "../../types";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 interface DbFooterProps {
     brands?: Partner[];
+    slider?: boolean;
 }
 export declare const DasbhoardFooter: React.FC<DbFooterProps>;
 export {};

package/dist/components/Layout/Footer.js

@@ -1,19 +1,33 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Layout, Typography } from "antd";
 import { useContext, useState } from "react";
+import Slider from "@ant-design/react-slick";
 import { UpOutlined, DownOutlined } from "@ant-design/icons";
 import { AppContext } from "./DashboardApp";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 const { Text } = Typography;
-export const DasbhoardFooter = ({ brands }) => {
+export const DasbhoardFooter = ({ brands, slider = true }) => {
     const [isCollapsed, setIsCollapsed] = useState(window.innerWidth < 768 ? true : false);
     const toggleCollapse = () => {
         setIsCollapsed(!isCollapsed);
     };
     const app_context = useContext(AppContext);
-    const style_img = {
+    // Style avec slider (l'image occupe tout le bloc défilé)
+    const style_img = slider ? {
         maxHeight: "60px",
-        marginRight: "20px",
-    };
+        maxWidth: "100%",
+        margin: "auto"
+    }
+        // Style sans slider
+        : {
+            maxHeight: "60px",
+            marginRight: "20px",
+        };
+    const nbBrands = brands?.length || 0;
+    // Contenu du footer = logos des partenaires
+    // TODO : doit pouvoir être surchargé par l'utilisateur
+    const footerContent = brands?.map((p) => (_jsx("a", { href: p.url, children: _jsx("img", { style: style_img, src: p.logo, alt: p.name }) }, p.name)));
     return (_jsxs(Layout.Footer, { style: {
             textAlign: "center",
             color: "#fff",
@@ -23,12 +37,40 @@ export const DasbhoardFooter = ({ brands }) => {
             right: "0",
             width: "100%",
             padding: 2,
-            height: isCollapsed ? "40px" : "80px",
+            height: "auto",
+            minHeight: "40px",
             transition: "height 0.5s ease-in-out",
             overflow: "hidden",
             borderTop: "1px solid #ccc",
             zIndex: 600, // maplibre top zIndex if 500
-        }, 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: {
+        }, children: [isCollapsed && (_jsxs(Text, { type: "secondary", children: [app_context?.title, " - ", app_context?.subtitle] })), _jsx("div", { style: { display: isCollapsed ? "none" : "block", padding: "10px 0" }, children: slider
+                    // Logos avec défilement (choix par défaut)
+                    ? _jsx(Slider
+                    // Défilement auto si plus de logos que la lagreur de l'écran ne peut en afficher
+                    , { 
+                        // Défilement auto si plus de logos que la lagreur de l'écran ne peut en afficher
+                        autoplay: nbBrands > 4, slidesToShow: Math.min(nbBrands, 4), responsive: [
+                            {
+                                breakpoint: 1024,
+                                settings: {
+                                    autoplay: nbBrands > 3,
+                                    slidesToShow: Math.min(nbBrands, 3)
+                                }
+                            },
+                            {
+                                breakpoint: 600,
+                                settings: {
+                                    autoplay: nbBrands > 2,
+                                    slidesToShow: Math.min(nbBrands, 2)
+                                }
+                            },
+                            {
+                                breakpoint: 480,
+                                settings: { slidesToShow: 1 }
+                            }
+                        ], slidesToScroll: 1, infinite: true, arrows: false, autoplaySpeed: 3000, speed: 1000, children: footerContent })
+                    // Défilement désactivé
+                    : footerContent }), _jsx(Button, { style: {
                     position: "absolute",
                     bottom: "5px",
                     right: "10px",

package/dist/components/Map/Map.d.ts

@@ -2,6 +2,7 @@ import type { AnyLayer } from 'react-map-gl/maplibre';
 import { AnyPaint } from 'mapbox-gl';
 import React from 'react';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import { SimpleRecord } from '../../types';
 type LayerType = AnyLayer["type"];
 export declare const map_locale: {
     'CooperativeGesturesHandler.WindowsHelpText': string;
@@ -15,6 +16,8 @@ export declare const map_locale: {
 interface MapProps extends MapLayerProps {
     /** Afficher une popup après un click sur la carte */
     popup?: boolean;
+    /** Fonction callback permettant de définir le contenu de la popup */
+    popupFormatter?: ((param: SimpleRecord) => React.ReactNode);
     /** Titre du graphique */
     title?: string;
 }
@@ -34,6 +37,8 @@ interface MapLayerProps {
     xKey?: string;
     /** Colonne contenant la coordonnées y / latitude */
     yKey?: string;
+    /** Colonne contenant la geométrie au format GeoJSON(4326). Par défaut détection automatique ("geom" ou "geometry") */
+    geomKey?: string;
 }
 /**
  * Composant à utiliser comme enfant d'une <Map>

package/dist/components/Map/Map.js

@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import { useDataset } from '../Dataset/hooks';
 import bbox from '@turf/bbox';
 import { getType } from '@turf/invariant';
-import { featureCollection, point } from '@turf/helpers';
+import { feature, featureCollection, point } from '@turf/helpers';
 import { usePalette } from '../Palette/Palette';
 import { from, op } from 'arquero';
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -19,20 +19,34 @@ export const map_locale = {
 };
 /** Construire un geojson a partir d'un tableau de données*/
 const build_geojson = (params) => {
-    const { data, xKey, yKey } = params;
-    const features_collection = featureCollection(data.map((e) => {
-        const [x, y] = [parseNumber(e[xKey]), parseNumber(e[yKey])];
-        return point([x, y], { ...e });
-    }));
+    const { data, xKey, yKey, geomKey } = params;
+    let features_collection;
+    if (xKey && yKey) { // Construction à partir des champs x et Y
+        features_collection = featureCollection(data.map((e) => {
+            const [x, y] = [parseNumber(e[xKey]), parseNumber(e[yKey])];
+            return point([x, y], { ...e });
+        }));
+    }
+    else if (geomKey) { // Construction à partir de la GeomGeoJSON
+        features_collection = featureCollection(data.map((e) => {
+            return feature(e[geomKey], { ...e });
+        }));
+    }
+    else {
+        features_collection = undefined;
+    }
+    console.log(geomKey, features_collection);
     return features_collection;
 };
-export const Map = ({ dataset, color, type, paint, categoryKey, popup = false, title, xKey, yKey }) => {
+export const Map = ({ dataset, color, type, paint, categoryKey, popup = false, popupFormatter: popupFormatterUser, title, xKey, yKey }) => {
     const mapRef = useRef(null);
     const [clickedFeature, setClickedFeature] = useState(undefined);
     useBlockConfig({ title: title });
     const onClickMap = (evt) => {
         setClickedFeature({ ...evt.features[0], ...{ lngLat: evt.lngLat } });
     };
+    const current_row = clickedFeature?.properties;
+    const popupFormatter = popupFormatterUser || ((row) => categoryKey ? row?.[categoryKey] : undefined);
     const onMouseMoveMap = (evt) => {
         if (!mapRef.current) {
             return;
@@ -45,7 +59,7 @@ export const Map = ({ dataset, color, type, paint, categoryKey, popup = false, t
         }
     };
     return (_jsxs(Maplibre, { cooperativeGestures: true, locale: map_locale, ref: mapRef, interactiveLayerIds: [dataset], onClick: onClickMap, onMouseMove: onMouseMoveMap, style: { width: '100%', height: '500px' }, children: [_jsx(BaseLayer, { layer: "osm" }), _jsx(MapLayer, { dataset: dataset, color: color, type: type, paint: paint, categoryKey: categoryKey, xKey: xKey, yKey: yKey }), clickedFeature?.properties && categoryKey && popup &&
-                _jsxs(Popup, { longitude: clickedFeature.lngLat.lng, latitude: clickedFeature.lngLat.lat, onClose: () => { setClickedFeature(null); }, children: [_jsxs("div", { children: [" ", clickedFeature.properties[categoryKey], " "] }), " "] })] }));
+                _jsx(Popup, { longitude: clickedFeature.lngLat.lng, latitude: clickedFeature.lngLat.lat, onClose: () => { setClickedFeature(null); }, children: _jsx("div", { children: popupFormatter(current_row) || clickedFeature?.properties[categoryKey] }) })] }));
 };
 /**
  * Composant à utiliser comme enfant d'une <Map>
@@ -54,14 +68,17 @@ export const Map = ({ dataset, color, type, paint, categoryKey, popup = false, t
  * @param { MapLayerProps } props
  * @returns { ReactElement }
  */
-export const MapLayer = ({ dataset, categoryKey, color = 'red', type = 'circle', paint, xKey, yKey }) => {
+export const MapLayer = ({ dataset, categoryKey, color = 'red', type = 'circle', paint, xKey, yKey, geomKey: geomKey_input }) => {
     const { current: map } = useMap();
     const data = useDataset(dataset);
     // src (lib proj4 pour convertir)
+    const keys = data?.data?.[0] ? Object.keys(data?.data?.[0]) : undefined;
+    const geomKey = [geomKey_input, "geom", "geometry"].find(c => c && keys?.includes(c));
+    console.log(data?.id, data?.data, geomKey);
     // Si x et y sont definie, on construit le geojson
     const geojson = xKey && yKey && data?.data ?
         build_geojson({ data: data.data, xKey: xKey, yKey: yKey })
-        : data?.geojson; // Sinon on utilise le geojson (fournisseur wfs)
+        : data?.data && build_geojson({ data: data?.data, geomKey: geomKey });
     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]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",
@@ -45,6 +45,7 @@
     "test": "jest --watchAll"
   },
   "dependencies": {
+    "@ant-design/react-slick": "^1.1.2",
     "@iconify/react": "^6.0.1",
     "@turf/bbox": "^7.2.0",
     "@turf/helpers": "^7.2.0",
@@ -59,6 +60,7 @@
     "react-error-boundary": "^6.0.0",
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
+    "slick-carousel": "^1.8.1",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
   },
   "devDependencies": {