Utiliser les visualisations de la communauté comme filtres

Vous pouvez utiliser votre visualisation de la communauté comme filtre de graphique et filtrer le rapport grâce aux interactions avec votre visualisation de la communauté.

Fonctionnement des filtres de graphique de visualisation de la communauté

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

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

Définir des interactions

Si votre visualisation est compatible avec les interactions, elles doivent être définies dans votre configuration. Une fois définies, une case à cocher s'affiche dans le panneau des propriétés.

Exemple de 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 Data Studio an instruction to filter other charts in the dashboard
  dscc.sendInteraction(interactionId, FILTER, interactionData);
};

Data Studio ignore les messages envoyés par dscc.sendInteraction si l'éditeur de rapport n'a pas activé les interactions de "filtre" pour votre visualisation.

Suivre l'état du filtre

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

Exemple de 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 indéfini, la visualisation filtre actuellement d'autres composants du tableau de bord.

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 façon dont Data Studio filtrera votre tableau de bord.

Filtre à une seule dimension

Ce graphique à barres visualise 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 cette sélection filtre le reste du tableau de bord. Votre interactionData se présenterait comme suit :

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

Filtre à plusieurs dimensions

Cette carte de chaleur indique la température par jour de la semaine et 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 de "Vendredi après-midi". Votre interactionData se présenterait comme suit :

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