API-Dashboard

Collection de composants React pour faciliter la création de tableaux de bords territoriaux.

Demo :

• Odema (code source)
• Clicnat

Points forts

• ✅ Compatible avec de nombreux fournisseurs de données (WFS, Datafair, fichiers statiques csv ou json, etc.),
• ✅ Traitements de données possibles (filtres, agréations, etc. via SQL ou JavaScript),
• ✅ Créez vos dataviz en utilisants Apache ECharts ou n'importe quelle bibliothèque web,
• ✅ Application cliente : peut-être mise à disposition des utilisateurs via un simple server web (HTTP/HTTPS) sans configuration particulière,
• ✅ Écriture des tableaux de bord en JSX/TSX : combiner la clarté du XML avec la souplesse et puissance du JavaScript/TypeScript.

Installation

Installer nvm et Node.js

• Sur Windows : https://github.com/coreybutler/nvm-windows?tab=readme-ov-file#install-nvm-windows
• Sur Linux : apt install nvm

Ensuite, depuis un terminal (Powershell ou autre) :

# Installer la dernière vers LTS de Node.js
nvm install --lts

Créer un tableau de bord

Pour créer un nouveau tableau de bord :

npm init @geo2france/api-dashboard@latest nom-du-projet
cd nom-du-projet && npm install

# Lancer le serveur de développement
npm run dev

Consulter la documentation du projet.

Custom visual identity

Personnalisez l'apparence de votre dashboard sans modifier la lib :

// Forme courte (1 ligne) — démarrage rapide
<DashboardApp
  visualIdentity={{ name: 'mon-projet', primary: '#FF6B35', logo: '/logo.svg' }}
  mode="auto"
/>

Pour un contrôle plus fin (couleurs multiples, typographie, dark mode explicite), utilisez createVisualIdentity() :

import { createVisualIdentity } from '@geo2france/api-dashboard';

export const myVisualIdentity = createVisualIdentity({
  name: 'mon-projet',
  light: { colorPrimary: '#FF6B35', colorLink: '#0046AD' },
  typography: { fontFamily: 'Inter, sans-serif' },
  borderRadius: 8,
  logo: { src: '/logo.svg', alt: 'Mon Projet', srcDark: '/logo-white.svg' },
});

<DashboardApp visualIdentity={myVisualIdentity} mode="auto" />

Voir le CHANGELOG pour le guide de migration complet.