Riferimento
Grafici e tabelle
Scegli una libreria di grafici e una di tabelle per le tue bozze, e chiedi il grafico o la tabella che vuoi con le menzioni @chart e @table.
Scegli una libreria di grafici e una di tabelle da abbinare al tuo design system: ogni grafico e ogni tabella di dati nelle tue bozze verrà costruito con quelle. Seleziona Grafici e tabelle accanto al selettore Design system, poi scegline una per tipo, oppure Pacchetto npm personalizzato… per qualsiasi altra.
Scegli le librerie
| Libreria | Per | Pacchetti |
|---|---|---|
| Recharts | Grafici | recharts@3 |
| Apache ECharts | Grafici | echarts@6, echarts-for-react@3 |
| Chart.js | Grafici | chart.js@4, react-chartjs-2@5 |
| Victory | Grafici | victory@37 |
| MUI X Charts | Grafici | @mui/x-charts@9 |
| TanStack Table | Tabelle | @tanstack/react-table@8, @tanstack/react-virtual@3 |
| AG Grid | Tabelle | ag-grid-community@36, ag-grid-react@36 |
| MUI X Data Grid | Tabelle | @mui/x-data-grid@9 |
| React Data Grid | Tabelle | react-data-grid@7 (beta) |
La scelta viene salvata con ogni prototipo e lo segue nelle esportazioni. Cambiarla non avvia una nuova sessione, quindi puoi aggiungere una libreria di grafici anche a lavoro iniziato. Un pacchetto personalizzato viene verificato su npm prima di costruire, come un design system personalizzato.
Menziona un grafico o una tabella
Poi indica cosa vuoi con una menzione. Digita @ e chart/ o table/ per vederle tutte:
- Grafici:
@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/sparklinee@chart/combo(barre e una linea). - Tabelle:
@table/sortable,@table/filterable,@table/paginated,@table/selectable,@table/editable,@table/grouped,@table/expandable,@table/pinned(intestazione e prima colonna fisse),@table/virtualized(migliaia di righe) e@table/resizable. Menzionane più di una per la stessa tabella:@table/sortable @table/paginated.
Ogni menzione indica al modello quali parti della tua libreria costruiscono quel grafico o quella tabella. Se la libreria non lo prevede, come una heatmap in Recharts o il raggruppamento delle righe nell'edizione gratuita di AG Grid, il modello lo costruisce in un altro modo, nello stesso stile.
Adattali al tuo design
Per adattarli al tuo design, menziona un tema colori nella stessa richiesta: grafici e tabelle ne prendono i colori e la tipografia in modalità chiara e scura, e le tabelle anche il raggio degli angoli e la spaziatura. Se non scegli una libreria, i grafici vengono disegnati a mano in SVG e le tabelle usano quelle del tuo design system.