نمودار آبشاری
waterfall-chartنموداراز درآمد تا سود خالص قدم به قدم، با افزایش سبز، کاهش قرمز، ستون‌های جمع و خطوط اتصال، مثل صورت سود و زیان.
از فروش تا سود خالص، مهر ۱۴۰۵
- افزایش
- کاهش
- جمع
| تغییر | مانده | |
|---|---|---|
| فروش | +۸۲۰٬۰۰۰٬۰۰۰ تومان | ۸۲۰٬۰۰۰٬۰۰۰ تومان |
| بهای تمام‌شده | −۴۱۰٬۰۰۰٬۰۰۰ تومان | ۴۱۰٬۰۰۰٬۰۰۰ تومان |
| سود ناخالص | ۴۱۰٬۰۰۰٬۰۰۰ تومان | ۴۱۰٬۰۰۰٬۰۰۰ تومان |
| حقوق | −۱۶۰٬۰۰۰٬۰۰۰ تومان | ۲۵۰٬۰۰۰٬۰۰۰ تومان |
| اجاره | −۴۵٬۰۰۰٬۰۰۰ تومان | ۲۰۵٬۰۰۰٬۰۰۰ تومان |
| تبلیغات | −۶۲٬۰۰۰٬۰۰۰ تومان | ۱۴۳٬۰۰۰٬۰۰۰ تومان |
| درآمد دیگر | +۲۸٬۰۰۰٬۰۰۰ تومان | ۱۷۱٬۰۰۰٬۰۰۰ تومان |
| سود خالص | ۱۷۱٬۰۰۰٬۰۰۰ تومان | ۱۷۱٬۰۰۰٬۰۰۰ تومان |
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add waterfall-chartنصب دستی
محتوای تب «کد» را در
components/charts/waterfall-chart.tsxبگذارید. پیش‌نیاز: chart-core.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { WaterfallChart } from "@/components/charts/waterfall-chart"23<WaterfallChart4 title="از درآمد تا سود"5 data={[6 { label: "فروش", value: 820_000_000 },7 { label: "بهای تمام‌شده", value: -410_000_000 },8 { label: "سود ناخالص", value: 0, total: true },9 { label: "حقوق", value: -160_000_000 },10 { label: "اجاره", value: -45_000_000 },11 { label: "سود خالص", value: 0, total: true },12 ]}13/>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| data[].total | boolean | - | این ستون جمع تا اینجاست و value نادیده گرفته میشه. |
| colors | { up, down, total } | - | پیش‌فرض success، destructive و رنگ اول نمودار. |
نکته‌ها
- ستون‌ها از راست به چپ می‌آن، همون ترتیبی که صورت مالی فارسی خوانده میشه.