Usar visualizaciones comunitarias como filtros

Puedes usar la visualización comunitaria como un filtro de gráficos y filtrar el informe a través de las interacciones que se establecen.

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

Para utilizar tu visualización comunitaria como un filtro de gráficos, debes hacer lo siguiente:

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

Definir las interacciones

Si tu visualización admite interacciones, estas deben definirse en la configuración. Una vez definidas, aparecerá una casilla en el panel de propiedades.

config.interactions de ejemplo:

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

Escribir el código de filtro

Utiliza dscc.sendInteraction() para asociar las interacciones de los usuarios con las acciones de los filtros.

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

Data Studio ignorará los mensajes que envíe dscc.sendInteraction si el editor del informe no ha habilitado las interacciones de filtro en tu visualización.

Hacer un seguimiento del estado de los filtros

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

data.interactions de ejemplo:

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

Si value.data no está sin definir, significa que la visualización está filtrando otros componentes del panel.

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

Crear interactionData

El objeto interactionData permite definir cómo Data Studio filtrará el panel.

Filtro de una dimensión

Este gráfico de barras muestra el número de libros por idioma (una dimensión y una métrica). Supongamos que un usuario selecciona la barra correspondiente a los libros en español y quieres que la selección filtre el resto del panel. El objeto interactionData sería más o menos así:

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 selecciona las celdas correspondientes al lunes por la noche y al viernes por la tarde, y quieres filtrar el resto del panel para que se muestren solo los datos del lunes por la noche o del viernes por la tarde. El objeto interactionData sería más o menos así:

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