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

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

כדי ליצור תצוגות חזותיות של הקהילה: ds-component ממלא שתי פונקציות.

1. קבלת מאפייני ה-iframe
2. ניהול התקשורת באמצעות Looker Studio

הרשמה לאירועים

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

עם dscc.subscribeToData יתועדו קריאה חוזרת (callback) שתופעל בכל אחד מהם אירוע אחד (postMessage) מ-Looker Studio. הקריאה החוזרת (callback) עברה 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});