Menggunakan visualisasi komunitas sebagai filter

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

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, interaksi tersebut harus ditentukan dalam konfigurasi Anda. 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 Data Studio an instruction to filter other charts in the dashboard
  dscc.sendInteraction(interactionId, FILTER, interactionData);
};

Data 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 Data 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 undefined, visualisasi saat ini memfilter komponen lain 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()
  }
}

Membangun interactionData

Objek interactionData menentukan cara Data Studio akan memfilter dasbor Anda.

Filter dimensi tunggal

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

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

Filter beberapa dimensi

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

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