Diese Seite wurde von der Cloud Translation API übersetzt.

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. 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"
      ]
    }
  }
}

Referenz zur dscc-Bibliothek (Looker Studio Community Component)

Ü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

Referenz für tableFormat

tableObject

tableFormat-Beispieldaten

ObjektFormat-Referenz

objectRow

Beispiel für „objectFormat“-Daten

`getWidth()`

`getWidth()` verwenden

`getHeight()`

`getHeight()` verwenden

`InteractionType`

`sendInteraction` verwenden

`interactionData`

`clearInteraction()` verwenden

`subscribeToData(callback, options)`

`subscribeToData()` verwenden

`data`

Referenz für `tableFormat`

`tableFormat`-Beispieldaten