Utilizzare le visualizzazioni della community come filtri

Puoi utilizzare la visualizzazione della community come filtro grafico, filtrando il report in base alle interazioni con la visualizzazione della community.

Come funzionano i filtri dei grafici delle visualizzazioni della community

Per utilizzare la visualizzazione della community come filtro del grafico, devi:

1. Configurare la proprietà config.interactions
2. Scrivi il codice che chiama dscc.sendInteraction() con le informazioni del filtro.

Nota: le interazioni sono supportate solo in modalità di visualizzazione

Definizione delle interazioni

Se la visualizzazione supporta le interazioni, queste devono essere definite nella configurazione. Se definita, viene visualizzata una casella di controllo nel riquadro delle proprietà.

Esempio di config.interactions:

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

Scrittura del codice per un filtro

Utilizza dscc.sendInteraction() per associare l'interazione utente a un'azione di filtro.

Esempio:

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: assicurati che interactionId corrisponda a config.interactions[].id nella configurazione.

Looker Studio ignorerà i messaggi inviati da dscc.sendInteraction se l'editor di report non ha attivato le interazioni "filtro" per la visualizzazione.

Monitoraggio dello stato dei filtri

L'oggetto data che Looker Studio invia alla tua visualizzazione fornisce informazioni sulle interazioni.

Esempio di data.interactions:

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

Se value.data non è definito, la visualizzazione sta filtrando altri componenti della dashboard.

Punto chiave: se la tua visualizzazione fornisce un'annotazione visiva dello stato del filtro, ad esempio evidenziando un valore, il codice deve controllare value.data per garantire che la visualizzazione venga visualizzata in modo accurato.

Esempio:

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

Creazione di interactionData in corso...

L'oggetto interactionData definisce il modo in cui Looker Studio filtrerà la dashboard.

Filtro a dimensione singola

Questo grafico a barre mostra il numero di libri per lingua (una dimensione e una metrica). Supponiamo che un utente abbia selezionato la barra corrispondente ai libri in spagnolo e che la selezione filtri il resto della dashboard. Il tuo interactionData avrebbe il seguente aspetto:

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

Filtro di più dimensioni

Questa mappa termica mostra la temperatura per giorno della settimana e ora del giorno (due dimensioni e una metrica). Supponiamo che un utente abbia selezionato le celle corrispondenti a "Lunedì sera" e "Venerdì pomeriggio" e tu voglia filtrare il resto della dashboard in modo da mostrare solo i dati di "Lunedì sera" o "Venerdì pomeriggio".Il tuo interactionData avrebbe il seguente aspetto:

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