داده‌نمایی

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

import { useChartTheme } from '@partodata/ui'

// داخل نمودارها به صورت خودکار اعمال می‌شود
const { chartColors } = useChartTheme()
// chartColors → آرایه‌ای از هشت رنگ آماده‌ی استفاده

import { useRootStyles } from '@partodata/ui'

const styles = useRootStyles()
const chartColors = [
  styles?.getPropertyValue('--chart-1').trim(),
  styles?.getPropertyValue('--chart-2').trim(),
  styles?.getPropertyValue('--chart-3').trim(),
]

const sentimentColors = {
  positive: styles?.getPropertyValue('--sentiment-positive').trim(),
  neutral: styles?.getPropertyValue('--sentiment-neutral').trim(),
  negative: styles?.getPropertyValue('--sentiment-negative').trim(),
}

const engagementColors = {
  excellent: styles?.getPropertyValue('--engagement-excellent').trim(),
  'very-good': styles?.getPropertyValue('--engagement-very-good').trim(),
  good: styles?.getPropertyValue('--engagement-good').trim(),
  average: styles?.getPropertyValue('--engagement-average').trim(),
  low: styles?.getPropertyValue('--engagement-low').trim(),
  poor: styles?.getPropertyValue('--engagement-poor').trim(),
}

import { PartoLineChart } from '@partodata/ui'
;<PartoLineChart data={mentionData} dataKeys={['count']} xAxisKey="date" isLoading={isLoading} />

import { PartoPieChart } from '@partodata/ui'
;<PartoPieChart
  data={[
    { name: 'مثبت', value: 65 },
    { name: 'خنثی', value: 25 },
    { name: 'منفی', value: 10 },
  ]}
  isLoading={isLoading}
/>

import { PartoBarChart } from '@partodata/ui'
;<PartoBarChart data={platformData} keys={['mentions', 'engagement']} indexBy="platform" isLoading={isLoading} />

<PartoLineChart
  data={data}
  dataKeys={['count']}
  xAxisKey="date"
  isLoading={isLoading} // ← Skeleton نمایش می‌دهد
/>

<div>
  <PartoLineChart data={data} dataKeys={['count']} xAxisKey="date" isLoading={isLoading} />

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