Utilizzare le visualizzazioni della community come filtri

Puoi utilizzare la visualizzazione della community come filtro del grafico, filtrando il report tramite le 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. Scrivere il codice che chiama dscc.sendInteraction() con le informazioni del filtro.

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

Definire le interazioni

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

Esempio di config.interactions:

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

Scrivere il codice per un filtro

Utilizza dscc.sendInteraction() per associare l'interazione dell'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 Data Studio an instruction to filter other charts in the dashboard
  dscc.sendInteraction(interactionId, FILTER, interactionData);
};

Nota: assicurati che interactionId corrisponda a un config.interactions[].id nella tua configurazione.

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

Monitorare lo stato del filtro

L'oggetto data che Data Studio invia alla 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 è indefinito, la visualizzazione sta attualmente filtrando altri componenti della dashboard.

Punto chiave:se la visualizzazione fornisce un'annotazione visiva dello stato del filtro, ad esempio evidenziando un valore, il codice deve controllare value.data per assicurarsi che la visualizzazione venga eseguita con precisione.

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

Costruire interactionData

L'oggetto interactionData definisce in che modo Data Studio filtrerà la dashboard.

Filtro a singola dimensione

Questo grafico a barre visualizza 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 tu voglia che la selezione filtri il resto della dashboard. Il tuo interactionData sarà simile al seguente:

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

Filtro a 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 che tu voglia filtrare il resto della dashboard in modo da mostrare solo i dati di "lunedì sera" o "venerdì pomeriggio". Il tuo interactionData sarà simile al seguente:

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