استخدام مكتبة المساعد

تستخدم أداة Looker Studio postMessage لتوفير البيانات ومعلومات التصميم لإطار iframe الذي يحتوي على مؤثر عرض التصور في المجتمع. يوفّر هذا الدليل مزيدًا من التفاصيل حول استخدام "مساعد Google". المكتبة.

بالنسبة لتصورات المجتمع، يؤدي ds-component دالتين.

1. الحصول على أبعاد إطار iframe
2. إدارة التواصل باستخدام Looker Studio

الاشتراك في الأحداث

عندما يتفاعل أحد المستخدمين مع التصور، مثل تغيير الحقول المحددة، أو تغيير حجم المكوِّن، ترسل أداة Looker Studio الأحداث إلى مؤثرات عرض البيانات.

تسجّل dscc.subscribeToData معاودة الاتصال التي سيتم استدعاؤها لكل حدث postMessage من Looker Studio. تم اجتياز إذن معاودة الاتصال data الخاص بك.

function drawViz(data){
  // obtain the height and width to scale your visualization appropriately
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  // write your visualization code here
  console.log("I'm the callback and I was passed this data: " + JSON.stringify(data, null, '  '));
}

// call drawViz every time Looker Studio sends a new postMessage
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

البيانات التي تم إرجاعها

يُرجع كلا تحويلي البيانات كائنًا بخمسة مفاتيح.

المفتاح	الغرض
style	معلومات النمط التلقائي التي يختارها المستخدم
fields	معلومات الحقول التي يختارها المستخدم
interactions	التفاعلات من اختيار المستخدم
theme	الإبلاغ عن معلومات الموضوع
tables	صفوف البيانات
dateRanges	النطاقات الزمنية التلقائية والمقارنة

تنسيق البيانات:

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById),
}

تتطلب التصورات المختلفة تنسيقات بيانات مختلفة. هناك تنسيقان شائعان هما مصفوفة من المصفوفات أو صفيفة من الكائنات. توفر مكتبة مكونات ds اثنين وتحويلات البيانات، والتي تهدف إلى توصيلك مباشرة إلى تنسيقات البيانات هذه.

وقد تم توثيق التحويلين في library-reference. هذه تحوِّل الخريطة بسهولة إلى تنسيقات البيانات المتوقعة عادةً من خلال JavaScript ومكتبات التصوير. التحويلان المتوافقان هما: objectTransform، التي تُرجع صفيفًا من الكائنات، وtableTransform، التي تعرض صفيفًا الصفائف.

dscc.objectTransform

تتوقع بعض التصورات البيانات كصفيف من الكائنات.

على سبيل المثال:

var data = [
  {'colA': 'hello', 'colB', 'world'},
  {'colA': 'hello', 'colB', 'world'}
];

يوضح الرمز التالي كيفية الوصول إلى صفيف من الكائنات من تنسيق dscc.objectTransform

function drawViz(data){
  // what the object transform could look like
  // [
  //  {'configId1': ['hello'], 'configId2': [1] },
  //  {'configId1': ['world'], 'configId2': [2] }
  // ]
  var dsccObjectTransformData = data.tables.DEFAULT;

  // creating an array of objects
  var arrayOfObjects = dscc.ObjectTransformData.rows.map(function(d){
    return {
      'configId1': d.configId1[0],
      'configId2': d.configId2[0]
    };
  };

}

إذا تم تحديد أقسام البيانات بحيث يمكن للمستخدم إدخال حقول متعددة (لـ على سبيل المثال، إذا كان هناك بُعدان محددان لمخطط سانكي)، على حالة استخدامك، إذ إنّ تنسيق البيانات الذي تعرضه Looker سيبدو الاستوديو شبيهًا بما يلي:

var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]

ملاحظة: ستعتمد عمليات تحويل البيانات المطلوبة على إعدادات التمثيل البصري.

dscc.tableTransform

تتوقع بعض مكتبات العروض المرئية مصفوفة من الصفائف.

على سبيل المثال:

var data = [
  ['hello', 1],
  ['world', 2]
];

توضح التعليمة البرمجية التالية كيفية الوصول إلى صف من الصفوف من تنسيق dscc.tableTransform

function drawViz(data);
  // what the below object looks like
  // {
  //    headers: [{
  //      "id": "qt_ky8sltutsb",
  //      "name": "dimension",
  //      "type": "TEXT",
  //      "concept": "DIMENSION",
  //      "configId": "configId1"
  //    }, {
  //      "id": "qt_m9dtntutsb",
  //      "name": "metric",
  //      "type": "NUMBER",
  //      "concept": "METRIC",
  //      "configId": "configId2"
  //    }],
  //  rows: [
  //    ['hello', 1],
  //    ['world', 2]
  //  ];
  // }
  var dsccTableTransformObject = data.tables.DEFAULT;

  // accessing the row of rows
  var rowOfRows = dsccTableTransformObject.rows;

  // accessing the header row
  var headers = dsccTableTransformObject.headers;
}

dscc.subscribeToData(drawViz, {transform: tableTransform});