דף זה תורגם על ידי Cloud Translation API.

חומר עזר בספריית 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.

פרמטרים:

שם	תיאור	התיאור
קריאה חוזרת(נתונים)	`function`	פונקציה שלוקחת את הנתונים שהוחזרו על ידי `subscribeToData`.
אפשרויות	`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 שלהם
style	`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 לשדה
name	`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 תלוי ברכיב הסגנון.

שדה	תיאור	התיאור
value	`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 (פעולות נתמכות) שהוגדרו בהגדרה, וכן את הערכים שנבחרו על ידי המשתמש עבור האינטראקציה.

שדה	תיאור	התיאור
value	`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' יאוכלס רק אם המשתמש יגדיר את הנתונים באמצעות שורות השוואה.

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

שדה	תיאור	התיאור
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	השדה `tableObject` המשויך לנתונים שהמשתמש מוסיף לתצוגה החזותית
'השוואה'	`object(tableObject) OR Array<objectRow>`	`tableObject` המשויכים לנתוני השוואת התאריכים, אם רלוונטי

dateRangesById

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

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

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

dateRange

{
  start: string,
  end: string
}

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

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

הפניה אל `tableFormat`

tableObject

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

שדה	תיאור	התיאור
headers	`Array`	מערך של אובייקטים מסוג שדות. לאובייקטי השדה האלה יש גם מאפיין `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

tableObject

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

הפניה ל-ObjectFormat

objectRow

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

`getWidth()`

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

`getHeight()`

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

`InteractionType`

שימוש ב-`sendInteraction`

`interactionData`

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

`subscribeToData(callback, options)`

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

`data`

הפניה אל `tableFormat`

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