Anda dapat menggunakan visualisasi komunitas sebagai filter diagram, yang memfilter laporan melalui interaksi dengan visualisasi komunitas Anda.
Cara kerja filter diagram visualisasi komunitas
Untuk menggunakan visualisasi komunitas sebagai filter diagram, Anda harus:
- Mengonfigurasi properti
config.interactions
- Tulis kode yang memanggil
dscc.sendInteraction()
dengan informasi filter.
Menentukan interaksi
Jika visualisasi Anda mendukung interaksi, interaksi tersebut harus ditentukan dalam konfigurasi. Jika ditentukan, kotak centang akan muncul di panel properti.
Contoh config.interactions
:
{
"data": ...,
"style": ...,
"interactions": [
{
"id": "interactionsConfigId",
"supportedActions": ["FILTER"]
}
]
}
Menulis kode untuk filter
Gunakan dscc.sendInteraction()
untuk mengaitkan interaksi pengguna dengan tindakan filter.
Contoh:
const handleInteraction = () => {
// this is the interactionId defined in the config
const interactionId = "interactionConfigId";
// the ID of the field you want to filter on
const dimensionId = "qt_ky8sltutsb";
// the value of the field you want to filter on
const value = "USA";
// the interaction type - only FILTER is supported right now
const FILTER = dscc.InteractionType.FILTER;
let interactionData = {
concepts: [dimensionId],
values: [[value]]
};
// send Looker Studio an instruction to filter other charts in the dashboard
dscc.sendInteraction(interactionId, FILTER, interactionData);
};
Looker Studio akan mengabaikan pesan yang dikirim oleh dscc.sendInteraction
jika editor
laporan belum mengaktifkan interaksi "filter" untuk visualisasi Anda.
Melacak status filter
Objek data
yang dikirim Looker Studio ke visualisasi Anda memberikan informasi
tentang interaksi.
Contoh data.interactions
:
"onClick": {
"value": {
"type": "FILTER",
"data": {
"concepts": [
"qt_h6oibrb6wb",
"qt_i6oibrb6wb"
],
"values": [
[
"Afternoon",
"Sunday"
],
[
"Afternoon",
"Thursday"
],
[
"Morning",
"Tuesday"
]
]
}
},
"supportedActions": [
"FILTER"
]
}
Jika value.data
tidak ditentukan, visualisasi sedang memfilter komponen
dasbor lain dari dasbor.
Contoh:
const barHighlighting = (interactionsById) => {
// the interactionId defined in the config
const interactionId = "interactionConfigId";
const interactionField = interactionsById[interactionId];
// if filter is selected
const filterSelected = interactionField.type === "FILTER";
// if the viz is currently acting as a filter
const filterHasData = "data" in interactionField;
if (filterSelected && filterHasData){
// call the highlightBar function on the selected data
highlightBar(interactionField.data);
} else {
// clear highlighting if no data selected
clearHighlight()
}
}
Membuat interactionData
Objek interactionData
menentukan cara Looker Studio memfilter dasbor Anda.
Filter satu dimensi
Diagram batang ini memvisualisasikan jumlah buku berdasarkan bahasa (satu dimensi dan satu
metrik). Misalnya pengguna memilih panel yang sesuai dengan buku dalam bahasa Spanyol, dan
Anda menginginkan pilihan tersebut untuk memfilter sisa dasbor. interactionData
Anda akan terlihat seperti ini:
var interactionData = {
"concepts": ["languageDimensionId"],
"values": [["Spanish"]]
}
Filter beberapa dimensi
Peta panas ini menampilkan suhu berdasarkan hari dan waktu (dua dimensi dan satu metrik). Misalnya pengguna memilih sel yang sesuai dengan "Senin
malam" dan "Jumat sore", dan Anda ingin memfilter bagian
dasbor lainnya untuk hanya menampilkan data dari "Senin sore" atau "Jumat
sore".interactionData
Anda akan terlihat seperti ini:
var interactionData = {
"concepts": ["dayOfWeekDimensionId", "timeOfDayDimensionId"],
"values": [
["Monday", "evening"],
["Friday", "afternoon"]
]
}