Topluluk görselleştirmelerini filtre olarak kullanma

Topluluk görselleştirmenizi grafik filtresi olarak kullanabilir ve raporu topluluk görselleştirmenizle etkileşimlere göre filtreleyebilirsiniz.

Topluluk görselleştirme grafiği filtrelerinin işleyiş şekli

Topluluk görselleştirmenizi grafik filtresi olarak kullanmak için şunları yapmanız gerekir:

  1. config.interactions mülkünü yapılandırma
  2. Filtre bilgileriyle dscc.sendInteraction() çağıran bir kod yazın.

Etkileşimleri tanımlama

Görselleştirmeniz etkileşimleri destekliyorsa bunlar yapılandırmanızda tanımlanmalıdır. Tanımlandığında, özellik panelinde bir onay kutusu görünür.

Örnek config.interactions:

{
  "data": ...,
  "style": ...,
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ]
}

Filtre için kod yazma

Kullanıcı etkileşimini bir filtre işlemiyle ilişkilendirmek için dscc.sendInteraction() kullanın.

Örnek:

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);
};

Rapor düzenleyici, görselleştirmeniz için "filtre" etkileşimlerini etkinleştirmediyse Looker Studio, dscc.sendInteraction tarafından gönderilen mesajları yoksayar.

Filtre durumunu takip etme

Looker Studio'nun görselleştirmenize gönderdiği data nesnesi, etkileşimler hakkında bilgi sağlar.

Örnek data.interactions:

"onClick": {
  "value": {
    "type": "FILTER",
      "data": {
      "concepts": [
        "qt_h6oibrb6wb",
        "qt_i6oibrb6wb"
      ],
        "values": [
          [
            "Afternoon",
            "Sunday"
          ],
          [
            "Afternoon",
            "Thursday"
          ],
          [
            "Morning",
            "Tuesday"
          ]
        ]
    }
  },
  "supportedActions": [
    "FILTER"
  ]
}

value.data tanımlı değilse görselleştirme şu anda kontrol panelinin diğer bileşenlerini filtreliyor demektir.

Örnek:

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()
  }
}

interactionData oluşturuluyor

interactionData nesnesi, Looker Studio'nun kontrol panelinizi nasıl filtreleyeceğini tanımlar.

Tek boyut filtresi

Bu çubuk grafik, kitap sayısını dile göre (bir boyut ve bir metrik) görselleştirir. Bir kullanıcının İspanyolca kitaplara karşılık gelen çubuğu seçtiğini ve bu seçimin kontrol panelinin geri kalanının filtrelenmesini istediğinizi varsayalım. interactionData şu şekilde görünür:

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

Birden çok boyut filtresi

Bu ısı haritası, sıcaklığı haftanın günü ve günün saatine göre (iki boyut ve bir metrik) gösterir. Bir kullanıcının "Pazartesi akşamı" ve "Cuma öğleden sonra"ya karşılık gelen hücreleri seçtiğini ve gösterge tablosunun geri kalanını yalnızca "Pazartesi akşamı" veya "Cuma akşamı"na ait verileri gösterecek şekilde filtrelemek istediğinizi varsayalım. interactionData öğeniz şöyle görünür:

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