LumyriaDocs

Customisation du Dashboard

Créez et personnalisez vos dashboards avec un système modulaire de drag & drop et des widgets redimensionnables.

Vue d'ensemble

Le système de dashboard de Lumyria offre une flexibilité totale pour organiser et visualiser vos métriques. Chaque équipe peut créer ses propres layouts, onglets et widgets personnalisés selon ses besoins spécifiques.

🎯 Fonctionnalités clés

  • Drag & Drop des widgets
  • Redimensionnement en temps réel
  • Sauvegarde automatique
  • Onglets multiples par équipe

📊 Types de widgets

  • Graphiques (barres, lignes, camembert)
  • Métriques numériques (KPIs)
  • Tableaux de données
  • Widgets personnalisés

Architecture du système

Composants principaux

CustomizableDashboard.tsx

Composant principal modulaire

DashboardGrid.tsx

Système de grille responsive

WidgetRegistry.tsx

Registre des types de widgets

Mode édition

Activation du mode édition

Le mode édition permet de modifier la disposition des widgets et d'ajouter de nouveaux éléments.

// Activer le mode édition
const [isEditMode, setIsEditMode] = useState(false)
const [layout, setLayout] = useState(savedLayout)
// Permissions requises
const canEdit = user.role === 'admin' || user.permissions.includes('dashboard.edit')

Drag & Drop

  • • Déplacement des widgets par glisser-déposer
  • • Redimensionnement avec les poignées
  • • Alignement automatique sur la grille
  • • Prévention des chevauchements

Sauvegarde

  • • Sauvegarde automatique toutes les 30s
  • • Sauvegarde manuelle avec Ctrl+S
  • • Historique des versions
  • • Restauration de layouts précédents

Gestion des onglets

Onglets multiples

Chaque équipe peut créer plusieurs onglets pour organiser ses différents dashboards par thématique.

Fonctionnalités des onglets

Création et gestion

  • • Création d'onglets personnalisés
  • • Renommage et réorganisation
  • • Suppression avec confirmation
  • • Duplication de layouts existants

Configuration

  • • Permissions par onglet
  • • Filtres par défaut
  • • Thèmes de couleur
  • • Refresh automatique

Système de grille responsive

Configuration de la grille

• Colonnes: 12 sur desktop, 6 sur tablet, 1 sur mobile
• Hauteur de ligne: 60px avec 10px de marge
• Responsive breakpoints: lg (1200px), md (768px), sm (480px)
• Auto-packing pour optimiser l'espace

Desktop

12 colonnes

Tablet

6 colonnes

Mobile

1 colonne

Bibliothèque de widgets

Lumyria propose une bibliothèque complète de widgets prêts à l'emploi, ainsi qu'un système de widgets personnalisés.

📊 Graphiques

  • • Barres horizontales/verticales
  • • Lignes et aires
  • • Camembert et donut
  • • Graphiques combinés

🔢 Métriques

  • • KPIs numériques
  • • Indicateurs de progression
  • • Jauges circulaires
  • • Comparaisons périodes

📋 Tableaux

  • • Tableaux de données
  • • Tri et filtrage
  • • Pagination
  • • Export CSV/Excel

🎨 Personnalisés

  • • Générateur de widgets
  • • Requêtes BigQuery custom
  • • Visualisations uniques
  • • Partage entre équipes

Configuration et permissions

Système de permissions

Les permissions de dashboard sont gérées au niveau de l'équipe avec des rôles granulaires : Viewer (lecture), Editor (modification), Admin (gestion complète).

Viewer

  • • Consultation des dashboards
  • • Filtrage des données
  • • Export des vues

Editor

  • • Toutes les permissions Viewer
  • • Modification des layouts
  • • Ajout/suppression de widgets
  • • Création d'onglets

Admin

  • • Toutes les permissions Editor
  • • Gestion des permissions
  • • Configuration équipe
  • • Templates de dashboard

Thèmes et apparence

Thèmes disponibles

Light (défaut)
Dark
Corporate Blue
Gradient

Personnalisation

  • • Couleurs de marque personnalisées
  • • Logos et branding d'équipe
  • • Polices personnalisées
  • • Variables CSS customisables
  • • Mode sombre automatique
  • • Préférences par utilisateur

Guides pratiques