المخطط المساحي
يُصوِّر المخطط المساحي البيانات الكمية بمساحات مملوءة أسفل الخط، ويدعم نفس أنواع التخطيطات التحليلية مثل المخطط الخطي مع دعم RTL.
Loading demo: area-chart-real-world
التثبيت
npx sdaia-ui@latest add area-chart
الاستخدام
import { AreaChart } from "@/components/ui/area-chart"<AreaChart type="insight" />الأمثلة
بصيرة
مخطط مساحي يُبرز رؤى البيانات الرئيسية بمناطق مظلَّلة.
Loading demo: area-chart-insight
مقارنة مفصَّلة
مخطط مساحي بسلاسل متعددة لمقارنة البيانات جنباً إلى جنب.
Loading demo: area-chart-detailed-comparison
المقياس
مخطط مساحي يركّز على مقياس أداء واحد عبر الزمن.
Loading demo: area-chart-metric
ملخص
مخطط مساحي مدمج يُقدّم ملخصاً عالي المستوى للبيانات.
Loading demo: area-chart-summary
مرجع الواجهة البرمجية
AreaChartProps
خصائص مكوّن AreaChart.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'Insight' | 'Detailed Comparison' | 'Metric' | 'Summary' | 'Insight' | optional |
xAxisData | XAxisDataType | '7 Week Days' | optional |
dir | 'ltr' | 'rtl' | — | optional |
rtl | boolean | false | optional |
height | number | — | optional |
kpiLabel | ReactNode | 'Indicator Name' | optional |
kpiValue | ReactNode | '422.61' | optional |
badgeType | ChartBadgeType | 'increase' | optional |
badgeValue | ReactNode | '12%' | optional |
tabs | HorizontalTabItem[] | — | optional |
activeTab | string | — | optional |
onTabChange | (value: string) => void | — | optional |
insightRows | AreaChartInsightRow[] | — | optional |
legendLabel1 | ReactNode | 'Legend' | optional |
legendLabel2 | ReactNode | 'Legend' | optional |
series1 | number[] | — | optional |
series2 | number[] | — | optional |
yAxisTicks | [string, string, string, string, string, string] | — | optional |
sparklineData | GraphBaseDataPoint[] | — | optional |