نمودار پراکندگی (PartoScatterChart)

'use client'
import { PartoScatterChart } from '@parto-system-design/ui'

const data = [
  { x: 0.8, y: 1.2, z: 800, label: 'پیج الف', group: 'micro' },
  { x: 3.5, y: 5.2, z: 2500, label: 'پیج ج', group: 'mid' },
  { x: 6.2, y: 4.1, z: 5100, label: 'پیج و', group: 'macro' },
]

<div style={{ height: 320 }}>
  <PartoScatterChart
    data={data}
    xKey="x" yKey="y" zKey="z" labelKey="label" groupKey="group"
    xLabel="نرخ تعامل" yLabel="رشد" xUnit="٪" yUnit="٪"
  />
</div>

const data = [
  { engagement: 1.2, reach: 8000 },
  { engagement: 3.5, reach: 22000 },
  { engagement: 5.1, reach: 14000 },
  { engagement: 2.8, reach: 31000 },
]

<PartoScatterChart
  data={data}
  xKey="engagement"
  yKey="reach"
  xLabel="نرخ تعامل"
  yLabel="reach"
  xUnit="٪"
/>

const data = [
  { x: 1.2, y: 8000, followers: 500, label: 'پیج خرد' },
  { x: 3.5, y: 22000, followers: 25000, label: 'پیج میانی' },
  { x: 2.8, y: 31000, followers: 120000, label: 'پیج کلان' },
]

<PartoScatterChart
  data={data}
  xKey="x" yKey="y" zKey="followers" labelKey="label"
  zRange={[60, 600]}
  xLabel="نرخ تعامل" yLabel="reach"
/>

const data = [
  { x: 2, y: 30, sentiment: 'positive', label: 'پست ۱' },
  { x: 4, y: 50, sentiment: 'positive', label: 'پست ۲' },
  { x: 1, y: 20, sentiment: 'negative', label: 'پست ۳' },
  { x: 3, y: 15, sentiment: 'negative', label: 'پست ۴' },
  { x: 2.5, y: 25, sentiment: 'neutral', label: 'پست ۵' },
]

<PartoScatterChart
  data={data}
  xKey="x" yKey="y" labelKey="label" groupKey="sentiment"
  xLabel="ساعت انتشار" yLabel="تعداد بازدید"
/>

<PartoScatterChart
  data={data}
  xKey="engagement"
  yKey="reach"
  xDomain={[0, 10]}
  yDomain={[0, 50000]}
  xLabel="نرخ تعامل"
  yLabel="reach"
  enableGrid={true}
/>

<PartoScatterChart data={[]} xKey="x" yKey="y" />
<PartoScatterChart data={[]} xKey="x" yKey="y" isLoading={true} />