שימוש בספריית העזרה

‫Looker Studio משתמש בממשק postMessage כדי לספק נתונים ומידע על סגנון ל-iframe שמכיל את התצוגה החזותית של הקהילה. במדריך הזה מוסבר בפירוט איך להשתמש בספריית העזר.

במקרה של תרשימים של הקהילה, הרכיב ds-component משמש לשתי פונקציות.

  1. קבלת המידות של ה-iframe
  2. ניהול התקשורת עם Looker Studio

הרשמה לקבלת עדכונים על אירועים

כשמשתמש יוצר אינטראקציה עם ההמחשה, למשל משנה שדות נבחרים, סגנון או גודל של הרכיב, Looker Studio שולח אירועים להמחשה.

‫dscc.subscribeToData רושם קריאה חוזרת (callback) שתופעל עבור כל אירוע 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 מספקת שני טרנספורמציות, שנועדו להביא אתכם ישירות לפורמטים האלה של נתונים.

שני הטרנספורמציות מתועדות ב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 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});