Topluluk görselleştirmelerini filtre olarak kullanma

Topluluk görselleştirmenizi grafik filtresi olarak kullanabilir, topluluk görselleştirmenizle etkileşim kurarak raporu filtreleyebilirsiniz.

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

Topluluk görselleştirmenizi grafik filtresi olarak kullanmak için:

  1. config.interactions özelliğini yapılandırma
  2. Filtre bilgilerini kullanarak dscc.sendInteraction() işlevini çağıran kodu 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österilir.

Ö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() simgesini 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 Data 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 Data Studio, dscc.sendInteraction tarafından gönderilen mesajları yoksayar.

Filtre durumunu takip etme

Data 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ımlanmamışsa görselleştirme şu anda kontrol panelinin diğer bileşenlerini filtreliyor.

Ö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, Data Studio'nun kontrol panelinizi nasıl filtreleyeceğini tanımlar.

Tek boyutlu filtre

Bu çubuk grafik, dil bazında kitap sayısını görselleştirir (bir boyut ve bir metrik). 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ı filtrelemesini istediğinizi varsayalım. interactionData şöyle görünür:

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

Birden fazla boyut filtresi

Bu ısı haritasında, haftanın gününe ve günün saatine göre sıcaklık gösterilir (iki boyut ve bir metrik). Bir kullanıcının "Pazartesi akşamı" ve "Cuma öğleden sonra"na karşılık gelen hücreleri seçtiğini ve kontrol panelinin geri kalanını yalnızca "Pazartesi akşamı" veya "Cuma öğleden sonra" verilerini gösterecek şekilde filtrelemek istediğinizi varsayalım. interactionData şu şekilde görünür:

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