Some checks failed
App Prod-Parity E2E Dispatch / dispatch (push) Failing after 10s
CD Storybook UI / build (push) Failing after 3m25s
CD Storybook UI / dispatch (push) Has been skipped
CD deploy main / website-changed-files (push) Successful in 18m8s
CI Agent Skills / changed-files-check (push) Successful in 18m9s
CI Create App E2E minimal / changed-files-check (push) Successful in 24s
CI Create App / changed-files-check (push) Successful in 26s
CI Docs / changed-files-check (push) Successful in 26s
CI Emails / changed-files-check (push) Successful in 28s
CI Example App Hello World / changed-files-check (push) Successful in 23s
CI Front / changed-files-check (push) Has been skipped
CI Example App Postcard / changed-files-check (push) Successful in 27s
CI UI / changed-files-check (push) Has been skipped
CI Utils Test / changed-files-check (push) Successful in 45s
CI Twenty Apps / discover (push) Successful in 1m3s
CD deploy main / deploy-main (push) Failing after 3s
CI Agent Skills / agent-skills-validate (push) Has been skipped
CI Create App / create-app-test (lint) (push) Has been skipped
CI Emails / emails-test (push) Has been skipped
CI Front / front-task (lingui:compile) (push) Has been skipped
CI Front / front-task (lint) (push) Has been skipped
CI Example App Postcard / example-app-postcard (push) Has been skipped
CI UI / ui-task (lint) (push) Has been skipped
CI UI / ui-task (pack-size) (push) Has been skipped
CI UI / ui-task (size) (push) Has been skipped
CI UI / ui-task (test) (push) Has been skipped
CI UI / ui-task (typecheck) (push) Has been skipped
CI Utils Test / utils-test (push) Has been skipped
CI Twenty Apps / ${{ matrix.app.name }} (push) Has been skipped
CI Emails / ci-emails-status-check (push) Successful in 2s
CI Example App Hello World / ci-example-app-hello-world-status-check (push) Successful in 2s
CI Example App Postcard / ci-example-app-postcard-status-check (push) Successful in 3s
CI UI / ui-sb-test (push) Has been skipped
CI Utils Test / ci-utils-test-status-check (push) Successful in 2s
CI Twenty Apps / ci-twenty-apps-status-check (push) Successful in 2s
CI UI / ci-ui-status-check (push) Successful in 2s
CI Desktop / desktop (push) Failing after 1m8s
Push docs to Crowdin / Push documentation to Crowdin (push) Failing after 55s
Push translations to Crowdin / Extract and upload translations (push) Failing after 5s
Push website translations to Crowdin / Extract and upload website translations (push) Failing after 5s
CI Create App / create-app-test (test) (push) Has been skipped
CI Create App / create-app-test (typecheck) (push) Has been skipped
CI Docs / docs-lint (push) Has been skipped
CI Example App Hello World / example-app-hello-world (push) Has been skipped
CI Front / front-task (lingui:extract) (push) Has been skipped
CI Front / front-task (test) (push) Has been skipped
CI Front / front-task (typecheck) (push) Has been skipped
CI UI / ui-sb-build (push) Failing after 1m32s
CI Twenty Apps / ${{ matrix.app.name }} (${{ matrix.server-source }}) (push) Has been skipped
CI Agent Skills / agent-skills-publish (push) Has been skipped
CI Create App / ci-create-app-status-check (push) Successful in 2s
CI Agent Skills / agent-skills-remote-source (push) Has been skipped
CI Create App E2E minimal / create-app-e2e-minimal (push) Has been cancelled
CI E2E Main / e2e-test (push) Has been cancelled
CI Front / front-sb-build (push) Has been cancelled
CI Front / front-build (push) Has been cancelled
CI Create App E2E minimal / ci-create-app-e2e-minimal-status-check (push) Has been cancelled
CI E2E Main / ci-e2e-main-status-check (push) Has been cancelled
CI E2E Main / notify-main-ci-failure (push) Has been cancelled
CI E2E Main / qa-scout-comment (push) Has been cancelled
CI Front / front-sb-test (push) Has been cancelled
CI Front / front-sb-screenshots (push) Has been cancelled
CI Front / ci-front-status-check (push) Has been cancelled
DPA Sub-Processor Sync / sync-subprocessors (push) Failing after 3s
AI Catalog Sync / sync-catalog (push) Failing after 2s
276 lines
16 KiB
Plaintext
276 lines
16 KiB
Plaintext
---
|
||
title: إعدادات المخطط
|
||
description: اضبط مخططاتك لعرض البيانات بالطريقة التي تحتاجها تمامًا.
|
||
---
|
||
|
||
import { ChartIcon } from '/snippets/chart-icon.mdx';
|
||
|
||
## الوصول إلى إعدادات المخطط
|
||
|
||
1. انقر زر **تحرير** في الزاوية العلوية اليمنى من لوحة المعلومات لديك
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-edit.png" alt="وضع التحرير" />
|
||
|
||
2. تدخل لوحة المعلومات وضع التحرير
|
||
3. انقر على أي عنصر واجهة لاختياره
|
||
4. تُفتح لوحة الإعدادات على اليمين
|
||
|
||
تُنظَّم الإعدادات في أقسام:
|
||
|
||
* **البيانات**: ما البيانات التي سيتم جلبها وكيفية تصفيتها
|
||
* **المحور X**: كيفية تجميع الفئات وفرزها (المخططات الشريطية/الخطية)
|
||
* **المحور Y**: ما الذي سيتم قياسه وكيفية عرضه (المخططات الشريطية/الخطية)
|
||
* **النمط**: الألوان، التسميات، والخيارات المرئية
|
||
|
||
<Note>
|
||
تظهر بعض الإعدادات فقط عند تهيئة إعدادات أخرى. على سبيل المثال، يظهر خيار **دقة التاريخ** فقط عند تحديد حقل تاريخ.
|
||
</Note>
|
||
|
||
---
|
||
|
||
## إعدادات البيانات
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="database" />المصدر </span>
|
||
|
||
اختر الكائن الذي تريد جلب البيانات منه.
|
||
|
||
1. انقر **المصدر**
|
||
2. حدِّد كائنًا (الفرص، الأشخاص، الشركات، إلخ.)
|
||
|
||
جميع كائناتك القياسية والمخصصة متاحة. يؤدي تغيير المصدر إلى إعادة تعيين الإعدادات الأخرى لأن خيارات الحقول تعتمد على الكائن المحدد.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-source.png" alt="المصدر" />
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filter" />تصفية </span>
|
||
|
||
قيّد السجلات المضمّنة في المخطط.
|
||
|
||
1. انقر على **تصفية**
|
||
2. يُفتح مُنشئ عوامل التصفية
|
||
3. انقر **+ إضافة عامل تصفية**
|
||
4. حدِّد حقلًا وشرطًا وقيمة
|
||
5. أضِف المزيد من عوامل التصفية حسب الحاجة
|
||
|
||
تعمل عوامل التصفية بالطريقة نفسها كما في عروض الجداول. استخدمها للتركيز على شرائح محددة من بياناتك.
|
||
|
||
**مثال**: صفِّ الفرص حيث المرحلة تساوي "Won" لإظهار الصفقات المغلقة فقط.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-filters.png" alt="تصفية" />
|
||
|
||
<Tip>
|
||
بالنسبة لحقول التاريخ، جرّب **نسبي** لإنشاء عوامل تصفية ديناميكية مثل "آخر 7 أيام" أو "هذا الشهر" التي تتحدّث تلقائيًا.
|
||
</Tip>
|
||
|
||
<Tip>
|
||
تُدعم عوامل التصفية المتقدمة—أضِف قواعد تصفية متعددة وادمجها بمنطق **و** أو **أو**.
|
||
</Tip>
|
||
|
||
---
|
||
|
||
## إعدادات المحور X
|
||
|
||
تتحكم هذه الإعدادات في المحور الأفقي للمخططات الشريطية والخطية—وعادةً في كيفية تجميع بياناتك ضمن فئات.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-x" />البيانات المعروضة </span>
|
||
|
||
اختر الحقل لتجميع بياناتك بحسبه. هذا يحدد الفئات المعروضة على المحور X.
|
||
|
||
**مثال**: اختر "Stage" لرؤية البيانات مُجمَّعة حسب مرحلة خط الأنابيب، أو "Created date" لرؤية البيانات عبر الزمن.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-x-data-on-display.png" alt="البيانات المعروضة" />
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />دقة التاريخ </span>
|
||
|
||
عند التجميع حسب حقل تاريخ، اختر الفترة الزمنية للتجميع.
|
||
|
||
| الخيار | يُجمِّع البيانات حسب | مثال على المخرجات |
|
||
| ------------------ | --------------------------- | -------------------------------------------------------- |
|
||
| **يوم** | كل يوم تقويمي | 1 يناير، 2 يناير، 3 يناير... |
|
||
| **أسبوع** | أسابيع التقويم | الأسبوع 1، الأسبوع 2، الأسبوع 3... |
|
||
| **شهر** | أشهر التقويم | يناير، فبراير، مارس... |
|
||
| **ربع** | أرباع السنة المالية | الربع 1، الربع 2، الربع 3، الربع 4 |
|
||
| **عام** | سنوات التقويم | 2023، 2024، 2025 |
|
||
| **يوم من الأسبوع** | يوم من أيام الأسبوع (مجمّع) | الاثنين، الثلاثاء... (جميع أيام الاثنين مجتمعة) |
|
||
| **شهر من السنة** | شهر (مجمّع) | يناير، فبراير... (جميع أشهر يناير مجتمعة) |
|
||
| **ربع من السنة** | ربع (مجمّع) | الربع 1، الربع 2، الربع 3، الربع 4 (جميع الربع 1 مجتمعة) |
|
||
|
||
تُجمِّع خيارات "من الأسبوع/من السنة" عبر كل الوقت. استخدم **يوم من الأسبوع** لمعرفة أي يوم عادةً يحقق أكبر عدد من الصفقات. استخدم **شهر** لرؤية الاتجاهات شهرًا بشهر.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />الفرز حسب </span>
|
||
|
||
تحكّم بترتيب الفئات على المحور X.
|
||
|
||
* **الموضع** – يستخدم الترتيب المحدد في إعدادات حقل الاختيار
|
||
* **أبجديًا** – من A إلى Z (أو ترتيبًا زمنيًا للتواريخ)
|
||
* **حسب القيمة** – يُرتَّب بحسب المقياس (الأعلى أو الأدنى أولًا)
|
||
* **يدوي** – اسحب لضبط ترتيبك الخاص
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-x-sort.png" alt="الترتيب حسب" />
|
||
|
||
**نصيحة**: لمراحل خط الأنابيب، استخدم **الموضع** لعرض المراحل بترتيب عملية المبيعات لديك (Lead → Qualified → Proposal → Won).
|
||
|
||
<Note>
|
||
تعتمد الخيارات المعروضة على نوع الحقل لديك. حقول الاختيار تتضمن جميع الخيارات؛ حقول التاريخ والنص تعرض خيارات أقل.
|
||
</Note>
|
||
|
||
<Tip>
|
||
مع الفرز **اليدوي**، اسحب الفئات لإنشاء ترتيب مخصص—مناسب تمامًا لإبراز شرائح محددة أو سرد قصة ببياناتك.
|
||
</Tip>
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="eye-off" />تجاهل القيم الصفرية </span>
|
||
|
||
أخفِ الفئات التي قيمتها صفر أو التي لا تحتوي بيانات.
|
||
|
||
* **تشغيل**: تُخفى الفئات التي لا تحتوي على سجلات
|
||
* **إيقاف**: تُعرض جميع الفئات حتى لو كانت فارغة
|
||
|
||
استخدم هذا لتنظيف المخططات ذات البيانات المتناثرة.
|
||
|
||
---
|
||
|
||
## إعدادات المحور Y
|
||
|
||
تتحكم هذه الإعدادات في ما تقوم بقياسه وكيفية عرضه.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-y" />البيانات المعروضة </span>
|
||
|
||
اختر الحقل والعملية لحساب مقياسك.
|
||
|
||
* **العدد** – عدّ الكل، عدّ الفارغ، عدّ غير الفارغ، عدّ القيم الفريدة
|
||
* **الرياضيات** – المجموع، المتوسط، الحد الأدنى، الحد الأقصى (حقول الأرقام)
|
||
* **النِّسَب المئوية** – نسبة الفارغ، نسبة غير الفارغ
|
||
|
||
تضيف حقول القيم المنطقية عدّ true/false. تُظهر المخططات التجميعية مع حقول التاريخ الأقدم/الأحدث.
|
||
|
||
**مثال**: اختر "Amount" مع المجموع لرؤية إجمالي قيمة الصفقة لكل فئة، أو عدّ الكل لرؤية عدد الصفقات.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png" alt="البيانات المعروضة" />
|
||
|
||
<Note>
|
||
تعتمد الخيارات المعروضة على نوع الحقل ونوع المخطط. إذا لم تر العملية المتوقعة، فتحقّق من نوع الحقل.
|
||
</Note>
|
||
|
||
### النسبة
|
||
|
||
بالنسبة لحقول الاختيار، ومتعدد الاختيار، أو القيم المنطقية، يمكنك حساب نسبة قيمة محددة.
|
||
|
||
1. اختر حقل اختيار، أو متعدد الاختيار، أو حقلًا منطقيًا
|
||
2. فعِّل **النسبة**
|
||
3. اختر الخيار المراد قياسه
|
||
|
||
**مثال**: اعرض الصفقات "Won" كنسبة مئوية من جميع الفرص. إذا كان لديك 10 "Won" من أصل 50 إجمالًا، فسيعرض المخطط 20٪.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filters" />التجميع حسب </span>
|
||
|
||
أضِف بُعدًا ثانيًا لإنشاء عدة سلاسل (عدة أشرطة أو خطوط).
|
||
|
||
1. عيّن حقل المحور X أولًا
|
||
2. انقر **التجميع حسب**
|
||
3. اختر حقلًا ثانيًا
|
||
|
||
**مثال**: جمِّع الصفقات حسب المرحلة (المحور X) وأيضًا حسب المالك (التجميع حسب) لرؤية تفصيل خط الأنابيب لكل شخص جنبًا إلى جنب.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png" alt="التجميع حسب" />
|
||
|
||
عند تعيين التجميع حسب، سترى ألوانًا متعددة في مخططك وستظهر وسيلة إيضاح.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />دقة التاريخ </span>
|
||
|
||
عندما يكون التجميع حسب حقل تاريخ، اختر الفترة الزمنية (نفس خيارات المحور X).
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />الفرز حسب </span>
|
||
|
||
عند تفعيل **التجميع حسب**، تحكّم بترتيب السلاسل المجمّعة (مثلًا، أي شريط للمالك يظهر أولًا ضمن كل فئة).
|
||
|
||
نفس خيارات فرز المحور X—الموضع، أبجديًا، ويدوي—باستثناء أن **الفرز حسب القيمة غير متاح** للتجميع الثانوي.
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="chart-bar-popular" />تراكمي </span>
|
||
|
||
اعرض المجاميع التراكمية بدلًا من القيم الفردية.
|
||
|
||
* **إيقاف**: يُظهر كل شريط/نقطة قيمته الخاصة
|
||
* **تشغيل**: يُظهر كل شريط/نقطة مجموع جميع القيم السابقة مضافًا إليها قيمته
|
||
|
||
**مثال**: يناير = 10، فبراير = 15
|
||
|
||
* التراكمي متوقف: يُظهر 10 و15
|
||
* التراكمي مفعّل: يُظهر 10 و25 (10 + 15)
|
||
|
||
استخدم التراكمي لتتبُّع التقدم نحو هدف عبر الزمن.
|
||
|
||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-cumulative.png" alt="تراكمي" />
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="math-min" />المدى الأدنى / <ChartIcon icon="math-max" />المدى الأقصى </span>
|
||
|
||
عيّن قيمًا دنيا وعظمى ثابتة للمحور Y.
|
||
|
||
* اتركه فارغًا للتحجيم التلقائي
|
||
* أدخل رقمًا لتثبيت الحد
|
||
|
||
**متى يُستخدم:**
|
||
|
||
* عيّن الحد الأدنى إلى 0 للحصول على مقارنات مرئية دقيقة
|
||
* عيّن كليهما للحصول على مقاييس متسقة عبر عدة مخططات
|
||
* ركّز على نطاق قيم محدد بتعيين كليهما
|
||
|
||
---
|
||
|
||
## إعدادات النمط
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="color-swatch" />الألوان </span>
|
||
|
||
عيّن نظام الألوان لمخططك. اختر من مجموعة متنوعة من لوحات الألوان.
|
||
|
||
<Note>
|
||
عند التجميع حسب حقل اختيار، يستخدم المخطط تلقائيًا الألوان المحددة لكل خيار في إعدادات الحقل لديك.
|
||
</Note>
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="gizmo" />اسم المحور </span>
|
||
|
||
اختر تسميات المحاور المراد عرضها: **لا شيء**، **المحور X**، **المحور Y**، أو **كلاهما** (للمخططات الشريطية والخطية فقط).
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="stack-2" />أشرطة مكدّسة / خطوط مكدّسة </span>
|
||
|
||
عند تعيين التجميع حسب، اختر كيفية عرض السلاسل المتعددة.
|
||
|
||
* **إيقاف (مجمّعة)**: تظهر السلاسل جنبًا إلى جنب. استخدم عند مقارنة القيم الدقيقة بين المجموعات.
|
||
* **تشغيل (مكدّسة)**: تتكدس السلاسل فوق بعضها. استخدم عند إظهار التركيب—كيف تتكوّن الأجزاء لتشكّل الكل.
|
||
|
||
**مثال**: صفقات حسب المرحلة، مُجمّعة حسب المالك
|
||
|
||
* مجمّعة: شاهد الأرقام الدقيقة لكل مالك جنبًا إلى جنب
|
||
* مكدّسة: شاهد إجمالي الصفقات لكل مرحلة، مع مساهمة كل مالك مكدّسة
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="badge-2k" />تسميات البيانات </span>
|
||
|
||
اعرض القيم مباشرة على عناصر المخطط (الأشرطة، النقاط، الشرائح).
|
||
|
||
* **تشغيل**: تظهر القيم على المخطط
|
||
* **إيقاف**: لا تُعرض قيم (مظهر أنظف)
|
||
|
||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="text-caption" />وسيلة الإيضاح </span>
|
||
|
||
إظهار أو إخفاء وسيلة الإيضاح (تظهر فقط عند تعيين التجميع حسب).
|
||
|
||
* **تشغيل**: تعرض وسيلة الإيضاح ما يمثله كل لون
|
||
* **إيقاف**: لا تُعرض وسيلة إيضاح
|
||
|
||
<Tip>
|
||
**مرّر المؤشر** فوق عنصر في وسيلة الإيضاح لإبراز تلك المجموعة. **انقر** لإخفائه مؤقتًا من المخطط.
|
||
</Tip>
|
||
|
||
---
|
||
|
||
## ملاحظات خاصة بالمخطط
|
||
|
||
### مخططات دائرية
|
||
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="chart-pie" size={16} /></span> **تمثل كل شريحة** – حدِّد كيفية تجميع الشرائح
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="eye-off" size={16} /></span> **إخفاء الفئة الفارغة** – إزالة الشرائح ذات القيمة الصفرية
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="number-123" size={16} /></span> **إظهار القيمة في الوسط** – عرض القيمة المجمّعة (المجموع، المتوسط، العدّ، إلخ.)
|
||
|
||
### مخططات التجميع
|
||
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-left" size={16} /></span> **بادئة** – أضِف نصًا قبل الرقم (مثلًا، "$")
|
||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-right" size={16} /></span> **لاحقة** – أضِف نصًا بعد الرقم (مثلًا، "%")
|