Utiliser les visualisations de la communauté comme filtres

Vous pouvez utiliser la visualisation de la communauté comme filtre de graphique, en filtrant le rapport en fonction des interactions avec la visualisation de la communauté.

Fonctionnement des filtres de graphiques de visualisation de la communauté

Pour utiliser la visualisation de la communauté comme filtre de graphique, vous devez:

1. Configurez la propriété config.interactions.
2. Écrivez du code qui appelle dscc.sendInteraction() avec les informations de filtre.

Remarque :Les interactions ne sont disponibles qu'en mode Vue

Définir les interactions

Si votre visualisation accepte les interactions, celles-ci doivent être définies dans votre configuration. Une fois définie, une case à cocher s'affiche dans le panneau des propriétés.

Exemple de propriété config.interactions :

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

Écrire le code d'un filtre

Utilisez dscc.sendInteraction() pour associer l'interaction utilisateur à une action de filtre.

Exemple :

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

Remarque :Assurez-vous que interactionId correspond à un config.interactions[].id de votre configuration.

Looker Studio ignorera les messages envoyés par dscc.sendInteraction si l'éditeur de rapports n'a pas activé les interactions "Filtrer" pour votre visualisation.

Suivre l'état du filtre

L'objet data que Looker Studio envoie à votre visualisation fournit des informations sur les interactions.

Exemple de propriété data.interactions :

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

Si value.data n'est pas défini, la visualisation filtre actuellement d'autres composants du tableau de bord.

Important :Si votre visualisation fournit une annotation visuelle de l'état du filtre, comme la mise en surbrillance d'une valeur, votre code doit vérifier value.data pour s'assurer que la visualisation s'affiche avec précision.

Exemple :

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

Construire interactionData

L'objet interactionData définit la manière dont Looker Studio filtre votre tableau de bord.

Filtre de dimension unique

Ce graphique à barres représente le nombre de livres par langue (une dimension et une métrique). Supposons qu'un utilisateur ait sélectionné la barre correspondant aux livres en espagnol et que vous souhaitiez que la sélection filtre le reste du tableau de bord. Votre interactionData devrait se présenter comme suit:

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

Filtre à plusieurs dimensions

Cette carte de densité montre la température par jour de la semaine et par heure de la journée (deux dimensions et une métrique). Supposons qu'un utilisateur ait sélectionné les cellules correspondant à "Lundi soir" et "Vendredi après-midi", et que vous souhaitiez filtrer le reste du tableau de bord pour n'afficher que les données de "Lundi soir" ou "Vendredi après-midi".Votre interactionData ressemblerait à ceci:

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