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 membuat 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, dalam piksel

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() mengirim pesan ke Looker Studio dengan data untuk filter.

Parameter:

Nama	Jenis	Deskripsi
actionID	`string`	String yang terkait dengan actionId dalam 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 sesuai dengan panjang array `concepts`. Setiap nilai dalam subarray 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() mengirim pesan ke Looker Studio untuk menghapus filter yang sebelumnya ditetapkan oleh visualisasi ini.

Parameter:

Nama	Jenis	Deskripsi
actionID	`string`	String yang sesuai dengan actionId dalam 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`	Fungsi yang mengambil data yang ditampilkan oleh `subscribeToData`.
opsi	`object`	Menentukan format pengembalian data yang diinginkan

Objek opsi terlihat seperti:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Nilai yang ditampilkan:

Jenis	Deskripsi
`function`	Menghentikan langganan `callback` dari pesan lebih lanjut 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 adalah kolom yang digunakan bersama antara 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 yang diindeks oleh configId-nya
interaksi	`object(interactionsById)`	Objek yang berisi objek interaksi
tema	`themeStyle`	Objek themeStyle yang berisi informasi gaya visual tema 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 oleh "id" yang ditentukan 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 di panel properti.

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

styleById

{
   configId: styleValue
}

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

Kolom	Jenis	Deskripsi
configId	`styleValue`	Objek yang berisi nilai gaya dan nilai gaya default yang ditentukan dengan konfigurasi

styleValue

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

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

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

interactionsById

{

}

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

Indeks	Jenis	Deskripsi
configId	`interaction`	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
value	`string OR object OR bool OR number`	Nilai elemen gaya yang ditampilkan dari pemilihan pengguna di panel properti
supportedActions	`Array<InteractionType>`	Tindakan yang didukung oleh interaksi ini, seperti yang ditentukan dalam konfigurasi

interactionValue

Objek interactionValue memberikan nilai yang dipilih pengguna untuk jenis interaksi. Jika kunci data ada, objek InteractionData akan 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
tipe	`enum(InteractionType)`	InteractionType yang dipilih pengguna
data	`object(InteractionData)`	Data yang terkait dengan status filter saat ini. 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`	Sebuah {i>string<i} yang menjelaskan jenis font aksen
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 dengan format`{color: string, opacity: number}`

tablesById

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

tableObject menyediakan 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 rentang tanggal default dan perbandingan. Jika tidak ada rentang tanggal, objek akan kosong. DEFAULT dan COMPARISON hanya akan diisi jika rentang tanggal masing-masing dikonfigurasi oleh pengguna. Data dalam rentang tanggal terkait dengan data default dan perbandingan seperti yang ditetapkan 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.
selesai	`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. Objek kolom ini juga memiliki properti `configId` yang sesuai dengan ID dari konfigurasi.
baris	`Array<Array>`	Array dari 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`