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

Wizualizacji utworzonej przez społeczność możesz używać jako filtra wykresu, filtrując raport za pomocą interakcji z nią.

Jak działają filtry wykresów wizualizacji utworzonych przez społeczność

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

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

Definiowanie interakcji

Jeśli wizualizacja obsługuje interakcje, powinny one być zdefiniowane w konfiguracji. Gdy jest zdefiniowany, w panelu właściwości pojawia się pole wyboru.

Przykładowy element config.interactions:

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

Pisanie kodu filtra

Użyj 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 Data Studio an instruction to filter other charts in the dashboard
  dscc.sendInteraction(interactionId, FILTER, interactionData);
};

Studio danych zignoruje wiadomości wysłane przez dscc.sendInteraction, jeśli edytujący raport nie włączył interakcji „filtruj” w przypadku wizualizacji.

Śledzenie stanu filtra

Obiekt data, który Studio danych 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 wartość value.data nie jest niezdefiniowana, wizualizacja obecnie filtruje inne komponenty panelu.

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 Studio danych będzie filtrować Twój panel.

Filtr pojedynczego 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ł słupek odpowiadający książkom w języku hiszpańskim i chcesz, aby ten wybór filtrował resztę panelu. Twój adres interactionData będzie wyglądać tak:

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

Filtr wielu wymiarów

Ta mapa termiczna pokazuje temperaturę w zależności od dnia tygodnia i pory dnia (2 wymiary i 1 rodzaj danych). Załóżmy, że użytkownik wybrał komórki odpowiadające wartościom „Poniedziałek wieczór” i „Piątek po południu”, a Ty chcesz odfiltrować pozostałą część panelu, aby wyświetlać tylko dane z „Poniedziałku wieczorem” lub „Piątku po południu”. Twój interactionData będzie wyglądać tak:

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