Définir la configuration de visualisation

Les options de données et de style d'une visualisation de la communauté sont définies dans un fichier de configuration JSON. La configuration data définit le nombre de dimensions et de métriques acceptées par la visualisation. La configuration style définit les sélecteurs de style disponibles dans le panneau des propriétés.

Configuration des données

La configuration data définit les éléments DIMENSION et METRIC que Looker Studio affiche dans le panneau des propriétés. Chaque élément correspond à des champs de dimension et d'élément que l'utilisateur final fournit en tant qu'entrées dans la visualisation.

Exemple d'élément de données:

{
  "id": "twoDimensionsPlease",
  "label": "Dimension Element Heading",
  "type": "DIMENSION",
  "options": {
    "min": 2,
    "max": 2,
  }
}

La id que vous définissez dans l'élément de données est incluse dans les informations avec lesquelles Looker Studio répond. Le label définit le texte que les utilisateurs voient au-dessus de la section des données, tandis que le type détermine s'il s'agit d'une dimension ou d'une métrique. L'objet options définit les nombres minimal et maximal de champs qu'un utilisateur peut ajouter à l'élément de données.

Dans un élément de données DIMENSION, l'objet options accepte une clé supportedTypes facultative. S'il est défini, Looker Studio limite le type des champs de dimension pouvant être ajoutés à l'élément. La valeur de supportedTypes est un tableau qui peut contenir n'importe quelle combinaison de "DEFAULT", "TIME" et "GEO".

Une section de données regroupe plusieurs éléments de données. Looker Studio affiche la label sous la forme d'un en-tête pour plusieurs éléments de données.

Section "Exemple de données" :

{
  "id": "dimensionSection1",
  "label": "Dimension Section Heading",
  "elements":[
    // array of data elements
  ]
}

Cette capture d'écran montre comment Looker Studio affiche la section des données et l'élément de données ci-dessus:

Capture d'écran de l'élément de données dans le panneau des propriétés

Configuration du style

La configuration du style définit les sélecteurs de style affichés dans le panneau des propriétés.

Exemple d'élément de style:

{
  "id": "linkOpacity",
  "label": "Link opacity",
  "type": "OPACITY",
  "defaultValue": "0.2"
}

label définit le texte que les utilisateurs voient sous forme d'info-bulle, tandis que type définit le type de sélecteur de style affiché par Looker Studio. Si vous le souhaitez, defaultValue définit une valeur par défaut pour chaque élément de style.

Comme pour les éléments de données, les éléments de style sont définis dans des sections, qui fournissent des en-têtes et des regroupements logiques. Pour afficher la liste complète des sélecteurs disponibles, consultez la documentation de référence sur les configurations.

Exemple de section de style:

{
  "id": "styleGroup1",
  "label": "Header for style group",
  "elements": [
    // insert Style Elements here
  ]
}

La capture d'écran suivante montre un exemple de panneau de style avec un sélecteur d'opacité, avec l'info-bulle "Opacité du lien" correspondant à label dans l'élément de style.

Capture d'écran du sélecteur de style

Configuration des interactions

La configuration interaction définit le fonctionnement des interactions dans les graphiques pour une visualisation de la communauté. Cette opération est facultative.

Exemple :

{
  "id": "onClick",
  "supportedActions": ["FILTER"]
}

Pour le moment, seul le type FILTER est compatible. Si vous configurez des interactions, une case à cocher s'affiche dans le panneau des propriétés.

Capture d'écran du sélecteur de style

Configuration des fonctionnalités

La configuration features permet d'activer ou de désactiver différentes fonctionnalités dans votre visualisation de la communauté. Cette rubrique est facultative. La liste des fonctionnalités est disponible dans la documentation de référence.

Exemple :

  "features": {
    "enableComparisonDateRange": true
  }

Exemple

Pour voir un exemple de configuration de visualisation, consultez l'exemple de configuration.

Étapes suivantes

Une fois que vous avez défini votre configuration, écrivez la visualisation.