Referência
Gráficos e tabelas
Escolha uma biblioteca de gráficos e uma de tabelas para seus rascunhos, e peça o gráfico ou a tabela que quiser com menções @chart e @table.
Escolha uma biblioteca de gráficos e uma de tabelas para acompanhar o seu design system, e todos os gráficos e tabelas de dados dos seus rascunhos serão criados com elas. Selecione Gráficos e tabelas ao lado do seletor Design system e escolha uma de cada, ou Pacote npm personalizado… para qualquer outra.
Escolha suas bibliotecas
| Biblioteca | Para | Pacotes |
|---|---|---|
| Recharts | Gráficos | recharts@3 |
| Apache ECharts | Gráficos | echarts@6, echarts-for-react@3 |
| Chart.js | Gráficos | chart.js@4, react-chartjs-2@5 |
| Victory | Gráficos | victory@37 |
| MUI X Charts | Gráficos | @mui/x-charts@9 |
| TanStack Table | Tabelas | @tanstack/react-table@8, @tanstack/react-virtual@3 |
| AG Grid | Tabelas | ag-grid-community@36, ag-grid-react@36 |
| MUI X Data Grid | Tabelas | @mui/x-data-grid@9 |
| React Data Grid | Tabelas | react-data-grid@7 (beta) |
A escolha é salva com cada protótipo e vai junto nas exportações. Mudá-la não inicia uma nova sessão, então você pode adicionar uma biblioteca de gráficos no meio do caminho. Um pacote personalizado é verificado no npm antes de criar, como um design system personalizado.
Mencione um gráfico ou uma tabela
Depois, diga o que você quer com uma menção. Digite @ e chart/ ou table/ para ver todas:
- Gráficos:
@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(barras e uma linha). - Tabelas:
@table/sortable,@table/filterable,@table/paginated,@table/selectable,@table/editable,@table/grouped,@table/expandable,@table/pinned(cabeçalho e primeira coluna fixos),@table/virtualized(milhares de linhas) e@table/resizable. Mencione várias para uma mesma tabela:@table/sortable @table/paginated.
Cada menção diz ao modelo quais partes da sua biblioteca criam aquele gráfico ou tabela. Quando a biblioteca não tem o recurso, como um mapa de calor no Recharts ou o agrupamento de linhas na edição gratuita do AG Grid, o modelo o cria de outra forma, no mesmo estilo.
Combine com seu design
Para combinar com o seu design, mencione um tema de cores na mesma solicitação: gráficos e tabelas usam as cores e a tipografia dele nos modos claro e escuro, e as tabelas também o raio do canto e o espaçamento. Sem uma biblioteca escolhida, os gráficos são desenhados à mão como SVG e as tabelas usam as do seu design system.