إنشاء عروض مرئية مخصّصة في "مركز البيانات"

1. مقدمة

تتيح لك خدمة استوديو البيانات إنشاء لوحات بيانات تفاعلية مباشرة تتضمّن عروضًا مرئية رائعة للبيانات، وذلك مجانًا. يمكنك استرداد بياناتك من مجموعة متنوعة من المصادر وإنشاء عدد غير محدود من التقارير في "مركز البيانات"، مع إمكانات التعديل والمشاركة الكاملة. لقطة الشاشة التالية هي مثال على تقرير في "مركز البيانات":

( انقر هنا للاطّلاع على نموذج التقرير هذا في "مركز البيانات")

يوفر مركز البيانات العديد من أنواع الرسوم البيانية المضمنة، بما في ذلك الرسوم البيانية الخطية والشريطية والدائرية والرسوم البيانية بالنقاط المبعثرة. تتيح لك العروض المرئية من المنتدى إنشاء عروض مرئية مخصّصة للبيانات باستخدام JavaScript واستخدامها في "مركز البيانات من Google". يمكنك أيضًا مشاركة العروض المرئية من المنتدى مع الآخرين ليتمكّنوا من استخدامها مع بياناتهم.

أهداف الدورة التعليمية

في هذا الدرس العملي، ستتعرّف على ما يلي:

• طريقة عمل عرض مرئي لبيانات المنتدى في "مركز البيانات"
• كيفية إنشاء عرض مرئي لبيانات المنتدى باستخدام مكتبة ds-component المساعدة (dscc)
• كيفية استخدام التمثيل المرئي الخاص بالمنتدى في تقرير "مركز البيانات"

المتطلبات

لإكمال هذا الدرس التطبيقي، ستحتاج إلى:

• إمكانية الوصول إلى الإنترنت ومتصفّح ويب
• حساب Google
• يجب أن يكون لديك إذن الوصول إلى حزمة تخزين في Google Cloud Platform.
• أن تكون على دراية بلغة JavaScript

2. استطلاع سريع

لماذا اخترت هذا الدرس التطبيقي حول الترميز؟

أنا مهتم بتصوير البيانات بشكل عام. أريد معرفة المزيد عن "مركز البيانات". أريد إنشاء "تصور بيانات خاص بالمنتدى". أحاول دمج "مركز البيانات" مع منصة أخرى. أنا مهتمّ بحلول Google Cloud.

كيف تخطّط لاستخدام هذا الدرس العملي/البرنامج التعليمي؟

تصفُّح سريع فقط قراءة الدليل وإكمال التمارين

ما هو تقييمك لتجربتك مع "مركز البيانات"؟

لم أسمع به من قبل. أعرف ما هي هذه الميزة ولكنّني لا أستخدمها. أستخدمه من حين لآخر. أستخدمها بانتظام. أنا مستخدم متمرّس.

ما هو أفضل وصف لخلفيتك؟

المطوِّر مصمّم / أخصائي تجربة المستخدم: محلّل أعمال / بيانات / مالي: عالِم بيانات أو مهندس بيانات: خبير في التسويق ووسائل التواصل الاجتماعي وتحليلات الأداء الرقمي غير ذلك

ما هي مكتبات العرض المرئي JavaScript التي تهمّك؟

D3.js أدوات الرسم البياني من Google Chart.js Leaflet Highcharts Plot.ly غير ذلك

انتقِل إلى الصفحة التالية لإرسال معلومات الاستطلاع.

3- نظرة عامة على العروض المرئية لبيانات المنتدى

تتيح لك العروض المرئية من المنتدى في "مركز البيانات" إنشاء عروض مرئية مخصّصة للبيانات باستخدام JavaScript واستخدامها في لوحات البيانات.

في هذا الدرس التطبيقي حول الترميز، ستنشئ تمثيلاً بصريًا للجدول في "التمثيلات البصرية من إنشاء المنتدى" يتيح استخدام سمة واحدة ومقياس واحد وتنسيق عناوين الجدول.

4. سير عمل تطوير العرض المرئي لبيانات المنتدى

لإنشاء تصور من إنشاء المنتدى، تحتاج إلى الملفات التالية في حزمة تخزين على Google Cloud Platform، والتي ستنشئها في خطوة لاحقة:

اسم الملف	نوع الملف	الغرض
manifest.json*	JSON	البيانات الوصفية حول التمثيل المرئي ومواقع جميع موارد التمثيل المرئي
viz-codelab.json	JSON	خيارات إعداد البيانات والأسلوب في "لوحة الموقع"
viz-codelab.js	JavaScript	رمز JavaScript لعرض التمثيل المرئي
viz-codelab.css (اختياري)	CSS	أنماط CSS للعرض المرئي

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

5- كتابة عرض مرئي لعبارة "Hello, world!‎"

في هذا القسم، ستضيف الرمز المطلوب لعرض تصور بسيط لعبارة Hello, world!.

كتابة مصدر JavaScript الخاص بالتصوّر

الخطوة 1: نزِّل ملف dscc.min.js من صفحة مكتبة عناصر المنتدى في "مركز البيانات" (dscc) وانسَخه إلى دليل العمل.

الخطوة 2: انسخ الرمز التالي في محرّر نصوص واحفظه باسم viz-codelab-src.js في دليل العمل المحلي.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

إعداد ملف حزمة JavaScript

الخطوة 3: ادمج كل JavaScript المطلوب في ملف واحد عن طريق نسخ محتوى مكتبة أداة المساعدة في العرض المرئي (dscc.min.js) وملف viz-codelab-src.js في ملف جديد باسم viz-codelab.js. يمكن تنفيذ الأوامر التالية لدمج الملفات. كرِّر هذه الخطوة في كل مرة تعدّل فيها رمز التصور المصدر.

نص برمجي لدمج نظامي التشغيل Linux/Mac

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

نص برمجي لدمج ملفات Windows

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6. كتابة CSS للعرض المرئي

يحدّد ملف CSS نمط التصور وهو اختياري. انسخ CSS التالي واحفظه باسم viz-codelab.css.

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. كتابة إعدادات JSON

يحدّد إعداد التصور سمات البيانات والأسلوب التي يتيحها ويتطلبها التصور. يتطلّب هذا التمثيل المرئي في هذا الدرس التطبيقي حول الترميز سمة واحدة ومقياسًا واحدًا، ويتضمّن عنصر نمط واحدًا لاختيار لون التعبئة. مزيد من المعلومات عن السمات والمقاييس

انسخ الرمز التالي واحفظه باسم viz-codelab.json.لمزيد من المعلومات عن الخصائص التي يمكنك ضبطها، راجِع مرجع إعدادات العرض المرئي الخاص بالمنتدى.

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. إنشاء مشروع ومجموعة تخزين على السحابة الإلكترونية

الخطوة 1: إنشاء مشروع على Google Cloud Platform (GCP) أو استخدام مشروع حالي

الخطوة 2: إنشاء حزمة في Google Cloud Platform فئة التخزين المقترَحة هي "إقليمية". يمكنك الانتقال إلى أسعار Cloud Storage للاطّلاع على تفاصيل حول المستويات المجانية. ملاحظة: من غير المرجّح أن تتكبّد مساحة تخزين العرض المرئي أي تكاليف لفئة التخزين الإقليمية.

الخطوة 3: سجِّل اسم الحزمة أو مسارها، بدءًا من القسم الذي يلي الحِزم/. يُشار إلى المسار باسم "معرّف المكوّن" في "مركز البيانات"، ويُستخدم لتحديد تصور ونشره.

9- كتابة ملف manifest.json

يوفّر ملف البيان معلومات حول موقع العرض المرئي وموارده. يجب أن يكون اسمه "manifest.json"، ويجب أن يكون موجودًا في الحزمة أو المسار الذي تم إنشاؤه في الخطوة السابقة، وهو المسار نفسه المستخدَم لمعرّف المكوّن.

انسخ الرمز التالي في محرر نصوص واحفظه باسم manifest.json.

ملاحظة مهمة: تأكَّد من استبدال MY_GOOGLE_CLOUD_STORAGE_BUCKET بالحزمة أو المسار الصحيحَين لكلّ مصدر.

لمزيد من المعلومات حول ملف البيان، يُرجى الاطّلاع على مستندات مرجع ملف البيان.

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Data Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. تحميل ملفات التمثيل المرئي إلى Google Cloud Storage

1. حمِّل الملفات manifest.json وviz-codelab.js وviz-codelab.json وviz-codelab.css إلى حزمة Google Cloud Storage باستخدام واجهة الويب أو أداة سطر الأوامر gsutil. كرِّر هذه العملية في كل مرة تعدّل فيها التمثيل المرئي.

ملاحظة مهمة: تأكَّد من أنّ ملفاتك علنية. لمزيد من المعلومات حول إتاحة قراءة العناصر للجميع، يُرجى الاطّلاع على مستندات Google Cloud.

أوامر التحميل في gsutil

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. اختبار العرض المرئي من المنتدى في "مركز البيانات"

إنشاء تقرير وإضافة بيانات

الخطوة 1: انسخ عنوان URL لمجموعة البيانات النموذجية الخاصة بـ "الرسومات البيانية من إعداد المنتدى". يمكنك بدلاً من ذلك استخدام أي مصدر بيانات تفضّله وتخطّي الخطوات التالية.

الخطوة 2: سجِّل الدخول إلى "مركز البيانات". في أعلى يمين الصفحة، انقر على + إنشاء، ثم اختَر تقرير.

الخطوة 3: ستظهر لك أداة "محرّر التقارير"، مع فتح لوحة إضافة بيانات إلى التقرير.

الخطوة 4: في علامة التبويب الربط بالبيانات، اختَر أداة الربط جداول بيانات Google من Google.

الخطوة 5: انقر على عنوان URL وألصِق عنوان URL لجدول بيانات Google من الخطوة 1.

الخطوة 6: في أسفل يسار الصفحة، انقر على إضافة.

الخطوة 7: إذا طُلب منك تأكيد أنت على وشك إضافة بيانات إلى هذا التقرير، انقر على إضافة إلى التقرير. يتم إنشاء تقرير بدون عنوان وإضافة جدول تلقائي إلى التقرير مع بيانات نموذجية. يمكنك اختياريًا اختيار الجدول التلقائي وحذفه لكي يتبقى لديك تقرير فارغ.

إضافة التمثيل المرئي الخاص بالمنتدى إلى التقرير

الخطوة 1: في شريط الأدوات، انقر على "الرسومات المرئية والمكوّنات من إعداد المنتدى" .

الخطوة 2: انقر على + استكشاف المزيد لفتح "معرض المنتدى".

الخطوة 3: انقر على إنشاء تمثيلك المرئي.

الخطوة 4: ضمن اختبار إضافة العرض المرئي الخاص بالمنتدى، أدخِل مسار ملف البيان وانقر على إرسال. مسار ملف البيان هو اسم حزمة Google Cloud Storage ومسارها اللذان يشيران إلى موقع ملف بيان التمثيل المرئي، مع إضافة البادئة gs://.، على سبيل المثال: gs://community-viz-docs/viz-codelab. إذا أدخلت مسار ملف بيانات صالحًا، من المفترض أن تظهر بطاقة تمثيل مرئي.

الخطوة 5: انقر على بطاقة التمثيل المرئي لإضافتها إلى تقريرك.

الخطوة 6: إذا طُلب منك ذلك، امنح موافقتك للسماح بعرض التمثيل المرئي.

الخطوة 7: يمكنك اختياريًا تعديل السمة والمقياس المحدّدين للجدول. إذا كنت تستخدم مجموعة البيانات النموذجية المقدَّمة، اضبط السمة على البلد والمقياس على عدد السكان. لن يكون لهذا أي تأثير على التمثيل المرئي حتى وقت لاحق في الدرس العملي.

تعرض لوحة الخصائص على الجانب الأيسر العناصر التي تم ضبطها في viz-codelab.json.

ضمن لوحة الإعداد، يتيح التمثيل البصري استخدام سمة واحدة ومقياس واحد.

ضمن لوحة النمط، يحتوي التمثيل المرئي على عنصر واحد لتحديد نمط عنوان الجدول. في هذه المرحلة، لن يكون لعنصر التحكّم في النمط أي تأثير على التصور إلى أن يتم تعديل رمز التصور في خطوة لاحقة. ملاحظة: ستظهر لك خيارات أنماط إضافية للتمثيل المرئي لم تحدّدها في ملف الإعداد. وهذا أمر متوقّع، لأنّ جميع التمثيلات المرئية تتضمّن مجموعة من عناصر التحكّم الشائعة التي تتوفّر تلقائيًا.

12. عرض البيانات كجدول

في هذا القسم، ستعدّل التصور لعرض مجموعة البيانات النموذجية الخاصة بـ "تصورات المنتدى" كجدول.

تتوفّر البيانات المطلوب عرضها في العنصر tables، ويتم تنظيمها استنادًا إلى عملية التحويل التي يحدّدها التصوّر. في هذا الدرس التطبيقي حول الترميز، طلب التمثيل المرئي تنسيق الجدول (tableTransform) الذي يتضمّن العنصر headers والعنصر rows الذي يحتوي على جميع البيانات التي نحتاج إليها لعرض جدول.

الخطوة 1: استبدِل محتوى viz-codelab-src.js بالرمز البرمجي أدناه.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

الخطوة 2: أعدّ ملف حزمة JavaScript، ثم حمِّل ملفات التمثيل المرئي واكتب فوقها في Google Cloud Storage.

الخطوة 3: أعِد تحميل تقرير "مركز البيانات" لاختبار التمثيل المرئي الخاص بالمنتدى. يعرض الجدول الآن البيانات (أي جدول بيانات Google) ويعرض أعمدة العناوين استنادًا إلى السمة والمقياس المحدّدين. غيِّر حجم التمثيل المرئي للاطّلاع على جميع الصفوف.

13. تطبيق تغييرات الأنماط بشكل ديناميكي

في هذا القسم، ستعدّل التمثيل المرئي لتنسيق عنوان الجدول استنادًا إلى لون التعبئة الذي تم اختياره في لوحة النمط.

تتوفّر حالة جميع عناصر النمط في الكائن style، حيث يتم تحديد مفتاح كل عنصر استنادًا إلى إعدادات نمط التمثيل المرئي (viz-codelab.json). في هذا القسم، ستحصل على لون التعبئة المحدّد وتستخدمه لتعديل لون خلفية عنوان الجدول.

الخطوة 1: استبدِل الرمز في ملف viz-codelab-src.js بالرمز أدناه.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

الخطوة 2: أعدّ ملف حزمة JavaScript، ثم حمِّل ملفات التمثيل المرئي واكتب فوقها في Google Cloud Storage.

الخطوة 3: أعِد تحميل تقرير "مركز البيانات" لاختبار العرض المرئي الخاص بالمنتدى.

الخطوة 4: ضمن لوحة النمط، استخدِم عنصر التحكّم في النمط لون خلفية العنوان لتغيير لون خلفية عنوان الجدول.

تهانينا! لقد أنشأت عرضًا مرئيًا لبيانات المنتدى في "مركز البيانات". بهذا نكون قد وصلنا إلى نهاية هذا الدرس التطبيقي حول الترميز. لنطّلع الآن على الخطوات التالية التي يمكنك اتّخاذها.

14. الخطوات التالية

توسيع نطاق التصوّر

• مزيد من المعلومات حول البيانات والتنسيقات المتاحة في التمثيل المرئي
• مزيد من المعلومات عن عناصر الأنماط المتاحة وإضافة أنماط إضافية إلى التمثيل المرئي
• إضافة تفاعلات إلى التمثيل المرئي
• كيفية تطوير تمثيل مرئي محليًا

إنجاز المزيد باستخدام الرسومات البيانية من إعداد المنتدى

• راجِع مراجع مكتبة أدوات المساعدة في DSCC وملف البيان وملف الإعداد.
• أرسِل العرض المرئي إلى معرض العروض المرئية لبيانات المنتدى.
• إنشاء موصّل بيانات من إنشاء المنتدى لأداة "مركز البيانات"

مراجع إضافية

في ما يلي مراجع مختلفة يمكنك الوصول إليها لمساعدتك في التعرّف أكثر على المواد التي تم تناولها في هذا الدرس العملي.

نوع المرجع	ميزات المستخدم	ميزات المطوّرين
الوثائق	مركز المساعدة	مستندات المطوّرين
الأخبار والتحديثات	الاشتراك في مركز البيانات > إعدادات المستخدم	القائمة البريدية للمطوّرين
طرح أسئلة	منتدى المستخدمين	‫Stack Overflow [data-studio] منتدى مطوّري "مركز البيانات"
أمثلة	معرض التقارير	مستودع البرامج المفتوحة المصدر