חומר עזר בספריית Looker Studio Community Component (dscc)

סקירה כללית על API

‫dscc (רכיב קהילתי של Looker Studio) היא ספרייה שעוזרת ליצור רכיבים קהילתיים ל-Looker Studio. קוד המקור זמין ב-GitHub.

‫dscc חושף שלוש פונקציות: getWidth(),‏ getHeight() ו-subscribeToData().

`getWidth()`

שם	פרמטרים	סוג הערך המוחזר	תיאור
getWidth()	ללא	`number`	הפונקציה מחזירה את הרוחב של ה-iframe בפיקסלים.

שימוש ב-`getWidth()`

// to get the width of the iframe
var width = dscc.getWidth();

`getHeight()`

שם	פרמטרים	סוג הערך המוחזר	תיאור
getHeight()	ללא	`int`	מחזירה את הגובה של ה-iframe, בפיקסלים

שימוש ב-`getHeight()`

// to get the height of the iframe
var height = dscc.getHeight();

sendInteraction()

הפונקציה sendInteraction() שולחת הודעה ל-Looker Studio עם הנתונים של מסנן.

פרמטרים:

שם	סוג	תיאור
actionID	`string`	המחרוזת שתואמת ל-actionId בהגדרה
אינטראקציה	`enum(InteractionType)`	הפונקציה מעבירה ל-Looker Studio מידע על האינטראקציה
נתונים	`object(InteractionData)`	מספק את הנתונים הנדרשים לאינטראקציה

`InteractionType`

בשלב הזה, הערך התקין היחיד של InteractionType הוא FILTER.

שם	סוג	תיאור
dscc.InteractionType.FILTER	Enum	מתאר את האינטראקציה `FILTER`

שימוש ב-`sendInteraction`


// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";

// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;

var fieldID = "qt_m9dtntutsb";
var dataValue = "Asia";

// sendInteraction expects data that tells you the concepts and the values of
// those concepts to use in constructing a filter.
var interactionData = {
  "concepts": [fieldId],
  "values": [[dataValue]]
}

dscc.sendInteraction(actionId, FILTER, interactionData);

`interactionData`

var interactionData = {
  "concepts": array(fieldId),
  "values": array(array(dataValue))
}

שדה	סוג	תיאור
מושגים	`Array`	מערך של `fieldIds`
ערכים	`Array<Array>`	מערך מקונן של ערכי נתונים. כל מערך משנה צריך להיות באורך של המערך `concepts`. כל ערך במערך המשנה תואם לערך של מאפיין.

דוגמה interactionData:

var interactionData = {
  "concepts": ["dim1Id", "dim2Id"],
  "values": [
    ["dim1Val1", "dim2Val1"],
    ["dim1Val2", "dim2Val2"]
    ]
}

השימוש ב-dscc.sendInteraction עם interactionData שלמעלה שווה ערך להצהרת ה-SQL הבאה:

SELECT data WHERE
  (dim1 == dim1Val1 AND dim2 == dim2Val1)
  OR
  (dim1 == dim1Val2 AND dim2 == dim2Val2);

clearInteraction()

הפונקציה clearInteraction() שולחת הודעה ל-Looker Studio כדי לנקות מסנן שהוגדר קודם על ידי הוויזואליזציה הזו.

פרמטרים:

שם	סוג	תיאור
actionID	`string`	המחרוזת שמתאימה ל-actionId בהגדרה
אינטראקציה	`enum(InteractionType)`	התג מעביר ל-Looker Studio מידע על האינטראקציה

שימוש ב-`clearInteraction()`


// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";

// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;

dscc.clearInteraction(actionId, FILTER);

`subscribeToData(callback, options)`

הפונקציה subscribeToData() נרשמת לקבלת הודעות מ-Looker Studio.

פרמטרים:

שם	סוג	תיאור
callback(data)	`function`	פונקציה שמקבלת את הנתונים שמוחזרים על ידי `subscribeToData`.
options	`object`	הגדרת פורמט הנתונים הרצוי להחזרה

אובייקט האפשרויות נראה כך:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

הערך המוחזר:

סוג	תיאור
`function`	ביטול ההרשמה `callback` לקבלת הודעות נוספות מ-Looker Studio

שימוש ב-`subscribeToData()`

// define and use a callback
var unsubscribe = dscc.subscribeToData(function(data){
  // console.log the returned data
  console.log(data);
}, {transform: dscc.tableTransform});

// to unsubscribe

unsubscribe();

`data`

זהו האובייקט שמועבר אל callback שרשום ב-dscc.subscribeToData. אלה השדות שמשותפים בין dscc.objectFormat לבין dscc.tableFormat.

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById)
}

שדה	סוג	תיאור
Fields	`object(fieldsByConfigId)`	אובייקט שמכיל שדות שמוצגים באינדקס לפי configId
סגנון	`object(styleById)`	אובייקט שמכיל אובייקטים של סגנונות שמסודרים לפי configId
אינטראקציות	`object(interactionsById)`	אובייקט שמכיל אובייקטים של אינטראקציות
עיצוב	`themeStyle`	אובייקט themeStyle שמכיל מידע על סגנון העיצוב של הדוח
טבלאות	`object(tablesById)`	אובייקט שמכיל tableObjects
dateRanges	`object(dateRangesById)`	אובייקט שמכיל dateRanges

fieldsByConfigId

{
   configId: array(field)
}

אובייקט fieldsByConfigId מכיל מערכים של אובייקטים מסוג field שממוינדקסים לפי ה-id שמוגדר בהגדרות התצורה של התרשים. יש רשומה אחת באובייקט הזה לכל dataField שמוגדר בהגדרה.

שדה	סוג	תיאור
configId	`Array<field>`	מערך של שדות שמשויכים ל-dataField

שדה

{
  id: fieldId,
  name: string,
  description: string,
  type: fieldType,
  concept: enum(conceptType)
}

אובייקט field מספק מידע על השדה שהמשתמש בוחר בחלונית המאפיינים.

שדה	סוג	תיאור
id [מזהה]	`string`	המזהה של השדה שנוצר על ידי Looker Studio
שם	`string`	שם השדה שקריא לבני אדם
תיאור	`string`	תיאור השדה
סוג	`enum(fieldType)`	‫semanticType של השדה
קונספט	`enum(conceptType)`	‫conceptType של השדה

styleById

{
   configId: styleValue
}

אובייקט styleById מספק מידע על סגנון שממוין לפי ה-id שמוגדר בהגדרות הוויזואליזציה.

שדה	סוג	תיאור
configId	`styleValue`	אובייקט שמכיל את ערך הסגנון ואת ערך ברירת המחדל של הסגנון שמוגדר בהגדרה

styleValue

{
  value: string | object | bool | number,
  defaultValue: string | object | bool | number
}

אובייקט styleValue מספק גם את ערך הסגנון שנבחר על ידי המשתמש וגם את ערך ברירת המחדל שהוגדר בהגדרות. הסוג של value ושל defaultValue תלוי ברכיב הסגנון.

שדה	סוג	תיאור
ערך	`string OR object OR bool OR number`	הערך של רכיב הסגנון שמוחזר מבחירת המשתמש בחלונית המאפיינים
defaultValue	`string OR object OR bool OR number`	ערך ברירת המחדל של רכיב הסגנון שמוגדר בהגדרות הוויזואליזציה

interactionsById

{

}

אובייקט interactionsById מספק נתוני אינטראקציה שמסודרים לפי אינדקס של interactionId הגדרת הוויזואליזציה.

אינדקס	סוג	תיאור
configId	`interaction`	אובייקט שמכיל נתונים שמשויכים לאינטראקציה

interactionField

{
  value: object(interactionValue),
  supportedActions: array(InteractionType)
}

האובייקט interactionField מכיל את המערך של supportedActions שמוגדר ב-config, וגם את הערכים שהמשתמש בחר לאינטראקציה.

שדה	סוג	תיאור
ערך	`string OR object OR bool OR number`	הערך של רכיב הסגנון שמוחזר מבחירת המשתמש בחלונית המאפיינים
supportedActions	`Array<InteractionType>`	הפעולות שנתמכות באינטראקציה הזו, כפי שמוגדרות בהגדרה

interactionValue

אובייקט interactionValue מספק ערכים שהמשתמש בחר לסוג האינטראקציה. אם המפתח data קיים, האובייקט InteractionData משקף את המצב הנוכחי של המסנן. אם המקש data לא קיים, התצוגה החזותית לא מוגדרת כרגע כמסנן.

{
  type: enum(InteractionType)
  data: object(interactionData) | None
}

שדה	סוג	תיאור
סוג	`enum(InteractionType)`	InteractionType שהמשתמש בחר
נתונים	`object(InteractionData)`	הנתונים שמשויכים למצב הנוכחי של המסנן. המפתח הזה לא קיים אם המסנן לא מופעל כרגע.

עיצוב

{
  fillColor: {
    color: string,
    opacity: number
  },
  fontColor: {
    color: string,
    opacity: number
  },
  accentFillColor: {
    color: string,
    opacity: number
  },
  accentFontColor: {
    color: string,
    opacity: number
  },
  fontFamily: string,
  accentFontFamily: string,
  increaseColor: {
    color: string,
    opacity: number
  },
  decreaseColor: {
    color: string,
    opacity: number
  },
  gridColor: {
    color: string,
    opacity: number
  },
  seriesColor: [
    {
      color: string,
      opacity: number
    }
  ]
}

אובייקט themeStyle מעביר מידע על נושא הדוח לתצוגה החזותית.

שדה	סוג	תיאור
fillColor	`object`	אובייקט בפורמט `{color: string, opacity: number}`
fontColor	`object`	אובייקט בפורמט `{color: string, opacity: number}`
accentFillColor	`object`	אובייקט בפורמט `{color: string, opacity: number}`
accentFontColor	`object`	אובייקט בפורמט `{color: string, opacity: number}`
fontFamily	`string`	מחרוזת שמתארת את משפחת הגופנים
accentFontFamily	`string`	מחרוזת שמתארת את משפחת הגופנים של הגופן המודגש
increaseColor	`object`	אובייקט בפורמט `{color: string, opacity: number}`
decreaseColor	`object`	אובייקט בפורמט `{color: string, opacity: number}`
gridColor	`object`	אובייקט בפורמט `{color: string, opacity: number}`
seriesColor	`Array<object>`	מערך של אובייקטים בפורמט `{color: string, opacity: number}`

tablesById

{
  "DEFAULT": object(tableObject),
  "COMPARISON": object(tableObject) | undefined
}

התג tableObject מספק מידע על הכותרת והנתונים של כל שורה. הפונקציה DEFAULT תמיד תחזיר נתונים, והפונקציה COMPARISON תאוכלס רק אם המשתמש יגדיר את הנתונים עם שורות השוואה.

ההבדל היחיד בין dscc.tableFormat לבין dscc.objectFormat הוא הפורמט של tableObject.

שדה	סוג	תיאור
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	ה-`tableObject` שמשויך לנתונים שמשתמש מוסיף להדמיה
"COMPARISON"	`object(tableObject) OR Array<objectRow>`	הסמל `tableObject` שמשויך לנתוני ההשוואה בין התאריכים, אם רלוונטי

dateRangesById

{
  "DEFAULT": object(dateRange),
  "COMPARISON": object(dateRange)
}

האובייקט dateRangesById מספק מידע על טווחי תאריכים שמוגדרים כברירת מחדל ועל טווחי תאריכים להשוואה. אם לא מוגדרים טווחי תאריכים, האובייקט יהיה ריק. השדות DEFAULT ו-COMPARISON יאוכלסו רק אם המשתמש הגדיר את טווחי התאריכים המתאימים. הנתונים בטווחי התאריכים קשורים לנתוני ברירת המחדל וההשוואה כפי שמוגדרים ב-tablesById.

שדה	סוג	תיאור
"DEFAULT"	`object(dateRange)`	הערך `dateRange` שמשויך לטווח התאריכים שמוגדר כברירת מחדל, אם רלוונטי.
"COMPARISON"	`object(dateRange)`	העמודה `dateRange` שמשויכת לטווח תאריכים להשוואה, אם רלוונטי.

dateRange

{
  start: string,
  end: string
}

אובייקט dateRange מספק מידע על תאריכי ההתחלה והסיום של טווח תאריכים שמוגדר כברירת מחדל או לצורך השוואה.

שדה	סוג	תיאור
start	`string`	תאריך ההתחלה של טווח התאריכים בפורמט YYYYMMDD.
End	`string`	תאריך הסיום של טווח התאריכים בפורמט YYYYMMDD.

`tableFormat` reference

tableObject

{
  headers: array(object),
  rows: array(array)
}

שדה	סוג	תיאור
headers	`Array`	מערך של אובייקטים מסוג fields. לאובייקטים של השדות האלה יש גם מאפיין `configId` שמתאים למזהים מההגדרה.
שורות	`Array<Array>`	מערך של מערכים: כל מערך הוא שורה של נתונים

נתונים לדוגמה של `tableFormat`

זוהי דוגמה data שמוחזרת באמצעות dscc.subscribeToData() עם האפשרות dscc.tableFormat.

{
  "tables": {
    "DEFAULT": {
      "headers": [{
        "id": "qt_ky8sltutsb",
        "name": "dimension",
        "type": "TEXT",
        "concept": "DIMENSION",
        "configId": "configId1"
      }, {
        "id": "qt_b5bvmtutsb",
        "name": "second dim",
        "type": "TEXT",
        "concept": "DIMENSION"
        "configId": "configId1"
      }, {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC",
        "configId": "configId2"
      }],
      "rows": [
        ["Week 4", "lm", 55]
      ]
    },
    "COMPARISON": {
      "headers": [{
        "id": "qt_ky8sltutsb",
        "name": "dimension",
        "type": "TEXT",
        "concept": "DIMENSION",
        "configId": "configId1"
      }, {
        "id": "qt_b5bvmtutsb",
        "name": "second dim",
        "type": "TEXT",
        "concept": "DIMENSION"
        "configId": "configId1"
      }, {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC",
        "configId": "configId2"
      }],
      "rows": [
        ["Week 5", "no", 123]
      ]
    }
  },
  "fields": {
    "configId1": [
      {
        "id": "qt_ky8sltutsb",
        "name": "week",
        "type": "TEXT",
        "concept": "DIMENSION"
      },
      {
        "id": "qt_b5bvmtutsb",
        "name": "textId",
        "type": "TEXT",
        "concept": "DIMENSION"
      }
    ],
    "configId2": [
      {
        "id": "qt_m9dtntutsb",
        "name": "orders",
        "type": "NUMBER",
        "concept": "METRIC"
      }
    ]
  },
  "style": {
    "nodeColor": {
      "value": {
        "color": "#000000"
      }
    }
  },
  "theme": {},
  "dateRanges": {
    "DEFAULT": {
      "start": "20210501",
      "end": "20210531"
    },
    "COMPARISON": {
      "start": "20200501",
      "end": "20200531"
    }
  },
  "interactions": {
    "onClick": {
      "value": {
        "type": "FILTER",
        "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
          "values": [
            [
              "Afternoon",
              "Sunday"
            ],
            [
              "Afternoon",
              "Thursday"
            ],
            [
              "Morning",
              "Tuesday"
            ]
          ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
  }
}

הפניה ל-objectFormat

objectRow

{
  configId1: array(string | bool | number),
  configId2: array(string | bool | number)
}

שדה	סוג	תיאור
configId	מערך	מערך של ערכים שמשויכים למזהה הגדרה מסוים

נתונים לדוגמה של objectFormat

זוהי דוגמה data שמוחזרת באמצעות dscc.subscribeToData() עם האפשרות dscc.objectFormat.

{
  "tables": {
    "COMPARISON": [
      {
        "configId1": ["Week 5", "cd"],
        "configId2": [123]
      }
    ],
    "DEFAULT": [
      {
        "configId1": ["Week 1", "ab"],
        "configId2": [24]
      }
    ]
  },
  "fields": {
    "configId1": [
      {
        "id": "qt_h6oibrb6wb",
        "name": "time of day",
        "type": "TEXT",
        "concept": "DIMENSION"
      },
      {
        "id": "qt_i6oibrb6wb",
        "name": "day",
        "type": "TEXT",
        "concept": "DIMENSION"
      }
    ],
    "configId2": [
      {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC"
      }
    ]
  },
  "style": {
    "nodeColor": {
      "value": {
        "color": "#000000"
      }
    }
  },
  "theme": {},
  "dateRanges": {
    "DEFAULT": {
      "start": "20210501",
      "end": "20210531"
    },
    "COMPARISON": {
      "start": "20200501",
      "end": "20200531"
    }
  },
  "interactions": {
    "onClick": {
      "value": {
        "type": "FILTER",
        "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
          "values": [
            [
              "Afternoon",
              "Sunday"
            ],
            [
              "Afternoon",
              "Thursday"
            ],
            [
              "Morning",
              "Tuesday"
            ]
          ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
  }
}

חומר עזר בספריית Looker Studio Community Component (dscc) קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

סקירה כללית על API

getWidth()

שימוש ב-getWidth()

getHeight()

שימוש ב-getHeight()

sendInteraction()

InteractionType

שימוש ב-sendInteraction

interactionData

clearInteraction()

שימוש ב-clearInteraction()

subscribeToData(callback, options)

שימוש ב-subscribeToData()

data

fieldsByConfigId

שדה

styleById

styleValue

interactionsById

interactionField

interactionValue

עיצוב

tablesById

dateRangesById

dateRange

tableFormat reference

tableObject

נתונים לדוגמה של tableFormat

הפניה ל-objectFormat

objectRow

נתונים לדוגמה של objectFormat

חומר עזר בספריית Looker Studio Community Component (dscc)

`getWidth()`

שימוש ב-`getWidth()`

`getHeight()`

שימוש ב-`getHeight()`

`InteractionType`

שימוש ב-`sendInteraction`

`interactionData`

שימוש ב-`clearInteraction()`

`subscribeToData(callback, options)`

שימוש ב-`subscribeToData()`

`data`

`tableFormat` reference

נתונים לדוגמה של `tableFormat`