Naslag
Grafieken en tabellen
Kies een grafiek- en een tabelbibliotheek voor je concepten, en vraag om de grafiek of tabel die je wilt met @chart- en @table-vermeldingen.
Kies bij je designsysteem een grafiekbibliotheek en een tabelbibliotheek, en elke grafiek en datatabel in je concepten wordt daarmee gebouwd. Kies Grafieken en tabellen naast de keuzelijst Designsysteem en kies er van elk een, of Eigen npm-pakket… voor een andere.
Je bibliotheken kiezen
| Bibliotheek | Voor | Pakketten |
|---|---|---|
| Recharts | Grafieken | recharts@3 |
| Apache ECharts | Grafieken | echarts@6, echarts-for-react@3 |
| Chart.js | Grafieken | chart.js@4, react-chartjs-2@5 |
| Victory | Grafieken | victory@37 |
| MUI X Charts | Grafieken | @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 (bèta) |
De keuze wordt bij elk prototype opgeslagen en gaat mee in exports. Als je hem wijzigt, begint er geen nieuwe sessie, dus je kunt halverwege nog een grafiekbibliotheek toevoegen. Een eigen pakket wordt voor het bouwen op npm gecontroleerd, net als een eigen designsysteem.
Een grafiek of tabel noemen
Zeg daarna met een vermelding wat je wilt. Typ @ en chart/ of table/ om ze allemaal te zien:
- Grafieken:
@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/sparklineen@chart/combo(staven en een lijn). - Tabellen:
@table/sortable,@table/filterable,@table/paginated,@table/selectable,@table/editable,@table/grouped,@table/expandable,@table/pinned(een vaste koprij en eerste kolom),@table/virtualized(duizenden rijen) en@table/resizable. Vermeld er meerdere voor één tabel:@table/sortable @table/paginated.
Elke vermelding vertelt het model met welke onderdelen van je bibliotheek het die grafiek of tabel bouwt. Heeft de bibliotheek er geen, zoals een heatmap in Recharts of rijgroepering in de gratis editie van AG Grid, dan bouwt het model die op een andere manier in dezelfde stijl.
Passend bij je design
Wil je dat het bij je ontwerp past, vermeld dan in hetzelfde verzoek een kleurthema: grafieken en tabellen nemen de kleuren en typografie ervan over in de lichte en donkere modus, en tabellen ook de hoekradius en afstanden. Zonder gekozen bibliotheek worden grafieken met de hand als SVG getekend en gebruiken tabellen die van je designsysteem.