Ta strona została przetłumaczona przez Cloud Translation API.

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

Omówienie interfejsu API

dscc (komponent społeczności Looker Studio) to biblioteka, która ułatwia tworzenie komponentów społeczności dla Looker Studio. Kod źródłowy znajdziesz w 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 komunikat z danymi filtra.

Parametry:

Nazwa	Typ	Opis
actionID	`string`	Ciąg znaków odpowiadający identyfikatorowi akcji w konfiguracji,
interakcja	`enum(InteractionType)`	Informuje Looker Studio o interakcji
dane	`object(InteractionData)`	Dostarcza danych niezbędnych do interakcji

`InteractionType`

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

Nazwa	Typ	Opis
dscc.InteractionType.FILTER	Enum	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
koncepcje	`Array`	Tablica `fieldIds`
wartości	`Array<Array>`	Zagnieżdżona tablica wartości danych. Każda tablica podrzędna powinna mieć długość tablicy `concepts`. Każda wartość w tablicy podrzędnej odpowiada wartości wymiaru.

Przykładowy interactionData:

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

Użycie polecenia dscc.sendInteraction z powyższym elementem interactionData jest równoważne z tą instrukcją 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 tekstowy odpowiadający wartości actionId 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
wywołanie zwrotne(dane)	`function`	Funkcja, która pobiera dane zwrócone przez `subscribeToData`.
Opcje	`object`	Określa wymagany format zwracanych danych

Obiekt opcji wygląda tak:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Zwracana wartość:

Typ	Opis
`function`	Anuluje subskrypcję wiadomości od użytkownika `callback` z usługi 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`

To obiekt przekazany do callback zarejestrowany w dscc.subscribeToData. Te pola są wspólne dla pól 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 zindeksowane według identyfikatora konfiguracji
styl	`object(styleById)`	Obiekt zawierający obiekty style zindeksowane przez ich identyfikator configId
Interakcje	`object(interactionsById)`	obiekt zawierający obiekty interakcji,
motyw	`themeStyle`	Obiekt themeStyle zawierający informacje o stylu motywu na potrzeby raportu
tabele	`object(tablesById)`	Obiekt zawierający tableObjects
dateRanges	`object(dateRangesById)`	Obiekt zawierający dateRanges.

fieldsByConfigId

{
   configId: array(field)
}

Obiekt fieldsByConfigId zawiera tablice obiektów field indeksowanych według parametru „id” zdefiniowanego w konfiguracji wizualizacji. W tym obiekcie znajduje się 1 wpis na każde dataField zdefiniowane w konfiguracji.

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

pole

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

Obiekt field dostarcza informacje o polu wybranym przez użytkownika w panelu właściwości.

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 dostarcza informacje o stylu zindeksowane według parametru „id” zdefiniowanego w konfiguracji wizualizacji.

Pole	Typ	Opis
configId	`styleValue`	Obiekt zawierający wartość stylu i zdefiniowaną przez konfigurację wartość domyślnego stylu.

styleValue

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

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

Pole	Typ	Opis
value	`string OR object OR bool OR number`	Wartość elementu stylu powstała po wybraniu opcji przez użytkownika w panelu właściwości
defaultValue	`string OR object OR bool OR number`	Wartość domyślna elementu stylu określonego w konfiguracji wizualizacji,

interactionsById

{

}

Obiekt interactionsById dostarcza dane interakcji zindeksowane przez interactionId konfigurację 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ę obsługiwanych działań zdefiniowanych w konfiguracji, a także wybrane przez użytkownika wartości interakcji.

Pole	Typ	Opis
value	`string OR object OR bool OR number`	Wartość elementu stylu powstała po wybraniu opcji przez użytkownika w panelu właściwości
supportedActions	`Array<InteractionType>`	Działania obsługiwane przez tę interakcję, określone w konfiguracji

interactionValue

Obiekt interactionValue podaje wybrane przez użytkownika wartości typu interakcji. Jeśli klucz data istnieje, obiekt InteractionData odzwierciedla bieżący stan filtra. Jeśli klucz 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. Jeśli filtr jest aktualnie wyczyszczony, klucz ten nie istnieje.

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 temacie raportu.

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

tablesById

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

Pole tableObject zawiera informacje o nagłówku i danych w każdym wierszu. Wartość „DEFAULT” zawsze zwraca dane, a pole „PORÓWNANIE” jest wypełniane tylko wtedy, gdy użytkownik skonfiguruje dane za pomocą wierszy porównania.

Format obiektu tableObject jest jedyną różnicą między dscc.tableFormat a dscc.objectFormat.

Pole	Typ	Opis
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	Element `tableObject` powiązany z danymi, które użytkownik dodaje do wizualizacji
„PORÓWNANIE”	`object(tableObject) OR Array<objectRow>`	`tableObject` powiązany z danymi do porównania dat (w stosownych przypadkach).

dateRangesById

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

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

Pole	Typ	Opis
"DEFAULT"	`object(dateRange)`	Wartość `dateRange` powiązana z domyślnym zakresem dat (w stosownych przypadkach).
„PORÓWNANIE”	`object(dateRange)`	Wartość `dateRange` powiązana z zakresem dat porównawczym (w stosownych 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
start	`string`	Data rozpoczęcia zakresu dat w formacie RRRRMMDD.
end	`string`	Data zakończenia zakresu dat w formacie RRRRMMDD.

Plik referencyjny `tableFormat`

tableObject

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

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

Przykładowe dane: `tableFormat`

To jest przykładowy element data zwrócony przy użyciu funkcji 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"
      ]
    }
  }
}

Odwołanie do obiektuObjectFormat

objectRow

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

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

Przykładowe dane eventFormat

To jest przykładowy element data zwrócony przy użyciu funkcji 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)

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

Plik referencyjny tableFormat

tableObject

Przykładowe dane: tableFormat

Odwołanie do obiektuObjectFormat

objectRow

Przykładowe dane eventFormat

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

Plik referencyjny `tableFormat`

Przykładowe dane: `tableFormat`