نقشه‌ی حرارتی

نصب

1. با CLI

   اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

   $ npx vibefarsi add heatmap-chart

2. نصب دستی

   محتوای تب «کد» را در components/charts/heatmap-chart.tsx بگذارید. پیش‌نیاز: chart-core.

   $ npm i lucide-react
   کپی کل فایلregistry json

استفاده

1import { CalendarHeatmap, MatrixHeatmap } from "@/components/charts/heatmap-chart"23<CalendarHeatmap4  title="سفارش‌های روزانه"5  data={orders.map((o) => ({ date: o.day, value: o.count }))}6  holidays={["2026-03-21", "2026-04-01"]}7  unit="سفارش"8/>910<MatrixHeatmap11  title="ترافیک بر اساس ساعت"12  rows={["شنبه", "یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", "پنجشنبه", "جمعه"]}13  cols={hours}14  values={traffic}15/>

پراپ‌ها

نکته‌ها

• هفته‌ها از راست به چپ جلو می‌رن و ردیف‌ها از شنبه شروع میشن، پس جمعه‌ها پایین‌ترین ردیف هستن.
• با کلیدهای بالا و پایین روز به روز و با چپ و راست هفته به هفته جابه‌جا می‌شید.