استفاده از کتابخانه کمکی

Looker Studio از رابط postMessage برای ارائه داده‌ها و اطلاعات استایل‌بندی به iframe حاوی تجسم جامعه استفاده می‌کند. این راهنما جزئیات بیشتری در مورد استفاده از کتابخانه کمکی ارائه می‌دهد.

برای تجسم جامعه، ds-component دو عملکرد را ارائه می‌دهد.

1. ابعاد iframe را بدست آورید
2. مدیریت ارتباط با Looker Studio

اشتراک در رویدادها

وقتی کاربری با مصورسازی شما تعامل می‌کند، مثلاً فیلدهای انتخاب‌شده را تغییر می‌دهد، استایل می‌دهد یا اندازه‌ی کامپوننت را تغییر می‌دهد، Looker Studio رویدادهایی را به مصورسازی شما ارسال می‌کند.

dscc.subscribeToData یک تابع فراخوانی (callback) ثبت می‌کند که برای هر رویداد postMessage از Looker Studio فراخوانی می‌شود. به این تابع فراخوانی، یک شیء data object) ارسال می‌شود.

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-component دو تبدیل ارائه می‌دهد که برای دسترسی مستقیم شما به این قالب‌های داده طراحی شده‌اند.

این دو تبدیل در library-reference مستند شده‌اند. این تبدیل‌ها به راحتی به فرمت‌های داده‌ای که معمولاً توسط کتابخانه‌های تجسم جاوا اسکریپت انتظار می‌رود، نگاشت می‌شوند. دو تبدیل پشتیبانی‌شده عبارتند از: 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]
    };
  };

}

اگر بخش‌های داده به گونه‌ای تعریف شوند که کاربر بتواند چندین فیلد را وارد کند (برای مثال، اگر دو بُعد برای نمودار sankey تعریف شده باشد)، آنگاه تبدیل به مورد استفاده شما بستگی خواهد داشت، زیرا قالب داده‌ای که توسط Looker Studio برگردانده می‌شود بیشتر شبیه به این خواهد بود:

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});