@geo2france/api-dashboard 1.9.1 → 1.10.1

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

@@ -24,6 +24,7 @@ type dataset = {
     isFetching: boolean;
     isError: boolean;
     producers?: any[];
+    geojson?: any;
 };
 type ControlContextType = {
     values: Record<string, any>;

package/dist/components/Dataset/Dataset.js

@@ -86,7 +86,7 @@ export const DSL_Dataset = ({ children, id, provider: provider_input, type: prov
     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 });
+            datasetRegistryContext({ id: id, resource: resource, data: finalData, isFetching: isFetching, isError: isError, producers: producers, geojson: data?.geojson });
             //Ajouter une info pour distinguer les erreurs du fourniseurs et celles des transformers ?
         }
     }, [resource, data, isFetching, someFetching, children]);

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

@@ -5,6 +5,7 @@ export declare const useDataset: (dataset_id?: string) => {
     isFetching: boolean;
     isError: boolean;
     producers?: any[];
+    geojson?: any;
 } | undefined;
 export declare const useDatasets: (dataset_ids?: string[]) => {
     id: string;
@@ -13,6 +14,7 @@ export declare const useDatasets: (dataset_ids?: string[]) => {
     isFetching: boolean;
     isError: boolean;
     producers?: any[];
+    geojson?: any;
 }[] | undefined;
 export declare const useAllDatasets: () => {
     id: string;
@@ -21,4 +23,5 @@ export declare const useAllDatasets: () => {
     isFetching: boolean;
     isError: boolean;
     producers?: any[];
+    geojson?: any;
 }[] | undefined;

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

@@ -0,0 +1,59 @@
+import type { AnyLayer } from 'react-map-gl/maplibre';
+import { AnyPaint } from 'mapbox-gl';
+import React from 'react';
+import 'maplibre-gl/dist/maplibre-gl.css';
+type LayerType = AnyLayer["type"];
+export declare const map_locale: {
+    'CooperativeGesturesHandler.WindowsHelpText': string;
+    'CooperativeGesturesHandler.MacHelpText': string;
+    'CooperativeGesturesHandler.MobileHelpText': string;
+};
+/**
+ * Une carto simple avec un layer
+ *
+ *  */
+interface MapProps extends MapLayerProps {
+    /** Afficher une popup après un click sur la carte */
+    popup?: boolean;
+    /** Titre du graphique */
+    title?: string;
+}
+export declare const Map: React.FC<MapProps>;
+interface MapLayerProps {
+    /** Identifiant du jeu de données */
+    dataset: string;
+    /** Couleur des symboles */
+    color?: string;
+    /** Layer Type */
+    type?: LayerType;
+    /** Les paint properties de maplibre cf. https://maplibre.org/maplibre-style-spec/layers/#paint */
+    paint?: AnyPaint;
+    /** Colonne contenant la variable à représenter */
+    categoryKey?: string;
+    /** Colonne contenant la coordonnée x / longitude */
+    xKey?: string;
+    /** Colonne contenant la coordonnées y / latitude */
+    yKey?: string;
+}
+/**
+ * Composant à utiliser comme enfant d'une <Map>
+ * Ajoute une couche (layer) à partir d'un dataset
+ *
+ * @param { MapLayerProps } props
+ * @returns { ReactElement }
+ */
+export declare const MapLayer: React.FC<MapLayerProps>;
+export interface IMapBaseLayerProps {
+    layer: 'osm' | 'ortho';
+    tileSize?: number;
+}
+/**
+ * Composant à utiliser comme enfant d'une <Map>
+ * Permet d'ajouter un fond de plan (OSM ou orthophoto)
+ * devnote : couches spécifiques Hauts-de-France
+ *
+ * @param { IMapBaseLayerProps } props
+ * @returns { ReactElement }
+ */
+export declare const BaseLayer: React.FC<IMapBaseLayerProps>;
+export {};

package/dist/components/Map/Map.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Composant carto
+import Maplibre, { Layer, Source, useMap, Popup } from 'react-map-gl/maplibre';
+import { useEffect, useRef, useState } from "react";
+import { useDataset } from '../Dataset/hooks';
+import bbox from '@turf/bbox';
+import { getType } from '@turf/invariant';
+import { featureCollection, point } from '@turf/helpers';
+import { usePalette } from '../Palette/Palette';
+import { from, op } from 'arquero';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { LegendControl } from '../MapLegend/MapLegend';
+import { useBlockConfig } from '../DashboardPage/Block';
+import { parseNumber } from '../../utils/parsers';
+export const map_locale = {
+    'CooperativeGesturesHandler.WindowsHelpText': 'Utilisez Ctrl + molette pour zommer sur la carte.',
+    'CooperativeGesturesHandler.MacHelpText': 'Utilisez ⌘ + molette pour zommer sur la carte.',
+    'CooperativeGesturesHandler.MobileHelpText': 'Utilisez deux doights pour déplacer la carte.',
+};
+/** Construire un geojson a partir d'un tableau de données*/
+const build_geojson = (params) => {
+    const { data, xKey, yKey } = params;
+    const features_collection = featureCollection(data.map((e) => {
+        const [x, y] = [parseNumber(e[xKey]), parseNumber(e[yKey])];
+        return point([x, y], { ...e });
+    }));
+    return features_collection;
+};
+export const Map = ({ dataset, color, type, paint, categoryKey, popup = false, title, xKey, yKey }) => {
+    const mapRef = useRef(null);
+    const [clickedFeature, setClickedFeature] = useState(undefined);
+    useBlockConfig({ title: title });
+    const onClickMap = (evt) => {
+        setClickedFeature({ ...evt.features[0], ...{ lngLat: evt.lngLat } });
+    };
+    const onMouseMoveMap = (evt) => {
+        if (!mapRef.current) {
+            return;
+        }
+        if (evt?.features.length > 0 && popup) {
+            mapRef.current.getCanvasContainer().style.cursor = 'pointer';
+        }
+        else {
+            mapRef.current.getCanvasContainer().style.cursor = 'grab';
+        }
+    };
+    return (_jsxs(Maplibre, { cooperativeGestures: true, locale: map_locale, ref: mapRef, interactiveLayerIds: [dataset], onClick: onClickMap, onMouseMove: onMouseMoveMap, style: { width: '100%', height: '500px' }, children: [_jsx(BaseLayer, { layer: "osm" }), _jsx(MapLayer, { dataset: dataset, color: color, type: type, paint: paint, categoryKey: categoryKey, xKey: xKey, yKey: yKey }), clickedFeature?.properties && categoryKey && popup &&
+                _jsxs(Popup, { longitude: clickedFeature.lngLat.lng, latitude: clickedFeature.lngLat.lat, onClose: () => { setClickedFeature(null); }, children: [_jsxs("div", { children: [" ", clickedFeature.properties[categoryKey], " "] }), " "] })] }));
+};
+/**
+ * Composant à utiliser comme enfant d'une <Map>
+ * Ajoute une couche (layer) à partir d'un dataset
+ *
+ * @param { MapLayerProps } props
+ * @returns { ReactElement }
+ */
+export const MapLayer = ({ dataset, categoryKey, color = 'red', type = 'circle', paint, xKey, yKey }) => {
+    const { current: map } = useMap();
+    const data = useDataset(dataset);
+    // src (lib proj4 pour convertir)
+    // Si x et y sont definie, on construit le geojson
+    const geojson = xKey && yKey && data?.data ?
+        build_geojson({ data: data.data, xKey: xKey, yKey: yKey })
+        : data?.geojson; // Sinon on utilise le geojson (fournisseur wfs)
+    const geom_type = geojson?.features?.[0] && getType(geojson?.features?.[0]);
+    /** Type de données dans categoryKey (string ou number) */
+    const type_value = categoryKey && typeof (data?.data?.[0]?.[categoryKey]);
+    /** Valeurs distinctes (si type string) */
+    const values = (type_value === 'string') && categoryKey && data?.data && from(data?.data).rollup({ a: op.array_agg_distinct(categoryKey) }).get('a', 0) || undefined;
+    /** Couleurs de la palette */
+    const colors = usePalette({ nColors: Array.isArray(values) ? values?.length : 1 });
+    const match = Array.isArray(values) ? values?.map((v, i) => ({
+        val: v,
+        color: colors?.[i],
+    })) : undefined;
+    /** Expression mapLibre qui permet de mapper les valeurs et les couleurs de la palette */
+    const expression = match && categoryKey
+        ? [
+            "match",
+            ["get", categoryKey],
+            ...match?.flatMap((s) => [s.val, s.color]),
+            "purple" // fallback
+        ]
+        : undefined;
+    const legendItems = match?.map((e) => ({ color: e.color, label: e.val })).sort((a, b) => a.label.localeCompare(b.label)) || [];
+    const layers = [];
+    /** POINT */
+    if (geom_type === 'Point' || geom_type === 'MultiPoint') {
+        const default_paint = { "circle-color": expression ?? color ?? colors[0] };
+        type = 'circle';
+        layers.push(_jsx(Layer, { id: dataset, type: "circle", paint: (paint ?? default_paint) }, dataset));
+    }
+    /** POLYGON */
+    else if (geom_type === 'Polygon' || geom_type === 'MultiPolygon') {
+        const default_paint = { "fill-color": expression ?? color ?? colors[0] };
+        type = 'fill';
+        layers.push(_jsx(Layer, { id: dataset, type: "fill", paint: (paint ?? default_paint) }, dataset));
+        layers.push(_jsx(Layer, { id: dataset + '_line', type: 'line', paint: { "line-width": 0.5, "line-color": '#fff' } }, dataset + '_line'));
+    }
+    /** LINESTRING */
+    else if (geom_type === 'LineString' || geom_type === 'MultiLineString') {
+        const default_paint = { "line-color": expression ?? color ?? colors[0] };
+        type = 'line';
+        layers.push(_jsx(Layer, { id: dataset, type: "line", paint: (paint ?? default_paint) }, dataset));
+    }
+    //devnote : regarder la colonne contenant les valeurs pour proposer une représentation (catégorie ou choroplèthe)
+    useEffect(() => {
+        if (geojson && geojson.features.length > 0) { // do not fitbound if no features
+            const box = bbox(geojson).slice(0, 4);
+            map?.fitBounds(box, { padding: 20 });
+        }
+    }, [geojson, map]);
+    return (_jsxs(_Fragment, { children: [geojson &&
+                _jsx(Source, { type: "geojson", data: geojson, children: layers }), _jsx(LegendControl, { items: legendItems })] }));
+};
+/**
+ * Composant à utiliser comme enfant d'une <Map>
+ * Permet d'ajouter un fond de plan (OSM ou orthophoto)
+ * devnote : couches spécifiques Hauts-de-France
+ *
+ * @param { IMapBaseLayerProps } props
+ * @returns { ReactElement }
+ */
+export const BaseLayer = ({ layer, tileSize = 256 }) => {
+    //TODO : ne pas utiliser par défaut le fond de plan geo2france ?
+    const t = (() => {
+        switch (layer) {
+            case 'osm':
+                return `https://osm.geo2france.fr/mapcache/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&LAYERS=grey&TILED=true&WIDTH=${tileSize}&HEIGHT=${tileSize}&SRS=EPSG%3A3857&STYLES=&BBOX={bbox-epsg-3857}`;
+            case 'ortho':
+                return `https://www.geo2france.fr/geoserver/geo2france/ows/?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&srs=EPSG:3857&transparent=true&width=${tileSize}&height=${tileSize}&layers=ortho_regionale_2018_rvb`;
+        }
+    })();
+    const source_raster = {
+        type: 'raster',
+        attribution: 'OpenStreetMap', //fixme
+        tiles: [
+            t
+        ],
+        tileSize: tileSize
+    };
+    const layer_raster = {
+        'type': 'raster',
+        'paint': {}
+    };
+    return (_jsx(Source, { ...source_raster, children: _jsx(Layer, { ...layer_raster }) }));
+};

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

@@ -10,3 +10,9 @@ interface MapLegendProps {
 }
 declare const MapLegend: React.FC<MapLegendProps>;
 export default MapLegend;
+interface LegendControlProps {
+    /** Elements de légende */
+    items: LegendItem[];
+}
+/** Un control pour Maplibre qui permet d'afficher une légende */
+export declare const LegendControl: React.FC<LegendControlProps>;

package/dist/components/MapLegend/MapLegend.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { useControl } from "react-map-gl/maplibre";
 const default_style = {
     backgroundColor: 'rgba(256,256,256,0.8)',
     padding: '10px',
@@ -17,3 +20,29 @@ const MapLegend = ({ items, style }) => {
                     } }), _jsx("span", { children: item.label })] }, index))) }));
 };
 export default MapLegend;
+/** Un control pour Maplibre qui permet d'afficher une légende */
+export const LegendControl = ({ items }) => {
+    const rootRef = useRef(null);
+    useControl(() => {
+        const container = document.createElement("div");
+        //container.className = "maplibregl-ctrl"; // pour hériter du style par défaut
+        const root = createRoot(container);
+        rootRef.current = root;
+        const control = {
+            onAdd: (_map) => {
+                root.render(_jsx(MapLegend, { items: items }));
+                return container;
+            },
+            onRemove: () => {
+                container.parentNode?.removeChild(container);
+            },
+        };
+        return control;
+    }, { position: "top-right" });
+    useEffect(() => {
+        if (rootRef.current) {
+            rootRef.current.render(_jsx(MapLegend, { items: items }));
+        }
+    }, [items]);
+    return null;
+};

package/dist/dsl/index.d.ts

@@ -18,4 +18,5 @@ import { Join } from "../components/Dataset/Join";
 import { ChartEcharts } from "../components/Charts/ChartEcharts";
 import { useBlockConfig } from "../components/DashboardPage/Block";
 import { Statistics, StatisticsCollection } from "../components/Charts/Statistics";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, };
+import { MapLayer, Map } from "../components/Map/Map";
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, Map, MapLayer };

package/dist/dsl/index.js

@@ -18,4 +18,5 @@ import { Join } from "../components/Dataset/Join";
 import { ChartEcharts } from "../components/Charts/ChartEcharts";
 import { useBlockConfig } from "../components/DashboardPage/Block";
 import { Statistics, StatisticsCollection } from "../components/Charts/Statistics";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, };
+import { MapLayer, Map } from "../components/Map/Map";
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, Map, MapLayer };

package/dist/utils/parsers.d.ts

@@ -0,0 +1,2 @@
+/** Parser automatiquement un nombre au format : 0.6, "0.6" ou "0,6" */
+export declare const parseNumber: (value: string | number) => number;

package/dist/utils/parsers.js

@@ -0,0 +1,14 @@
+/** Parser automatiquement un nombre au format : 0.6, "0.6" ou "0,6" */
+export const parseNumber = (value) => {
+    if (typeof value === "number") {
+        return value;
+    }
+    if (typeof value === "string") {
+        const normalized = value.replace(",", ".");
+        const num = parseFloat(normalized);
+        if (!isNaN(num)) {
+            return num;
+        }
+    }
+    return NaN;
+};

package/dist/utils/useMapControl.d.ts

@@ -4,5 +4,8 @@ interface useMapControlProps {
     legendElement: React.ReactElement;
     position?: ControlPosition;
 }
+/** A déprécier ? utiliser plutôt le composant LegendControl ?
+ * Uniquement pour legacy
+ */
 export declare const useMapControl: ({ mapRef, legendElement, position }: useMapControlProps) => void;
 export {};

package/dist/utils/useMapControl.js

@@ -1,6 +1,9 @@
 // Ajouter un control (element HTML) sur une carte
 import { useEffect } from "react";
 import { createRoot } from 'react-dom/client';
+/** A déprécier ? utiliser plutôt le composant LegendControl ?
+ * Uniquement pour legacy
+ */
 export const useMapControl = ({ mapRef, legendElement, position = 'top-right' }) => {
     useEffect(() => {
         if (mapRef?.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.9.1",
+  "version": "1.10.1",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",
@@ -46,18 +46,22 @@
   },
   "dependencies": {
     "@iconify/react": "^6.0.1",
+    "@turf/bbox": "^7.2.0",
+    "@turf/helpers": "^7.2.0",
+    "@turf/invariant": "^7.2.0",
     "alasql": "^4.6.6",
     "arquero": "^8.0.3",
-    "axios": "^1.7.4",
+    "axios": "^1.12.2",
     "chroma-js": "^3.1.2",
-    "echarts": "^5.5.1",
-    "echarts-for-react": "^3.0.2",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.4",
     "query-string": "~7.1.3",
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
   },
   "devDependencies": {
+    "@ant-design/icons": "^6.0.2",
     "@iconify/json": "^2.2.382",
     "@tanstack/react-query": "^5.51.11",
     "@testing-library/dom": "^10.4.0",
@@ -78,7 +82,9 @@
     "antd": "^5.24.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "maplibre-gl": "^4.7.1",
     "react": "^18.3.1",
+    "react-map-gl": "^7.1.9",
     "react-router-dom": "^6.25.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
@@ -88,11 +94,13 @@
     "vite-plugin-svgr": "^4.2.0"
   },
   "peerDependencies": {
+    "@ant-design/icons": "^6.0.2",
     "@tanstack/react-query": "^5.51.11",
     "antd": "^5.18.3",
+    "maplibre-gl": "^4.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^7.1.9",
     "react-router-dom": "^6.25.1"
   }
 }

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

@@ -1 +0,0 @@
-export declare const mapOperator: (operator: any) => string;

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

@@ -1,36 +0,0 @@
-export const mapOperator = (operator) => {
-    switch (operator) {
-        case "ne":
-            return '<>';
-        case "gte":
-            return '>=';
-        case "gt":
-            return '>';
-        case "lte":
-            return `<=`;
-        case "lt":
-            return `<`;
-        case "eq":
-            return "=";
-        case "contains":
-        case "startswith":
-        case "endswith":
-            return "ilike";
-        case "containss":
-        case "startswiths":
-        case "endswiths":
-            return "like";
-        case "ncontains":
-        case "nstartswith":
-        case "nendswith":
-            return "not ilike";
-        case "ncontainss":
-        case "nstartswiths":
-        case "nendswiths":
-            return "not like";
-        case "in":
-            return operator;
-        default:
-            return "";
-    }
-};

package/dist/utils/useBlockConfig.d.ts

@@ -1,7 +0,0 @@
-import { SimpleRecord } from "../types";
-interface BlocConfig {
-    title?: string;
-    dataExport?: SimpleRecord[];
-}
-export declare const useBlockConfig: ({ title, dataExport }: BlocConfig) => void;
-export {};

package/dist/utils/useBlockConfig.js

@@ -1,9 +0,0 @@
-import { useContext, useEffect } from "react";
-import { ChartBlockContext } from "../components/DashboardPage/Block";
-export const useBlockConfig = ({ title, dataExport }) => {
-    const blockContext = useContext(ChartBlockContext);
-    useEffect(() => blockContext?.setConfig({
-        title: title,
-        dataExport: dataExport
-    }), [title, dataExport]);
-};