Referenz zur dscc-Bibliothek (Looker Studio Community Component)

Übersicht über die API

dscc (Looker Studio Community Component) ist eine Bibliothek, die beim Erstellen von Community-Komponenten für Looker Studio hilft. Der Quellcode ist auf GitHub verfügbar.

dscc stellt drei Funktionen bereit: getWidth(), getHeight() und subscribeToData().

`getWidth()`

Name	Parameter	Rückgabetyp	Beschreibung
getWidth()	Keine	`number`	Gibt die Breite des iFrames in Pixeln 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 iFrames in Pixeln zurück.

`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 Konfiguration entspricht
Interaktion	`enum(InteractionType)`	Informiert Looker Studio über die Interaktion
Daten	`object(InteractionData)`	Liefert die erforderlichen Daten für eine Interaktion

`InteractionType`

Derzeit ist der einzige gültige InteractionType-Wert FILTER.

Name	Typ	Beschreibung
dscc.InteractionType.FILTER	Enum	Beschreibt die Interaktion `FILTER`

`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
erstellen	`Array`	Array von `fieldIds`
Werte	`Array<Array>`	Verschachteltes Array von Datenwerten. Jedes Unterarray sollte die Länge des `concepts`-Arrays haben. Jeder Wert im Unterarray entspricht einem Dimensionswert.

Beispiel interactionData:

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

Die Verwendung von dscc.sendInteraction mit dem oben genannten interactionData entspricht der folgenden SQL-Anweisung:

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

clearInteraction()

Mit der Funktion clearInteraction() wird eine Nachricht an Looker Studio gesendet, um einen zuvor von dieser Visualisierung festgelegten Filter zu entfernen.

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)`

Die Funktion subscribeToData() abonniert Nachrichten von Looker Studio.

Parameter:

Name	Typ	Beschreibung
callback(data)	`function`	Eine Funktion, die die von `subscribeToData` zurückgegebenen Daten verwendet.
Optionen	`object`	Definiert das gewünschte Format für die zurückgegebenen Daten.

Das Optionenobjekt sieht so aus:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Rückgabewert:

Typ	Beschreibung
`function`	`callback` erhält keine weiteren Nachrichten von Looker Studio mehr.

`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 den mit dscc.subscribeToData registrierten callback übergeben wird. Die folgenden Felder werden zwischen 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 nach ihrer „configId“ indexiert sind.
Stil	`object(styleById)`	Ein Objekt, das Stilobjekte enthält, die nach ihrer configId indexiert sind.
Interaktionen	`object(interactionsById)`	Ein Objekt, das Interaktionsobjekte enthält.
Design	`themeStyle`	Ein themeStyle-Objekt, das Informationen zum Design des Berichts 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 fieldsByConfigId-Objekt enthält Arrays von field-Objekten, die nach der in der Visualisierungskonfiguration definierten „id“ indexiert werden. Für jede in der Konfiguration definierte dataField gibt es einen Eintrag in diesem Objekt.

Feld	Typ	Beschreibung
configId	`Array<field>`	Ein Array von Feldern, die mit dem dataField verknüpft sind.

Feld

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

Das field-Objekt enthält Informationen zum Feld, das der Nutzer im Eigenschaftenbereich auswählt.

Feld	Typ	Beschreibung
id	`string`	Die von Looker Studio generierte ID für das Feld
name	`string`	Der für Menschen lesbare Feldname
Beschreibung	`string`	Die Beschreibung des Felds
Typ	`enum(fieldType)`	Der semanticType des Felds
Konzept	`enum(conceptType)`	Der conceptType des Felds

styleById

{
   configId: styleValue
}

Das styleById-Objekt enthält Stilinformationen, die nach der in der Visualisierungskonfiguration definierten ID indexiert werden.

Feld	Typ	Beschreibung
configId	`styleValue`	Ein Objekt, das den Stilwert und den in der Konfiguration definierten Standardstilwert enthält.

styleValue

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

Das styleValue-Objekt enthält sowohl den vom Nutzer ausgewählten Stilwert als auch den in der Konfiguration definierten Standardwert. Der Typ von value und defaultValue hängt vom Stilelement ab.

Feld	Typ	Beschreibung
Wert	`string OR object OR bool OR number`	Der Wert des Stilelements, das durch die Auswahl des Nutzers im Eigenschaftenbereich zurückgegeben wird.
defaultValue	`string OR object OR bool OR number`	Der Standardwert des Style-Elements, das in der Visualisierungskonfiguration definiert ist

interactionsById

{

}

Das interactionsById-Objekt enthält Interaktionsdaten, die nach der interactionId-Visualisierungskonfiguration indexiert sind.

Index	Typ	Beschreibung
configId	`interaction`	Ein Objekt, das Daten zu einer Interaktion enthält

interactionField

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

Das interactionField-Objekt enthält das Array von „supportedActions“, das in der Konfiguration definiert ist, sowie die vom Nutzer ausgewählten Werte für die Interaktion.

Feld	Typ	Beschreibung
Wert	`string OR object OR bool OR number`	Der Wert des Stilelements, das durch die Auswahl des Nutzers im Eigenschaftenbereich zurückgegeben wird.
supportedActions	`Array<InteractionType>`	Die von dieser Interaktion unterstützten Aktionen, wie in der Konfiguration definiert

interactionValue

Das Objekt interactionValue enthält vom Nutzer ausgewählte Werte für den Interaktionstyp. Wenn der Schlüssel data vorhanden ist, spiegelt das Objekt InteractionData den aktuellen Status des Filters wider. Wenn die data-Taste nicht vorhanden ist, ist die Visualisierung derzeit nicht als Filter konfiguriert.

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

Feld	Typ	Beschreibung
Typ	`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 deaktiviert 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`	Ein String, der die Schriftfamilie beschreibt
accentFontFamily	`string`	Ein String, der die Schriftfamilie für Akzente beschreibt
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 im Format`{color: string, opacity: number}`

tablesById

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

Die 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.

Der einzige Unterschied zwischen dscc.tableFormat und dscc.objectFormat ist das Format von „tableObject“.

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
„COMPARISON“	`object(tableObject) OR Array<objectRow>`	Die `tableObject`, die den Daten für den Zeitraumvergleich zugeordnet ist, sofern zutreffend

dateRangesById

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

Das dateRangesById-Objekt enthält Informationen zu den 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 werden. 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 Standard-Zeitraum zugeordnet ist, falls zutreffend.
„COMPARISON“	`object(dateRange)`	Die `dateRange`, die einem Vergleichszeitraum zugeordnet ist, sofern zutreffend.

dateRange

{
  start: string,
  end: string
}

Das dateRange-Objekt enthält Informationen zum Start- und Enddatum eines Standard- oder Vergleichszeitraums (date range).

Feld	Typ	Beschreibung
start	`string`	Das Startdatum des Zeitraums im Format JJJJMMTT.
Ende	`string`	Das Enddatum des Zeitraums im Format JJJJMMTT.

`tableFormat`-Referenz

tableObject

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

Feld	Typ	Beschreibung
headers	`Array`	Ein Array von fields-Objekten. Diese Feldobjekte haben zusätzlich eine `configId`-Eigenschaft, die den IDs aus der Konfiguration entspricht.
Zeilen	`Array<Array>`	Ein Array von Arrays: Jedes Array ist eine Datenzeile.

Beispieldaten für `tableFormat`

Dies ist das Beispiel data, das zurückgegeben wird, wenn dscc.subscribeToData() mit der Option dscc.tableFormat verwendet 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"
      ]
    }
  }
}

Referenz zu „objectFormat“

objectRow

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

Feld	Typ	Beschreibung
configId	Array	Array mit Werten, die einer bestimmten Konfigurations-ID zugeordnet sind

Beispieldaten für „objectFormat“

Dies ist das Beispiel data, das zurückgegeben wird, wenn dscc.subscribeToData() mit der Option dscc.objectFormat verwendet 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"
      ]
    }
  }
}

Referenz zur dscc-Bibliothek (Looker Studio Community Component) Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Übersicht über die API

getWidth()

getWidth() verwenden

getHeight()

getHeight() verwenden

sendInteraction()

InteractionType

sendInteraction verwenden

interactionData

clearInteraction()

clearInteraction() verwenden

subscribeToData(callback, options)

subscribeToData() verwenden

data

fieldsByConfigId

Feld

styleById

styleValue

interactionsById

interactionField

interactionValue

Design

tablesById

dateRangesById

dateRange

tableFormat-Referenz

tableObject

Beispieldaten für tableFormat

Referenz zu „objectFormat“

objectRow

Beispieldaten für „objectFormat“

Referenz zur dscc-Bibliothek (Looker Studio Community Component)

`getWidth()`

`getWidth()` verwenden

`getHeight()`

`getHeight()` verwenden

`InteractionType`

`sendInteraction` verwenden

`interactionData`

`clearInteraction()` verwenden

`subscribeToData(callback, options)`

`subscribeToData()` verwenden

`data`

`tableFormat`-Referenz

Beispieldaten für `tableFormat`