הפניה לספריית רכיבים של קהילת Data Studio ‏ (dscc)

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

‫dscc (רכיב קהילתי של Data Studio) היא ספריה שעוזרת ליצור רכיבים קהילתיים ל-Data 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() שולחת הודעה ל-Data Studio עם הנתונים של מסנן.

פרמטרים:

שם	סוג	תיאור
actionID	`string`	המחרוזת שתואמת ל-actionId בהגדרה
אינטראקציה	`enum(InteractionType)`	הפונקציה מעבירה ל-Data 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() שולחת הודעה ל-Data 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() נרשמת לקבלת הודעות מ-Data Studio.

פרמטרים:

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

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

{
  transform: dscc.tableTransform | dscc.objectTransform
}

הערך המוחזר:

סוג	תיאור
`function`	ביטול ההרשמה של `callback` לקבלת הודעות נוספות מ-Data 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"
      ]
    }
  }
}

הפניה לספריית רכיבים של קהילת Data Studio ‏ (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

הפניה לספריית רכיבים של קהילת Data Studio ‏ (dscc)

`getWidth()`

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

`getHeight()`

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

`InteractionType`

שימוש ב-`sendInteraction`

`interactionData`

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

`subscribeToData(callback, options)`

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

`data`

`tableFormat` reference

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