المخطط الدائري
يُصوِّر المخطط الدائري علاقات الجزء بالكل مع تسميات القطاعات والأساطير ولوحات النظرة العامة بأنواع تخطيط متعددة.
Loading demo: pie-chart-real-world
التثبيت
npx sdaia-ui@latest add pie-chart
الاستخدام
import { PieChart } from "@/components/ui/pie-chart"<PieChart type="compact-panel" />الأمثلة
لوحة مدمجة
مخطط دائري صغير مع لوحة معلومات مختصرة.
Loading demo: pie-chart-compact-panel
لوحة النظرة العامة
مخطط دائري مع لوحة نظرة عامة مفصَّلة تعرض الإجماليات والقطاعات.
Loading demo: pie-chart-overview-panel
كتلة الأسطورة
مخطط دائري مع كتلة أسطورة تسرد جميع فئات البيانات وقيمها.
Loading demo: pie-chart-legend-block
لوحة التفصيل
مخطط دائري مع لوحة تفصيل كاملة تعرض نسبة كل قطاع.
Loading demo: pie-chart-breakdown-panel
مرجع الواجهة البرمجية
PieChartPanelProps
خصائص مكوّن PieChartPanel.
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'SummaryView' | 'IndicatorView' | 'HeroView' | 'BreakdownPanel' | 'Comparison... | 'SummaryView' | optional |
title | string | 'Title' | optional |
note | string | 'This is a note' | optional |
indicatorName | string | 'Indicator Name' | optional |
indicatorValue | string | '422.61' | optional |
badgeValue | string | '12%' | optional |
badgeDirection | 'up' | 'down' | 'up' | optional |
dateBadge | string | '26/02/2026' | optional |
optionsLabel | string | 'Options' | optional |
series | PieChartPanelItem[] | - | optional |
tabs | PieChartPanelTab[] | - | optional |
onTabChange | (index: number) => void | - | optional |
progress | number | - | optional |
defaultProgress | number | 0 | optional |
currentTime | string | '0:00' | optional |
duration | string | '0:00' | optional |
onProgressChange | (value: number) => void | - | optional |
rtl | boolean | false | optional |
menuOptions | string[] | — | optional |
activeOption | string | — | optional |
onOptionSelect | (option: string) => void | — | optional |