Referenz
Diagramme und Tabellen
Wählen Sie eine Diagramm- und eine Tabellenbibliothek für Ihre Entwürfe und fordern Sie mit @chart- und @table-Erwähnungen das Diagramm oder die Tabelle an, die Sie brauchen.
Wählen Sie passend zu Ihrem Designsystem eine Diagrammbibliothek und eine Tabellenbibliothek, dann wird jedes Diagramm und jede Datentabelle in Ihren Entwürfen damit gebaut. Wählen Sie Diagramme und Tabellen neben der Auswahl Designsystem und dann je eine Bibliothek, oder Eigenes npm-Paket… für jede andere.
Bibliotheken wählen
| Bibliothek | Für | Pakete |
|---|---|---|
| Recharts | Diagramme | recharts@3 |
| Apache ECharts | Diagramme | echarts@6, echarts-for-react@3 |
| Chart.js | Diagramme | chart.js@4, react-chartjs-2@5 |
| Victory | Diagramme | victory@37 |
| MUI X Charts | Diagramme | @mui/x-charts@9 |
| TanStack Table | Tabellen | @tanstack/react-table@8, @tanstack/react-virtual@3 |
| AG Grid | Tabellen | ag-grid-community@36, ag-grid-react@36 |
| MUI X Data Grid | Tabellen | @mui/x-data-grid@9 |
| React Data Grid | Tabellen | react-data-grid@7 (Beta) |
Die Auswahl wird mit jedem Prototyp gespeichert und geht mit in Exporte. Eine Änderung startet keine neue Sitzung, Sie können also auch mittendrin eine Diagrammbibliothek hinzufügen. Ein eigenes Paket wird vor dem Bauen auf npm geprüft, wie ein eigenes Designsystem.
Ein Diagramm oder eine Tabelle erwähnen
Sagen Sie dann mit einer Erwähnung, was Sie möchten. Geben Sie @ und chart/ oder table/ ein, um alle zu sehen:
- Diagramme:
@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/sparklineund@chart/combo(Balken und eine Linie). - Tabellen:
@table/sortable,@table/filterable,@table/paginated,@table/selectable,@table/editable,@table/grouped,@table/expandable,@table/pinned(fixierte Kopfzeile und erste Spalte),@table/virtualized(Tausende Zeilen) und@table/resizable. Erwähnen Sie mehrere für eine Tabelle:@table/sortable @table/paginated.
Jede Erwähnung sagt dem Modell, mit welchen Teilen Ihrer Bibliothek es dieses Diagramm oder diese Tabelle baut. Hat die Bibliothek nichts Passendes, etwa eine Heatmap in Recharts oder Zeilengruppierung in der kostenlosen Edition von AG Grid, baut das Modell es auf andere Weise im selben Stil.
Zum Design passend
Damit alles zu Ihrem Design passt, erwähnen Sie in derselben Anfrage ein Farbtheme: Diagramme und Tabellen übernehmen seine Farben und Schriften im Hell- und Dunkelmodus, Tabellen zusätzlich Eckenradius und Abstände. Ist keine Bibliothek gewählt, werden Diagramme von Hand als SVG gezeichnet und Tabellen nutzen die des Designsystems.