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

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

בסוגי ויזואליזציות נתונים במאגר הקהילה, ds-component משמש לשתי פונקציות.

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

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

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

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

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