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