כתיבת התצוגה החזותית

כתיבת הקוד להמחשה

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

הפונקציה הכי חשובה בספרייה היא subscribeToData, שמקבלת שני ארגומנטים: פונקציה callback שמעבדת את הוויזואליזציה, ואובייקט options שמציין איזה סוג של טרנספורמציה רוצים להחיל על הנתונים. מידע נוסף מופיע במאמר בנושא ספרייה.

בהמשך מופיע תיאור של קוד ה-JavaScript של הוויזואליזציה.

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}

dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})

יש כמה דברים חשובים שכדאי לזכור כשכותבים תרשים ויזואלי של הקהילה.

העדכונים מהפונקציה subscribeToData מתרחשים כשיש שינוי בנתונים, בסגנון או בגודל של ה-iframe.

לדוגמה:

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // viz code goes here

}

‫Looker Studio טוען ומריץ קובצי JavaScript, ולא קובצי HTML. כל מניפולציות ה-DOM צריכות להתבצע באמצעות JavaScript.

לדוגמה: הקוד הבא מגדיר ומצרף div ל-DOM.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

חבילת הקוד

ההמחשות החזותיות של הקהילה ב-Looker Studio מאפשרות לטעון רק קובץ JavaScript אחד. הקוד שמעלים צריך להיות קובץ יחיד שכולל את ספריית העזר dscc, את כל ספריות הוויזואליזציה של JavaScript ואת קוד הוויזואליזציה.

כדי לעשות את זה ב-Bash, אפשר להשתמש בפקודה cat, כמו בדוגמה שלמטה.

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

הגדרת המניפסט

קובץ המניפסט של ההצגה החזותית מספק מטא-נתונים על ההצגה החזותית, וגם מידע על המיקום של משאבי ההצגה החזותית. המיקום של קובץ המניפסט נקרא 'מזהה הרכיב', ומשמש לטעינה של תצוגה חזותית של הקהילה.

דוגמה למניפסט

הפרמטר devMode במניפסט קובע את התנהגות הקאשינג של הוויזואליזציה. במהלך פיתוח הוויזואליזציה, צריך devMode את true כדי לוודא שרענונים מלאים יטענו את הגרסה העדכנית של המשאבים. אחרי שהקוד יציב, צריך להגדיר את devMode ל-false כדי לוודא שהדוחות עם ההדמיות של הקהילה ייטענו במהירות. מידע נוסף על שמירה במטמון זמין במדריך המתקדם בנושא שמירה במטמון.

השלבים הבאים

אחרי שכותבים את הקוד של הוויזואליזציה, אפשר ללמוד איך לארח את הוויזואליזציה.