داده‌نمایی

--chart-1  /* رنگ اول — اصلی */
--chart-2  /* رنگ دوم */
--chart-3  /* رنگ سوم */
--chart-4  /* رنگ چهارم */
--chart-5  /* رنگ پنجم */

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

// داخل نمودارها به صورت خودکار اعمال می‌شود
const styles = useRootStyles()
const chartColors = [
  styles['--chart-1'],
  styles['--chart-2'],
  styles['--chart-3'],
]

const sentimentColors = {
  positive: styles['--sentiment-positive'],
  neutral:  styles['--sentiment-neutral'],
  negative: styles['--sentiment-negative'],
}

const engagementColors = {
  excellent:  styles['--engagement-excellent'],
  'very-good': styles['--engagement-very-good'],
  good:       styles['--engagement-good'],
  average:    styles['--engagement-average'],
  poor:       styles['--engagement-poor'],
  'very-poor': styles['--engagement-very-poor'],
}

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

<LineChart
  data={mentionData}
  isLoading={isLoading}
  xKey="date"
  yKeys={['count']}
  labels={{ count: 'تعداد ذکر' }}
/>

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

<PieChart
  data={[
    { id: 'positive', label: 'مثبت', value: 65 },
    { id: 'neutral',  label: 'خنثی',  value: 25 },
    { id: 'negative', label: 'منفی', value: 10 },
  ]}
  isLoading={isLoading}
/>

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

<BarChart
  data={platformData}
  isLoading={isLoading}
  xKey="platform"
  yKeys={['mentions', 'engagement']}
  labels={{
    mentions: 'ذکر',
    engagement: 'تعامل',
  }}
/>

<LineChart
  data={data}
  isLoading={isLoading}  // ← Skeleton نمایش می‌دهد
/>

<div>
  <LineChart data={data} isLoading={isLoading} />

  {/* خلاصه برای screen readers */}
  <p className="sr-only">
    نمودار روند ذکرها در ۳۰ روز گذشته. بیشترین ذکر در تاریخ ۱۵ اسفند با ۲۳۴ مورد بوده است.
  </p>
</div>