git clone git@github.com:geo2france/odema-dashboard.git
git submodule init
git submodule update
npm install
npm run devCompilation et génération de la doc :
npm run build
npm run generate-docsLe contenu généré dans le dossier dist peut être coller sur un serveur http sans configuration particulière.
- Ademe : depuis le portail opendata de l'Ademe via l'API Datafair.
- Odema : depuis le datahub de Géo2France par flux WFS.
Les connecteurs Datafair Data Provider et WFS Data Provider ont été développés pour cet usage et sont utilisables par d'autres applications Refine.
Le composant DashboardElement 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 :
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).
export const ChartIsdndGlobal: React.FC<IChartIsdndGlobalProps> = ({ data, style}) => {
const chartRef = useRef<any>();
useDashboardElement({chartRef})
[...]
return (
<ReactECharts
option={option} ref={chartRef} style={style} />
)
}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 :
useChartEvents({chartRef, onFocus})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.
To learn more about Refine, please check out the Documentation
- Ant Design Docs
- React Router Docs
- REST Data Provider Docs
- Datafair Data Provider Docs
- WFS Data Provider Docs
This Refine project was generated with create refine-app.
MIT