بطاقة مخطط الطلبات
عام من الطلبات الشهرية على شكل أعمدة، هذا العام بجانب العام الماضي لكل شهر، بحيث تُقرأ المقارنة عموداً بعمود. يعدّ العنوان الرئيسي حتى الإجمالي مع شريحة دلتا، وعند تحريك المؤشر فوق شهر ما يُستبدل بالرقم الخاص بذلك الشهر وما كان عليه قبل عام. نفس الإطار والترويسة كبطاقة مخطط الإيرادات، بحيث يتشاركان صفاً واحداً. مجاني، مبني على Recharts.
Orders
25,162
+20%20,968 last year
- This year
- Last year
التثبيت
أضف مخطط الطلبات باستخدام CLI، الذي يثبّت أيضاً Recharts والشريحة التي يتألف منها، أو انسخ الملف:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add orders-chart-cardهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
أرقامك الخاصة
تمرير data كاثنتي عشرة نقطة مع current و السابق القيمة. يتم اشتقاق الإجماليات والفارق وقراءة التمرير منها. العنوان يضبط تسمية العنوان في وضع الراحة.
import { OrdersChartCard, type OrdersPoint,} from "@/components/application/dashboard/orders-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 orders: OrdersPoint[] = [ { label: "Jan", current: 1680, previous: 1510 }, { label: "Feb", current: 1740, previous: 1480 }, // ... { label: "Dec", current: 2342, previous: 1798 },];
<OrdersChartCard data={orders} title="Paid orders" />في صف
كلا بطاقتَي المخططات المجانيتين flex-1 وارتفاعه 344 بكسل، لذا يقسمان الصف بالتساوي، كما في لوحة تحكم بداية المحادثة.
{/* Two free charts in a row; both are 344px tall by default */}<div className="flex flex-col gap-4 xl:flex-row"> <RevenueChartCard /> <OrdersChartCard /></div>