Usar las visualizaciones de la comunidad como filtros

Puedes usar tu visualización comunitaria como un filtro de gráfico, que filtra el informe a través de las interacciones con tu visualización comunitaria.

Cómo funcionan los filtros de gráficos de visualizaciones comunitarias

Para usar tu visualización comunitaria como filtro de gráfico, debes hacer lo siguiente:

1. Configura la propiedad config.interactions
2. Escribe código que llame a dscc.sendInteraction() con la información del filtro.

Nota: Las interacciones solo se admiten en el modo de lectura

Cómo definir interacciones

Si tu visualización admite interacciones, estas deben estar definidas en tu configuración. Cuando se define, aparece una casilla de verificación en el panel de propiedades.

Ejemplo de config.interactions:

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

Cómo escribir código para un filtro

Usa dscc.sendInteraction() para asociar la interacción del usuario con una acción de filtro.

Ejemplo:

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

Nota: Asegúrate de que interactionId coincida con un config.interactions[].id en tu configuración.

Data Studio ignorará los mensajes enviados por dscc.sendInteraction si el editor del informe no habilitó las interacciones de "filtro" para tu visualización.

Cómo hacer un seguimiento del estado del filtro

El objeto data que Data Studio envía a tu visualización proporciona información sobre las interacciones.

Ejemplo de data.interactions:

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

Si value.data no está indefinido, la visualización está filtrando actualmente otros componentes del panel.

Punto clave: Si tu visualización proporciona anotaciones visuales del estado del filtro, como destacar un valor, tu código debe verificar value.data para garantizar que la visualización se renderice con precisión.

Ejemplo:

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

Construcción de interactionData

El objeto interactionData define cómo Data Studio filtrará tu panel.

Filtro de dimensión única

Este gráfico de barras muestra la cantidad de libros por idioma (una dimensión y una métrica). Supongamos que un usuario seleccionó la barra correspondiente a los libros en español y quieres que la selección filtre el resto del panel. Tu interactionData se vería de la siguiente manera:

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

Filtro de varias dimensiones

Este mapa de calor muestra la temperatura por día de la semana y hora del día (dos dimensiones y una métrica). Supongamos que un usuario seleccionó las celdas correspondientes a “Lunes por la noche” y “Viernes por la tarde”, y deseas filtrar el resto del panel para que solo se muestren los datos de “Lunes por la noche” o “Viernes por la tarde”. Tu interactionData se vería de la siguiente manera:

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