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

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

const data = [
  { ماه: 'فروردین', فروش: 50, هزینه: 32 },
  { ماه: 'اردیبهشت', فروش: 80, هزینه: 45 },
  { ماه: 'خرداد', فروش: 65, هزینه: 40 },
  { ماه: 'تیر', فروش: 95, هزینه: 58 },
];

<div className="h-[400px]">
  <PartoBarChart
    data={data}
    keys={['فروش', 'هزینه']}
    indexBy="ماه"
    margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
    padding={0.3}
  />
</div>

const data = [
  { ماه: 'فروردین', فروش: 50, هزینه: 30 },
  { ماه: 'اردیبهشت', فروش: 75, هزینه: 45 },
  { ماه: 'خرداد', فروش: 60, هزینه: 40 },
  { ماه: 'تیر', فروش: 90, هزینه: 55 },
];

<PartoBarChart
  data={data}
  keys={['فروش', 'هزینه']}
  indexBy="ماه"
/>

<PartoBarChart
  data={data}
  keys={['فروش', 'هزینه']}
  indexBy="ماه"
  groupMode="grouped"
  padding={0.2}
/>

<PartoBarChart
  data={data}
  keys={['مقدار']}
  indexBy="ماه"
  layout="horizontal"
  margin={{ top: 20, right: 150, bottom: 50, left: 60 }}
/>

<PartoBarChart
  data={data}
  keys={['فروش']}
  indexBy="ماه"
  margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
  padding={0.3}
  valueScale={{ type: 'linear' }}
  indexScale={{ type: 'band', round: true }}
  borderRadius={4}
  borderWidth={1}
  axisTop={null}
  axisRight={null}
  axisBottom={{
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: 'ماه',
    legendPosition: 'middle',
    legendOffset: 40,
  }}
  axisLeft={{
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: 'فروش',
    legendPosition: 'middle',
    legendOffset: -50,
  }}
  enableLabel={true}
  labelSkipWidth={12}
  labelSkipHeight={12}
/>

axisBottom={{
  tickSize: 5,        // اندازه تیک
  tickPadding: 5,     // فاصله تیک
  tickRotation: 0,    // چرخش برچسب
  legend: 'عنوان',    // عنوان محور
  legendPosition: 'middle',  // موقعیت عنوان
  legendOffset: 40,   // فاصله عنوان
}}

<Card>
  <CardHeader>
    <CardTitle>گزارش فروش ماهانه</CardTitle>
    <CardDescription>مقایسه فروش و هزینه</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="h-[400px]">
      <PartoBarChart
        data={data}
        keys={['فروش', 'هزینه']}
        indexBy="ماه"
        margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
        padding={0.3}
        groupMode="grouped"
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
        }}
        axisLeft={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
        }}
      />
    </div>
  </CardContent>
</Card>