@geo2france/api-dashboard 1.5.0

package/dist/components/Dataset/Producer.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+export type ProducerType = {
+    nom: string;
+    url?: string;
+};
+interface IProducerProps {
+    url?: string;
+    children: string;
+}
+/**
+ * Les props sont récupérées par le parent (Dataset) et enregistrés avec le dataset
+ */
+export declare const Producer: React.FC<IProducerProps>;
+interface IProducersFooterProps {
+    component: ReactElement;
+}
+export declare const ProducersFooter: React.FC<IProducersFooterProps>;
+export {};

package/dist/components/Dataset/Producer.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDatasets } from "./hooks";
+import { Typography } from "antd";
+const { Link } = Typography;
+/**
+ * Les props sont récupérées par le parent (Dataset) et enregistrés avec le dataset
+ */
+export const Producer = () => {
+    return _jsx(_Fragment, {});
+};
+/*
+Composant pour afficher les producteurs sous le graphique
+*/
+export const ProducersFooter = ({ component }) => {
+    // On vérfie si le composant à une props dataset (définie ou non)
+    // Afin de ne PAS afficher de producteur sur les élements qui ne font appel à aucun dataset (par exemple les bloc statiques)
+    if ('props' in component && 'dataset' in component.props) {
+        const dataset_id_arr = Array.isArray(component.props.dataset) ? component.props.dataset : [component.props.dataset];
+        const datasets = useDatasets(dataset_id_arr);
+        const producers = datasets?.flatMap((dataset) => dataset?.producers?.map((p) => ({ nom: p.nom, url: p.url }))).filter(p => p !== undefined);
+        const uniqueProducers = Array.from(new Map(producers?.map(p => [p.nom, p]) // clé unique = nom
+        ).values());
+        uniqueProducers.sort((a, b) => a.nom.localeCompare(b.nom));
+        return datasets ? (_jsxs(_Fragment, { children: ["Source des donn\u00E9es :", " ", uniqueProducers?.map((p, idx, arr) => (_jsxs("span", { children: [_jsx(Link, { href: p.url, children: p.nom }), idx < arr.length - 1 ? ', ' : ''] }, idx)))] })) : null;
+    }
+    return _jsx(_Fragment, {});
+};

package/dist/components/Dataset/Provider.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { DataProvider } from "../../data_providers/types";
+export declare const DataProviderContext: import("react").Context<DataProvider | undefined>;
+export type ProviderType = "wfs" | "datafair" | "file";
+interface IProviderProps {
+    children?: ReactNode;
+    type: ProviderType;
+    url: string;
+}
+export declare const getProviderFromType: (s: ProviderType) => ((apiUrl: string, httpClient?: import("axios").AxiosInstance) => {
+    getList: ({ resource, pagination, filters, sorters, meta }: import("../../data_providers/datafair").GetListParams) => Promise<{
+        data: any;
+        total: any;
+    }>;
+    getApiUrl: () => string;
+}) | ((apiUrl: string, httpClient?: import("axios").AxiosInstance) => DataProvider) | ((apiUrl: string, options?: {
+    httpClient?: import("axios").AxiosInstance;
+    processData?: (data: any) => any[];
+}) => DataProvider);
+export declare const Provider: React.FC<IProviderProps>;
+export {};

package/dist/components/Dataset/Provider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+import { DatafairProvider, FileProvider, WfsProvider } from "../..";
+export const DataProviderContext = createContext(undefined);
+export const getProviderFromType = (s) => {
+    if (s == "datafair") {
+        return DatafairProvider;
+    }
+    else if (s == "wfs") {
+        return WfsProvider;
+    }
+    else if (s == "file") {
+        return FileProvider;
+    }
+    else {
+        throw "Unssuported provider";
+    }
+};
+export const Provider = ({ children, type: provider_type, url }) => {
+    const provider_fn = getProviderFromType(provider_type);
+    return (_jsx(DataProviderContext.Provider, { value: provider_fn(url), children: children }));
+};

package/dist/components/Dataset/Transform.d.ts

@@ -0,0 +1,6 @@
+import { SimpleRecord } from "../..";
+interface ITransformProps<T = SimpleRecord[]> {
+    children: string | ((data: T) => T);
+}
+export declare const DSL_Transform: React.FC<ITransformProps>;
+export {};

package/dist/components/Dataset/Transform.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/*
+* Les props sont utilisées dans le Dataset parent pour appliquer une (ou plusieurs fonction de transformation)
+*/
+export const DSL_Transform = () => {
+    return _jsx(_Fragment, {});
+};

package/dist/components/Dataset/hooks.d.ts

@@ -0,0 +1,24 @@
+export declare const useDataset: (dataset_id?: string) => {
+    id: string;
+    resource: string;
+    data?: import("../..").SimpleRecord[];
+    isFetching: boolean;
+    isError: boolean;
+    producers?: any[];
+} | undefined;
+export declare const useDatasets: (dataset_ids?: string[]) => {
+    id: string;
+    resource: string;
+    data?: import("../..").SimpleRecord[];
+    isFetching: boolean;
+    isError: boolean;
+    producers?: any[];
+}[] | undefined;
+export declare const useAllDatasets: () => {
+    id: string;
+    resource: string;
+    data?: import("../..").SimpleRecord[];
+    isFetching: boolean;
+    isError: boolean;
+    producers?: any[];
+}[] | undefined;

package/dist/components/Dataset/hooks.js

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { DatasetContext } from "../DashboardPage/Page";
+export const useDataset = (dataset_id) => {
+    const datasetContext = useContext(DatasetContext);
+    if (dataset_id) {
+        return datasetContext[dataset_id];
+    }
+    // Retourne le premier dataset si pas d'id
+    const firstKey = Object.keys(datasetContext)[0];
+    return firstKey ? datasetContext[firstKey] : undefined;
+};
+export const useDatasets = (dataset_ids) => {
+    const datasetContext = useContext(DatasetContext);
+    return (dataset_ids?.map((dataset_id) => datasetContext[dataset_id]));
+};
+export const useAllDatasets = () => {
+    const datasetContext = useContext(DatasetContext);
+    return useDatasets(Object.keys(datasetContext));
+};

package/dist/components/Debug/Debug.d.ts

@@ -0,0 +1 @@
+export declare const Debug: React.FC;

package/dist/components/Debug/Debug.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, Collapse, Divider, FloatButton, Modal, theme, Typography } from "antd";
+import { DataPreview, PalettePreview } from "../../dsl";
+import { useAllDatasets } from "../Dataset/hooks";
+import { AiOutlineBug } from "react-icons/ai";
+import { useState } from "react";
+import { DatasetBadgeStatus } from "../Dataset/DataPreview";
+import { ControlPreview } from "../Control/Control";
+const { useToken } = theme;
+const { Text, Title } = Typography;
+/*
+* Ajoute un float-button permettant d'afficher un panneau de debug listant les jeux de données, les contrôles, etc..
+*/
+export const Debug = () => {
+    const { token } = useToken();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const datasets = useAllDatasets();
+    const items = datasets?.map((dataset) => ({
+        key: dataset.id,
+        label: _jsxs("span", { children: [_jsx(DatasetBadgeStatus, { isError: dataset?.isError, isFetching: dataset?.isFetching }), " ", dataset.id, " ", " ", _jsxs(Text, { type: "secondary", children: [" ", dataset?.resource, " "] }), " ", _jsx(Badge, { color: token.colorInfo, overflowCount: 9999, count: dataset?.data?.length })] }),
+        children: _jsx(DataPreview, { dataset: dataset.id, pageSize: 3 })
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: _jsx(AiOutlineBug, {}), type: "primary", onClick: () => setIsModalOpen(true), style: { top: 5 }, className: "debugFloatButton" }), ";", _jsxs(Modal, { title: "Information concepteur", width: "90%", centered: true, styles: { content: { 'width': "100%", padding: 36 } }, closable: { 'aria-label': 'Custom Close Button' }, open: isModalOpen, onCancel: () => setIsModalOpen(false), footer: null, children: [_jsx(Title, { level: 5, children: "Jeux de donn\u00E9es " }), _jsx(Collapse, { accordion: true, items: items }), _jsx(Divider, {}), _jsx(Title, { level: 5, children: "Contr\u00F4les utilisateur " }), _jsx(ControlPreview, {}), _jsx(Divider, {}), _jsx(Title, { level: 5, children: "Palette " }), _jsx(PalettePreview, {})] })] }));
+};

package/dist/components/FlipCard/FlipCard.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReactElement } from "react";
+interface FlipCardProps {
+    title?: string | ReactElement;
+    children: ReactElement | ReactElement[];
+    information?: ReactElement | string;
+}
+/**
+ * Une card qui peux se retourner et afficher des informations a son verso
+ */
+declare const FlipCard: React.FC<FlipCardProps>;
+export default FlipCard;

package/dist/components/FlipCard/FlipCard.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button, Card, Typography } from "antd";
+import { useState } from "react";
+import { BsInfoCircle, BsInfoCircleFill } from "react-icons/bs";
+import { cardStyles } from "../../utils/cardStyles";
+const { Text } = Typography;
+/**
+ * Une card qui peux se retourner et afficher des informations a son verso
+ */
+const FlipCard = ({ title, information, children }) => {
+    const [flipped, setFlipped] = useState(false);
+    const toggleFlipped = () => setFlipped(!flipped);
+    const cardARef = useRef(null);
+    const height = cardARef.current ? cardARef.current.clientHeight : undefined; // Forcer la hauteur à celle de la card "Recto"
+    const FlipCardStyle = {
+        transition: "transform 0.8s",
+        backfaceVisibility: "hidden",
+        width: "100%",
+    };
+    const InfoButton = ({ filled = false }) => {
+        return (_jsx(Button, { type: "text", shape: "circle", "aria-label": "info", onClick: toggleFlipped, children: filled ? _jsx(BsInfoCircleFill, {}) : _jsx(BsInfoCircle, {}) }));
+    };
+    return (_jsxs("div", { style: { position: "relative", height: "100%" }, children: [_jsx(Card, { title: title, extra: _jsxs(_Fragment, { children: [information && _jsx(InfoButton, { filled: flipped }), " "] }), style: {
+                    transform: flipped ? "rotateY(180deg)" : "",
+                    position: "static",
+                    height: "100%",
+                    ...FlipCardStyle,
+                }, styles: cardStyles, ref: cardARef, children: children }), _jsx(Card, { title: title, extra: _jsx(InfoButton, { filled: flipped }), style: {
+                    transform: !flipped ? "rotateY(180deg)" : "",
+                    height: height,
+                    top: 0,
+                    position: "absolute",
+                    overflow: "auto",
+                    ...FlipCardStyle,
+                }, styles: cardStyles, children: typeof information === "string" ? (_jsx("div", { style: { margin: 10 }, children: _jsx(Text, { italic: true, type: "secondary", children: information }) })) : (_jsx(_Fragment, { children: information })) })] }));
+};
+export default FlipCard;

package/dist/components/FlipCard/FlipCard.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/FlipCard/FlipCard.test.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import FlipCard from "./FlipCard";
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+const a_value = "Hello !";
+const b_value = "Ceci est une description";
+describe("FlipCard Component", () => {
+    test("initial state", async () => {
+        // Génération DOM virtuel et sélection des noeuds
+        render(_jsx(FlipCard, { information: b_value, children: _jsx("span", { children: a_value }) }));
+        const cardA = screen.getByText(a_value).closest('.ant-card'); // Recto
+        const cardB = screen.getByText(b_value).closest('.ant-card'); // Verso
+        // Assertions
+        expect(screen.queryByText(a_value)).toBeInTheDocument();
+        expect(screen.queryByText(b_value)).toBeInTheDocument();
+        expect(cardA).not.toHaveStyle('transform: rotateY(180deg)');
+        expect(cardB).toHaveStyle('transform: rotateY(180deg)');
+    });
+    test("flip the card", async () => {
+        // initialisation user
+        const user = userEvent.setup();
+        // Génération DOM virtuel et sélection des noeuds
+        render(_jsx(FlipCard, { information: b_value, children: _jsx("span", { children: a_value }) }));
+        const cardA = screen.getByText(a_value).closest('.ant-card'); // Recto
+        const cardB = screen.getByText(b_value).closest('.ant-card'); // Verso
+        const infoButton = screen.getAllByRole('button', { name: "info" }); // Bouton info (2 boutons identiques, un sur chaque face). A améliorer
+        // Assertions
+        await user.click(infoButton[0]);
+        expect(cardA).toHaveStyle('transform: rotateY(180deg)');
+        expect(cardB).not.toHaveStyle('transform: rotateY(180deg)');
+        await user.click(infoButton[1]);
+        expect(cardA).not.toHaveStyle('transform: rotateY(180deg)');
+        expect(cardB).toHaveStyle('transform: rotateY(180deg)');
+    });
+});

package/dist/components/KeyFigure/KeyFigure.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactElement } from "react";
+export interface KeyFigureProps {
+    name?: string;
+    description?: string;
+    value?: number | string;
+    unit?: string;
+    sub_value?: number | string;
+    icon?: ReactElement;
+    digits?: number;
+}
+/**
+ * Composant permettant d'afficher un chiffre clé.
+ * Si une description est fournie, le composant "flip" pour montrer la description
+ * L'utilisateur peut aussi fournir une valeur de référence, généralement la valeur régionale ou nationale
+ */
+declare const KeyFigure: React.FC<KeyFigureProps>;
+export default KeyFigure;

package/dist/components/KeyFigure/KeyFigure.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "antd";
+import FlipCard from "../FlipCard/FlipCard";
+const { Text } = Typography;
+/**
+ * Composant permettant d'afficher un chiffre clé.
+ * Si une description est fournie, le composant "flip" pour montrer la description
+ * L'utilisateur peut aussi fournir une valeur de référence, généralement la valeur régionale ou nationale
+ */
+const KeyFigure = ({ name, description, value, unit, sub_value, icon, digits }) => {
+    return (_jsx(FlipCard, { title: name, information: description, children: _jsxs("div", { style: { textAlign: "center", marginTop: 10 }, children: [_jsxs("span", { style: { fontSize: 24 }, children: [icon, " ", value ? value.toLocaleString(undefined, { maximumFractionDigits: digits }) : '-', " ", unit] }), " ", _jsxs("span", { style: { fontSize: 18 }, children: [_jsx("br", {}), _jsxs(Text, { type: "secondary", children: [sub_value, " "] })] })] }) }));
+};
+export default KeyFigure;

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

@@ -0,0 +1,18 @@
+import { ThemeConfig } from "antd";
+import { Partner, RouteConfig } from "../../types";
+interface AppContextProps {
+    title?: string;
+    subtitle?: string;
+    logo?: string;
+}
+export declare const AppContext: import("react").Context<AppContextProps>;
+interface DashboardApprProps {
+    title?: string;
+    subtitle?: string;
+    route_config: RouteConfig[];
+    theme?: ThemeConfig;
+    logo: string;
+    brands?: Partner[];
+}
+declare const DashboardApp: React.FC<DashboardApprProps>;
+export default DashboardApp;

package/dist/components/Layout/DashboardApp.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConfigProvider, Layout } from "antd";
+import { HashRouter, Outlet, Route, Routes } from "react-router-dom";
+import { generateRoutes } from "../../utils/route_utils";
+import DashboardSider from "./Sider";
+import { Content } from "antd/es/layout/layout";
+import { ErrorComponent } from "./Error";
+import { DasbhoardFooter } from "./Footer";
+import { createContext, useState } from "react";
+import { ControlContext } from "../DashboardPage/Page";
+import { HelmetProvider } from "react-helmet-async";
+//import '../../index.css' //TODO a intégrer en jsx
+const queryClient = new QueryClient();
+const default_theme = {
+    token: {
+        colorPrimary: "#95c11f",
+        linkHoverDecoration: 'underline',
+        colorLink: '#0f4496',
+        colorLinkHover: '#0D2449',
+        borderRadius: 4,
+        fontFamily: 'Inter'
+    },
+    components: {
+        Timeline: {
+            itemPaddingBottom: 40
+        },
+        Form: {
+            labelColor: 'rgba(0,0,0,0.7)'
+        }
+    }
+};
+export const AppContext = createContext({});
+const DashboardApp = ({ route_config, theme, logo, brands, title, subtitle }) => {
+    const context_values = { title, subtitle, logo };
+    /* CONTROLS */
+    const [controls, setControles] = useState({});
+    const pushControl = (c) => {
+        setControles(prev => ({
+            ...prev,
+            ...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: route_config }), _jsx(Content, { style: { width: "85%" }, children: _jsx(Outlet, {}) })] }), _jsx(DasbhoardFooter, { brands: brands })] }), children: [generateRoutes(route_config), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }));
+};
+export default DashboardApp;

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ErrorComponent: React.FC;

package/dist/components/Layout/Error.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Result, Typography, Space } from "antd";
+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" }) }) }) }));
+};

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

@@ -0,0 +1,6 @@
+import { Partner } from "../../types";
+interface DbFooterProps {
+    brands?: Partner[];
+}
+export declare const DasbhoardFooter: React.FC<DbFooterProps>;
+export {};

package/dist/components/Layout/Footer.js

@@ -0,0 +1,47 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Layout, Typography } from "antd";
+import { useContext, useState } from "react";
+import { UpOutlined, DownOutlined } from "@ant-design/icons";
+import { AppContext } from "./DashboardApp";
+const { Text, Link } = Typography;
+export const DasbhoardFooter = ({ brands }) => {
+    const [isCollapsed, setIsCollapsed] = useState(window.innerWidth < 768 ? true : false);
+    const toggleCollapse = () => {
+        setIsCollapsed(!isCollapsed);
+    };
+    const app_context = useContext(AppContext);
+    const style_img = {
+        height: "60px",
+        marginRight: "20px",
+    };
+    return (_jsxs(Layout.Footer, { style: {
+            textAlign: "center",
+            color: "#fff",
+            backgroundColor: "#fff",
+            bottom: "0",
+            position: "sticky",
+            right: "0",
+            width: "100%",
+            height: isCollapsed ? "0px" : "150px",
+            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: {
+                    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" } })) })] }));
+};

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

@@ -0,0 +1,9 @@
+import React, { CSSProperties } from "react";
+import { RouteConfig } from "../../types";
+interface DbSiderProps {
+    logo?: string;
+    route_config?: RouteConfig[];
+    style?: CSSProperties;
+}
+declare const DashboardSider: React.FC<DbSiderProps>;
+export default DashboardSider;

package/dist/components/Layout/Sider.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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";
+import { MdOutlineKeyboardDoubleArrowLeft, MdOutlineKeyboardDoubleArrowRight } from "react-icons/md";
+import { generateMenuItems } from "../../utils/route_utils";
+import { AppContext } from "./DashboardApp";
+const style_img = {
+    height: 52,
+    maxWidth: "100%",
+    objectFit: "contain"
+};
+const DashboardSider = ({ style, logo, route_config }) => {
+    const { logo: appLogo, title } = useContext(AppContext);
+    const { token } = theme.useToken();
+    const { pathname: selectedKey } = useLocation();
+    const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+    const [collapsed, setCollapsed] = useState(isMobile ? true : false);
+    window.addEventListener("resize", () => {
+        setIsMobile(window.innerWidth < 768);
+    });
+    const toggleCollapsed = () => {
+        setCollapsed(!collapsed);
+    };
+    const siderStyle = {
+        height: "100vh",
+        backgroundColor: token.colorBgContainer,
+        zIndex: 2,
+        ...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%" } }) })] }) }) }));
+};
+export default DashboardSider;

package/dist/components/LoadingContainer/LoadingContainer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface LoadingContainerProps {
+    isFetching: boolean;
+    noData?: boolean;
+    children: React.ReactNode;
+    blurRadius?: string;
+    delay?: number;
+}
+/**
+ * Composant qui ajoute un effet de flou pendant le chargement (si temps de chargement > delay) et affiche un spinner au centre du contenu.
+ * @param isLoading Indique si le chargement est en cours ou non
+ * @param children Les éléments enfants à afficher dans le composant
+ * @param blurRadius Rayon du floutage (par défaut : 10px)
+ * @param delay Délai en millisecondes avant d'appliquer le flou lors du chargement (par défaut : 500ms)
+ */
+declare const LoadingContainer: React.FC<LoadingContainerProps>;
+export default LoadingContainer;

package/dist/components/LoadingContainer/LoadingContainer.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Empty, Spin, theme } from 'antd';
+import { PiEmptyFill } from "react-icons/pi";
+/**
+ * Composant qui ajoute un effet de flou pendant le chargement (si temps de chargement > delay) et affiche un spinner au centre du contenu.
+ * @param isLoading Indique si le chargement est en cours ou non
+ * @param children Les éléments enfants à afficher dans le composant
+ * @param blurRadius Rayon du floutage (par défaut : 10px)
+ * @param delay Délai en millisecondes avant d'appliquer le flou lors du chargement (par défaut : 500ms)
+ */
+const LoadingContainer = ({ isFetching, children, blurRadius = '10px', delay = 500, noData }) => {
+    const { token } = theme.useToken();
+    const [blur, setBlur] = useState(false);
+    const timeoutRef = useRef(null); //Le timeout permet que le blur ne s'affiche pas si le chargement est plus court que delay (éviter effet clignotement)
+    useEffect(() => {
+        if (isFetching) {
+            timeoutRef.current = window.setTimeout(() => {
+                setBlur(true);
+            }, delay);
+        }
+        else {
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+            setBlur(false);
+        }
+        return () => { timeoutRef.current && clearTimeout(timeoutRef.current); };
+    }, [isFetching]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                    filter: blur ? `blur(${blurRadius})` : undefined,
+                    display: noData ? "none" : undefined
+                }, children: children }), noData && _jsx(Empty, { style: { position: "relative", top: "50%", right: "50%", marginBottom: 50, transform: "translate(50%, -50%)" }, description: "Pas de donn\u00E9es disponibles", image: _jsx(PiEmptyFill, { size: 80, color: token.colorPrimary }) }), blur ? _jsx(Spin, { size: "large", style: { position: 'absolute', left: '50%', top: '50%' } }) : _jsx(_Fragment, {})] }));
+};
+export default LoadingContainer;

package/dist/components/MapLegend/MapLegend.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+export interface LegendItem {
+    color?: string;
+    label: string;
+    style?: CSSProperties;
+}
+interface MapLegendProps {
+    items: LegendItem[];
+    style?: CSSProperties;
+}
+declare const MapLegend: React.FC<MapLegendProps>;
+export default MapLegend;

package/dist/components/MapLegend/MapLegend.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const default_style = {
+    backgroundColor: 'rgba(256,256,256,0.8)',
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid grey',
+    margin: 8
+};
+const MapLegend = ({ items, style }) => {
+    const divStyle = { ...default_style, ...style };
+    return (_jsx("div", { style: divStyle, children: items.map((item, index) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', marginBottom: '4px' }, children: [_jsx("div", { style: {
+                        width: '16px',
+                        height: '16px',
+                        backgroundColor: item.color,
+                        borderRadius: '2px',
+                        marginRight: '8px'
+                    } }), _jsx("span", { children: item.label })] }, index))) }));
+};
+export default MapLegend;

package/dist/components/NextPrevSelect/NextPrevSelect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CSSProperties } from "react";
+type NextPrevSelectProps = {
+    options?: {
+        label: string | number;
+        value: string | number;
+    }[] | string[] | number[];
+    style?: CSSProperties;
+    defaultValue?: string | number;
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    reverse?: boolean;
+    name?: string;
+    arrows?: boolean;
+};
+declare const NextPrevSelect: React.FC<NextPrevSelectProps>;
+export default NextPrevSelect;