דף זה תורגם על ידי 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 מידע על סטודיו האינטראקציה
נתונים	`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`
אפשרויות	`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)`	אובייקט שמכיל שדות שנוספו לאינדקס על ידי מזהה התצורה שלו
סגנון	`object(styleById)`	אובייקט שמכיל עיצוב אובייקטים נוסף לאינדקס על ידי מזהה ה-configId שלהם
אינטראקציות	`object(interactionsById)`	אובייקט שמכיל אינטראקציה אובייקטים
עיצוב	`themeStyle`	אובייקט themeStyle שכולל עיצוב עיצוב פרטים לדוח
טבלאות	`object(tablesById)`	אובייקט שמכיל tableObjects
dateRanges	`object(dateRangesById)`	אובייקט שמכיל dateRanges

fieldsByConfigId

{
   configId: array(field)
}

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

שדה	סוג	תיאור
ערך	`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 מספק מידע על הכותרת והנתונים של כל שורה. 'ברירת מחדל' תמיד תחזיר נתונים, והפונקציה "COMPARISON" יאוכלס רק אם מגדירה את הנתונים עם שורות השוואה.

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

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

dateRangesById

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

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

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

dateRange

{
  start: string,
  end: string
}

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

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

מסמך עזר של `tableFormat`

tableObject

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

שדה	סוג	תיאור
כותרות	`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

tableObject

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

מסמך עזר של objectFormat

objectRow

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

`getWidth()`

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

`getHeight()`

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

`InteractionType`

שימוש ב-`sendInteraction`

`interactionData`

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

`subscribeToData(callback, options)`

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

`data`

מסמך עזר של `tableFormat`

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