Référence
Graphiques et tableaux
Choisissez une bibliothèque de graphiques et une bibliothèque de tableaux pour vos brouillons, et demandez le graphique ou le tableau voulu avec des mentions @chart et @table.
Choisissez une bibliothèque de graphiques et une bibliothèque de tableaux pour accompagner votre design system : tous les graphiques et tableaux de données de vos brouillons sont construits avec elles. Sélectionnez Graphiques et tableaux à côté du sélecteur Design system, puis choisissez-en une de chaque, ou Package npm personnalisé… pour toute autre.
Choisir vos bibliothèques
| Bibliothèque | Pour | Packages |
|---|---|---|
| Recharts | Graphiques | recharts@3 |
| Apache ECharts | Graphiques | echarts@6, echarts-for-react@3 |
| Chart.js | Graphiques | chart.js@4, react-chartjs-2@5 |
| Victory | Graphiques | victory@37 |
| MUI X Charts | Graphiques | @mui/x-charts@9 |
| TanStack Table | Tableaux | @tanstack/react-table@8, @tanstack/react-virtual@3 |
| AG Grid | Tableaux | ag-grid-community@36, ag-grid-react@36 |
| MUI X Data Grid | Tableaux | @mui/x-data-grid@9 |
| React Data Grid | Tableaux | react-data-grid@7 (bêta) |
Ce choix est enregistré avec chaque prototype et le suit dans les exports. Le modifier ne démarre pas de nouvelle session : vous pouvez donc ajouter une bibliothèque de graphiques en cours de route. Un package personnalisé est vérifié sur npm avant de construire, comme un design system personnalisé.
Mentionner un graphique ou un tableau
Indiquez ensuite ce que vous voulez avec une mention. Saisissez @ puis chart/ ou table/ pour toutes les voir :
- Graphiques :
@chart/bar,@chart/stacked-bar,@chart/horizontal-bar,@chart/line,@chart/area,@chart/stacked-area,@chart/pie,@chart/donut,@chart/scatter,@chart/radar,@chart/heatmap,@chart/treemap,@chart/funnel,@chart/gauge,@chart/sparklineet@chart/combo(barres et courbe). - Tableaux :
@table/sortable,@table/filterable,@table/paginated,@table/selectable,@table/editable,@table/grouped,@table/expandable,@table/pinned(en-tête et première colonne fixes),@table/virtualized(des milliers de lignes) et@table/resizable. Mentionnez-en plusieurs pour un même tableau :@table/sortable @table/paginated.
Chaque mention indique au modèle quelles parties de votre bibliothèque construisent ce graphique ou ce tableau. Si la bibliothèque n'en propose pas, comme une heatmap dans Recharts ou le regroupement de lignes dans l'édition gratuite d'AG Grid, le modèle le construit autrement, dans le même style.
Respecter votre design
Pour coller à votre design, mentionnez un thème de couleurs dans la même demande : les graphiques et les tableaux reprennent ses couleurs et sa typographie en mode clair et sombre, et les tableaux aussi ses arrondis et ses espacements. Sans bibliothèque choisie, les graphiques sont dessinés à la main en SVG et les tableaux utilisent ceux de votre design system.