بطاقة مخطط المساحة
التركيب عبر الزمن - سلاسل متعددة كمناطق مكدّسة بتدرجات لونية ناعمة، ومؤشر متقطع، وعنوان عداد تصاعدي يتبدّل إلى إجمالي الفئة المحوّم عليها. خاصية واحدة تتيح التبديل بين العروض المكدّسة والمتداخلة و100%؛ وأخرى تستبدل المنحنى الأحادي اللون بمقاطع مستقيمة.
الزوار
94,700
+8.2%التثبيت
بطاقة مخطط المساحة جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
المتغيرات
مكدّس (الافتراضي) يُقرأ كحجم، overlap يقارن السلاسل ببعضها، و percent يُوحِّد كل فئة إلى 100% بحيث يُقرأ الرسم البياني كنسبة حصة. الشكل يختار المنحنى.
{/* Overlapping translucent areas - comparison rather than composition */}<AreaChartCard variant="overlap" />
{/* 100% stacked: every category fills the height, so it reads as share */}<AreaChartCard variant="percent" />
{/* Straight segments instead of the monotone spline */}<AreaChartCard shape="sharp" />البيانات
data هي قائمة مسطّحة من الصفوف مفهرسة بـ label مع حقل رقمي لكل سلسلة؛ series يُسمّي تلك الحقول واختيارياً ألوانها. الإجماليات والتسمية التوضيحية والبلاطات وكل حالة تمرير مشتقة. حبة الفترة هي قائمة منسدلة عند تمرير ranges؛ عند غياب خصائص البيانات، تشحن البطاقة بثلاث فترات تجريبية، وهو ما تستخدمه المعاينات أعلاه.
// One row per category, one numeric field per series.const data = [ { label: "Jan", organic: 2400, referral: 1200, paid: 800 }, { label: "Feb", organic: 2800, referral: 1400, paid: 700 }, // …];
<AreaChartCard title="Visitors" data={data} series={[ { key: "organic", label: "Organic" }, // palette colour { key: "referral", label: "Referral" }, { key: "paid", label: "Paid", color: "var(--color-chart-3)" }, // or your own ]} headline={64820} // optional resting headline (defaults to the grand total) delta={0.082} // "+8.2%" chip range="This year" // static pill… tiles // stat tile per series under the chart/>
// …or a working period dropdown: each range overrides data / delta / headline.<AreaChartCard ranges={[ { id: "year", label: "This year", data: thisYear, delta: 0.082 }, { id: "prev", label: "Last year", data: lastYear, delta: -0.036 }, ]}/>