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 mengekspos 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`	Mengembalikan 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 sesuai 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 bertingkat dari nilai data. Setiap subarray harus memiliki 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 sama 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 data yang diinginkan

Objek opsi terlihat seperti:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Nilai yang ditampilkan:

Jenis	Deskripsi
`function`	Berhenti berlangganan `callback` agar tidak menerima 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 sama 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 menurut configId-nya
gaya	`object(styleById)`	Objek yang berisi objek gaya yang diindeks menurut configId-nya
interaksi	`object(interactionsById)`	Objek yang berisi objek interaksi
tema	`themeStyle`	Objek themeStyle yang berisi informasi gaya 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 field yang diindeks berdasarkan "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
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" yang ditentukan dalam konfigurasi visualisasi.

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

styleValue

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

Objek styleValue menyediakan nilai gaya yang dipilih pengguna dan nilai default 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 yang ditampilkan dari pilihan 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 interactionId konfigurasi visualisasi.

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
nilai	`string OR object OR bool OR number`	Nilai elemen gaya yang ditampilkan dari pilihan pengguna di panel properti
supportedActions	`Array<InteractionType>`	Tindakan yang didukung oleh interaksi ini, sebagaimana ditentukan dalam konfigurasi

interactionValue

Objek interactionValue memberikan nilai yang dipilih pengguna untuk jenis 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)`	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`	String 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 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
"COMPARISON" (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 ditentukan dalam tablesById.

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

dateRange

{
  start: string,
  end: string
}

Objek dateRange memberikan informasi tentang tanggal mulai dan akhir 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. Objek kolom ini juga memiliki properti `configId` yang sesuai dengan ID dari konfigurasi.
baris	`Array<Array>`	Array array: setiap array adalah baris data

Data sampel `tableFormat`

Ini adalah contoh data yang ditampilkan dengan 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 dengan 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) Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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

Data sampel tableFormat

Referensi objectFormat

objectRow

Contoh data objectFormat

Referensi library Komponen Komunitas Looker Studio (dscc)

`getWidth()`

Menggunakan `getWidth()`

`getHeight()`

Menggunakan `getHeight()`

`InteractionType`

Menggunakan `sendInteraction`

`interactionData`

Menggunakan `clearInteraction()`

`subscribeToData(callback, options)`

Menggunakan `subscribeToData()`

`data`

Referensi `tableFormat`

Data sampel `tableFormat`