Dokumentacja biblioteki komponentu społeczności Looker Studio (dscc)

Omówienie interfejsu API

dscc (Looker Studio Community Component) to biblioteka ułatwiająca tworzenie komponentów społecznościowych dla Looker Studio. Kod źródłowy znajdziesz na GitHub.

dscc udostępnia 3 funkcje: getWidth(), getHeight() i subscribeToData().

`getWidth()`

Nazwa	Parametry	Typ zwracanej wartości	Opis
getWidth()	Brak	`number`	Zwraca szerokość elementu iframe w pikselach.

Jak korzystać z aplikacji `getWidth()`

// to get the width of the iframe
var width = dscc.getWidth();

`getHeight()`

Nazwa	Parametry	Typ zwracanej wartości	Opis
getHeight()	Brak	`int`	Zwraca wysokość elementu iframe w pikselach.

Jak korzystać z aplikacji `getHeight()`

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

sendInteraction()

Funkcja sendInteraction() wysyła do Looker Studio wiadomość z danymi filtra.

Parametry:

Nazwa	Typ	Opis
actionID	`string`	Ciąg znaków, który odpowiada identyfikatorowi actionId w konfiguracji.
interakcja	`enum(InteractionType)`	Informuje Looker Studio Studio o interakcji
dane	`object(InteractionData)`	Zawiera wymagane dane dotyczące interakcji.

`InteractionType`

Obecnie jedyną prawidłową wartością InteractionType jest FILTER.

Nazwa	Typ	Opis
dscc.InteractionType.FILTER	Typ wyliczeniowy	Opisuje interakcję `FILTER`

Jak korzystać z aplikacji `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))
}

Pole	Typ	Opis
pojęcia,	`Array`	Tablica `fieldIds`
wartości	`Array<Array>`	Zagnieżdżona tablica wartości danych. Każda podtablica powinna mieć długość tablicy `concepts`. Każda wartość w podtablicy odpowiada wartości wymiaru.

Przykład interactionData:

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

Użycie dscc.sendInteraction z powyższym interactionData jest równoważne z tym zapytaniem SQL:

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

clearInteraction()

Funkcja clearInteraction() wysyła do Looker Studio komunikat, aby wyczyścić filtr ustawiony wcześniej przez tę wizualizację.

Parametry:

Nazwa	Typ	Opis
actionID	`string`	Ciąg znaków odpowiadający identyfikatorowi działania w konfiguracji.
interakcja	`enum(InteractionType)`	Informuje Looker Studio o interakcji.

Jak korzystać z aplikacji `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)`

Funkcja subscribeToData() subskrybuje wiadomości z Looker Studio.

Parametry:

Nazwa	Typ	Opis
callback(data)	`function`	Funkcja, która przyjmuje dane zwrócone przez `subscribeToData`.
Opcje	`object`	Określa żądany format zwracanych danych.

Obiekt options wygląda tak:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Zwracana wartość:

Typ	Opis
`function`	anuluje `callback` subskrypcję dalszych wiadomości z Looker Studio.

Jak korzystać z aplikacji `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`

Jest to obiekt przekazywany do funkcji callback zarejestrowanej w dscc.subscribeToData. Pola, które są wspólne dla dscc.objectFormat i dscc.tableFormat:

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById)
}

Pole	Typ	Opis
pola	`object(fieldsByConfigId)`	Obiekt zawierający pola indeksowane według identyfikatora configId.
styl	`object(styleById)`	Obiekt zawierający obiekty stylu indeksowane według identyfikatora configId.
Interakcje	`object(interactionsById)`	Obiekt zawierający obiekty interakcji.
motyw	`themeStyle`	Obiekt themeStyle zawierający informacje o stylu motywu raportu.
tabele	`object(tablesById)`	Obiekt zawierający tableObjects
dateRanges	`object(dateRangesById)`	Obiekt zawierający element dateRanges.

fieldsByConfigId

{
   configId: array(field)
}

Obiekt fieldsByConfigId zawiera tablice obiektów field indeksowane przez „id” zdefiniowane w konfiguracji wizualizacji. W tym obiekcie znajduje się 1 wpis dla każdego dataField zdefiniowanego w konfiguracji.

Pole	Typ	Opis
configId	`Array<field>`	Tablica pól powiązanych z polem danych.

pole

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

Obiekt field zawiera informacje o polu, które użytkownik wybiera w panelu usługi.

Pole	Typ	Opis
id	`string`	Identyfikator pola wygenerowany przez Looker Studio
nazwa	`string`	Zrozumiała dla człowieka nazwa pola.
opis	`string`	Opis pola
typ	`enum(fieldType)`	semanticType pola.
pomysł : koncepcja	`enum(conceptType)`	conceptType pola

styleById

{
   configId: styleValue
}

Obiekt styleById zawiera informacje o stylu indeksowane według identyfikatora „id” zdefiniowanego w konfiguracji wizualizacji.

Pole	Typ	Opis
configId	`styleValue`	Obiekt zawierający wartość stylu i wartość domyślną stylu zdefiniowaną w konfiguracji.

styleValue

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

Obiekt styleValue zawiera zarówno wybraną przez użytkownika wartość stylu, jak i wartość domyślną zdefiniowaną w konfiguracji. Typy value i defaultValue zależą od elementu stylu.

Pole	Typ	Opis
wartość	`string OR object OR bool OR number`	Wartość elementu stylu zwrócona po wyborze przez użytkownika w panelu właściwości
defaultValue	`string OR object OR bool OR number`	Wartość domyślna elementu style zdefiniowanego w konfiguracji wizualizacji

interactionsById

{

}

Obiekt interactionsById udostępnia dane interakcji indeksowane przez interactionId konfiguracji wizualizacji.

Indeks	Typ	Opis
configId	`interaction`	Obiekt zawierający dane powiązane z interakcją.

interactionField

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

Obiekt interactionField zawiera tablicę supportedActions zdefiniowaną w konfiguracji, a także wartości wybrane przez użytkownika w przypadku interakcji.

Pole	Typ	Opis
wartość	`string OR object OR bool OR number`	Wartość elementu stylu zwrócona po wyborze przez użytkownika w panelu właściwości
supportedActions	`Array<InteractionType>`	Działania obsługiwane przez tę interakcję, zdefiniowane w konfiguracji.

interactionValue

Obiekt interactionValue zawiera wartości wybrane przez użytkownika dla typu interakcji. Jeśli klucz data istnieje, obiekt InteractionData odzwierciedla bieżący stan filtra. Jeśli klawisz data nie istnieje, wizualizacja nie jest obecnie skonfigurowana jako filtr.

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

Pole	Typ	Opis
typ	`enum(InteractionType)`	Wybrany przez użytkownika InteractionType
dane	`object(InteractionData)`	Dane powiązane z bieżącym stanem filtra. Ten klucz nie istnieje, jeśli filtr jest obecnie wyczyszczony.

motyw

{
  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
    }
  ]
}

Obiekt themeStyle przekazuje do wizualizacji informacje o motywie raportu.

Pole	Typ	Opis
fillColor	`object`	Obiekt w formacie `{color: string, opacity: number}`
fontColor	`object`	Obiekt w formacie `{color: string, opacity: number}`
accentFillColor	`object`	Obiekt w formacie `{color: string, opacity: number}`
accentFontColor	`object`	Obiekt w formacie `{color: string, opacity: number}`
fontFamily	`string`	Ciąg znaków opisujący rodzinę czcionek
accentFontFamily	`string`	Ciąg znaków opisujący rodzinę czcionki uzupełniającej.
increaseColor	`object`	Obiekt w formacie `{color: string, opacity: number}`
decreaseColor	`object`	Obiekt w formacie `{color: string, opacity: number}`
gridColor	`object`	Obiekt w formacie `{color: string, opacity: number}`
seriesColor	`Array<object>`	Tablica obiektów w formacie`{color: string, opacity: number}`

tablesById

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

tableObject zawiera informacje o nagłówku i danych w każdym wierszu. Wartość „DEFAULT” zawsze zwraca dane, a wartość „COMPARISON” jest wypełniana tylko wtedy, gdy użytkownik skonfiguruje dane z wierszami porównawczymi.

Format obiektu tableObject to jedyna różnica między dscc.tableFormat a dscc.objectFormat.

Pole	Typ	Opis
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	`tableObject` powiązany z danymi, które użytkownik dodaje do wizualizacji.
„COMPARISON”	`object(tableObject) OR Array<objectRow>`	`tableObject` powiązany z danymi porównawczymi daty, jeśli ma to zastosowanie;

dateRangesById

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

Obiekt dateRangesById zawiera informacje o domyślnych i porównawczych zakresach dat. Jeśli nie ma zakresów dat, obiekt będzie pusty. Pola DEFAULT i COMPARISON zostaną wypełnione tylko wtedy, gdy użytkownik skonfiguruje odpowiednie zakresy dat. Dane w zakresach dat są powiązane z danymi domyślnymi i porównawczymi zdefiniowanymi w tablesById.

Pole	Typ	Opis
"DEFAULT"	`object(dateRange)`	`dateRange` powiązany z domyślnym zakresem dat, jeśli ma zastosowanie.
„COMPARISON”	`object(dateRange)`	`dateRange` powiązany z zakresem dat porównania (w odpowiednich przypadkach).

dateRange

{
  start: string,
  end: string
}

Obiekt dateRange zawiera informacje o datach rozpoczęcia i zakończenia domyślnego lub porównawczego zakresu dat.

Pole	Typ	Opis
rozpocznij	`string`	Data rozpoczęcia zakresu dat w formacie RRRRMMDD.
end	`string`	Data zakończenia zakresu dat w formacie RRRRMMDD.

`tableFormat` odniesienie

tableObject

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

Pole	Typ	Opis
nagłówki,	`Array`	Tablica obiektów pól. Te obiekty pól mają dodatkowo właściwość `configId`, która odpowiada identyfikatorom z konfiguracji.
wiersze	`Array<Array>`	Tablica tablic: każda tablica to wiersz danych.

Przykładowe dane `tableFormat`

To jest przykładowy kod data zwrócony przez użycie dscc.subscribeToData() z opcją 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"
      ]
    }
  }
}

Dokumentacja objectFormat

objectRow

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

Pole	Typ	Opis
configId	tablica	tablica wartości powiązanych z określonym identyfikatorem konfiguracji

Przykładowe dane objectFormat

To jest przykładowy kod data zwrócony przez użycie dscc.subscribeToData() z opcją 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"
      ]
    }
  }
}

Dokumentacja biblioteki komponentu społeczności Looker Studio (dscc) Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Omówienie interfejsu API

getWidth()

Jak korzystać z aplikacji getWidth()

getHeight()

Jak korzystać z aplikacji getHeight()

sendInteraction()

InteractionType

Jak korzystać z aplikacji sendInteraction

interactionData

clearInteraction()

Jak korzystać z aplikacji clearInteraction()

subscribeToData(callback, options)

Jak korzystać z aplikacji subscribeToData()

data

fieldsByConfigId

pole

styleById

styleValue

interactionsById

interactionField

interactionValue

motyw

tablesById

dateRangesById

dateRange

tableFormat odniesienie

tableObject

Przykładowe dane tableFormat

Dokumentacja objectFormat

objectRow

Przykładowe dane objectFormat

Dokumentacja biblioteki komponentu społeczności Looker Studio (dscc)

`getWidth()`

Jak korzystać z aplikacji `getWidth()`

`getHeight()`

Jak korzystać z aplikacji `getHeight()`

`InteractionType`

Jak korzystać z aplikacji `sendInteraction`

`interactionData`

Jak korzystać z aplikacji `clearInteraction()`

`subscribeToData(callback, options)`

Jak korzystać z aplikacji `subscribeToData()`

`data`

`tableFormat` odniesienie

Przykładowe dane `tableFormat`