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-Komponente) ist eine Bibliothek, die Sie beim Erstellen Community-Komponenten für Looker Studio. 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 iFrames in Pixel

`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 zurück in Pixeln

`getHeight()` verwenden

// to get the height of the iframe
var height = dscc.getHeight();

sendInteraction()

Die Funktion sendInteraction() sendet eine Nachricht mit den Daten an Looker Studio. für einen Filter.

Parameter:

Name	Typ	Beschreibung
actionID	`string`	Die Zeichenfolge, die entspricht die actionId in die Konfiguration
Interaktion	`enum(InteractionType)`	Teilt Looker mit Studio-Info die Interaktion
Daten	`object(InteractionData)`	Liefert die erforderliche Daten für ein Interaktion

`InteractionType`

Derzeit ist FILTER der 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 mit `fieldIds`
Werte	`Array<Array>`	Verschachteltes Array von Datenwerten. Jedes Subarray sollte der Länge des Arrays `concepts` entsprechen. Jeder Wert im Subarray 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 die folgende SQL-Anweisung an:

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 Filter, der zuvor von dieser Visualisierung festgelegt wurde.

Parameter:

Name	Typ	Beschreibung
actionID	`string`	Die Zeichenfolge, die dem actionId in der Konfiguration
Interaktion	`enum(InteractionType)`	In Looker Studio werden 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`
Optionen	`object`	Definiert das gewünschte Datenrückgabeformat

Das Optionsobjekt sieht so aus:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Rückgabewert:

Typ	Beschreibung
`function`	Hier 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 callback übergeben wird, die mit dscc.subscribeToData. Die folgenden Felder werden gemeinsam von dscc.objectFormat und dscc.tableFormat.

{
  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 Folgendes enthält: fields indexiert von ihre configId
Stil	`object(styleById)`	Ein Objekt, das Folgendes enthält: Stilobjekte nach ihrer configId indexiert
Interaktionen	`object(interactionsById)`	Ein Objekt, das Folgendes enthält: Interaktion Objekte
Design	`themeStyle`	Ein themeStyle-Objekt mit Designstilen Informationen für den Bericht
Tabellen	`object(tablesById)`	Ein Objekt, das Folgendes enthält: tableObjects
dateRanges	`object(dateRangesById)`	Ein Objekt, das Folgendes enthält: dateRanges

fieldsByConfigId

{
   configId: array(field)
}

Das fieldsByConfigId-Objekt enthält Arrays von field-Objekten, die indexiert sind. durch die „id“ definiert in den Visualisierungskonfiguration. Es gibt Ein Eintrag in diesem Objekt für jede in der Konfiguration definierte dataField.

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 stellt Informationen zu dem Feld bereit, das der Nutzer auswählt. im Eigenschaftenbereich.

Feld	Typ	Beschreibung
id	`string`	Die in Looker Studio generierte ID für das Feld
Name	`string`	Der visuell 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 stellt Stilinformationen bereit, die durch die „id“ indexiert werden. definiert in die Visualisierungskonfiguration.

Feld	Typ	Beschreibung
configId	`styleValue`	Ein Objekt, das den style -Wert und den Konfigurationsdefinierter Standardwert für Stil

styleValue

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

Das styleValue-Objekt stellt sowohl den vom Nutzer ausgewählten Stilwert als auch den Standardwert, der in der Konfiguration definiert ist. Der Typ von value und defaultValue vom Stilelement abhängen.

Feld	Typ	Beschreibung
Wert	`string OR object OR bool OR number`	Der Wert des Stilelements von Nutzerauswahl zurückgegeben im Eigenschaftenbereich
defaultValue	`string OR object OR bool OR number`	Der Standardwert des Stils -Element definiert in den Visualisierungskonfiguration

interactionsById

{

}

Das Objekt interactionsById stellt Interaktionsdaten bereit, die vom interactionId Visualisierungskonfiguration

Index	Typ	Beschreibung
configId	`interaction`	Ein Objekt, das Daten enthält, die einem Interaktion

interactionField

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

Das Objekt interactionField enthält das Array der unterstützten Aktionen, die in definiert sind. die Konfiguration und die vom Nutzer für die Interaktion ausgewählten Werte enthält.

Feld	Typ	Beschreibung
Wert	`string OR object OR bool OR number`	Der Wert des Stilelements von Nutzerauswahl zurückgegeben im Eigenschaftenbereich
supportedActions	`Array<InteractionType>`	Die von diesem Interaktion, wie in den konfigurieren

interactionValue

Das Objekt interactionValue stellt vom Nutzer ausgewählte Werte für die Interaktion bereit Typ. Wenn der Schlüssel data vorhanden ist, spiegelt das Objekt InteractionData den Parameter den aktuellen Status des Filters. Wenn der Schlüssel data nicht vorhanden ist, wird die Visualisierung ist 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 mit dem aktuellen Status den Filter. Dieser Schlüssel ist nicht vorhanden wenn der Filter gerade 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`	Ein String, der die Schriftfamilie beschreibt
accentFontFamily	`string`	Ein String, der die Akzentschrift beschreibt Familie
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 mit Objekten des Format`{color: string, opacity: number}`

tablesById

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

Die tableObject stellt Überschriften- und Dateninformationen für jede Zeile bereit. „STANDARD“ gibt immer Daten zurück und "COMPARISON" wird nur gefüllt, wenn der Nutzer konfiguriert die Daten mit Vergleichszeilen.

Das Format des Tabellenobjekts ist der einzige Unterschied zwischen dscc.tableFormat und dscc.objectFormat.

Feld	Typ	Beschreibung
„STANDARD“	`object(tableObject) OR Array<objectRow>`	Die `tableObject`, die mit die Daten, die Nutzende einer Visualisierung
„VERGLEICH“	`object(tableObject) OR Array<objectRow>`	Die `tableObject`, die mit die Datumsvergleichsdaten, wenn zutreffend

dateRangesById

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

Das dateRangesById-Objekt stellt Informationen zum Standard und zum Vergleich bereit. Zeiträume. Wenn keine Zeiträume vorhanden sind, wird das Objekt leer. DEFAULT und COMPARISON werden nur ausgefüllt, wenn das entsprechende Datum Bereiche werden vom Nutzer konfiguriert. Die Daten in den Zeiträumen beziehen sich auf Standard- und Vergleichsdaten gemäß Definition in tablesById

Feld	Typ	Beschreibung
„STANDARD“	`object(dateRange)`	Die `dateRange`, die mit dem Standardzeitraum (falls zutreffend).
„VERGLEICH“	`object(dateRange)`	Die `dateRange`, die einem Vergleichszeitraum (falls zutreffend).

dateRange

{
  start: string,
  end: string
}

Das Objekt dateRange liefert Informationen über das Start- und Enddatum eines Standard- oder Vergleichszeitraum .

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

`tableFormat`-Referenz

tableObject

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

Feld	Typ	Beschreibung
headers	`Array`	Ein Array mit fields-Objekten. Diese Felder Objekte haben zusätzlich das Attribut `configId` das den IDs aus der Konfiguration entspricht.
Zeilen	`Array<Array>`	Ein aus Arrays bestehendes Array: Jedes Array ist eine Datenzeile.

Beispieldaten für `tableFormat`

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

ObjektFormat-Referenz

objectRow

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

Feld	Typ	Beschreibung
configId	Array	Array von Werten, die mit einer bestimmten Konfigurations-ID verknüpft sind

Beispieldaten für „objectFormat“

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

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

tableFormat-Referenz

tableObject

Beispieldaten für tableFormat

ObjektFormat-Referenz

objectRow

Beispieldaten für „objectFormat“

`getWidth()`

`getWidth()` verwenden

`getHeight()`

`getHeight()` verwenden

`InteractionType`

`sendInteraction` verwenden

`interactionData`

`clearInteraction()` verwenden

`subscribeToData(callback, options)`

`subscribeToData()` verwenden

`data`

`tableFormat`-Referenz

Beispieldaten für `tableFormat`