@geo2france/api-dashboard 1.5.0

package/README.MD

@@ -0,0 +1,192 @@
+# API-Dashboard
+
+Collection de composants React pour faciliter la création de **tableaux de bords territoriaux**.
+
+Le projet permet la mise en place d'un tableau de bord facile à déployer sur une **infrastucture légère**.
+Le tableau de bord, une fois compilé, peut-être mis à disposition des utilisateurs via un **simple server web** (HTTP/HTTPS) sans configuration particulière.
+Il s'agit d'une application React (Javascript) s'executant dans le navigateur des utilisateurs. Il n'y a pas **backend à installer**,
+l'application récupère les données via API **auprès d'un partenaire** (plateforme régionale, portail open-data, etc.) ou sur **votre serveur de données**.
+Les données sont ensuites traitées par le client et présentées à l'utilisateur via des graphiques ou cartes.
+
+Si des données sensibles alimentent un tableau de bord, l'authentification et la sécurité sont gérées au niveau du serveur de données. C'est donc 
+lui qui va s'assurer que l'utilisateur a un droit d'accès aux données. L'application peut donc tout être utilisée pour présenter
+des données sensibles ou même des graphiques dont les données diffèrent selon les droits de l'utilisateur.
+
+Les API suivantes sont actuellement supportées (interrogation, filtre, pagination, etc. ) :
+- [WFS](src/data_providers/wfs/) : API proposée par la plupart des serveurs geographiques (QGIS Server, GeoServer, ArcGIS server, etc.)
+- [Data Fair](src/data_providers/datafair/) : API de la solution open source Data Fair.
+- En développement : OGC API Features, TJS
+
+![diag](architecture_1.png)
+
+En bref : 
+
+- ✅ Déploiement facile et rapide (_client side_)
+- ✅ Présentez au même endroit des données tierces, vos données et celles de vos partenaires
+- ✅ Possibilité de visualiser des données sensibles
+- ✅ Flexibilité
+
+Les composants sont actuellement utilisés pour le [tableau de bord de l'Odema](https://github.com/geo2france/odema-dashboard).
+
+## Installation
+
+`npm install https://github.com/geo2france/api-dashboard/releases/latest/download/api-dashboard.tgz`
+
+
+## Utilisation
+
+Le tableau de bord est construit de manière déclarative **JSX** (accronyme de JavaScript XML).
+Comme son nom l'indique, il permet de combiner la clarté et l'efficacité du XML, avec la souplesse et la puissance du JavaScript.
+
+La construction du tableau de bord repose sur l'articulation de 3 grands concepts :
+
+- Les `<Dataset>` permettent de rappatrier, filter et traiter laes données depuis des sources distantes : [documentation](./src/components/Dataset/README.md)
+- Les graphiques `<ChartXXX>` et `<MapXXX>` constituent la partie essentielle du tableau de bord
+- Les `<Control>` pour que les utilisateurs puissent interragir avec le tableau de bord (filter, activer/désactiver une option, etc.) : [documentation](./src/components/Control/README.md)
+
+Le JSX permet aussi d'ajouter des éléments dynamiques en Javascript.
+
+```jsx
+
+import  { Transform, Dashboard, Dataset, Filter, Producer, Control, ChartPie, useControl } from "api-dashboard/dsl"
+
+export const MaPremierePage = () => (
+
+  <Dashboard>
+
+    <Dataset 
+          id="dma_collecte_traitement" 
+          resource="sinoe-(r)-destination-des-dma-collectes-par-type-de-traitement/lines"
+          url="https://data.ademe.fr/data-fair/api/v1/datasets"
+          type="datafair"
+          pageSize={5000}>
+          <Filter field="L_REGION">Hauts-de-France</Filter> 
+          {/* Un filtre statique appliqué à l'API qui fournie les données */}
+
+          <Filter field="ANNEE">{useControl('annee')}</Filter> 
+          {/* Un second filtre : l'année choisie par l'utilisateur */}
+
+          <Transform>SELECT [ANNEE], [L_TYP_REG_DECHET],  SUM([TONNAGE_DMA]) as [TONNAGE_DMA] FROM ? GROUP BY [ANNEE], [L_TYP_REG_DECHET]</Transform> 
+          {/* Transformation local des données */}
+
+          <Producer url="https://odema-hautsdefrance.org/">Odema</Producer>
+          {/* Pour créditer les graphiques */}
+    </Dataset>
+
+    <Control>
+          <Select name="annee" options={[2021,2019,2017]} initial_value={2019} arrows={true} />
+    </Control>
+    {/* Un control permettant à mon utilisateur de choisir l'année */}
+
+    <ChartPie title={`Tonnages de déchets en ${useControl('annee')}`} dataset='dma_collecte_traitement' nameKey='L_TYP_REG_DECHET' dataKey='TONNAGE_DMA' />
+    {/* Un graphique camembert standard. J'indique mon jeu de données et les colonnes à utiliser */}
+
+  </Dashboard>
+)
+```
+
+## Bien débuter
+
+1. Mise en place du projet template (_en cours_)
+2. Créer une nouvelle page
+3. Ajouter des [jeux de données](./src/components/Dataset/README.md)
+4. Ajouter un [graphique](./src/components/Charts/README.md)
+5. Personnaliser son tableau : ajouter une [Palette](./src/components/Palette/README.md), configurer le theme [theme AntDesign](https://ant.design/docs/react/customize-theme#customize-design-token) (_TODO_)
+6. Ajouter de l'interactivité : les [contrôles utilisateur](./src/components/Control/README.md)
+
+
+## Aller plus loin (développeur)
+
+### Développement de composants dataviz
+
+La bibliothèque propose des graphiques de bases, mais il possible de développer ses propres composants React.
+Des fonctions sont proposés afin d'aider le développeur dans cette tâche : accéder facilement aux données ou aux options utilisateurs, gestion des erreurs, etc.
+
+Le développeur est libre d'utiliser bibliothèque dataviz ou carto de son choix, à partir du moment où le composant retourne un élément visuelle.
+Nous préconisons [Echarts](https://echarts.apache.org), mais d'autres sont utilisables ([Recharts](https://recharts.org/), [Chart.js](https://www.chartjs.org/), etc.)
+
+`TODO : guide développement composant`
+
+### Développement de contrôles
+
+Il est également possible de développer des contrôle utilisateurs (éléments de formulaires) personalisés.
+
+`TODO : guide développement control. Le composant doit retourner un <Form.Item />`
+
+
+
+
+## Documentation (ancienne)
+
+⭐ Essentiel  
+👨‍💻 Utilisateur avancé 
+
+### Mise en page et structure
+
+- [DashboardApp](/src/components/Layout/) ⭐
+- [DashboardPage](/src/components/DashboardPage/) ⭐
+- [DashboardElement](/src/components/DashboardElement/) ⭐
+
+
+### Composants 
+
+- [KeyFigure](/src/components/KeyFigure/) ⭐
+- [NextPrevSelect](/src/components/NextPrevSelect/) ⭐
+- [MapLegend](/src/components/MapLegend/) ⭐
+- [FlipCard](/src/components/FlipCard/)
+- [LoadingContainer](/src/components/LoadingContainer/)
+
+### Hooks et fonctions
+
+- [useApi](/src/utils/README.MD) ⭐
+- [useSearchParamsState](/src/utils/README.MD) ⭐
+- [useChartEvents](/src/utils/README.MD) 👨‍💻
+- [useChartActionHightlight](/src/utils/README.MD) 👨‍💻
+- [useMapControl](/src/utils/README.MD) 👨‍💻
+- [useChartExport](/src/utils/README.MD)
+
+### Fournisseur de données
+
+- [WFS](/src/data_providers/wfs/) ⭐
+- [Datafair](/src/data_providers/datafair/) ⭐
+- [Filte](/src/data_providers/file/) ⭐
+
+![block-graph](block-graph.png)
+
+<!---
+```mermaid
+graph TD; 
+
+subgraph "&lt;DashboardApp&gt;"
+  subgraph "&lt;DashboardPage&gt;" 
+    subgraph "&lt;DashboardElement&gt;" 
+        subgraph "Chart(Echart)" 
+        end
+    end
+    subgraph "&lt;DashboardElement&gt;" 
+        subgraph "Chart(Echart)" 
+        end
+    end
+        subgraph "&lt;DashboardElement&gt;" 
+        subgraph "Chart(Echart)" 
+        end
+    end
+  end
+
+  subgraph "&lt;DashboardPage&gt;" 
+    subgraph "&lt;DashboardElement&gt;" 
+        subgraph "Chart(Echart)" 
+        end
+    end
+    subgraph "&lt;DashboardElement&gt;" 
+        subgraph "Chart(Echart)" 
+        end
+    end
+        subgraph "&lt;DashboardElement&gt;" 
+        subgraph "Chart(Echart)" 
+        end
+    end
+  end
+end  
+```
+--->

package/dist/components/Attributions/Attribution.test.d.ts

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

package/dist/components/Attributions/Attribution.test.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Attribution from './Attributions';
+describe("Attribution Component", () => {
+    test("initial state", async () => {
+        // Génération DOM virtuel et sélection des noeuds
+        render(_jsx(Attribution, { licenses: ['CC', 'SA'], data: [{ url: "http://monurl.fr", name: "MyDataSourceName" }] }));
+        // Assertions
+        expect(screen.getByText("MyDataSourceName")).toBeInTheDocument();
+        expect(screen.getByText("Source des données:")).toBeInTheDocument();
+        const linkElement = screen.getByText("MyDataSourceName");
+        expect(linkElement).toHaveAttribute('href', "http://monurl.fr");
+        expect(screen.queryByLabelText('CC')).toBeInTheDocument();
+        expect(screen.queryByLabelText('SA')).toBeInTheDocument();
+        expect(screen.queryByLabelText('NC')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('BY')).not.toBeInTheDocument();
+    });
+});

package/dist/components/Attributions/Attributions.d.ts

@@ -0,0 +1,17 @@
+import React, { CSSProperties } from 'react';
+import { License } from '../../types';
+export interface SourceProps {
+    name: string;
+    url?: string;
+}
+export interface SourceMakerProps {
+    maker?: SourceProps;
+    sources?: SourceProps[];
+}
+interface AttributionProps {
+    data: SourceMakerProps | SourceProps[];
+    style?: CSSProperties;
+    licenses?: License[];
+}
+declare const Attribution: React.FC<AttributionProps>;
+export default Attribution;

package/dist/components/Attributions/Attributions.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, Typography } from 'antd';
+import { FaCreativeCommons, FaCreativeCommonsBy, FaCreativeCommonsNc, FaCreativeCommonsPd, FaCreativeCommonsSa, FaCreativeCommonsZero } from 'react-icons/fa';
+const { Text, Link } = Typography;
+const LogoLicence = ({ license, style }) => {
+    switch (license) {
+        case "CC":
+            return _jsx(FaCreativeCommons, { style: style });
+        case "BY":
+            return _jsx(FaCreativeCommonsBy, { style: style });
+        case "NC":
+            return _jsx(FaCreativeCommonsNc, { style: style });
+        case "PD":
+            return _jsx(FaCreativeCommonsPd, { style: style });
+        case "SA":
+            return _jsx(FaCreativeCommonsSa, { style: style });
+        case "ZERO":
+            return _jsx(FaCreativeCommonsZero, { style: style });
+    }
+};
+const Attribution = ({ data, style, licenses }) => {
+    const licence_logo_style = { height: '12px', width: '12px' };
+    const sources = Array.isArray(data) ? data : data.sources;
+    const maker = Array.isArray(data) ? undefined : data.maker;
+    const plural = (sources?.length ?? 0) > 1 ? 's' : '';
+    return (_jsx("div", { style: { paddingLeft: 4, paddingBottom: 4, ...style }, children: _jsxs(Text, { type: "secondary", children: [`Source${plural} des données : `, sources?.map((e, i) => (_jsxs("span", { children: [_jsx(Link, { href: e.url, children: e.name }), i < sources.length - 1 ? ", " : ""] }, i))), maker && _jsxs("span", { children: [' ', "| R\u00E9alisation : ", _jsx(Link, { href: maker.url, children: maker.name })] }), _jsx("span", { style: { marginLeft: 5 }, children: _jsx(Tooltip, { title: licenses?.join(' '), placement: "bottom", children: licenses?.map((license, index) => {
+                            return (_jsx("span", { style: { marginLeft: 2 }, children: _jsx(LogoLicence, { license: license, style: licence_logo_style, "aria-label": license }) }, index));
+                        }) }) })] }) }));
+};
+export default Attribution;

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

@@ -0,0 +1,7 @@
+import { EChartsOption } from "echarts";
+import EChartsReact from "echarts-for-react";
+interface ChartEchartsProps {
+    option?: EChartsOption;
+}
+export declare const ChartEcharts: import("react").ForwardRefExoticComponent<ChartEchartsProps & import("react").RefAttributes<EChartsReact>>;
+export {};

package/dist/components/Charts/ChartEcharts.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { theme } from 'antd';
+import EChartsReact from "echarts-for-react";
+import { usePalette } from "../Palette/Palette";
+import deepMerge from "../../utils/deepmerge";
+const { useToken } = theme;
+/*
+* Ce composant peut servir de base aux développements d'autres composants ou être utilisé directement dans une page (non conseillé).
+* - Applique la palette utilisateur
+* - Utilise le style de texte de l'application
+* devnote : A partir de React 19, ne plus utiliser forwardRef https://react.dev/reference/react/forwardRef
+*/
+export const ChartEcharts = forwardRef(({ option = {} }, ref) => {
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current, []); // Pour exposer le innerref au parent
+    const { token } = useToken();
+    const n_series = Array.isArray(option.series) ? option.series?.length : 1;
+    // Récupérer et traduire les éléments depuis le theme antdesign : police, couleurs, etc..
+    // Ceci peut-être surchargé par les options de l'utilisateur
+    const default_option = {
+        color: usePalette({ nColors: n_series }),
+        textStyle: {
+            fontFamily: token.fontFamily,
+            color: token.colorTextSecondary
+        },
+        xAxis: {
+            axisLine: { lineStyle: { color: token.colorTextSecondary } },
+        },
+        yAxis: {
+            axisLine: { lineStyle: { color: token.colorTextSecondary } },
+        },
+    };
+    return (_jsx(EChartsReact, { option: deepMerge({}, default_option, option), ref: innerRef }));
+});

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

@@ -0,0 +1,10 @@
+interface IChartPieProps {
+    dataset?: string;
+    dataKey: string;
+    nameKey: string;
+    unit?: string;
+    title?: string;
+    donut?: boolean;
+}
+export declare const ChartPie: React.FC<IChartPieProps>;
+export {};

package/dist/components/Charts/Pie.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from "react";
+import { useDataset } from "../Dataset/hooks";
+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 }) => {
+    const dataset = useDataset(dataset_id);
+    const blockConfig = useContext(ChartBlockContext);
+    const data = dataset?.data;
+    const block_config = {
+        title: title,
+        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 option = {
+        color: usePalette({ nColors: chart_data?.length }),
+        xAxis: { show: false }, yAxis: { show: false },
+        series: [{
+                type: 'pie',
+                data: chart_data,
+                radius: donut ? ['40%', '75%'] : [0, '75%']
+            }],
+        tooltip: {
+            show: true,
+            valueFormatter: v => `${v?.toLocaleString()} ${unit || ''} `
+        }
+    };
+    return _jsx(ChartEcharts, { option: option });
+};

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

@@ -0,0 +1,16 @@
+/**
+ * Graphique standard pour afficher des données annuelles
+ */
+interface IYearSerieProps {
+    dataset: string;
+    title?: string;
+    yearControl?: string;
+    yearKey: string;
+    valueKey: string;
+    categoryKey?: string;
+    stack?: boolean;
+    yearMark?: number | string;
+    type?: 'bar' | 'line' | 'area';
+}
+export declare const ChartYearSerie: React.FC<IYearSerieProps>;
+export {};

package/dist/components/Charts/YearSerie.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Graphique standard pour afficher des données annuelles
+ */
+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' }) => {
+    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];
+    const COLORS = usePalette({ nColors: distinct_cat?.length }) || [];
+    const series = distinct_cat ? 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]])),
+        itemStyle: {
+            color: COLORS && COLORS[idx % COLORS.length],
+        },
+        stack: stack ? 'total' : undefined,
+        areaStyle: chart_type === 'area' ? {} : undefined,
+        markLine: idx === 0 && yearMark ? {
+            symbol: 'none',
+            data: [
+                { xAxis: String(yearMark) }
+            ]
+        } : undefined
+    })) : [];
+    function tooltipFormatter(params) {
+        if (!params || params.length === 0)
+            return '';
+        const year = params[0].value[0];
+        const lines = params.map((p) => {
+            const value = Number(p.value[1]).toLocaleString();
+            return `${p.marker} ${p.seriesName} <b><span style="display:inline-block; min-width:80px; text-align:right;">${value}</span></b>`;
+        });
+        return `<div>${year}</div>` + lines.join('<br/>');
+    }
+    const option = {
+        series: series,
+        legend: {
+            show: true,
+            bottom: 0
+        },
+        tooltip: {
+            trigger: 'axis',
+            formatter: tooltipFormatter
+        },
+        xAxis: {
+            type: 'time',
+        },
+        yAxis: {
+            type: 'value',
+        },
+    };
+    return (_jsx(ChartEcharts, { option: option }));
+};

package/dist/components/Control/Control.d.ts

@@ -0,0 +1,21 @@
+import React, { CSSProperties, ReactElement } from "react";
+interface IControlProps {
+    children: ReactElement | ReactElement[];
+    style?: CSSProperties;
+}
+declare const Control: React.FC<IControlProps>;
+export default Control;
+export declare const useControl: (name: string) => string | undefined;
+export declare const useAllControls: () => Record<string, any>;
+export declare const list_to_options: (input?: string[] | number[] | {
+    label: string | number;
+    value: string | number;
+}[]) => {
+    label: string | number;
+    value: string | number;
+}[];
+interface IControlProps {
+    children: ReactElement | ReactElement[];
+}
+export declare const DSL_Control: React.FC<IControlProps>;
+export declare const ControlPreview: React.FC;

package/dist/components/Control/Control.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Descriptions, Form, Layout } from "antd";
+import React, { useContext, useEffect } from "react";
+import { ControlContext } from "../DashboardPage/Page";
+const { Header } = Layout;
+/*
+ * Composant destiné à recevoir un Form avec les contrôles de la page
+ */
+const Control = ({ children, style = {} }) => {
+    return (_jsx(Header, { style: {
+            padding: 12,
+            position: "sticky",
+            top: 0,
+            zIndex: 600, // maplibre top zIndex if 500
+            backgroundColor: "#fff",
+            height: "auto",
+            width: "100%",
+            ...style,
+        }, children: children }));
+};
+export default Control;
+/*
+ * Hook  pour accéder à un control spécifique de la page
+ */
+export const useControl = (name) => {
+    const context_controls = useContext(ControlContext);
+    if (!context_controls) {
+        throw new Error("useControl must be used within a ControlProvider");
+    }
+    const { values } = context_controls;
+    const value = values[name];
+    return value;
+};
+/*
+ * Hook  pour accéder à tous les controls utilisateur
+ */
+export const useAllControls = () => {
+    const context_controls = useContext(ControlContext);
+    if (!context_controls) {
+        throw new Error("useControl must be used within a ControlProvider");
+    }
+    const { values } = context_controls;
+    return values;
+};
+/* Convenient function to return Options from list or Options */
+export const list_to_options = (input = []) => {
+    if (input === undefined) {
+        return [];
+    }
+    return input.map((o) => {
+        if (typeof o == "string" || typeof o == "number") {
+            return { label: String(o), value: o };
+        }
+        return o;
+    });
+};
+export const DSL_Control = ({ children }) => {
+    const context_controls = useContext(ControlContext);
+    const [form] = Form.useForm();
+    useEffect(() => {
+        handleChange(form?.getFieldsValue(true)); // Appliquer les valeurs par défaut au contexte lors de l'initialisation du composant
+    }, []);
+    if (!context_controls) { //Le contexte peut être nul ?
+        throw new Error("useControl must be used within a ControlProvider");
+    }
+    const { values: _control, pushValue: pushControl } = context_controls;
+    const childrenArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
+    //Ajout des nouvelles valeurs de controles dans le contexte de la page
+    const handleChange = (changed_value) => {
+        pushControl(changed_value);
+    };
+    const initialValues = Object.fromEntries(childrenArray.filter((child) => child.props.options && child.props.options.length > 0).map((child) => [child.props.name, child.props.options[0].value])); // Initialisé avec la première valeur de chaque option
+    return (_jsx(Form, { onValuesChange: handleChange, layout: "inline", initialValues: initialValues, form: form, children: children }));
+};
+//TODO : ajouter la gestion des useSearchParameters (ici au dans la Page ?)
+export const ControlPreview = ({}) => {
+    const controlValues = useAllControls();
+    const items = Object.entries(controlValues).map(([key, value]) => ({
+        key: key,
+        label: key,
+        children: _jsx("p", { children: value }),
+    }));
+    return (_jsx(Descriptions, { items: items }));
+};

package/dist/components/Control/Radio.d.ts

@@ -0,0 +1,19 @@
+import type { RadioGroupProps } from 'antd';
+import { SimpleRecord } from '../../types';
+export declare const buildOptionsFromData: (data: SimpleRecord[], labelField?: string, valueField?: string) => {
+    label: string;
+    value: string | number;
+}[];
+type ExtendedRadioGroupProps = RadioGroupProps & {
+    name?: string;
+    dataset?: string;
+    options?: {
+        label: string;
+        value: string | number;
+    }[] | string[] | number[];
+    labelField?: string;
+    valueField?: string;
+    initalValue?: string | number;
+};
+export declare const Radio: React.FC<ExtendedRadioGroupProps>;
+export {};

package/dist/components/Control/Radio.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Radio as AntRadio, Form } from 'antd';
+import { useDataset } from '../Dataset/hooks';
+import { from } from 'arquero';
+import { list_to_options } from './Control';
+// On construit les options depuis le tableau de données, utiliser pour Radio et Select
+export const buildOptionsFromData = (data, labelField = 'label', valueField = 'value') => {
+    const t = from(data);
+    return (t.select(labelField, valueField)
+        .dedupe(valueField)
+        .objects()
+        .map((row) => ({
+        label: row[labelField],
+        value: row[valueField],
+    })));
+};
+export const Radio = ({ dataset: datasetSource, options: input_options = [], labelField = 'label', valueField = 'value', name, initalValue: initalValue_input, ...rest }) => {
+    // Ici tu pourrais fetcher les données depuis un contexte/dataset si datasetSource est présent
+    const data = useDataset(datasetSource)?.data;
+    const options = list_to_options(input_options);
+    const data_options = options || data && buildOptionsFromData(data, labelField, valueField);
+    const initial_value = initalValue_input ? initalValue_input : data_options && data_options?.length > 0 && data_options[0].value;
+    if (data === undefined && options === undefined) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx(Form.Item, { name: name, label: name, initialValue: initial_value, children: _jsx(AntRadio.Group, { options: data_options, value: initial_value, ...rest }) }));
+};

package/dist/components/Control/Select.d.ts

@@ -0,0 +1,15 @@
+import type { SelectProps } from 'antd';
+type ExtendedSelectProps = Omit<SelectProps<any>, 'options'> & {
+    dataset?: string;
+    options?: {
+        label: string;
+        value: string | number;
+    }[] | string[] | number[];
+    initial_value?: string | number;
+    labelField?: string;
+    valueField?: string;
+    name?: string;
+    arrows?: boolean;
+};
+export declare const Select: React.FC<ExtendedSelectProps>;
+export {};

package/dist/components/Control/Select.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useDataset } from '../Dataset/hooks';
+import { buildOptionsFromData } from './Radio';
+import NextPrevSelect from '../NextPrevSelect/NextPrevSelect';
+import { list_to_options } from './Control';
+// TODO : a fusionner avec NextPrevSelect pour n'avoir qu'un seul composant
+// Actuellement, Select apporte seulement le fait de choisir les valeurs depuis un
+export const Select = ({ name, dataset: datasetSource, options: input_options = [], labelField = 'label', valueField = 'value', arrows = false, initial_value: initial_value_in, ...rest }) => {
+    const options = list_to_options(input_options);
+    const data = useDataset(datasetSource)?.data;
+    const data_options = datasetSource ? (data && buildOptionsFromData(data, labelField, valueField)) : options;
+    const myOptions = data_options && data_options.map((o) => {
+        if (typeof o == "string" || typeof o == "number") {
+            return { label: o, value: o };
+        }
+        return o;
+    });
+    const initial_value = initial_value_in || myOptions && myOptions?.length > 0 && myOptions[0].value;
+    if (data_options === undefined) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx(NextPrevSelect, { name: name, options: data_options, defaultValue: initial_value == null || initial_value == false
+            ? undefined
+            : initial_value, arrows: arrows, optionFilterProp: "label", ...rest }));
+};

package/dist/components/DashboardChart/DashboardChart.d.ts

@@ -0,0 +1,11 @@
+import { EChartsOption } from "echarts";
+type EChartsSeriesTypes = ('line' | 'bar' | 'pie' | 'scatter');
+interface IDashboardChartProps {
+    data?: any[];
+    chart_type?: EChartsSeriesTypes;
+    sql?: string;
+    echarts_option?: EChartsOption;
+    reverse_axies?: boolean;
+}
+declare const DashboardChart: React.FC<IDashboardChartProps>;
+export default DashboardChart;