Menggunakan visualisasi komunitas sebagai filter

Anda dapat menggunakan visualisasi komunitas sebagai filter diagram, yang memfilter melaporkan interaksi dengan visualisasi komunitas Anda.

Cara kerja filter diagram visualisasi komunitas

Untuk menggunakan visualisasi komunitas sebagai filter diagram, Anda harus:

  1. Mengonfigurasi properti config.interactions
  2. Tulis kode yang memanggil dscc.sendInteraction() dengan informasi filter.

Menentukan interaksi

Jika visualisasi Anda mendukung interaksi, visualisasi tersebut harus yang ditentukan dalam konfigurasi Anda. Bila 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 laporan editor belum mengaktifkan "filter" interaksi untuk visualisasi Anda.

Melacak status filter

Objek data yang dikirim Looker Studio ke visualisasi Anda akan memberikan informasi mengenai 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 saat ini memfilter elemen komponen 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 akan memfilter dasbor.

Filter dimensi tunggal

Diagram batang ini memvisualisasikan jumlah buku menurut bahasa (satu dimensi dan satu dimensi metrik). Misalkan pengguna memilih bilah yang sesuai dengan buku dalam bahasa Spanyol, dan Anda menginginkan pilihan untuk memfilter sisa dasbor. Nama interactionData akan terlihat seperti ini:

var interactionData = {
  "concepts": ["languageDimensionId"],
  "values": [["Spanish"]]
}

Filter beberapa dimensi

Peta panas ini menampilkan suhu menurut hari dan waktu (dua dimensi dan satu metrik). Misalkan pengguna memilih sel yang sesuai dengan "Monday sore" serta "Jumat siang", dan Anda ingin memfilter sisa dasbor untuk hanya menampilkan data dari "Senin malam" atau "Jumat siang". interactionData Anda akan terlihat seperti ini:

var interactionData = {
  "concepts": ["dayOfWeekDimensionId", "timeOfDayDimensionId"],
  "values": [
    ["Monday", "evening"],
    ["Friday", "afternoon"]
  ]
}