Usar las visualizaciones de la comunidad como filtros

Puedes usar la visualización de tu comunidad como un filtro de gráficos y filtrar el informe mediante interacciones con la visualización de tu comunidad.

Cómo funcionan los filtros del gráfico de visualización de la comunidad

Para usar la visualización de la comunidad como filtro del gráfico, debes hacer lo siguiente:

1. Configura la propiedad config.interactions.
2. Escribe un 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, deben definirse 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"]
    }
  ]
}

Escribe 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 Looker 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.

Looker Studio ignorará los mensajes enviados por dscc.sendInteraction si el editor de informes no habilitó las interacciones de “filtro” para tu visualización.

Haz un seguimiento del estado del filtro

El objeto data que Looker 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á definido, la visualización actualmente filtra otros componentes del panel.

Punto clave: Si tu visualización proporciona una anotación visual del estado del filtro, como al 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()
  }
}

En construcción interactionData

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

Filtro de dimensión única

En este gráfico de barras, se muestra la cantidad de libros por idioma (una dimensión y una métrica). Supongamos que un usuario seleccionó la barra correspondiente a libros en español y deseas 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 tarde" y "Viernes por la tarde", y deseas filtrar el resto del panel para que solo muestre datos de "Lunes por la tarde" o "Viernes por la tarde".Tu interactionData se vería de la siguiente manera:

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