نقشه‌ی درختی

نصب

1. با CLI

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

   $ npx vibefarsi add treemap-chart

2. نصب دستی

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

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

استفاده

1import { TreemapChart } from "@/components/charts/treemap-chart"23<TreemapChart4  title="فروش بر اساس دسته"5  data={[6    { label: "موبایل", value: 4200, group: "دیجیتال" },7    { label: "لپ‌تاپ", value: 2900, group: "دیجیتال" },8    { label: "پوشاک", value: 1800, group: "مد" },9  ]}10/>

پراپ‌ها

نکته‌ها

• بزرگ‌ترین کاشی بالا و سمت راست قرار می‌گیره، جایی که چشم فارسی‌زبان اول نگاه می‌کنه.
• اسم و درصد فقط وقتی نوشته میشن که در کاشی جا بشن.