Composant · Données

DashboardGrid

WP20

DashboardGrid compose un canvas de tuiles analytiques par coordonnées de grille. Le mode éditable expose des contrôles accessibles pour déplacer et redimensionner les tuiles sans dépendance drag-and-drop.

Grille statique

Voir le code (Svelte)

<DashboardGrid
  label="Static grid"
  tiles={[{"id":"revenue","x":0,"y":0,"w":4,"h":2,"title":"Revenue","value":"$1.8M","description":"+12% vs previous period"},{"id":"conversion","x":4,"y":0,"w":4,"h":2,"title":"Conversion","value":"8.4%","description":"Qualified funnel"},{"id":"latency","x":8,"y":0,"w":4,"h":2,"title":"Latency","value":"124 ms","description":"P95 API response"},{"id":"pipeline","x":0,"y":2,"w":8,"h":2,"title":"Pipeline","value":"47 deals","description":"Open opportunities"},{"id":"risk","x":8,"y":2,"w":4,"h":2,"title":"Risk","value":"Low","description":"No critical alerts"}]}
/>

Mode édition

Voir le code (Svelte)

<DashboardGrid
  label="Edit mode"
  editable
  tiles={[{"id":"revenue","x":0,"y":0,"w":4,"h":2,"title":"Revenue","value":"$1.8M","description":"+12% vs previous period"},{"id":"conversion","x":4,"y":0,"w":4,"h":2,"title":"Conversion","value":"8.4%","description":"Qualified funnel"},{"id":"latency","x":8,"y":0,"w":4,"h":2,"title":"Latency","value":"124 ms","description":"P95 API response"},{"id":"pipeline","x":0,"y":2,"w":8,"h":2,"title":"Pipeline","value":"47 deals","description":"Open opportunities"},{"id":"risk","x":8,"y":2,"w":4,"h":2,"title":"Risk","value":"Low","description":"No critical alerts"}]}
/>

API du composant

Prop	Type	Par défaut
`tiles`	`DashboardGridTile[]`	requis
`columns`	`number`	`12`
`rowHeight`	`number`	`88`
`gap`	`number`	`16`
`editable`	`boolean`	`false`
`label`	`string`	`"Dashboard grid"`
`onLayout`	`(tiles) => void`	optionnel

DashboardGridTile = { id: string; x: number; y: number; w: number; h: number; title?: string; description?: string; value?: string }

Notes d'usage

Les collisions sont autorisées dans cette première version et se superposent dans la grille CSS. Le callback reçoit toujours le layout complet normalisé, dans l'ordre d'entrée.