リファレンス
グラフと表
下書きで使うグラフライブラリと表ライブラリを選び、@chart と @table のメンションで欲しいグラフや表を指定します。
デザインシステムに合わせてグラフライブラリと表ライブラリを選ぶと、下書きのグラフとデータテーブルはすべてそれらで作られます。［デザインシステム］の選択メニューの横にある［グラフと表］を選択し、それぞれ1つずつ選ぶか、ほかのライブラリを使う場合は［カスタムnpmパッケージ…］を選びます。
ライブラリを選ぶ
| ライブラリ | 用途 | パッケージ |
|---|---|---|
| Recharts | グラフ | recharts@3 |
| Apache ECharts | グラフ | echarts@6, echarts-for-react@3 |
| Chart.js | グラフ | chart.js@4, react-chartjs-2@5 |
| Victory | グラフ | victory@37 |
| MUI X Charts | グラフ | @mui/x-charts@9 |
| TanStack Table | 表 | @tanstack/react-table@8, @tanstack/react-virtual@3 |
| AG Grid | 表 | ag-grid-community@36, ag-grid-react@36 |
| MUI X Data Grid | 表 | @mui/x-data-grid@9 |
| React Data Grid | 表 | react-data-grid@7（ベータ版） |
選択内容はプロトタイプごとに保存され、エクスポートにも引き継がれます。変更しても新しいセッションは始まらないため、作業の途中でグラフライブラリを追加できます。カスタムパッケージは、カスタムデザインシステムと同様に、構築の前にnpmで確認されます。
グラフや表をメンションする
続いて、作りたいものをメンションで指定します。@に続けてchart/またはtable/と入力すると、すべて表示されます。
- グラフ：
@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/sparkline、@chart/combo（棒と折れ線）。 - 表：
@table/sortable、@table/filterable、@table/paginated、@table/selectable、@table/editable、@table/grouped、@table/expandable、@table/pinned（ヘッダーと先頭列を固定）、@table/virtualized（数千行）、@table/resizable。 1つの表に複数をメンションすることもできます（@table/sortable @table/paginated）。
各メンションは、そのグラフや表をライブラリのどの部分で作るかをモデルに伝えます。RechartsのヒートマップやAG Grid無料版の行のグループ化のように、ライブラリにない場合は、モデルが同じスタイルのまま別の方法で作ります。
デザインに合わせる
デザインに合わせるには、同じリクエストでカラーテーマをメンションします。グラフと表はライトモードとダークモードでテーマの色とフォントを使い、表は角丸と余白も反映します。ライブラリを選んでいない場合、グラフはSVGで手描きされ、表はデザインシステムの表を使います。