Halaman ini diterjemahkan oleh Cloud Translation API.

Referensi library Komponen Komunitas Looker Studio (dscc)

Ringkasan API

dscc (Komponen Komunitas Looker Studio) adalah library untuk membantu membangun komponen komunitas untuk Looker Studio. Kode sumber dapat ditemukan di GitHub.

dscc menampilkan tiga fungsi: getWidth(), getHeight(), dan subscribeToData().

`getWidth()`

Nama	Parameter	Jenis Nilai yang Ditampilkan	Deskripsi
getWidth()	Tidak ada	`number`	Menampilkan lebar iframe, di {i>pixel<i}

Menggunakan `getWidth()`

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

`getHeight()`

Nama	Parameter	Jenis Nilai yang Ditampilkan	Deskripsi
getHeight()	Tidak ada	`int`	Menampilkan tinggi iframe, dalam piksel

Menggunakan `getHeight()`

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

sendInteraction()

Fungsi sendInteraction() mengirimkan pesan ke Looker Studio beserta data untuk filter.

Parameter:

Nama	Jenis	Deskripsi
actionID	`string`	{i>String<i} yang sesuai dengan actionId di konfigurasi
interaksi	`enum(InteractionType)`	Memberi tahu Looker Studio tentang interaksi
data	`object(InteractionData)`	Menyediakan data yang diperlukan untuk interaksi

`InteractionType`

Saat ini, satu-satunya InteractionType yang valid adalah FILTER.

Nama	Jenis	Deskripsi
dscc.InteractionType.FILTER	Enum	Menjelaskan interaksi `FILTER`

Menggunakan `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))
}

Kolom	Jenis	Deskripsi
konsep	`Array`	Array `fieldIds`
nilai	`Array<Array>`	Array nilai data bertingkat. Setiap subarray harus panjang array `concepts`. Setiap nilai dalam sub-array sesuai dengan nilai dimensi.

Contoh interactionData:

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

Menggunakan dscc.sendInteraction dengan interactionData di atas setara dengan pernyataan SQL berikut:

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

clearInteraction()

Fungsi clearInteraction() mengirimkan pesan ke Looker Studio untuk menghapus sebelumnya yang ditetapkan oleh visualisasi ini.

Parameter:

Nama	Jenis	Deskripsi
actionID	`string`	String yang sesuai dengan actionId di konfigurasi
interaksi	`enum(InteractionType)`	Memberi tahu Looker Studio tentang interaksi

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

Fungsi subscribeToData() berlangganan pesan dari Looker Studio.

Parameter:

Nama	Jenis	Deskripsi
callback(data)	`function`	Sebuah fungsi yang mengambil data yang ditampilkan oleh `subscribeToData`.
opsi	`object`	Menentukan format pengembalian data yang diinginkan

Objek opsi terlihat seperti ini:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Nilai yang ditampilkan:

Jenis	Deskripsi
`function`	Menghentikan langganan `callback` dari pesan berikutnya dari Looker Studio

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

Ini adalah objek yang diteruskan ke callback yang terdaftar dengan dscc.subscribeToData. Berikut ini adalah {i>field<i} yang digunakan bersama oleh dscc.objectFormat dan dscc.tableFormat.

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

Kolom	Jenis	Deskripsi
Fields	`object(fieldsByConfigId)`	Objek yang berisi kolom yang diindeks oleh configId-nya
gaya	`object(styleById)`	Objek yang berisi objek gaya diindeks oleh configId-nya
interaksi	`object(interactionsById)`	Objek yang berisi interaksi objek
tema	`themeStyle`	Objek themeStyle yang berisi gaya visual tema informasi untuk laporan
tabel	`object(tablesById)`	Objek yang berisi tableObjects
dateRanges	`object(dateRangesById)`	Objek yang berisi dateRanges

fieldsByConfigId

{
   configId: array(field)
}

Objek fieldsByConfigId berisi array objek kolom yang diindeks menurut "id" didefinisikan dalam konfigurasi visualisasi. Ada satu entri dalam objek ini untuk setiap dataField yang ditentukan dalam konfigurasi.

Kolom	Jenis	Deskripsi
configId	`Array<field>`	Array kolom yang terkait dengan dataField

medan

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

Objek field memberikan informasi tentang kolom yang dipilih pengguna panel {i>Property<i}.

Kolom	Jenis	Deskripsi
id	`string`	ID yang dibuat Looker Studio untuk kolom
nama	`string`	Nama kolom yang dapat dibaca manusia
deskripsi	`string`	Deskripsi kolom
jenis	`enum(fieldType)`	semanticType kolom
konsep	`enum(conceptType)`	conceptType kolom

styleById

{
   configId: styleValue
}

Objek styleById memberikan informasi gaya yang diindeks oleh "id" didefinisikan dalam konfigurasi visualisasi.

Kolom	Jenis	Deskripsi
configId	`styleValue`	Objek yang berisi nilai gaya dan atribut nilai gaya default config-defined

styleValue

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

Objek styleValue memberikan nilai gaya yang dipilih pengguna dan yang ditentukan dalam konfigurasi. Jenis value dan defaultValue bergantung pada elemen gaya.

Kolom	Jenis	Deskripsi
nilai	`string OR object OR bool OR number`	Nilai elemen gaya ditampilkan dari pilihan pengguna di panel properti
defaultValue	`string OR object OR bool OR number`	Nilai default gaya yang didefinisikan dalam konfigurasi visualisasi

interactionsById

{

}

Objek interactionsById memberikan data interaksi yang diindeks oleh interactionId konfigurasi visualisasi.

Indeks	Jenis	Deskripsi
configId	`interaction`	Sebuah objek yang berisi data yang terkait dengan interaksi

interactionField

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

Objek interactionField berisi array supportedActions yang ditentukan dalam konfigurasi, serta nilai yang dipilih pengguna untuk interaksi.

Kolom	Jenis	Deskripsi
nilai	`string OR object OR bool OR number`	Nilai elemen gaya ditampilkan dari pilihan pengguna di panel properti
supportedActions	`Array<InteractionType>`	Tindakan yang didukung oleh interaksi, seperti yang didefinisikan dalam konfigurasi

interactionValue

Objek interactionValue memberikan nilai yang dipilih pengguna untuk interaksi . Jika kunci data ada, objek InteractionData mencerminkan status filter saat ini. Jika kunci data tidak ada, visualisasi saat ini tidak dikonfigurasi sebagai filter.

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

Kolom	Jenis	Deskripsi
jenis	`enum(InteractionType)`	Dipilih oleh pengguna InteractionType
data	`object(InteractionData)`	Data yang terkait dengan kondisi saat ini, {i>filter<i}. Kunci ini tidak ada jika filter saat ini dihapus.

tema

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

Objek themeStyle meneruskan informasi tema laporan ke visualisasi.

Kolom	Jenis	Deskripsi
fillColor	`object`	Objek dengan format `{color: string, opacity: number}`
fontColor	`object`	Objek dengan format `{color: string, opacity: number}`
accentFillColor	`object`	Objek dengan format `{color: string, opacity: number}`
accentFontColor	`object`	Objek dengan format `{color: string, opacity: number}`
fontFamily	`string`	String yang menjelaskan jenis font
accentFontFamily	`string`	String yang menjelaskan font aksen keluarga
increaseColor	`object`	Objek dengan format `{color: string, opacity: number}`
decreaseColor	`object`	Objek dengan format `{color: string, opacity: number}`
gridColor	`object`	Objek dengan format `{color: string, opacity: number}`
seriesColor	`Array<object>`	Array objek dari format`{color: string, opacity: number}`

tablesById

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

tableObject memberikan informasi judul dan data untuk setiap baris. "DEFAULT" akan selalu menampilkan data, dan "COMPARISON" hanya akan diisi jika pengguna mengonfigurasi data dengan baris perbandingan.

Format tableObject adalah satu-satunya perbedaan antara dscc.tableFormat dan dscc.objectFormat.

Kolom	Jenis	Deskripsi
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	`tableObject` yang terkait dengan data yang ditambahkan pengguna ke visualisasi
"PERBANDINGAN"	`object(tableObject) OR Array<objectRow>`	`tableObject` yang terkait dengan data perbandingan tanggal, jika berlaku

dateRangesById

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

Objek dateRangesById memberikan informasi tentang default dan perbandingan rentang tanggal. Jika tidak ada rentang tanggal, objek akan kosong. DEFAULT dan COMPARISON hanya akan diisi jika tanggal masing-masing rentang dikonfigurasi oleh pengguna. Data dalam rentang tanggal berkaitan dengan data default dan perbandingan seperti yang ditentukan dalam tablesById.

Kolom	Jenis	Deskripsi
"DEFAULT"	`object(dateRange)`	`dateRange` yang terkait dengan rentang tanggal default, jika berlaku.
"PERBANDINGAN"	`object(dateRange)`	`dateRange` yang terkait dengan rentang tanggal perbandingan, jika berlaku.

dateRange

{
  start: string,
  end: string
}

Objek dateRange memberikan informasi tentang tanggal mulai dan akhir dari rentang tanggal default atau perbandingan.

Kolom	Jenis	Deskripsi
mulai	`string`	Tanggal mulai rentang tanggal dalam format YYYYMMDD.
end	`string`	Tanggal akhir rentang tanggal dalam format YYYYMMDD.

Referensi `tableFormat`

tableObject

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

Kolom	Jenis	Deskripsi
headers	`Array`	Array objek fields. Kolom ini objek juga memiliki properti `configId` yang sesuai dengan ID dari konfigurasi.
baris	`Array<Array>`	Array array: setiap array adalah baris data

Contoh data `tableFormat`

Ini adalah contoh data yang ditampilkan menggunakan dscc.subscribeToData() dengan opsi 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"
      ]
    }
  }
}

Referensi objectFormat

objectRow

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

Kolom	Jenis	Deskripsi
configId	array	array nilai yang terkait dengan ID konfigurasi tertentu

Contoh data objectFormat

Ini adalah contoh data yang ditampilkan menggunakan dscc.subscribeToData() dengan opsi 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"
      ]
    }
  }
}

Referensi library Komponen Komunitas Looker Studio (dscc)

Ringkasan API

getWidth()

Menggunakan getWidth()

getHeight()

Menggunakan getHeight()

sendInteraction()

InteractionType

Menggunakan sendInteraction

interactionData

clearInteraction()

Menggunakan clearInteraction()

subscribeToData(callback, options)

Menggunakan subscribeToData()

data

fieldsByConfigId

medan

styleById

styleValue

interactionsById

interactionField

interactionValue

tema

tablesById

dateRangesById

dateRange

Referensi tableFormat

tableObject

Contoh data tableFormat

Referensi objectFormat

objectRow

Contoh data objectFormat

`getWidth()`

Menggunakan `getWidth()`

`getHeight()`

Menggunakan `getHeight()`

`InteractionType`

Menggunakan `sendInteraction`

`interactionData`

Menggunakan `clearInteraction()`

`subscribeToData(callback, options)`

Menggunakan `subscribeToData()`

`data`

Referensi `tableFormat`

Contoh data `tableFormat`