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

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

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

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

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

هنگامی که یک کاربر با تجسم شما تعامل می کند، مانند تغییر فیلدهای انتخاب شده، سبک یا تغییر اندازه مؤلفه، استودیو Looker رویدادها را به تصویرسازی شما ارسال می کند.

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

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