نمودار تعاملی

نصب

1. با CLI

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

   $ npx vibefarsi add function-plot

2. نصب دستی

   محتوای تب «کد» را در components/ui/function-plot.tsx بگذارید. پیش‌نیاز: slider.

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

استفاده

1import { FunctionPlot, faDecimal } from "@/components/ui/function-plot"23<FunctionPlot4  label="نمودار y = a·sin(bx)"5  xDomain={[-6.3, 6.3]}6  yDomain={[-3, 3]}7  params={[8    { key: "a", label: "دامنه (a)", min: 0.5, max: 3, step: 0.1, default: 1 },9    { key: "b", label: "بسامد (b)", min: 0.5, max: 3, step: 0.1, default: 1 },10  ]}11  fn={(x, p) => p.a * Math.sin(p.b * x)}12  formula={(p) => `y = ${faDecimal(p.a, 1)} · sin(${faDecimal(p.b, 1)}x)`}13/>

پراپ‌ها

نکته‌های راست‌چین

• محورها قرارداد ریاضی را نگه می‌دارن (x به راست زیاد میشه) حتی در صفحه‌ی راست‌چین؛ فقط اعداد محور فارسی میشن. این با نمودار داده‌ی فروش (chart) فرق داره که از راست شروع میشه.
• مجانب قائم (مثل tan) خودکار تشخیص داده میشه و خط از بالا به پایین وصل نمیشه.
• روی موبایل با لمس و کشیدن هم مختصات نقطه را نشان میده.