نمودار دایره‌ای (Pie Chart)

import { PartoPieChart } from '@parto-system-design/ui';

const data = [
  { id: 'محصول A', label: 'محصول A', value: 40 },
  { id: 'محصول B', label: 'محصول B', value: 25 },
  { id: 'محصول C', label: 'محصول C', value: 20 },
  { id: 'محصول D', label: 'محصول D', value: 15 },
];

<div className="h-[400px]">
  <PartoPieChart
    data={data}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    activeOuterRadiusOffset={8}
    enableArcLinkLabels={false}
  />
</div>

<PartoPieChart
  data={data}
  innerRadius={0.5}
  padAngle={0.7}
  cornerRadius={3}
/>

<PartoPieChart
  data={data}
  enableArcLinkLabels={false}
  enableArcLabels={true}
/>

<PartoPieChart
  data={data}
  activeOuterRadiusOffset={8}
  activeInnerRadiusOffset={8}
/>

<PartoPieChart
  data={data}
  margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
  legends={[
    {
      anchor: 'bottom',
      direction: 'row',
      justify: false,
      translateX: 0,
      translateY: 56,
      itemsSpacing: 0,
      itemWidth: 100,
      itemHeight: 18,
      itemDirection: 'right-to-left',
      itemOpacity: 1,
      symbolSize: 18,
      symbolShape: 'circle',
    },
  ]}
/>

<PartoPieChart
  data={data}
  margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
  innerRadius={0.5}
  padAngle={0.7}
  cornerRadius={3}
  activeOuterRadiusOffset={8}
  borderWidth={1}
  arcLinkLabelsSkipAngle={10}
  arcLinkLabelsTextColor="hsl(var(--foreground))"
  arcLinkLabelsThickness={2}
  arcLabelsSkipAngle={10}
  arcLabelsTextColor={{
    from: 'color',
    modifiers: [['darker', 2]],
  }}
/>

// استفاده از رنگ‌های خودکار تم
<PartoPieChart data={data} />

// تنظیم رنگ سفارشی
<PartoPieChart
  data={data}
  colors={{ scheme: 'nivo' }}
/>

// رنگ از داده
const dataWithColor = [
  { id: 'دسته ۱', value: 35, color: 'hsl(var(--chart-1))' },
  { id: 'دسته ۲', value: 25, color: 'hsl(var(--chart-2))' },
];

<Card>
  <CardHeader>
    <CardTitle>توزیع فروش</CardTitle>
    <CardDescription>نسبت فروش بر اساس دسته</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="h-[400px]">
      <PartoPieChart
        data={data}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.5}
        padAngle={0.7}
        cornerRadius={3}
        activeOuterRadiusOffset={8}
        arcLinkLabelsSkipAngle={10}
        arcLabelsSkipAngle={10}
      />
    </div>
  </CardContent>
</Card>