بطاقة مخطط الإيرادات
عام من الإيرادات الشهرية مرسوم مقارنةً بالعام السابق: العام الحالي كمنطقة ناعمة وخط صلب، والعام الماضي كخط متقطع خلفه، بحيث تكون الفجوة بينهما هي القصة. يعدّ العنوان الرئيسي حتى الإجمالي مع شريحة دلتا، وعند تحريك المؤشر فوق شهر ما يُستبدل بالرقم الخاص بذلك الشهر وما كان عليه قبل عام. نفس الإطار كبطاقات الإحصاء وبطاقات المخططات Pro، بحيث يندرج في أي صف بلوحة تحكم. مجاني، مبني على Recharts.
Revenue
$152,314
+16%$131,304 last year
- This year
- Last year
التثبيت
أضف مخطط الإيرادات باستخدام CLI، الذي يثبّت أيضاً Recharts والشريحة التي يتألف منها، أو انسخ الملف:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add revenue-chart-cardهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
أرقامك الخاصة
تمرير data كاثنتي عشرة نقطة مع current و السابق القيمة. يتم اشتقاق الإجماليات والفارق وقراءة التمرير، لذا لا يوجد شيء آخر يحتاج إلى المزامنة. العنوان يضبط تسمية العنوان في وضع الراحة.
import { RevenueChartCard, type RevenuePoint,} from "@/components/application/dashboard/revenue-chart-card";
// Twelve points, one per month. `current` is this year, `previous` the same// month a year earlier; the headline and the delta are computed from them.const revenue: RevenuePoint[] = [ { label: "Jan", current: 9840, previous: 8210 }, { label: "Feb", current: 10120, previous: 8460 }, // ... { label: "Dec", current: 14703, previous: 11924 },];
<RevenueChartCard data={revenue} title="Net revenue" />في صف
البطاقة هي flex-1 وارتفاعه 344 بكسل افتراضياً، لذا يشارك صفاً مع بطاقة مخطط الطلبات أو أي بطاقة أخرى، كما في لوحة تحكم بداية المحادثة.
{/* Fills a dashboard row beside another card; the default height is 344px */}<div className="flex flex-col gap-4 xl:flex-row"> <RevenueChartCard /> <OrdersChartCard /></div>