Dataviz · piloté par store

DashboardGrid

Documenté

Grille de panneaux sérialisable : layout place les panneaux sur douze colonnes, avec déplacement et redimensionnement optionnels en mode éditable. Sans import DS : l’adaptateur rend son propre balisage et ne lit aucun store.

Disponibilité par framework

Framework	Forme
`Svelte`	Composant DashboardGrid (démo live ci-dessous).
`React`	Composant DashboardGrid (démo live ci-dessous).
`Vue`	Composant DashboardGrid (démo live ci-dessous).
`Angular`	Absent : aucun adaptateur.

Exemples

Trois panneaux sur douze colonnes : deux cartes côte à côte, une bande pleine largeur en dessous. Contenu des panneaux omis (rendu via snippet côté Svelte).

Grille trois panneaux

Voir le code (Svelte)

<div class="chart-wrapper">
  <DashboardGrid layout={{"columns":12,"panels":[{"id":"revenue","x":0,"y":0,"w":6,"h":2},{"id":"pipeline","x":6,"y":0,"w":6,"h":2},{"id":"risk","x":0,"y":2,"w":12,"h":1}]}} />
</div>

DashboardGrid natif (tuiles)

Disposition

import type { DashboardLayout } from "@sentropic/dataviz-core";
import { DashboardGrid } from "@sentropic/dataviz-svelte";

const layout: DashboardLayout = {
  columns: 12,
  panels: [
    { id: "revenue", x: 0, y: 0, w: 6, h: 2 },
    { id: "pipeline", x: 6, y: 0, w: 6, h: 2 },
    { id: "risk", x: 0, y: 2, w: 12, h: 1 }
  ]
};

API du composant

Prop	Type	Défaut	Description
`layout`	`DashboardLayout`	requis	Disposition sérialisable : columns et panneaux { id, x, y, w, h }.
`panels`	`DashboardGridPanel[]`	`[]`	Métadonnées d’affichage par id de panneau (titre, description).
`editable`	`boolean`	`false`	Active déplacements, redimensionnements et poignées de glisser.
`rowHeight` / `minPanelHeight`	`number`	`112` / `96`	Hauteur de ligne et hauteur visuelle minimale (px, plancher 32).
`onLayoutChange`	`(layout: DashboardLayout) => void`	non défini	Appelé avec la disposition normalisée après chaque édition.
`ariaLabel`	`string`	`"Dashboard layout"`	Label accessible de la liste de panneaux.
`class`	`string`	non défini	Classe transmise à la grille.

Faux ami assumé : l’homonyme natif DashboardGrid (tiles, columns, rowHeight, gap, editable, label, onLayout) rend des tuiles par valeur ; cette page documente l’adaptateur dataviz, qui place des panneaux sérialisables et ne compose aucun composant DS.