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 pomaga w tworzeniu komponentów społeczności w Looker Studio. Kod źródłowy można znaleźć na stronie GitHub

Funkcja dscc ujawnia 3 funkcje: getWidth(), getHeight() i subscribeToData()

`getWidth()`

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

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 dla filtra.

Parametry:

Nazwa	Typ	Opis
actionID	`string`	Ciąg, który odpowiada wartości parametr actionId w konfiguracja
interakcja	`enum(InteractionType)`	Informacje dla Lookera Informacje o Studio interakcja
dane	`object(InteractionData)`	Zapewnia wymagane dane dla interakcja

`InteractionType`

Obecnie jedyną poprawną wartością pola 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 powinien być długością tablicy `concepts`. Każda wartość w tablicy podrzędnej odpowiada .

Przykładowy interactionData:

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

Użycie właściwości dscc.sendInteraction z powyższym 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 z prośbą o wyczyszczenie pola ustawiony wcześniej przez tę wizualizację.

Parametry:

Nazwa	Typ	Opis
actionID	`string`	Ciąg odpowiadający parametrowi actionId w konfiguracji.
interakcja	`enum(InteractionType)`	Informuje narzędzie Looker Studio o interakcja

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 zwracane przez funkcję `subscribeToData`
Opcje	`object`	Określa wymagany format zwracanych danych

Obiekt options wygląda tak:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Zwracana wartość:

Typ	Opis
`function`	Anuluje subskrypcję kolejnych wiadomości od Looker Studio dla użytkownika `callback`

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 jest obiekt przekazany do callback zarejestrowanego w dscc.subscribeToData Te pola są używane jednocześnie 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, który zawiera fields (pola) zindeksowane przez identyfikator konfiguracji tego użytkownika
styl	`object(styleById)`	Obiekt, który zawiera obiekty stylu zindeksowane według identyfikatora konfiguracji
Interakcje	`object(interactionsById)`	Obiekt, który zawiera interakcja obiekty
motyw	`themeStyle`	obiektthemeStyle, zawierające style motywu informacje potrzebne do raportu
tabele	`object(tablesById)`	Obiekt, który zawiera tableObjects
dateRanges	`object(dateRangesById)`	Obiekt, który zawiera dateRanges

fieldsByConfigId

{
   configId: array(field)
}

Obiekt fieldsByConfigId zawiera tablice obiektów field zindeksowanych argumentem „id” zdefiniowane w konfigurację wizualizacji. Jest po 1 wpisie w tym obiekcie dla każdego obiektu dataField zdefiniowanego w konfiguracji.

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

pole

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

Obiekt field dostarcza informacji o polu, które użytkownik wybiera w panelu właściwości.

Pole	Typ	Opis
id	`string`	identyfikator pola wygenerowany przez Looker Studio,
nazwa	`string`	Zrozumiała nazwa pola
opis	`string`	Opis pola
typ	`enum(fieldType)`	Wartość semanticType pola.
pomysł : koncepcja	`enum(conceptType)`	Wartość conceptType pola.

styleById

{
   configId: styleValue
}

Obiekt styleById dostarcza informacje o stylu zindeksowane według parametru „id” zdefiniowane w konfigurację wizualizacji.

Pole	Typ	Opis
configId	`styleValue`	Obiekt, który zawiera wartość stylu oraz atrybut zdefiniowana 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 parametr wartość domyślna zdefiniowana w konfiguracji. Typ: value i defaultValue zależą od elementu stylu.

Pole	Typ	Opis
wartość	`string OR object OR bool OR number`	Wartość elementu stylu. zwrócony z wyboru użytkownika w panelu właściwości
defaultValue	`string OR object OR bool OR number`	Domyślna wartość stylu. element zdefiniowany w tagu konfiguracja wizualizacji

interactionsById

{

}

Obiekt interactionsById dostarcza dane o interakcjach zindeksowane przez interactionId konfigurację wizualizacji.

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

interactionField

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

Obiekt interactionField zawiera tablicę obsługiwanych działań zdefiniowaną w oraz wartości wybrane przez użytkownika dla interakcji.

Pole	Typ	Opis
wartość	`string OR object OR bool OR number`	Wartość elementu stylu. zwrócony z wyboru użytkownika w panelu właściwości
supportedActions	`Array<InteractionType>`	Obsługiwane działania interakcji zgodnie z definicją Konfiguracja

interactionValue

Obiekt interactionValue zawiera wybrane przez użytkownika wartości interakcji typu. Jeśli klucz data istnieje, obiekt InteractionData odzwierciedla do bieżącego stanu filtra. Jeśli klucz data nie istnieje, wizualizacja nie jest obecnie skonfigurowane jako filtr.

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

Pole	Typ	Opis
typ	`enum(InteractionType)`	Użytkownik wybrany przez użytkownika InteractionType
dane	`object(InteractionData)`	Dane powiązane z obecnym stanem użyj 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 opisujący rodzinę czcionek,
accentFontFamily	`string`	Ciąg opisujący czcionkę uzupełniającą rodzina
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 format`{color: string, opacity: number}`

tablesById

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

tableObject zawiera informacje o nagłówku i danych w każdym wierszu. „DOMYŚLNE” zawsze zwróci dane, a funkcja „COMPARISON” zostanie wypełnione tylko wtedy, gdy użytkownik konfiguruje dane z wierszami porównawczymi.

Jedyną różnicą między dscc.tableFormat jest format tableObject i dscc.objectFormat.

Pole	Typ	Opis
„DOMYŚLNE”	`object(tableObject) OR Array<objectRow>`	Element `tableObject` powiązany z dane dodawane przez użytkownika do wizualizacja
„PORÓWNANIE”	`object(tableObject) OR Array<objectRow>`	Element `tableObject` powiązany z dane porównawcze z zakresu dat, ma zastosowanie

dateRangesById

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

Obiekt dateRangesById zawiera informacje o wartości domyślnej i porównaniu zakresów dat. Jeśli nie ma zakresu dat, obiekt zostanie puste. Pole DEFAULT i COMPARISON zostanie wypełnione tylko wtedy, gdy stosowna data konfigurowane przez użytkownika. Dane w zakresach dat są powiązane z: dane domyślne i dane porównawcze, jak określono w zasadzie tablesById.

Pole	Typ	Opis
„DOMYŚLNE”	`object(dateRange)`	Element `dateRange` powiązany z parametrem domyślny zakres dat (jeśli dotyczy).
„PORÓWNANIE”	`object(dateRange)`	Element `dateRange` powiązany z parametrem zakres dat do porównania.

dateRange

{
  start: string,
  end: string
}

Obiekt dateRange dostarcza informacji o datach rozpoczęcia i zakończenia domyślny lub porównawczy zakres dat.

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

Dokumentacja `tableFormat`

tableObject

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

Pole	Typ	Opis
nagłówki	`Array`	Tablica obiektów fields. To pole obiekty dodatkowo mają właściwość `configId` odpowiadający identyfikatorom z konfiguracji.
wiersze	`Array<Array>`	Tablica informacyjna: każda tablica jest wierszem danych

Przykładowe dane `tableFormat`

To jest przykładowy plik data zwrócony przez użycie polecenia 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 obiektuFormat

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 obiektuobjectFormat

To jest przykładowy plik data zwrócony przez użycie polecenia 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

Dokumentacja tableFormat

tableObject

Przykładowe dane tableFormat

Dokumentacja obiektuFormat

objectRow

Przykładowe dane obiektuobjectFormat

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

Dokumentacja `tableFormat`

Przykładowe dane `tableFormat`