@geo2france/api-dashboard 1.5.0

package/dist/components/DashboardChart/DashboardChart.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import alasql from "alasql";
+import ReactECharts from 'echarts-for-react';
+import { useRef } from "react";
+import { useChartData, useDashboardElement } from "../DashboardElement/hooks";
+import deepMerge from "../../utils/deepmerge";
+// Les données doivent être de la forme {axeA :   axeB : } ?
+const DashboardChart = ({ data, chart_type = 'line', reverse_axies = false, echarts_option = {}, sql }) => {
+    const chartRef = useRef();
+    useDashboardElement({ chartRef });
+    const data_xy = sql ? alasql(sql, [data]) : data;
+    useChartData({ data: data_xy });
+    const keys = Object.keys(data_xy[0]);
+    const axis0 = {
+        type: typeof data_xy[0][keys[0]] === 'number' ? 'value' : 'category',
+        name: keys[0]
+    };
+    const axis1 = {
+        type: typeof data_xy[0][keys[1]] === 'number' ? 'value' : 'category',
+        name: keys[1]
+    };
+    const options = {
+        series: [
+            {
+                type: chart_type,
+                data: data_xy.map((e) => reverse_axies ?
+                    [e[keys[1]], e[keys[0]]]
+                    : [e[keys[0]], e[keys[1]]])
+            }
+        ],
+        //@ts-ignore
+        xAxis: {
+            ...reverse_axies ? axis1 : axis0
+        },
+        //@ts-ignore
+        yAxis: {
+            ...reverse_axies ? axis0 : axis1
+        }
+    };
+    return (_jsx(ReactECharts, { option: deepMerge(options, echarts_option), ref: chartRef }));
+};
+export default DashboardChart;

package/dist/components/DashboardElement/DashboardElement.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactElement, ReactNode } from "react";
+import { SourceMakerProps, SourceProps } from "../Attributions/Attributions";
+import { License } from "../../types";
+export declare const chartContext: React.Context<any>;
+export interface IDashboardElementProps {
+    title: string;
+    children: ReactNode;
+    isFetching?: boolean;
+    header?: boolean;
+    attributions?: SourceProps[] | SourceMakerProps;
+    toolbox?: boolean;
+    fullscreen?: boolean;
+    exportPNG?: boolean;
+    exportData?: boolean;
+    description?: ReactElement | string;
+    licenses?: License[];
+    section?: string;
+    virtual?: boolean;
+}
+declare const DashboardElement: React.FC<IDashboardElementProps>;
+export default DashboardElement;

package/dist/components/DashboardElement/DashboardElement.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DownloadOutlined, FileImageOutlined, FullscreenOutlined, MoreOutlined, } from "@ant-design/icons";
+import { HiQuestionMarkCircle } from "react-icons/hi2";
+import { Card, theme, Modal, Dropdown, Flex, Button, Popover, Typography } from "antd";
+import React, { createContext, useEffect, useState } from "react";
+import Attribution from "../Attributions/Attributions";
+import { useChartExport } from "../../utils/usechartexports";
+import LoadingContainer from "../LoadingContainer/LoadingContainer";
+import { cardStyles } from "../../utils/cardStyles";
+const { useToken } = theme;
+const { Text } = Typography;
+export const chartContext = createContext({
+    setchartRef: () => { },
+    setData: () => { },
+    setNodata: () => { }
+});
+const DashboardElement = ({ children, title, header = true, attributions, isFetching = false, toolbox = true, fullscreen = true, exportPNG = true, exportData = true, description, licenses = ['CC', 'BY'], virtual = false, }) => {
+    const { token } = useToken();
+    const [modalIsOpen, setModalIsOpen] = useState(false);
+    const [chartRef, setchartRef] = useState(undefined);
+    const [data, setData] = useState(undefined);
+    const [nodata, setNodata] = useState(false);
+    const [requestDlImage, setRequestDlImage] = useState(false);
+    const [requestDlData, setrequestDlData] = useState(null);
+    const { img64, exportImage } = useChartExport({ chartRef: chartRef });
+    const downloadImage = () => {
+        exportImage();
+        setRequestDlImage(true);
+    };
+    useEffect(() => {
+        if (img64 && requestDlImage) {
+            const link = document.createElement("a");
+            link.href = img64;
+            link.download = `${title}.png`;
+            link.style.display = "none";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            setRequestDlImage(false);
+        }
+    }, [img64]);
+    const downloadData = (filetype) => {
+        setrequestDlData(filetype);
+    };
+    useEffect(() => {
+        if (data && requestDlData) {
+            const handleDl = async () => {
+                const XLSX = await import("xlsx");
+                const worksheet = XLSX.utils.json_to_sheet(data);
+                const workbook = XLSX.utils.book_new();
+                XLSX.utils.book_append_sheet(workbook, worksheet, "data");
+                XLSX.writeFile(workbook, `${title}.${requestDlData}`, {
+                    compression: true,
+                });
+                setrequestDlData(null);
+            };
+            handleDl();
+        }
+    }, [requestDlData]);
+    const fullscreenChildren = React.Children.map(children, (child, index) => {
+        if (index === 0 && React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                ...child.props?.style,
+                style: { height: "80vh" },
+            });
+        }
+        return child;
+    });
+    const dd_items = [
+        {
+            key: "fullscreen",
+            label: (_jsxs("a", { onClick: () => setModalIsOpen(true), children: [_jsx(FullscreenOutlined, {}), " Plein \u00E9cran"] })),
+            disabled: !fullscreen,
+        },
+        {
+            key: "export_img",
+            label: (_jsxs("a", { onClick: downloadImage, children: [_jsx(FileImageOutlined, {}), " PNG"] })),
+            disabled: !chartRef || !exportPNG,
+        },
+        {
+            key: "export_data_csv",
+            label: (_jsxs("a", { onClick: () => downloadData("csv"), children: [_jsx(DownloadOutlined, {}), " CSV"] })),
+            disabled: !data || !exportData,
+        },
+        {
+            key: "export_data_xls",
+            label: (_jsxs("a", { onClick: () => downloadData("xlsx"), children: [_jsx(DownloadOutlined, {}), " XLSX"] })),
+            disabled: !data || !exportData,
+        },
+        {
+            key: "export_data_ods",
+            label: (_jsxs("a", { onClick: () => downloadData("ods"), children: [_jsx(DownloadOutlined, {}), " ODS"] })),
+            disabled: !data || !exportData,
+        },
+    ];
+    const dropdown_toolbox = (_jsx(Dropdown, { menu: { items: dd_items }, children: _jsx("a", { style: { color: token.colorTextBase }, children: _jsx(MoreOutlined, { style: { marginLeft: 10 } }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { className: "dashboard-element", styles: cardStyles, style: {
+                    backgroundColor: virtual ? 'transparent' : undefined,
+                    boxShadow: virtual ? 'none' : undefined,
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                }, variant: virtual ? 'borderless' : 'outlined', title: header && !virtual &&
+                    _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx("span", { style: { overflow: "hidden", paddingRight: 15 }, children: title }), _jsx("div", { style: { marginRight: 5, fontSize: 16 }, children: toolbox && dropdown_toolbox })] }), children: _jsxs(Flex, { vertical: true, justify: "space-between", style: { height: "100%" }, children: [_jsx(chartContext.Provider, { value: { chartRef, setchartRef, setData, setNodata }, children: _jsx(LoadingContainer, { isFetching: isFetching, noData: nodata, children: children }) }), _jsxs(Flex, { justify: "flex-end", align: "flex-end", style: { marginRight: 5 }, children: [attributions && (_jsx("div", { style: { marginTop: "auto" }, children: _jsx(Attribution, { licenses: licenses, data: attributions }) })), description && (_jsx(Popover, { content: _jsx("div", { style: { maxWidth: 800 }, children: typeof description === "string" ?
+                                            _jsxs(Text, { italic: true, type: "secondary", children: [" ", description, " "] })
+                                            : _jsx(_Fragment, { children: description }) }), children: _jsx(Button, { type: "link", icon: _jsx(HiQuestionMarkCircle, {}), style: { fontSize: "150%" } }) }))] })] }) }), toolbox && fullscreen && (_jsxs(Modal, { forceRender: true, title: title, open: modalIsOpen, onCancel: () => setModalIsOpen(false), onOk: () => setModalIsOpen(false), footer: null, wrapClassName: "modal-fullscreen", children: [fullscreenChildren, attributions && _jsx(Attribution, { data: attributions })] }))] }));
+};
+export default DashboardElement;

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

@@ -0,0 +1,28 @@
+import { MutableRefObject } from "react";
+/**
+ * Hook permettant de faire remonter la référence du graphique dans le composant DashboardElement
+ * Ceci est nécessaire pour les fonctionnalités d'export graphique
+ * @example
+ * useDashboardElement({chartRef:chartRef})
+ */
+export interface useDashboardElementProps {
+    chartRef?: MutableRefObject<any>;
+}
+export declare const useDashboardElement: ({ chartRef }: useDashboardElementProps) => void;
+/**
+ * Hook permettant de remonter les données au Dashboard Element
+ * @param {any} props.data - Les données à proposer au téléchargement.
+ * @param {Array<any>} [props.dependencies=[]] - Les dépendances suspeptibles de modifier les données
+ */
+export interface useChartDataProps {
+    data?: any[];
+    dependencies?: any[];
+}
+export declare const useChartData: ({ data, dependencies }: useChartDataProps) => void;
+/**
+ * Hook permettant d'indiquer au DashboardElement que aucune données n'est disponible
+ * Il est aussi possible d'avoir ce comportement en passant un tableau vide dans useChartData
+ * Deprécié (utilisez useChartData avec un tableau vide)
+ * @param {boolean} noData - True si aucune donnée n'est disponible.
+ */
+export declare const useNoData: (noData: boolean) => void;

package/dist/components/DashboardElement/hooks.js

@@ -0,0 +1,29 @@
+import { chartContext } from "./DashboardElement";
+import { useContext, useEffect } from "react";
+export const useDashboardElement = ({ chartRef }) => {
+    const { setchartRef } = useContext(chartContext); //Gérer les cas où ce contexte n'existe pas
+    useEffect(() => {
+        if (setchartRef) {
+            setchartRef(chartRef);
+        }
+    }, [chartRef]);
+};
+export const useChartData = ({ data, dependencies = [] }) => {
+    const { setData, setNodata } = useContext(chartContext);
+    useEffect(() => {
+        setData(data);
+        data === undefined || data.length < 1 ? setNodata(true) : setNodata(false);
+    }, dependencies);
+};
+/**
+ * Hook permettant d'indiquer au DashboardElement que aucune données n'est disponible
+ * Il est aussi possible d'avoir ce comportement en passant un tableau vide dans useChartData
+ * Deprécié (utilisez useChartData avec un tableau vide)
+ * @param {boolean} noData - True si aucune donnée n'est disponible.
+ */
+export const useNoData = (noData) => {
+    const { setNodata } = useContext(chartContext);
+    useEffect(() => {
+        setNodata(noData);
+    }, [noData]); // !
+};

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

@@ -0,0 +1,15 @@
+import { SimpleRecord } from "../../types";
+export interface ChartBlockConfig {
+    title?: string;
+    dataExport?: SimpleRecord[];
+}
+type ChartBlockContextType = {
+    config: ChartBlockConfig;
+    setConfig: (config: ChartBlockConfig) => void;
+};
+export declare const ChartBlockContext: import("react").Context<ChartBlockContextType | undefined>;
+interface IChartBlockProps {
+    children: React.ReactElement;
+}
+export declare const DSL_ChartBlock: React.FC<IChartBlockProps>;
+export {};

package/dist/components/DashboardPage/Block.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Dropdown, theme } from "antd";
+import { createContext, useId, useState } from "react";
+import { FaFileCsv } from "react-icons/fa";
+import { AiOutlineMore } from "react-icons/ai";
+import { ProducersFooter } from "../Dataset/Producer";
+const { useToken } = theme;
+export const ChartBlockContext = createContext(undefined);
+export const DSL_ChartBlock = ({ children }) => {
+    const id = useId();
+    const [config, setConfig] = useState({});
+    const { token } = useToken();
+    const menu_items = [
+        {
+            key: "export_data_csv",
+            label: (_jsxs("a", { onClick: () => handleExportData(), children: [_jsx(FaFileCsv, {}), " CSV"] })),
+            disabled: config.dataExport === undefined
+        },
+    ];
+    const has_action = menu_items.some(item => !item.disabled);
+    const dropdown_toolbox = (_jsx(Dropdown, { menu: { items: menu_items }, children: _jsx("a", { style: { color: token.colorTextBase }, children: _jsx(AiOutlineMore, {}) }) }));
+    const handleExportData = () => {
+        console.log('datadl');
+        console.log(config.dataExport);
+        const DL = async () => {
+            if (config.dataExport === undefined) {
+                return;
+            }
+            const XLSX = await import("xlsx");
+            const worksheet = XLSX.utils.json_to_sheet(config.dataExport);
+            const workbook = XLSX.utils.book_new();
+            XLSX.utils.book_append_sheet(workbook, worksheet, "data");
+            XLSX.writeFile(workbook, `${config.title || id}.csv`, {
+                compression: true,
+            });
+        };
+        DL();
+    };
+    return (_jsx(ChartBlockContext.Provider, { value: { config: config, setConfig: (e) => setConfig(e) }, children: _jsxs(Card, { style: { height: '100%' }, extra: has_action && dropdown_toolbox, title: config.title, children: [children, _jsx(ProducersFooter, { component: children })] }) }));
+};

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

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

package/dist/components/DashboardPage/DashboardPage.test.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DashboardPage from './Page';
+import DashboardElement from '../DashboardElement/DashboardElement';
+import { MemoryRouter } from 'react-router-dom';
+// TODO : test l'affichage des DashboardElement et les filtres radio
+// TOFIX : DashboardElement sans rien a l'intérieur n'affiche rien
+describe("DashboardPage Component", () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(), // Deprecated
+                removeListener: jest.fn(), // Deprecated
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+    test("initial state", async () => {
+        // Génération DOM virtuel et sélection des noeuds
+        render(_jsx(MemoryRouter, { children: _jsxs(DashboardPage, { children: [_jsx(DashboardElement, { title: "Graphique 1", section: 'Section 1', children: _jsx(_Fragment, {}) }), _jsx(DashboardElement, { title: "Graphique 2", section: 'Section 2', children: _jsx(_Fragment, {}) })] }) }));
+        // Assertions
+        expect(screen.getByRole('radio', { name: "Section 1" })).toBeInTheDocument();
+        expect(screen.queryByRole('radio', { name: "Section 3" })).not.toBeInTheDocument();
+        expect(screen.queryByRole('radio', { name: "Autres" })).not.toBeInTheDocument();
+        expect(screen.getAllByRole('radio')).toHaveLength(2);
+    });
+    test("Others section", async () => {
+        render(_jsx(MemoryRouter, { children: _jsxs(DashboardPage, { children: [_jsx(DashboardElement, { title: "Graphique 1", section: 'Section 1', children: _jsx(_Fragment, {}) }), _jsx(DashboardElement, { title: "Graphique 2", section: 'Section 2', children: _jsx(_Fragment, {}) }), _jsx(DashboardElement, { title: "Graphique 3", children: _jsx(_Fragment, {}) })] }) }));
+        // Assertions
+        expect(screen.queryByRole('radio', { name: "Autres" })).toBeInTheDocument();
+        expect(screen.getAllByRole('radio')).toHaveLength(3);
+    });
+});

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

@@ -0,0 +1,42 @@
+import { RowProps } from "antd";
+import DashboardElement from "../DashboardElement/DashboardElement";
+import React from "react";
+import { SimpleRecord } from "../../types";
+type Section = {
+    key: string;
+    libel?: string;
+    order?: number;
+    hide?: boolean;
+    disable?: boolean;
+};
+interface IDashboardPageProps {
+    control?: React.ReactElement | React.ReactElement[];
+    children: React.ReactElement<typeof DashboardElement>[] | React.ReactElement<typeof DashboardElement>;
+    row_gutter?: RowProps['gutter'];
+    sections?: string[] | Section[];
+}
+declare const DashboardPage: React.FC<IDashboardPageProps>;
+export default DashboardPage;
+type dataset = {
+    id: string;
+    resource: string;
+    data?: SimpleRecord[];
+    isFetching: boolean;
+    isError: boolean;
+    producers?: any[];
+};
+type ControlContextType = {
+    values: Record<string, any>;
+    pushValue: (control: {
+        name: string;
+        value: any;
+    }) => void;
+};
+export declare const DatasetContext: React.Context<Record<string, dataset>>;
+export declare const DatasetRegistryContext: React.Context<(dataset: dataset) => void>;
+export declare const ControlContext: React.Context<ControlContextType | undefined>;
+interface IDSLDashboardPageProps {
+    children: React.ReactNode;
+    name?: string;
+}
+export declare const DSL_DashboardPage: React.FC<IDSLDashboardPageProps>;

package/dist/components/DashboardPage/Page.js

@@ -0,0 +1,80 @@
+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 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";
+const { Header } = Layout;
+const getSection = (child) => React.isValidElement(child) ? child.props.section : undefined;
+const DashboardPage = ({ children: children_input, control, row_gutter = [8, 8], sections }) => {
+    let sections_std = [];
+    const screens = Grid.useBreakpoint();
+    const children = React.Children.toArray(children_input).filter((child) => React.isValidElement(child));
+    if (sections && typeof (sections[0]) === 'string') {
+        sections_std = sections.map((s) => ({ key: s }));
+    }
+    else if (sections && typeof (sections[0]) === 'object') {
+        sections_std = sections;
+    }
+    else { //Automatic section based on children properties
+        sections_std = [...new Set(children.map((child) => getSection(child) ?? 'Autres'))].map((s) => ({ key: s }));
+    }
+    const [activeTab, setActiveTab] = useSearchParamsState('tab', sections_std[0].key);
+    sections_std.sort((a, b) => (a?.order || Infinity) - (b?.order || Infinity));
+    return (_jsxs(_Fragment, { children: [_jsx(Control, { children: _jsxs(Flex, { wrap: true, justify: "flex-start", align: "flex-start", gap: "small", children: [_jsx("div", { children: sections_std.length > 1 && !screens.md &&
+                                _jsx(Dropdown.Button, { menu: { selectedKeys: [activeTab],
+                                        items: sections_std.map((section) => ({
+                                            label: section.libel || section.key,
+                                            key: section.key,
+                                            onClick: () => setActiveTab(section.key)
+                                        })) }, trigger: ['click'], buttonsRender: ([_lb, rb]) => [_jsx(Button, { type: 'primary', children: activeTab }), rb] }) }), sections_std.length > 1 && screens.md &&
+                            _jsx(Radio.Group, { optionType: "button", buttonStyle: "solid", options: sections_std.map((section) => ({
+                                    label: section.libel || section.key,
+                                    value: section.key
+                                })), value: activeTab, onChange: (e) => setActiveTab(e.target.value) }), control] }) }), _jsx(Row, { gutter: row_gutter, style: { margin: 16 }, children: children.map((child, idx) => ({ child, idx })).filter(({ child }) => (getSection(child) ?? 'Autres') == activeTab).map(({ child, idx }) => _jsx(Col, { xl: 12, xs: 24, children: child }, idx)) })] }));
+};
+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', children }) => {
+    const [datasets, setdatasets] = useState({});
+    const [palette, setPalette] = useState(DEFAULT_PALETTE);
+    //const allDatasetLoaded = Object.values(datasets).every(d => !d.isFetching);
+    //const isDatasetError = Object.values(datasets).some(d => d.isError);
+    // Ajouter ou mettre à jour un dataset
+    const pushDataset = (d) => {
+        setdatasets(prev => ({
+            ...prev,
+            [d.id]: d
+        }));
+    };
+    const childrenArray = React.Children.toArray(children).filter(isValidElement);
+    const logicalComponents = [Dataset.name, Provider.name, Palette.name, Debug.name]; //Composant logiques, a ne pas mettre dans la grid
+    const getComponentKind = (c) => {
+        if (typeof (c.type) != 'string' && logicalComponents.includes(c.type.name)) {
+            return "logical";
+        }
+        else if (typeof (c.type) != 'string' && c.type.name == DSL_Control.name) {
+            return "control";
+        }
+        else {
+            return "other";
+        }
+    };
+    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');
+    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",
+                                    top: 0,
+                                    zIndex: 600, // maplibre top zIndex if 500
+                                    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: 12, xs: 24, children: _jsx(DSL_ChartBlock, { children: component }) }, idx)) }), logic_components] }) }) })] }));
+};

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

@@ -0,0 +1,12 @@
+interface DatasetBadgeStatusProps {
+    isError?: boolean;
+    isFetching?: boolean;
+}
+export declare const DatasetBadgeStatus: React.FC<DatasetBadgeStatusProps>;
+interface DSL_DataPreviewProps {
+    dataset?: string;
+    pageSize?: number;
+    rowKey?: string;
+}
+export declare const DSL_DataPreview: React.FC<DSL_DataPreviewProps>;
+export {};

package/dist/components/Dataset/DataPreview.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Table from "antd/es/table";
+import { Badge } from "antd";
+import { useDataset } from "./hooks";
+export const DatasetBadgeStatus = ({ isError, isFetching }) => {
+    return _jsx(Badge, { status: isError ? "error" : isFetching ? 'processing' : 'success' });
+};
+export const DSL_DataPreview = ({ dataset: dataset_id, pageSize, rowKey }) => {
+    const dataset = useDataset(dataset_id);
+    const data = dataset?.data;
+    if (data === undefined) { // TODO : Afficher Empty si les données ont fini de fetcher et data est null ou lenght==0
+        return _jsx(_Fragment, {});
+    }
+    const columns = Object.keys(data[0] || {}).map((key) => ({
+        title: key,
+        dataIndex: key,
+        key,
+        ellipsis: true,
+    }));
+    return (_jsxs(_Fragment, { children: [_jsxs("h3", { children: [_jsx(DatasetBadgeStatus, { isError: dataset?.isError, isFetching: dataset?.isFetching }), " ", dataset?.resource] }), _jsx(Table, { pagination: { pageSize: pageSize }, dataSource: data, columns: columns, rowKey: (row) => rowKey ? row[rowKey] : JSON.stringify(row) })] }));
+};

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

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { CrudFilters, DataProvider } from "../../data_providers/types";
+import React from "react";
+import { ProviderType } from "./Provider";
+interface IDatasetProps {
+    id: string;
+    provider?: DataProvider;
+    url?: string;
+    type?: ProviderType;
+    resource: string;
+    filters?: CrudFilters;
+    children?: ReactNode;
+    pageSize?: number;
+    meta?: any;
+}
+export declare const DSL_Dataset: React.FC<IDatasetProps>;
+export {};

package/dist/components/Dataset/Dataset.js

@@ -0,0 +1,94 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from "react";
+import { useApi } from "../..";
+import { ControlContext, DatasetRegistryContext } from "../DashboardPage/Page";
+import { Producer } from "./Producer";
+import React from "react";
+import { Filter, Transform, useAllDatasets } from "../../dsl";
+import alasql from "alasql";
+import { DataProviderContext, getProviderFromType } from "./Provider";
+import { Join } from "./Join";
+import { from } from "arquero";
+export const DSL_Dataset = ({ children, id, provider: provider_input, type: providerType = 'file', url: providerUrl, resource, pageSize, meta }) => {
+    const getTransformerFn = (component) => {
+        /*
+        * Génére une fonction transformer soit
+        * - A partir d'un composant Transform (string ou fonction js)
+        * - A partir d'un composant Join
+        */
+        if (typeof component.type != 'string' && component.type == Transform) {
+            const children = component.props.children;
+            if (typeof children === "string") {
+                // Transformation via une requête SQL
+                return (data) => data && alasql(children, [data]);
+            }
+            else {
+                return (data) => data && children(data);
+            }
+        }
+        else if (typeof component.type != 'string' && component.type === Join) {
+            const props = component.props;
+            const funct = (data) => {
+                const join_type = props.joinType || 'inner';
+                const aq_join_option = {
+                    left: { left: true, right: false },
+                    right: { left: false, right: true },
+                    full: { left: true, right: true },
+                    inner: { left: false, right: false },
+                }[join_type] ?? { left: false, right: false };
+                const otherData = allDatasets?.find((d) => d.id === props.dataset)?.data;
+                if (!otherData)
+                    return undefined; // ou [] ou data selon la logique souhaitée
+                return from(data).join(from(otherData), props.joinKey, undefined, aq_join_option).objects();
+            };
+            return funct;
+        }
+        else {
+            throw new Error(`Unknown transformer component: ${component.type}`);
+        }
+    };
+    const datasetRegistryContext = useContext(DatasetRegistryContext);
+    const allDatasets = useAllDatasets();
+    const someFetching = !!allDatasets?.some(d => d.isFetching);
+    const controlContext = useContext(ControlContext);
+    const controls = controlContext?.values;
+    const providerContext = useContext(DataProviderContext);
+    const provider = (providerUrl && getProviderFromType(providerType)(providerUrl)) || providerContext || provider_input;
+    if (provider === undefined) {
+        throw new Error("Error : No dataProvider, please use one of : <Provider> parent, providerUrl/providerType properties or provider property");
+    }
+    /* Récupérer les props des filtres depuis les composants enfant Filter */
+    const filters = [];
+    React.Children.toArray(children)
+        .filter((c) => React.isValidElement(c))
+        .filter((c) => typeof c.type != 'string' && c.type.name == Filter.name).forEach((c) => {
+        const value = String(c.props.children).trim() || controls?.[c.props.control];
+        filters.push({
+            operator: c.props.operator || 'eq',
+            value: value,
+            field: c.props.field
+        });
+    });
+    const { data, isFetching, isError } = useApi({ dataProvider: provider, resource: resource, filters: filters, pagination: { pageSize: pageSize }, meta: meta });
+    const transformers = [];
+    /* Récuperer les fonctions transformers */
+    React.Children.toArray(children)
+        .filter((c) => React.isValidElement(c))
+        .filter((c) => typeof c.type != 'string' && (c.type.name == Transform.name || c.type.name == Join.name)).forEach((c) => {
+        transformers.push(getTransformerFn(c));
+    });
+    const producers = [];
+    React.Children.toArray(children)
+        .filter((c) => React.isValidElement(c))
+        .filter((c) => typeof c.type != 'string' && c.type.name == Producer.name).forEach((c) => {
+        producers.push({ nom: c.props.children, url: c.props.url });
+    });
+    useEffect(() => {
+        const finalData = data?.data && transformers.reduce((datat, fn) => fn(datat), data.data);
+        if (datasetRegistryContext) {
+            datasetRegistryContext({ id: id, resource: resource, data: finalData, isFetching: isFetching, isError: isError, producers: producers });
+            //Ajouter une info pour distinguer les erreurs du fourniseurs et celles des transformers ?
+        }
+    }, [resource, data, isFetching, someFetching, children]);
+    return (_jsx(_Fragment, { children: children }));
+};

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

@@ -0,0 +1,9 @@
+import { CrudOperators } from "../../data_providers/types";
+interface IFilterProps {
+    field: string;
+    children?: string;
+    control?: string;
+    operator?: Exclude<CrudOperators, "or" | "and">;
+}
+export declare const DSL_Filter: React.FC<IFilterProps>;
+export {};

package/dist/components/Dataset/Filter.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/*
+* Les props sont utilisées dans le composant parent <Dataset> pour appliquer un filtre distant
+*/
+export const DSL_Filter = () => {
+    return _jsx(_Fragment, {});
+};

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

@@ -0,0 +1,8 @@
+export type joinTypeType = 'left' | 'right' | 'full' | 'inner';
+interface IJoinProps {
+    joinKey: string | [string, string];
+    dataset: string;
+    joinType?: joinTypeType;
+}
+export declare const Join: React.FC<IJoinProps>;
+export {};

package/dist/components/Dataset/Join.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 la jointure
+*/
+export const Join = () => {
+    return _jsx(_Fragment, {});
+};