الرسوم البيانية

import"@truvar-ai/design-system/charts"

الرسوم البيانية

كل رسم يستخدم ألوان Truvar، وينسق الأرقام حسب لغة القارئ، ويعكس محور الوقت في العربية، ويحتوي على عرض جدول بنفس البيانات لقارئات الشاشة وللنسخ.

الألوان

مبني على --chart-1 … --chart-6

الكحلي والذهبي في المقدمة. في الوضع الداكن يُفتّح الكحلي ليبقى ظاهرًا. والأحمر للقيم السلبية فقط.

chart-1chart-2chart-3chart-4chart-5chart-6

رسم خطي

مبني على LineChart

للاتجاهات عبر الزمن. سلسلتان كحد أقصى لكل رسم تُبقيه واضحًا.

المكالمات اليومية

آخر ٣٠ يومًا

  • الوكيل الذكي
  • الفريق البشري
ارتفعت مكالمات الوكيل الذكي من ٤٢٠ إلى ٧١٤ يوميًا، وتعامل الفريق البشري مع نحو ١٤٣.

مساحات متراكمة

مبني على AreaChart

أجزاء من إجمالي متزايد.

دقائق المكالمات حسب القناة

آخر ١٢ أسبوعًا

  • الهاتف
  • WhatsApp
  • أداة الموقع
زادت الدقائق في كل القنوات، وكانت واتساب الأسرع نموًا.

الأعمدة

مبني على BarChart

الأعمدة المجمعة تقارن الفئات جنبًا إلى جنب، والمتراكمة تُظهر التركيب داخل كل إجمالي.

النتائج حسب الشهر

مايو إلى أكتوبر

  • محجوز
  • معاودة الاتصال
  • لم يرد
زادت الاجتماعات المحجوزة كل شهر بينما قلّت المكالمات التي لم يُرد عليها.

تركيب النتائج حسب الشهر

مايو إلى أكتوبر

  • محجوز
  • معاودة الاتصال
  • لم يرد
زادت الاجتماعات المحجوزة كل شهر بينما قلّت المكالمات التي لم يُرد عليها.

أعمدة مرتبة

مبني على RankedBars (HTML)

أعمدة أفقية للتسميات الطويلة، مرتبة من الأكبر. مبنية كقائمة فلا تتداخل التسميات مع الأعمدة وتنعكس في العربية.

لماذا يتصل العملاء

أهم الأسباب هذا الشهر

  1. استفسار عن الفاتورة٣٬٤١٠
  2. حجز موعد٢٬٩٨٠
  3. حالة الطلب٢٬٣١٠
  4. إلغاء أو تعديل١٬٤٩٠
  5. شكوى٩٨٠
  6. أخرى٦٤٠

أعمدة مع خط

مبني على ComposedChart

الحجم كأعمدة على محور، والمعدل كخط على المحور الآخر، مع تسمية كل محور حتى لا يختلط المقياسان.

المكالمات ومعدل الحجز

  • المكالمات
  • معدل الحجز
زادت المكالمات كل شهر وارتفع معدل الحجز من ٣٣٪ إلى ٤١٪.

الحلقة والدائرة

مبني على PieChart

لأجزاء كلٍّ واحد، بخمسة أجزاء أو أقل. مركز الحلقة يحمل الإجمالي.

المكالمات حسب اللغة

  • العربية المصرية ٥٨٪؜
  • العربية الخليجية ١٧٪؜
  • الإنجليزية ١٩٪؜
  • الفرنسية ٦٪؜
كانت ٥٨٪ من المكالمات بالعربية المصرية.

انطباع المتصلين

  • إيجابي ٦٤٪؜
  • محايد ٢٧٪؜
  • سلبي ٩٪؜
٦٤٪ إيجابي، ٢٧٪ محايد، ٩٪ سلبي.

خطوط مصغّرة

مبني على Sparkline + StatTile

اتجاهات صغيرة داخل مربعات الإحصاءات. زخرفية، والمعنى يحمله الرقم ونسبة التغير.

مكالمات اليوم١٬٢٨٤١٤٪؜ عن الأسبوع الماضي
متوسط مدة المكالمة3:12٨٪؜ عن الأسبوع الماضي
التحويلات لموظف٤١٢٢٪؜ عن الأسبوع الماضي

تشتت وفقاعات

مبني على ScatterChart + ZAxis

العلاقة بين مقياسين، وحجم الفقاعة يضيف ثالثًا.

مدة المكالمة مقابل الرضا

كل فقاعة نص وكيل، والحجم عدد المكالمات

يبلغ الرضا ذروته في المكالمات التي تستغرق ثلاث إلى أربع دقائق تقريبًا.

رادار

مبني على RadarChart

يقارن ملفين عبر خمس إلى ثماني صفات.

جودة الوكلاء

  • تيسير
  • نور
يتقدم تيسير في الدقة والالتزام، وتتقدم نور في النبرة والبيع الإضافي.

مؤشر

مبني على SVG

رقم واحد مقابل هدف، والعلامة الذهبية تحدد الهدف.

قمع

مبني على FunnelBars (HTML)

التسرب بين مراحل مرتبة. كل مرحلة تُظهر عددها ونسبة التحويل من المرحلة السابقة.

من المكالمة إلى العميل

أدت ١٢٬٤٠٠ مكالمة إلى ٨٦٠ صفقة ناجحة، بنسبة ٧٪ إجمالًا.

  1. مكالمات تم الرد عليها١٢٬٤٠٠
  2. مؤهلة٧٬٣٠٠٥٩٪؜ من المرحلة السابقة
  3. تم حجز اجتماع٣٬٩٠٠٥٣٪؜ من المرحلة السابقة
  4. عرض مُرسل٢٬١٠٠٥٤٪؜ من المرحلة السابقة
  5. تم الفوز٨٦٠٤١٪؜ من المرحلة السابقة

خريطة شجرية

مبني على Treemap

أحجام أجزاء كثيرة معًا، مثل أين يُنفق المال.

تفصيل التكلفة

هذا الشهر

نموذج الذكاء الاصطناعي هو أكبر تكلفة بنسبة ٣٣٪.

خريطة حرارية

مبني على CSS grid

بُعدان للوقت معًا. مرّر المؤشر على خلية لترى قيمتها، والمقياس يتدرج من الفاتح إلى الداكن.

متى يتصل العملاء

أقلمكالمات أكثر