Übersicht über die API
dscc
(Looker Studio Community Component) ist eine Bibliothek, die beim Erstellen von Community-Komponenten für Looker Studio hilft. Den Quellcode finden Sie auf GitHub.
dscc
bietet drei Funktionen: getWidth()
, getHeight()
und subscribeToData()
.
getWidth()
Name | Parameter | Rückgabetyp | Beschreibung |
---|---|---|---|
getWidth() | Keine | number
|
Gibt die Breite des iFrame in Pixel zurück. |
getWidth()
verwenden
// to get the width of the iframe
var width = dscc.getWidth();
getHeight()
Name | Parameter | Rückgabetyp | Beschreibung |
---|---|---|---|
getHeight() | Keine | int
|
Gibt die Höhe des iFrame in Pixeln an. |
getHeight()
verwenden
// to get the height of the iframe
var height = dscc.getHeight();
sendInteraction()
Die Funktion sendInteraction()
sendet eine Nachricht mit den Daten für einen Filter an Looker Studio.
Parameter:
Name | Typ | Beschreibung |
---|---|---|
actionID | string
|
Der String, der der actionId in der Konfigurationsdatei entspricht |
Interaktion | enum(InteractionType)
|
Informiert Looker Studio über die Interaktion |
daten | object(InteractionData)
|
Liefert die erforderlichen Daten für eine Interaktion |
InteractionType
Derzeit ist FILTER
die einzige gültige InteractionType
.
Name | Typ | Beschreibung |
---|---|---|
dscc.InteractionType.FILTER | Enum | Beschreibt die FILTER -Interaktion |
sendInteraction
verwenden
// 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))
}
Feld | Typ | Beschreibung |
---|---|---|
Konzepte | Array |
Array von fieldIds |
Werte | Array<Array>
|
Verschachteltes Array von Datenwerten. Jedes Teilarray muss die Länge des Arrays concepts haben.
Jeder Wert im Teilarray entspricht einem Dimensionswert. |
Beispiel interactionData
:
var interactionData = {
"concepts": ["dim1Id", "dim2Id"],
"values": [
["dim1Val1", "dim2Val1"],
["dim1Val2", "dim2Val2"]
]
}
Die Verwendung von dscc.sendInteraction
mit dem obigen interactionData
entspricht der folgenden SQL-Anweisung:
SELECT data WHERE
(dim1 == dim1Val1 AND dim2 == dim2Val1)
OR
(dim1 == dim1Val2 AND dim2 == dim2Val2);
clearInteraction()
Die Funktion clearInteraction()
sendet eine Nachricht an Looker Studio, um einen zuvor durch diese Visualisierung festgelegten Filter zu löschen.
Parameter:
Name | Typ | Beschreibung |
---|---|---|
actionID | string
|
Der String, der der actionId in der Konfiguration entspricht |
Interaktion | enum(InteractionType)
|
informiert Looker Studio über die Interaktion |
clearInteraction()
verwenden
// 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)
Mit der Funktion subscribeToData()
werden Nachrichten von Looker Studio abonniert.
Parameter:
Name | Typ | Beschreibung |
---|---|---|
callback(Daten) | function
|
Eine Funktion, die die von subscribeToData zurückgegebenen Daten annimmt. |
Optionen | object |
Definiert das gewünschte Datenrückgabeformat |
Das Optionsobjekt sieht so aus:
{
transform: dscc.tableTransform | dscc.objectTransform
}
Rückgabewert:
Typ | Beschreibung |
---|---|
function |
Mit dieser Option werden callback keine weiteren Nachrichten von Looker Studio mehr erhalten. |
subscribeToData()
verwenden
// 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
Dies ist das Objekt, das an die mit dscc.subscribeToData
registrierte callback
übergeben wird. Die folgenden Felder werden von dscc.objectFormat
und dscc.tableFormat
gemeinsam genutzt.
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById)
}
Feld | Typ | Beschreibung |
---|---|---|
Felder | object(fieldsByConfigId)
|
Ein Objekt, das Felder enthält, die durch ihre configId indexiert wurden |
Stil | object(styleById)
|
Ein Objekt, das Stilobjekte enthält, die durch ihre configId indexiert sind |
Interaktionen | object(interactionsById)
|
Ein Objekt, das Interaktionsobjekte enthält |
Design | themeStyle
|
Ein themeStyle-Objekt, das Informationen zum Designstil für den Bericht enthält. |
Tabellen | object(tablesById)
|
Ein Objekt, das tableObjects enthält |
dateRanges | object(dateRangesById)
|
Ein Objekt, das dateRanges enthält |
fieldsByConfigId
{
configId: array(field)
}
Das Objekt fieldsByConfigId
enthält Arrays mit field-Objekten, die durch die in der Visualisierungskonfiguration definierte ID indexiert werden. In diesem Objekt gibt es für jede in der Konfiguration definierte dataField
einen Eintrag.
Feld | Typ | Beschreibung |
---|---|---|
configId | Array<field> |
Ein Array von Feldern, die mit dataField verknüpft sind. |
Feld
{
id: fieldId,
name: string,
description: string,
type: fieldType,
concept: enum(conceptType)
}
Das Objekt field
liefert Informationen zu dem Feld, das der Nutzer im Eigenschaftenbereich auswählt.
Feld | Typ | Beschreibung |
---|---|---|
id | string |
Die in Looker Studio generierte ID für das Feld |
name | string |
Der für Menschen lesbare Feldname |
Beschreibung | string |
Die Beschreibung des Felds |
eingeben | enum(fieldType) |
Den semanticType des Felds |
Konzept | enum(conceptType) |
Den conceptType des Felds |
styleById
{
configId: styleValue
}
Das Objekt styleById
stellt Stilinformationen bereit, die durch die in der Visualisierungskonfiguration definierte ID indexiert werden.
Feld | Typ | Beschreibung |
---|---|---|
configId | styleValue
|
Ein Objekt, das den Stilwert und den durch die Konfiguration definierten Standardwert für den Stil enthält |
styleValue
{
value: string | object | bool | number,
defaultValue: string | object | bool | number
}
Das Objekt styleValue
stellt sowohl den vom Nutzer ausgewählten Stilwert als auch den in der Konfiguration definierten Standardwert bereit. Der Typ von value
und defaultValue
hängt vom Stilelement ab.
Feld | Typ | Beschreibung |
---|---|---|
value | string OR object OR bool OR
number
|
Der Wert des Stilelements, der aus der Nutzerauswahl im Eigenschaftenbereich |
defaultValue | string OR object OR bool OR
number
|
Der Standardwert des Stilelements, der in der Visualisierungskonfiguration definiert ist, |
interactionsById
{
}
Das interactionsById
-Objekt stellt Interaktionsdaten bereit, die von der Visualisierungskonfiguration interactionId
indexiert wurden.
Index | Typ | Beschreibung |
---|---|---|
configId | interaction
|
Ein Objekt, das Daten zu einer Interaktion enthält, |
interactionField
{
value: object(interactionValue),
supportedActions: array(InteractionType)
}
Das Objekt interactionField
enthält das Array der in der Konfiguration definierten unterstütztenActions sowie die vom Nutzer ausgewählten Werte für die Interaktion.
Feld | Typ | Beschreibung |
---|---|---|
value | string OR object OR
bool OR number
|
Der Wert des Stilelements, der aus der Nutzerauswahl im Eigenschaftenbereich |
supportedActions | Array<InteractionType>
|
Die von dieser Interaktion unterstützten Aktionen, wie in der Konfiguration definiert |
interactionValue
Das interactionValue
-Objekt stellt vom Nutzer ausgewählte Werte für den Interaktionstyp bereit. Wenn der Schlüssel data
vorhanden ist, spiegelt das Objekt InteractionData
den aktuellen Status des Filters wider. Wenn der Schlüssel data
nicht vorhanden ist, ist die Visualisierung derzeit nicht als Filter konfiguriert.
{
type: enum(InteractionType)
data: object(interactionData) | None
}
Feld | Typ | Beschreibung |
---|---|---|
eingeben | enum(InteractionType)
|
Der vom Nutzer ausgewählte InteractionType |
daten | object(InteractionData)
|
Die Daten, die dem aktuellen Status des Filters zugeordnet sind. Dieser Schlüssel ist nicht vorhanden, wenn der Filter derzeit gelöscht ist. |
Design
{
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
}
]
}
Das Objekt themeStyle
übergibt Informationen zum Berichtsthema an die Visualisierung.
Feld | Typ | Beschreibung |
---|---|---|
fillColor | object
|
Ein Objekt im Format {color:
string, opacity: number} |
fontColor | object
|
Ein Objekt im Format {color:
string, opacity: number} |
accentFillColor | object
|
Ein Objekt im Format {color:
string, opacity: number} |
accentFontColor | object
|
Ein Objekt im Format {color:
string, opacity: number} |
fontFamily | string |
Eine Zeichenfolge zur Beschreibung der Schriftfamilie |
accentFontFamily | string
|
Eine Zeichenfolge zur Beschreibung der Schriftfamilie für Akzente |
increaseColor | object
|
Ein Objekt im Format {color:
string, opacity: number} |
decreaseColor | object
|
Ein Objekt im Format {color:
string, opacity: number} |
gridColor | object
|
Ein Objekt im Format {color:
string, opacity: number} |
seriesColor | Array<object>
|
Ein Array von Objekten mit dem Format {color: string, opacity:
number} . |
tablesById
{
"DEFAULT": object(tableObject),
"COMPARISON": object(tableObject) | undefined
}
tableObject
enthält Überschriften- und Dateninformationen für jede Zeile. "DEFAULT" gibt immer Daten zurück und "COMPARISON" wird nur ausgefüllt, wenn der Nutzer die Daten mit Vergleichszeilen konfiguriert.
Das Format von „tableObject“ ist der einzige Unterschied zwischen dscc.tableFormat
und dscc.objectFormat
.
Feld | Typ | Beschreibung |
---|---|---|
"DEFAULT" | object(tableObject) OR
Array<objectRow>
|
Die tableObject , die mit den Daten verknüpft ist, die ein Nutzer einer Visualisierung hinzufügt |
„VERGLEICH“ | object(tableObject) OR
Array<objectRow>
|
Die tableObject , die den Datumsvergleichsdaten zugeordnet ist, falls zutreffend |
dateRangesById
{
"DEFAULT": object(dateRange),
"COMPARISON": object(dateRange)
}
Das dateRangesById
-Objekt liefert Informationen zu Standard- und Vergleichszeiträumen. Wenn keine Zeiträume vorhanden sind, ist das Objekt leer. DEFAULT
und COMPARISON
werden nur ausgefüllt, wenn die entsprechenden Zeiträume vom Nutzer konfiguriert wurden. Die Daten in den Zeiträumen beziehen sich auf die Standard- und Vergleichsdaten, wie in tablesById definiert.
Feld | Typ | Beschreibung |
---|---|---|
"DEFAULT" | object(dateRange)
|
Die dateRange , die dem Standardzeitraum zugeordnet ist (falls zutreffend). |
„VERGLEICH“ | object(dateRange)
|
Die dateRange , die gegebenenfalls einem Vergleichszeitraum zugeordnet ist. |
dateRange
{
start: string,
end: string
}
Das dateRange
-Objekt stellt Informationen zum Start- und Enddatum eines Standard- oder Vergleichszeitraums zur Verfügung.
Feld | Typ | Beschreibung |
---|---|---|
start | string |
Startdatum des Zeitraums im Format JJJJMMTT. |
end | string |
Enddatum des Zeitraums im Format JJJJMMTT. |
Referenz für tableFormat
tableObject
{
headers: array(object),
rows: array(array)
}
Feld | Typ | Beschreibung |
---|---|---|
headers | Array
|
Ein Array mit fields-Objekten. Diese Feldobjekte haben zusätzlich das Attribut configId , das den IDs aus der Konfiguration entspricht. |
Zeilen | Array<Array> |
Ein Array aus Arrays, wobei jedes Array eine Datenzeile ist |
tableFormat
-Beispieldaten
Dies ist das Beispiel-data
, das durch Verwendung von dscc.subscribeToData()
mit der Option dscc.tableFormat
zurückgegeben wird.
{
"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"
]
}
}
}
ObjektFormat-Referenz
objectRow
{
configId1: array(string | bool | number),
configId2: array(string | bool | number)
}
Feld | Typ | Beschreibung |
---|---|---|
configId | array | Array von Werten, die einer bestimmten Konfigurations-ID zugeordnet sind |
Beispiel für „objectFormat“-Daten
Dies ist das Beispiel-data
, das durch Verwendung von dscc.subscribeToData()
mit der Option dscc.objectFormat
zurückgegeben wird.
{
"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"
]
}
}
}