useChartTheme

رنگ‌ها و استایل‌های نمودار از CSS variables — واکنش‌پذیر به تغییر تم

معرفی

هوک useChartTheme رنگ‌ها و استایل‌های آماده برای کامپوننت‌های نموداری (Recharts و Visx) ارائه می‌دهد. این هوک CSS variables تم فعلی را در runtime می‌خواند و با تغییر تم به‌روزرسانی می‌شود.

چه زمانی استفاده کنیم

ساخت نمودار سفارشی با Recharts یا Visx
نیاز به رنگ‌های نمودار که با تم هماهنگ باشند
تنظیم استایل tooltip، axis، و grid نمودارها

چه زمانی استفاده نکنیم

هنگام استفاده از کامپوننت‌های نمودار پرتو (PartoLineChart و غیره) — آن‌ها خودشان از این هوک استفاده می‌کنند
برای خواندن CSS variables غیرنموداری → از useRootStyles استفاده کنید

استفاده

import { useChartTheme } from '@parto-system-design/ui'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'

function CustomChart({ data }) {
  const { chartColors, axisTickStyle, gridStyle, tooltipStyle } = useChartTheme()

  return (
    <LineChart data={data} width={600} height={300}>
      <CartesianGrid {...gridStyle} />
      <XAxis tick={axisTickStyle} />
      <YAxis tick={axisTickStyle} />
      <Tooltip contentStyle={tooltipStyle} />
      <Line dataKey="value1" stroke={chartColors[0]} strokeWidth={2} />
      <Line dataKey="value2" stroke={chartColors[1]} strokeWidth={2} />
    </LineChart>
  )
}

پارامترها

این هوک هیچ پارامتری دریافت نمی‌کند.

مقدار بازگشتی

فیلد	نوع	توضیح
`chartColors`	`string[]`	آرایه ۸ رنگ نمودار (از `--chart-1` تا `--chart-8`)
`getColor`	`(variable: string, fallback: string) => string`	خواندن هر CSS variable رنگی
`fontFamily`	`string`	فونت نمودار (`Yekan Bakh, system-ui, ...`)
`axisTickStyle`	`object`	استایل آماده برای tick های محور
`gridStyle`	`object`	استایل آماده برای grid نمودار
`tooltipStyle`	`React.CSSProperties`	استایل آماده برای tooltip نمودار
`crosshairStyle`	`object`	استایل آماده برای crosshair