참조
차트와 표
초안에 쓸 차트 라이브러리와 표 라이브러리를 고르고, @chart와 @table 멘션으로 원하는 차트나 표를 요청하세요.
디자인 시스템에 맞춰 차트 라이브러리와 표 라이브러리를 선택하면 초안의 모든 차트와 데이터 표가 해당 라이브러리로 빌드됩니다. 디자인 시스템 선택기 옆의 차트와 표를 선택한 다음 각각 하나씩 고르거나, 다른 라이브러리는 사용자 지정 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. 표 하나에 여러 개를 멘션할 수도 있습니다:@table/sortable @table/paginated.
각 멘션은 라이브러리의 어떤 부분으로 해당 차트나 표를 빌드할지 모델에 알려 줍니다. Recharts의 히트맵이나 AG Grid 무료 버전의 행 그룹화처럼 라이브러리에 없는 기능이면, 모델이 같은 스타일로 다른 방법을 사용해 빌드합니다.
디자인에 맞추기
디자인에 맞추려면 같은 요청에서 색상 테마를 멘션하세요. 차트와 표는 라이트 및 다크 모드에서 테마의 색상과 글꼴을 따르고, 표는 모서리 반경과 간격도 따릅니다. 라이브러리를 선택하지 않으면 차트는 SVG로 직접 그리고, 표는 디자인 시스템의 표를 사용합니다.