מידע עזר
תרשימים וטבלאות
בחרו ספריית תרשימים וספריית טבלאות לטיוטות שלכם, ובקשו את התרשים או הטבלה הרצויים עם אזכורי @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 והטבלאות משתמשות בטבלאות של מערכת העיצוב עצמה.