بطاقة مخطط القمع
قمع تدفق أفقي داخل غلاف بطاقة لوحة التحكم. كل مرحلة عمود بحجم يتناسب مع حصتها من أعلى القمع ويتضيق نحو المرحلة التالية، مع حبة نسبة مئوية في المنتصف وتذييل يحمل القيمة والاسم؛ يؤدي التمرير فوق مرحلة إلى إبرازها بتعتيم البقية وتبديل العنوان الرئيسي. قمع Recharts عبارة عن مكدس شبه منحرف رأسي، لذا هذا القمع مرسوم يدويًا من نفس رموز التصميم. للنسخة القائمة على القائمة راجع بطاقة أعمدة المراحل.
Sign-up funnel
197
+5.2%التثبيت
بطاقة مخطط القمع جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
الأشكال والأحادي
shape="sharp" يستبدل الحواف المتدرجة والمتراكبة بأشكال شبه منحرفة بسيطة، و mono يرسم كل مرحلة بلون النص - أسود على الفاتح، وأبيض على الداكن - لبطاقة بحبر واحد. تتجمع معاً.
{/* Straight-edged trapezoids, no edge layers */}<FunnelChartCard shape="sharp" title="Hiring" ranges={HIRING_RANGES} />
{/* Single ink: mid grey on light, near-white on dark */}<FunnelChartCard mono title="Checkout" ranges={CHECKOUT_RANGES} />
{/* Both */}<FunnelChartCard mono shape="sharp" title="Hiring" ranges={HIRING_RANGES} />البيانات
stages هي قائمة مسطّحة { label, value, color? } قائمة، مع الجزء العلوي من القمع أولاً. أضف مرحلة وستحصل على عمود - العروض والأعناق والنسب المئوية والتذييل كلها مشتقة. تدور الألوان في لوحة المخطط ما لم يُتجاوز ذلك. حبة الفترة هي قائمة منسدلة عند تمرير ranges - كل نطاق يحمل بياناته الخاصة (واختياريًا delta / headline) وتُعيد الرسم البياني تحريكه عند التحديد؛ onRangeChange يتيح لك الجلب بدلاً من ذلك. عند غياب خصائص البيانات، تُشحن البطاقة بثلاثة نطاقات تجريبية، وهو ما تستخدمه المعاينات أعلاه.
// One entry per stage, top of the funnel first.const stages = [ { label: "Link opened", value: 197 }, { label: "Started", value: 110 }, { label: "Completed", value: 77 }, { label: "Converted", value: 38, color: "var(--color-chart-3)" }, // override any colour];
<FunnelChartCard title="Sign-up funnel" stages={stages} headline={197} // optional resting headline (defaults to the first stage) delta={0.052} // "+5.2%" chip range="Last 30 days" // static pill…/>
// …or a working period dropdown: each range overrides stages / delta / headline.<FunnelChartCard title="Checkout funnel" ranges={[ { id: "7d", label: "Last 7 days", stages: week, delta: -0.018 }, { id: "30d", label: "Last 30 days", stages: month, delta: 0.042 }, { id: "90d", label: "Last 90 days", stages: quarter, delta: 0.097 }, ]}/>