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

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

לתצוגה חזותית של קהילה, ds-component משמש לשתי פונקציות.

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

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

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

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

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

}

אם קטעי נתונים מוגדרים כך שמשתמש יכול להזין כמה שדות (לדוגמה, אם הוגדרו שני מאפיינים לדיאגרמת 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});