گانت
gantt-chartکامپوننت تقویمکارها روی محور زمان شمسی که از راست به چپ جلو می‌ره، با فهرست کارها سمت راست، پیشرفت داخل هر نوار، فلش وابستگی، نقطه‌ی عطف، خط امروز و تعطیلی‌های رنگی.
۵ مهر تا ۱۲ آبان ۱۴۰۵
کار
فاز ۱: کشف
پژوهش کاربران۷ روز
نقشه‌ی سفر کاربر۴ روز
فاز ۲: ساخت
طراحی رابط۸ روز
پیاده‌سازی فرانت۱۳ روز
API و درگاه پرداخت۱۲ روز
فاز ۳: انتشار
تست و رفع اشکال۶ روز
انتشارنقطه
مهر ۱۴۰۵آبان ۱۴۰۵۵۶۷۸۹۱۰۱۱۱۲۱۳۱۴۱۵۱۶۱۷۱۸۱۹۲۰۲۱۲۲۲۳۲۴۲۵۲۶۲۷۲۸۲۹۳۰۱۲۳۴۵۶۷۸۹۱۰۱۱۱۲
| کار | شروع | پایان | پیشرفت |
|---|---|---|---|
| پژوهش کاربران | ۸ مهر ۱۴۰۵ | ۱۴ مهر ۱۴۰۵ | ۱۰۰٪ |
| نقشه‌ی سفر کاربر | ۱۵ مهر ۱۴۰۵ | ۱۸ مهر ۱۴۰۵ | ۱۰۰٪ |
| طراحی رابط | ۱۹ مهر ۱۴۰۵ | ۲۶ مهر ۱۴۰۵ | ۵۵٪ |
| پیاده‌سازی فرانت | ۲۳ مهر ۱۴۰۵ | ۵ آبان ۱۴۰۵ | ۲۰٪ |
| API و درگاه پرداخت | ۲۱ مهر ۱۴۰۵ | ۲ آبان ۱۴۰۵ | ۳۵٪ |
| تست و رفع اشکال | ۳ آبان ۱۴۰۵ | ۸ آبان ۱۴۰۵ | ۰٪ |
| انتشار | ۹ آبان ۱۴۰۵ | ۹ آبان ۱۴۰۵ | — |
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add gantt-chartنصب دستی
محتوای تب «کد» را در
components/calendar/gantt-chart.tsxبگذارید. پیش‌نیاز: calendar-core، segmented-control.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { GanttChart } from "@/components/calendar/gantt-chart"23<GanttChart4 tasks={[5 { id: "design", title: "طراحی", start: d(1), end: d(5), progress: 1 },6 { id: "build", title: "پیاده‌سازی", start: d(6), end: d(15), progress: 0.4, dependsOn: ["design"] },7 { id: "launch", title: "انتشار", start: d(16), end: d(16), milestone: true, dependsOn: ["build"] },8 ]}9 onTaskChange={(t, start, end) => update(t.id, { start, end })}10/>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| tasks | GanttTask[] | - | start و end روزهای اول و آخرن و هر دو حساب میشن. progress بین ۰ و ۱ و dependsOn آرایه‌ی id کارهای قبلیه. |
| zoom / defaultZoom | "day" | "week" | "month" | "day" | بزرگ‌نمایی محور زمان. |
| from / to | Date | - | بازه‌ی نمایش. پیش‌فرض از اولین تا آخرین کار با کمی حاشیه است. |
| onTaskChange | (task, start, end) => void | - | کشیدن نوار و لبه‌هاش را روشن می‌کنه. |
| listWidth / rowHeight | number | 200 / 36 | عرض فهرست کارها و ارتفاع هر ردیف. |
نکته‌ها
- روی نوار فوکوس‌شده Alt و چپ یا راست کار را یک روز جابه‌جا می‌کنه و با Shift فقط پایانش را.