Utiliser les visualisations de la communauté comme filtres

Vous pouvez utiliser la visualisation de la communauté comme filtre du graphique, en filtrant les grâce à vos interactions avec la visualisation de votre communauté.

Fonctionnement des filtres de graphiques des visualisations de la communauté

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

1. Configurer la propriété config.interactions
2. Rédigez du code qui appelle dscc.sendInteraction() avec les informations de filtre.

Remarque :Les interactions ne sont acceptées qu'en mode Vue.

Définir les interactions

Si votre visualisation prend en charge des interactions, elles doivent être définis dans votre configuration. Lorsqu'elle est définie, une case à cocher s'affiche dans la du panneau des propriétés.

Exemple de propriété config.interactions :

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

Écrire du code pour un filtre

Utilisez dscc.sendInteraction() pour associer l'interaction de l'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 dans votre configuration.

Looker Studio ignorera les messages envoyés par dscc.sendInteraction si le rapport l'éditeur n'a pas activé l'option "filter" des interactions pour votre visualisation.

Garder une trace de l'état d'un 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 du tableau de bord.

Important :Si votre visualisation fournit une annotation visuelle de l'état d'un 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()
  }
}

Construction de interactionData...

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

Filtre à dimension unique

Ce graphique à barres indique le nombre de livres par langue (une dimension et une la métrique). Supposons qu'un utilisateur sélectionne la barre correspondant aux livres en espagnol. vous souhaitez utiliser la sélection pour filtrer le reste du tableau de bord. Votre interactionData ressemblerait à ceci:

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

Filtre de 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 vous voulez filtrer le reste pour n'afficher que les données correspondant à "Lundi soir" ou "Vendredi après-midi". Votre interactionData ressemblerait à ceci:

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