إذا كنت تبني Dashboard أو منتج SaaS بـReact وتريد رسومًا بيانية تبدو جزءًا من تصميم المنتج بدل الشكل الافتراضي لمكتبات Charts، فـMono Charts تقدم مجموعة من التصورات المينيمال والمتحركة يمكن إدخال كودها مباشرة إلى مشروعك عبر Amicro CLI.
ما هي Mono Charts؟
Mono Charts هي مجموعة داخل مكتبة Amicro، وهي مكتبة مفتوحة المصدر لمكونات React والتفاعلات والحركات المبنية باستخدام Motion. المجموعة تركز على Data Visualization بتصميم نظيف وحركة خفيفة، وتضم نحو 30 تصورًا بيانيًا.
ما أنواع الرسوم المتاحة؟
المجموعة تغطي أنماطًا متعددة للاستخدام في لوحات البيانات والمنتجات الرقمية، ومنها Line وArea وBar وDonut وRadar وHeatmap وScatter وFunnel وCandlestick وSankey وKPI Cards وغيرها. الفكرة ليست إضافة Chart Engine جديد فقط، بل توفير أشكال جاهزة بصريًا يمكن للمطور تعديلها لتناسب Design System الخاص بالمنتج.
الميزة العملية: الكود يدخل مشروعك
Amicro تتبع أسلوب Copy-to-Code: عند إضافة Component عبر CLI، تحصل على كود TSX داخل مشروعك بدل الارتباط بخدمة Charts مغلقة لا تستطيع تعديل تفاصيلها. هذا يعني أنك تستطيع تغيير البيانات والألوان والحركة والتخطيط والمنطق بحسب احتياج المنتج.
كيف تبدأ؟
npx @subhanhq/amicro@latest initبعد تهيئة المشروع يمكنك إضافة المكون المطلوب بالاسم. مثال منشور لإضافة أحد رسوم Mono Charts:
npx @subhanhq/amicro@latest add mono-rounded-lineما المتطلبات؟
- Node.js 18 أو أحدث.
- React 18 أو 19.
- Tailwind CSS 3 أو 4.
- Motion أو Framer Motion للحركات.
ملف المشروع الحالي يوضح أيضًا استخدام Recharts ضمن Dependencies، لذلك من الأفضل مراجعة تبعيات كل Chart تختاره بدل افتراض أن المكون مستقل تمامًا عن مكتبات الرسم الأساسية.
أين يمكن أن تستفيد منها؟
- Dashboards لمنتجات SaaS.
- صفحات Analytics ومراقبة الأداء.
- لوحات الإيرادات والمبيعات.
- تقارير الاستخدام والـTelemetry.
- Landing Pages التي تحتاج Data Storytelling بصريًا.
- واجهات AI التي تعرض استهلاك Tokens أو الأداء أو تقييمات النماذج.
هل هي مجانية؟
المستودع منشور بترخيص MIT، وهو ترخيص مفتوح ومرن للاستخدام والتعديل وفق شروطه. لكن «مفتوح المصدر» لا يعني أن كل ما يحيط بمشروعك سيكون بلا تكلفة؛ الاستضافة أو مصادر البيانات أو الخدمات الخارجية التي تربطها بالـDashboard قد تكون لها تكاليف منفصلة.
لماذا قد تختار Copy-to-Code؟
هذا الأسلوب مناسب عندما تريد التحكم الدقيق في UI. بدل محاولة تجاوز Styling لمكون مغلق، يصبح الكود جزءًا من المشروع ويمكنك مراجعته وتعديله وربطه بنظام التصميم. المقابل هو أنك تتحمل مسؤولية صيانة النسخة التي أدخلتها ومراجعة تحديثاتها وتوافقها مع مشروعك.
المصادر
بحسب اهتمامك: هذه المقالة ضمن «مقالات Let’sDoAI ← برمجة»، حيث نتابع الأدوات المفتوحة ومكونات الواجهات وموارد المطورين التي تختصر وقت بناء المنتجات.