Merge pull request #19 from geo2france/dev

V1

Author: jbdesbas

.gitignore

@@ -12,6 +12,13 @@
 /build
 /dist
 
+# doc
+/docs
+*.excalidraw
+
+# data
+/public/data
+
 # misc
 .DS_Store
 .env.local

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "src/refine-datafair"]
 	path = src/refine-datafair
 	url = [email protected]:geo2france/refine-datafair.git
+[submodule "src/refine-wfs"]
+	path = src/refine-wfs
+	url = [email protected]:geo2france/refine-wfs.git

README.MD

@@ -26,6 +26,72 @@ Le contenu généré dans le dossier `dist` peut être coller sur un serveur htt
 
 - **Ademe** : les données sont récupérés sur le [portail opendata](https://data.ademe.fr/) via l'API Datafair. Un [connecteur](https://github.com/geo2france/refine-datafair) a été développé pour cet usage.
 
+## Développement
+
+### DashboardElement
+
+Le composant [DashboardElement](src/components/dashboard_element/index.tsx) peut-être utilisé pour ajouter des fonctionnalités à un _element_ (graphique ou cartographique) de tableau de bord.
+Il ajoute :
+- Une _card_ servant de conteneur, avec titre et crédit.
+- Un menu contextuel permettant à l'utilisateur de :
+    - Afficher le contenu en plein écran
+    - Exporter le contenu en format image (png)
+
+Pour fonctionner correctement, le composant enfant doit exporter la référence de l'élément graphique (_echart_ ou _maplibre_) à l'aide de du hook `useDashboardElement`.
+
+Exemples :
+```typescript
+export const MapIsdnd: React.FC<IMapProps> = ({ data, style }) => {
+  const mapRef = useRef<any>(null);
+  useDashboardElement({chartRef:mapRef})
+  [...]
+  return (
+    <Map
+      reuseMaps
+      preserveDrawingBuffer={true}
+      ref={mapRef}
+      style={style} [...]/>
+    )
+}
+```
+Pour les cartes, la propriété `preserveDrawingBuffer={true}` est nécessaire pour permettre l'export PNG (sinon, le fichier exporté sera blanc).
+
+```typescript
+export const ChartIsdndGlobal: React.FC<IChartIsdndGlobalProps> = ({ data, style}) => {
+    const chartRef = useRef<any>();
+    useDashboardElement({chartRef})
+    [...]
+    return (
+        <ReactECharts
+        option={option} ref={chartRef} style={style} />
+    )
+}
+```
+
+### useChartEvents
+
+Le hook `useChartEvents` permet de définir des fonctions callback à executer au click (_onClick_) ou au survol (_onFocus_) des graphiques.
+Le callback reçoit comme paramètres un objet qui contient des informations sur l'élément qui l'a déclanché (nom de la série, données, etc.). La structure de l'objet varie selon le type de graphique.
+
+Généralement, le callback sera une fonction qui va modifier un état (_state_) du parent (_setState_).
+
+TODO : Exemple concret montrant comment l'année cliquée sur le graphique est remontée à la page.
+
+Exemple :
+```typescript
+    useChartEvents({chartRef, onFocus})
+```
+
+### useChartActionHightlight
+
+Le hook `useChartActionHightlight` permet de manuellement mettre en évidence (_highlight_) une portion du graphique.
+L'élement à éclairer peut-être défini par son nom ou le nom de sa série (ou plus rarement son index).
+
+TODO : Exemple concret avec _bar_ et _pie_ et cas d'usage.
+
+Notes : le _hilight_ est un effet subtil. Souvent on privilégiera un changement de couleur pour mettre en évidence une information importante (par exemple l'année sélectionnée).
+Le _hilight_ sera plus souvent utilisé pour mettre un évidence un élément similaire à plusieurs graphique lors du survol d'un des deux graphique.
+
 ## Learn More
 
 To learn more about **Refine**, please check out the [Documentation](https://refine.dev/docs)

package-lock.json

@@ -10,14 +10,14 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
-    "@refinedev/antd": "^5.37.5",
-    "@refinedev/cli": "^2.16.27",
-    "@refinedev/core": "^4.48.0",
-    "@refinedev/devtools": "^1.1.34",
-    "@refinedev/inferencer": "^4.5.20",
-    "@refinedev/kbar": "^1.3.6",
-    "@refinedev/react-router-v6": "^4.5.6",
-    "@refinedev/simple-rest": "^5.0.1",
+    "@refinedev/antd": "^5.37.6",
+    "@refinedev/cli": "^2.16.29",
+    "@refinedev/core": "^4.49.0",
+    "@refinedev/devtools": "^1.1.37",
+    "@refinedev/inferencer": "^4.6.0",
+    "@refinedev/kbar": "^1.3.8",
+    "@refinedev/react-router-v6": "^4.5.7",
+    "@refinedev/simple-rest": "^5.0.4",
     "@types/geojson": "^7946.0.14",
     "alasql": "^4.2.5",
     "antd": "^5.0.5",

package.json

@@ -2,10 +2,12 @@ import { Refine } from "@refinedev/core";
 import { ThemedLayoutV2, notificationProvider, RefineThemes } from "@refinedev/antd";
 import routerBindings, { DocumentTitleHandler, UnsavedChangesNotifier } from "@refinedev/react-router-v6";
 import {dataProvider as dfDataProvider} from "./refine-datafair";
+import {dataProvider as wfsDataProvider} from "./refine-wfs";
 import { HashRouter, Routes, Route, Outlet } from "react-router-dom";
 
-import { ConfigProvider } from "antd";
+import { ConfigProvider, ThemeConfig } from "antd";
 import "@refinedev/antd/dist/reset.css";
+import './index.css';
 
 import { DmaComponent } from "./components/pages/dma";
 import { ressources } from "./ressources"
@@ -20,14 +22,29 @@ import { RepPchimPage } from "./components/pages/rep_pchim";
 import { RepTlcPage } from "./components/pages/rep_tlc";
 import { RepMnuPage } from "./components/pages/rep_mnu";
 import { RepDispmedPage } from "./components/pages/rep_dispmed";
+import { ObjectifsPage } from "./components/pages/objectifs";
 
-const myTheme = {...RefineThemes.Orange, 
+const myTheme:ThemeConfig = {...RefineThemes.Orange, 
   token: {
     colorPrimary: "#DEAD8F",
     linkHoverDecoration:'underline',
     colorLink:'#FF6A48',
-    colorLinkHover:'#9D7156'
+    colorLinkHover:'#9D7156',
+    borderRadius:4,
     },
+  components:{
+    Timeline:{
+      itemPaddingBottom:40
+    },
+    Card:{
+      headerHeight:35,
+      headerFontSize:14,
+      paddingLG:0,
+    },
+    Form:{
+      labelColor:'rgba(0,0,0,0.7)'
+    }
+  }
 }
 
 const App: React.FC = () => {
@@ -38,7 +55,8 @@ const App: React.FC = () => {
           routerProvider={routerBindings}
           dataProvider={{
               default:dfDataProvider("https://data.ademe.fr/data-fair/api/v1/datasets"),
-              ademe_opendata:dfDataProvider("https://data.ademe.fr/data-fair/api/v1/datasets")
+              ademe_opendata:dfDataProvider("https://data.ademe.fr/data-fair/api/v1/datasets"),
+              geo2france:wfsDataProvider("https://www.geo2france.fr/geoserver/ows")
             }}
           notificationProvider={notificationProvider}
           resources={ressources}
@@ -77,6 +95,9 @@ const App: React.FC = () => {
               <Route path="cve">
                 <Route index element={<IncinerationtPage />} />
               </Route>
+              <Route path="objectifs">
+                <Route index element={<ObjectifsPage />} />
+              </Route>
               <Route path="*" element={<ErrorComponent />} />
             </Route>
           </Routes>

public/img/by.svg

@@ -1,5 +1,8 @@
-import { Typography } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import React from 'react';
+import CC from "/img/cc.svg";
+import BY from "/img/by.svg";
+
 
 const { Text, Link } = Typography;
 
@@ -13,18 +16,25 @@ export interface AttributionProps {
 }
 
 export const Attribution: React.FC<AttributionProps> = ({ data }) => {
+    const licence_logo_style:React.CSSProperties = {height:'12px'}
+
     const plural = data.length > 1 ? 's' : ''
     return (
-        <>
-            <Text type="secondary">{`Source${plural} : `} 
+        <div style={{paddingLeft:4, paddingBottom:4}}>
+            <Text type="secondary">{`Source${plural} des données: `}
                 {data.map((e: SourceProps, i:number) => (
                     <React.Fragment key={i}>
                         <Link href={e.url}>{e.name}</Link>
                         {i < data.length - 1 ? ", " : ""}
                     </React.Fragment>
                 ))}
+                <span> | Réalisation : <a href='https://www.hautsdefrance.fr/communique-de-presse-lancement-de-lobservatoire-dechets-matieres-odema-des-hauts-de-france/' >Odema</a> </span>
+                <Tooltip title="CC BY" placement="bottom">
+                    <img src={CC} style={licence_logo_style} />
+                    <img src={BY} style={licence_logo_style}></img>
+                </Tooltip>
             </Text>
 
-        </>
+        </div>
     )
 }

public/img/cc.svg

@@ -1,17 +1,21 @@
-import React from "react";
+import React, { CSSProperties, useRef } from "react";
 import ReactECharts from 'echarts-for-react';  // or var ReactECharts = require('echarts-for-react');
 import { BaseRecord } from "@refinedev/core";
 import type {EChartsOption, PieSeriesOption} from "echarts"
 import alasql from "alasql";
 import { chartBusinessProps } from "../../utils";
+import { useDashboardElement } from "../dashboard_element/hooks";
 
 export interface ChartCollectePerformanceProps {
     data: any[] | BaseRecord[]; // Spécifier les champs au niveau de la ressource
     data_territoire: any[] | BaseRecord[]; // Le endpoint précédent ne fournie pas la POPANNEE
     c_region?:string
+    style? : CSSProperties
   }
 
-export const ChartCollectePerformance: React.FC<ChartCollectePerformanceProps> = ( {data, data_territoire, c_region='32'} ) => {
+export const ChartCollectePerformance: React.FC<ChartCollectePerformanceProps> = ( {data, data_territoire, c_region='32', style} ) => {
+    const chartRef = useRef<any>()
+    useDashboardElement({chartRef})
 
     const data_pie = alasql(`SELECT TYP_COLLECTE, (sum(TONNAGE_T_HG) / sum(data_territoire.VA_POPANNEE))*1000 AS RATIO_KG_HAB 
                         FROM ? data 
@@ -66,6 +70,6 @@ export const ChartCollectePerformance: React.FC<ChartCollectePerformanceProps> =
 
     return(
         <ReactECharts
-        option={option} style={{ height: "450px"}}/>
+        option={option} ref={chartRef} style={style}/>
     )
 }

src/App.tsx

@@ -3,7 +3,7 @@ import { chartBusinessProps } from "../../utils"
 import { BarSeriesOption, EChartsOption } from "echarts";
 import ReactECharts from 'echarts-for-react'; 
 import alasql from "alasql";
-import { useRef } from "react";
+import { CSSProperties, useRef } from "react";
 import { useChartActionHightlight, useChartEvents } from "../../utils/usecharthighlight";
 
 export interface ChartEvolutionRepCollecteProps{
@@ -12,11 +12,12 @@ export interface ChartEvolutionRepCollecteProps{
     year?:number
     onFocus?:any;
     focus_item?:string;
+    style? : CSSProperties
 }
 
 
 //TODO ajouter un "Segmented Controls" pour switcher vers des bares normalized ?
-export const ChartEvolutionRepCollecte: React.FC<ChartEvolutionRepCollecteProps> = ({ data, filiere, onFocus, focus_item, year }) => {
+export const ChartEvolutionRepCollecte: React.FC<ChartEvolutionRepCollecteProps> = ({ data, filiere, onFocus, focus_item, year, style }) => {
     const chartRef = useRef<any>()
 
     useChartEvents({chartRef:chartRef, onFocus:onFocus})
@@ -71,5 +72,5 @@ export const ChartEvolutionRepCollecte: React.FC<ChartEvolutionRepCollecteProps>
         ],
     }
     return (<ReactECharts
-        option={option} ref={chartRef} style={{ height: "450px" }} />)
+        option={option} ref={chartRef} style={ style } />)
 }