Usar visualizações da comunidade como filtros

Você pode utilizar sua visualização da comunidade como um filtro de gráfico, filtrando o relatório por meio de interações com essa visualização.

Como os filtros de gráfico da visualização da comunidade funcionam

Para usar a visualização da comunidade como um filtro de gráfico, você precisa:

1. Configure a propriedade config.interactions
2. Escreva o código que chama dscc.sendInteraction() com as informações do filtro.

Observação: as interações são compatíveis apenas no modo de visualização.

Como definir interações

Caso sua visualização aceite interações, elas precisarão ser definidas na configuração. Depois que você fizer isso, uma caixa de seleção será exibida no painel de propriedades.

config.interactionsExemplo

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

Como escrever código para um filtro

Use dscc.sendInteraction() para associar a interação do usuário a uma ação do filtro.

Exemplos

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

Observação :verifique se interactionId corresponde a um config.interactions[].id na configuração.

O Looker Studio vai ignorar as mensagens enviadas por dscc.sendInteraction se o editor de relatórios não tiver ativado as interações de "filtro" para sua visualização.

Acompanhar o estado do filtro

O objeto data que o Looker Studio envia para sua visualização fornece informações sobre interações.

data.interactionsExemplo

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

Se value.data não estiver definido, a visualização está filtrando outros componentes do painel.

Importante :se a sua visualização fornece anotação visual do estado do filtro, como destacar um valor, seu código precisa verificar value.data para garantir que a visualização seja renderizada corretamente.

Exemplos

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

Criar interactionData

O objeto interactionData define como o Looker Studio vai filtrar o painel.

Filtro de dimensão única

Este gráfico de barras mostra o número de livros por idioma (uma dimensão e uma métrica). Digamos que um usuário tenha escolhido a barra correspondente aos livros em espanhol, e você queria que a seleção filtrasse o restante do painel. Seu interactionData ficaria assim:

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

Filtro com várias dimensões

Este mapa de calor mostra a temperatura por dia da semana e hora do dia (duas dimensões e uma métrica). Suponha que um usuário tenha selecionado as células correspondentes a "Segunda à noite" e "Sexta à tarde", e você quer filtrar o restante do painel para mostrar apenas dados de "Segunda à noite" ou "Sexta à tarde".Seu interactionData ficaria assim:

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