Używanie wizualizacji utworzonych przez społeczność jako filtrów

Wizualizacji utworzonej przez społeczność możesz użyć jako filtra wykresu, filtrując raport na podstawie interakcji z wizualizacją utworzoną przez społeczność.

Jak działają filtry wykresów wizualizacji społeczności

Aby użyć wizualizacji utworzonej przez społeczność jako filtra wykresu, musisz:

1. Konfigurowanie właściwości config.interactions
2. Napisz kod, który wywołuje funkcję dscc.sendInteraction() z informacjami o filtrze.

Uwaga: interakcje są obsługiwane tylko w trybie widoku.

Definiowanie interakcji

Jeśli wizualizacja obsługuje interakcje, musisz je zdefiniować w konfiguracji. Gdy to zrobisz, w panelu właściwości pojawi się pole wyboru.

Przykładowy element config.interactions:

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

Pisanie kodu filtra

Użyj narzędzia dscc.sendInteraction(), aby powiązać interakcję użytkownika z działaniem filtra.

Przykład:

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

Uwaga: upewnij się, że interactionId jest zgodny z config.interactions[].id w konfiguracji.

Looker Studio zignoruje komunikaty wysyłane przez dscc.sendInteraction, jeśli edytor raportów nie włączył interakcji „filtr” na potrzeby wizualizacji.

Śledzenie stanu filtra

Obiekt data, który Looker Studio wysyła do wizualizacji, zawiera informacje o interakcjach.

Przykładowy element data.interactions:

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

Jeśli parametr value.data nie jest określony, wizualizacja filtruje obecnie inne komponenty panelu.

Ważne: jeśli wizualizacja zawiera wizualną adnotację o stanie filtra, np. wyróżniając wartość, sprawdź pole value.data, aby mieć pewność, że wizualizacja będzie się prawidłowo renderować.

Przykład:

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

Tworzę: interactionData

Obiekt interactionData określa, jak Looker Studio będzie filtrować panel.

Jeden filtr wymiaru

Ten wykres słupkowy przedstawia liczbę książek według języka (1 wymiar i 1 rodzaj danych). Załóżmy, że użytkownik wybrał pasek odpowiadający książek w języku hiszpańskim i chcesz, aby ten filtr odfiltrowywał resztę panelu. Twój interactionData będzie wyglądać tak:

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

Filtr wielu wymiarów

Ta mapa termiczna przedstawia temperaturę według dnia tygodnia i pory dnia (2 wymiary i 1 rodzaj danych). Załóżmy, że użytkownik zaznaczył komórki odpowiadające wartościom „Poniedziałkowy wieczór” i „Piątkowe popołudnie” i chcesz przefiltrować resztę panelu w taki sposób, aby wyświetlały się tylko dane z „Poniedziałkowego wieczoru” lub „Piątkowego popołudnie”. interactionData będzie wyglądać tak:

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