@geo2france/api-dashboard 1.5.0 → 1.6.1

package/README.MD

@@ -8,9 +8,8 @@ Il s'agit d'une application React (Javascript) s'executant dans le navigateur de
 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.
+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.
 
 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.)
@@ -30,163 +29,7 @@ Les composants sont actuellement utilisés pour le [tableau de bord de l'Odema](
 
 ## 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; 
+`npm i @geo2france/api-dashboard`
 
-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
+Consulter la [documentation](https://geo2france.github.io/api-dashboard/) du projet.
 
-  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/DashboardPage/Page.d.ts

@@ -38,5 +38,6 @@ export declare const ControlContext: React.Context<ControlContextType | undefine
 interface IDSLDashboardPageProps {
     children: React.ReactNode;
     name?: string;
+    columns?: number;
 }
 export declare const DSL_DashboardPage: React.FC<IDSLDashboardPageProps>;

package/dist/components/DashboardPage/Page.js

@@ -40,7 +40,7 @@ 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 }) => {
+export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, children }) => {
     const [datasets, setdatasets] = useState({});
     const [palette, setPalette] = useState(DEFAULT_PALETTE);
     //const allDatasetLoaded = Object.values(datasets).every(d => !d.isFetching);
@@ -76,5 +76,5 @@ export const DSL_DashboardPage = ({ name = 'Tableau de bord', children }) => {
                                     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] }) }) })] }));
+                                }, children: control_components }), _jsx(Row, { gutter: [8, 8], style: { margin: 16 }, children: visible_components.map((component, idx) => _jsx(Col, { xl: 24 / columns, xs: 24, children: _jsx(DSL_ChartBlock, { children: component }) }, idx)) }), logic_components] }) }) })] }));
 };

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

@@ -6,13 +6,13 @@ interface AppContextProps {
     logo?: string;
 }
 export declare const AppContext: import("react").Context<AppContextProps>;
-interface DashboardApprProps {
+export interface DashboardConfig {
     title?: string;
     subtitle?: string;
-    route_config: RouteConfig[];
+    routes: RouteConfig[];
     theme?: ThemeConfig;
     logo: string;
     brands?: Partner[];
 }
-declare const DashboardApp: React.FC<DashboardApprProps>;
+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 = ({ route_config, theme, logo, brands, title, subtitle }) => {
+const DashboardApp = ({ routes, theme, logo, brands, title, subtitle }) => {
     const context_values = { title, subtitle, logo };
     /* CONTROLS */
     const [controls, setControles] = useState({});
@@ -41,6 +41,6 @@ const DashboardApp = ({ route_config, theme, logo, brands, title, subtitle }) =>
             ...c
         }));
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ConfigProvider, { theme: theme || default_theme /* Merger plutôt ?*/, children: _jsx(HelmetProvider, { children: _jsx(AppContext.Provider, { value: context_values, children: _jsx(ControlContext.Provider, { value: { values: controls, pushValue: pushControl }, children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsxs(Route, { element: _jsxs(Layout, { children: [_jsxs(Layout, { children: [_jsx(DashboardSider, { route_config: route_config }), _jsx(Content, { style: { width: "85%" }, children: _jsx(Outlet, {}) })] }), _jsx(DasbhoardFooter, { brands: brands })] }), children: [generateRoutes(route_config), _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, { children: [_jsxs(Layout, { children: [_jsx(DashboardSider, { route_config: routes }), _jsx(Content, { style: { width: "85%" }, children: _jsx(Outlet, {}) })] }), _jsx(DasbhoardFooter, { brands: brands })] }), children: [generateRoutes(routes), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }));
 };
 export default DashboardApp;

package/dist/data_providers/wfs/index.js

@@ -2,28 +2,33 @@ import { axiosInstance, generateSort, generateFilter } from "./utils";
 import queryString from "query-string";
 export const dataProvider = (apiUrl, httpClient = axiosInstance) => ({
     getList: async ({ resource, pagination, filters, sorters, meta }) => {
-        const url = `${apiUrl}/`;
+        const url = `${apiUrl}`;
         const { current = 1, pageSize = 10, mode = "off" } = pagination ?? {};
         const { headers: headersFromMeta, method } = meta ?? {};
         const requestMethod = method ?? "get";
-        const { cql_filter: queryFilters, bbox } = generateFilter(filters);
+        const { filter: queryFilters, bbox } = generateFilter(filters);
         const generatedSort = generateSort(sorters);
-        const query = { service: 'WFS', request: 'GetFeature', sortby: '', version: '2.0.0', outputformat: 'application/json', typenames: resource,
+        const query = { service: 'WFS', request: 'GetFeature', sortby: '', version: '1.1.0', outputformat: 'application/json', typename: resource,
             srsname: meta?.srsname, propertyname: meta?.properties?.join(',') };
         if (mode === "server") {
             query.startindex = (current - 1) * pageSize;
-            query.count = pageSize;
+            query.maxfeatures = pageSize;
         }
         if (generatedSort) {
             query.sortby = generatedSort;
         }
         if (queryFilters) {
-            query.cql_filter = queryFilters;
+            query.filter = queryFilters;
         }
         if (bbox !== '') {
             query.bbox = bbox;
         }
-        const { data, headers: _headers } = await httpClient[requestMethod](`${url}?${queryString.stringify({ ...query, sortby: undefined })}&sortby=${query.sortby}&`, //"le + de sortby ne doit pas être urlencode"
+        const urlObj = new URL(url);
+        const base_params = Object.fromEntries(urlObj.searchParams.entries()); // Params renseignés par l'utilisateur dans l'URL (notament MAP=XXX pour qgis server)
+        const base_url = urlObj.origin + urlObj.pathname;
+        const { data, headers: _headers } = await httpClient[requestMethod](`${base_url}?${queryString.stringify({ ...query, sortby: undefined })}
+        &sortby=${query.sortby}
+        &${Object.entries(base_params).map(([k, v]) => `${k}=${v}`).join('&')}`, //le + de sortby et les paramètres de bases ne doivent pas être urlencode
         {
             headers: headersFromMeta,
         });

package/dist/data_providers/wfs/utils/generateFilter.d.ts

@@ -1,4 +1,4 @@
 export declare const generateFilter: (filters?: any[]) => {
-    cql_filter: string;
+    filter: string;
     bbox: string;
 };

package/dist/data_providers/wfs/utils/generateFilter.js

@@ -1,45 +1,100 @@
-import { mapOperator } from "./mapOperator";
+const map_ogc_filer = (input) => {
+    switch (input) {
+        case "eq":
+        case "ne":
+            return "PropertyIsEqualTo";
+        case "gt":
+            return "PropertyIsGreaterThan";
+        case "gte":
+            return "PropertyIsGreaterThanOrEqualTo";
+        case "lt":
+            return "PropertyIsLessThan";
+        case "lte":
+            return "PropertyIsLessThanOrEqualTo";
+        case "contains":
+        case "containss":
+        case "ncontains":
+        case "ncontainss":
+        case "startswith":
+        case "startswiths":
+        case "nstartswith":
+        case "nstartswiths":
+        case "endswith":
+        case "endswiths":
+        case "nendswith":
+            return "PropertyIsLike";
+        default:
+            throw new Error(`[wfs-data-provider]: Unssuported operator ${input}`);
+    }
+};
 export const generateFilter = (filters) => {
-    const array_filter = [];
     let bbox = '';
-    if (filters) {
+    let ogc_filter = '';
+    if (filters && filters.length > 0) {
+        const doc = document.implementation.createDocument('', 'Filter', null);
+        //doc.documentElement.setAttribute('xmlns:fes',"http://www.opengis.net/fes/2.0") // Namespace pour WFS 2
+        const and = doc.createElement('And');
+        let filters_root;
+        if (filters.length > 1) {
+            doc.documentElement.appendChild(and);
+            filters_root = and;
+        }
+        else {
+            filters_root = doc.documentElement;
+        }
         filters.map((filter) => {
-            if (filter.operator !== "or" && filter.operator !== "and" && "field" in filter) { // LogicalFilter
-                const mappedOperator = mapOperator(filter.operator);
-                if (filter.field === "geometry") {
-                    bbox = filter.value;
-                }
-                else {
-                    const value = (() => {
-                        switch (filter.operator) {
-                            case "contains":
-                            case "containss":
-                            case "ncontains":
-                            case "ncontainss":
-                                return `'%${filter.value}%'`;
-                            case "startswith":
-                            case "startswiths":
-                            case "nstartswith":
-                            case "nstartswiths":
-                                return `'${filter.value}%'`;
-                            case "endswith":
-                            case "endswiths":
-                            case "nendswith":
-                            case "nendswiths":
-                                return `'%${filter.value}'`;
-                            case "in":
-                                return `(${filter.value.map((i) => `'${i}'`).join(',')})`;
-                            default:
-                                return `'${filter.value}'`;
-                        }
-                    })();
-                    array_filter.push(`${filter.field} ${mappedOperator} ${value}`);
-                }
-            }
-            else { //Conditionnal filter
+            if (filter.field === "geometry") { // TODO utiliser les filtres OGC pour filtrage geom ?
+                bbox = filter.value;
+                return;
+            }
+            if (filter.operator === "or" && filter.operator === "and") {
                 throw new Error(`[wfs-data-provider]: Condtionnal filter 'OR' not implemented yet `);
             }
+            const f = doc.createElement(map_ogc_filer(filter.operator));
+            let el = doc.createElement('PropertyName'); // ValueReference sur WFS 2 ?
+            el.textContent = filter.field;
+            f.appendChild(el);
+            el = doc.createElement('Literal');
+            if ((["contains", "containss", "ncontains", "ncontainss",
+                "startswith", "startswiths", "nstartswith", "nstartswiths",
+                "endswith", "endswiths", "nendswith", "nendswiths" // Opérateurs match
+            ].includes(filter.operator))) {
+                f.setAttribute('wildCard', '%');
+                f.setAttribute('singleChar', '_');
+                f.setAttribute('escapeChar', '\\');
+                f.setAttribute('matchCase', 'false');
+            }
+            if ((["containss", "ncontainss",
+                "startswiths", "nstartswiths",
+                ,
+                "endswiths", , "nendswiths" // Opérateurs case-sensitve
+            ].includes(filter.operator))) {
+                f.setAttribute('matchCase', 'true');
+            }
+            if (["contains", "containss", "ncontains", "ncontainss"].includes(filter.operator)) {
+                el.textContent = `%${filter.value}%`;
+            }
+            else if (["startswith", "startswiths", "nstartswith", "nstartswiths"].includes(filter.operator)) {
+                el.textContent = `${filter.value}%`;
+            }
+            else if (["endswith", "endswiths", "nendswith", "nendswiths"].includes(filter.operator)) {
+                el.textContent = `%${filter.value}`;
+            }
+            else {
+                el.textContent = filter.value;
+            }
+            f.appendChild(el);
+            if (filter.operator.startsWith('n')) { // Opérateur NOT
+                const not = doc.createElement('Not');
+                not.appendChild(f);
+                filters_root.appendChild(not);
+            }
+            else {
+                filters_root.appendChild(f);
+            }
         });
+        ogc_filter = new XMLSerializer().serializeToString(doc);
+        //console.log('xml', ogc_filter)
     }
-    return { cql_filter: array_filter.join(' and '), bbox: bbox };
+    return { filter: ogc_filter, bbox: bbox };
 };

package/dist/data_providers/wfs/utils/index.d.ts

@@ -1,4 +1,3 @@
-export { mapOperator } from "./mapOperator";
 export { generateSort } from "./generateSort";
 export { generateFilter } from "./generateFilter";
 export { axiosInstance } from "./axios";

package/dist/data_providers/wfs/utils/index.js

@@ -1,4 +1,3 @@
-export { mapOperator } from "./mapOperator";
 export { generateSort } from "./generateSort";
 export { generateFilter } from "./generateFilter";
 export { axiosInstance } from "./axios";

package/dist/index.d.ts

@@ -25,5 +25,6 @@ import { dataProvider as FileProvider } from "./data_providers/file";
 export { WfsProvider, DatafairProvider, FileProvider };
 export type { SimpleRecord, Partner, RouteConfig } from "./types";
 export type { LegendItem } from "./components/MapLegend/MapLegend";
+export type { DashboardConfig } from "./components/Layout/DashboardApp";
 import * as DSL from './dsl';
 export { DSL };

package/dist/utils/useApi.js

@@ -11,4 +11,8 @@ export const useApi = ({ dataProvider, resource, filters, pagination, sorters, m
     enabled: enabled,
     placeholderData: (prev) => prev,
     staleTime: 5 * 60 * 1e3, //Default staletime 5min
+    throwOnError: (err) => {
+        console.error(err);
+        return false;
+    },
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",
@@ -92,7 +92,6 @@
     "react-dom": "^18.3.1",
     "react-icons": "5.4",
     "react-map-gl": "^7.1.7",
-    "react-router-dom": "^6.25.1",
-    "recharts": "^2.15.3"
+    "react-router-dom": "^6.25.1"
   }
 }