Documentation de référence sur la configuration de la visualisation de la communauté

La configuration de visualisation définit les attributs de données et de style requis par une la visualisation.

La configuration doit se présenter sous la forme d'un fichier JSON présentant la structure suivante:

{
  "data": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(DataElement),
      "id": string,
      "label": string,
      "options": object(DataElementOptions)
    }]
  }],
  "style": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(StyleElement),
      "id": string,
      "label": string,
      "defaultValue": string | object
    }]
  }],
  "interactions": [{
    "id": string,
    "supportedActions": array(enum(InteractionType))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}
Nom du champ Type Description
data[] Array(object) Configuration des données de la visualisation. Cette configuration affecte le volet Données du panneau des propriétés.
data[].id string ID de la section de données. Il doit s'agir d'une chaîne non vide sans espaces.
data[].label string Étiquette de la section de données.
data[].elements[] string Éléments de données à afficher.
data[].elements[].type string enum(DataElement) Type d'élément de données à afficher.
data[].elements[].id string ID de l'élément de données. Il doit s'agir d'une chaîne non vide sans espaces.
data[].elements[].label string Libellé de l'info-bulle pour l'élément de données.
data[].elements[].options object(DataElementOptions) Options de données pour l'élément. Cela dépend du type d'élément de données.
style[] Array(object) Configuration de style requise par la visualisation. Cette configuration a une incidence sur le volet Style du panneau des propriétés. Chaque objet du tableau représente un élément de style à afficher. L'ordre des éléments détermine l'ordre dans lequel ils seront affichés.
style[].id string ID de la section de style. Il doit s'agir d'une chaîne non vide sans espaces.
style[].label string Libellé de la section "Style".
style[].elements Array(object) Éléments de style à afficher.
style[].elements[].id string ID de l'élément de style. Il doit s'agir d'une chaîne non vide sans espaces.
style[].elements[].type string enum(StyleElement) Type d'élément de style. Exemple : sélecteur de police.
style[].elements[].label string Info-bulle ou libellé de l'élément de style. Il s'agit du texte du libellé d'un élément de case à cocher et du texte de l'info-bulle pour les autres types d'éléments.
style[].elements[].options Array(object) options de l'élément. Ce champ n'est valide que pour les types d'élément de style SELECT_SINGLE et SELECT_RADIO.
style[].elements[].defaultValue string OR object Valeur par défaut de l'élément de style. Les valeurs non valides seront ignorées.*
interactions[] Array(object) Configuration des interactions de la visualisation. Cette configuration détermine s'il peut ou non faire office de filtre.
interactions[].id string ID de l'élément d'interaction. Il doit s'agir d'une chaîne non vide sans espaces.
interactions[].supportedActions Array (énumération(InteractionType) Les interactions possibles
features object Les fonctionnalités que vous souhaitez activer ou désactiver dans votre visualisation.
features.enableComparisonDateRange boolean Activez les plages de dates de comparaison. Si aucune valeur n'est spécifiée, la valeur par défaut est false.

*defaultValue est une chaîne pour tous les éléments, à l'exception des sélecteurs de couleur. Pour couleurs, defaultValue doit être un objet au format suivant:

{
    color: `string`
}

DataElement

Les valeurs des éléments de données peuvent être les suivantes:

Valeur d'énumération Description
METRIC Affiche un élément de champ de métrique.
DIMENSION Affiche un élément de champ de dimension.
MAX_RESULTS Définit le nombre maximal de lignes de données pouvant être demandées par cette visualisation

Options DataElement

Les valeurs des éléments de données peuvent être les suivantes:

Valeur d'énumération Type d'option Options disponibles
METRIC Objet max : nombre : nombre maximal de métriques
min : nombre : nombre minimal de métriques requis
DIMENSION Objet max: number - Nombre maximal de dimensions acceptées.
min. : nombre : nombre minimal de dimensions requises
supportedTypes: liste des types acceptés. supportedTypes peut inclure TIME, GEO ou DEFAULT
MAX_RESULTS Objet max: number - Nombre maximal de lignes que la visualisation peut demander. Par défaut: 2 500

StyleElement

Les valeurs des éléments de style peuvent être les suivantes:

Valeur d'énumération Description Type de données defaultValue (configuration) Type de données value (message) Valeur par défaut
FONT_COLOR Affiche le sélecteur de couleur de police. Les valeurs valides sont des codes de couleurs hexadécimales. STRING | OBJECT<Color> STRING | OBJECT<Color> Déterminé par le thème.
FONT_SIZE Affiche le sélecteur de taille de police. Les valeurs valides sont les pixels suivants: 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 44, 48, 60, 72, 84, 96. NUMBER NUMBER 12
FONT_FAMILY Affiche le sélecteur de famille de polices. Les valeurs de valeurs valides sont les polices suivantes: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, . STRING STRING Déterminé par le thème.
Case à cocher Affiche une case à cocher. BOOLEAN BOOLEAN false
TEXTINPUT Affiche une zone de saisie de texte. STRING STRING ""
TEXTAREA Affiche une grande zone de saisie de texte. STRING STRING ""
SELECT_SINGLE Affiche un menu déroulant avec des valeurs prédéfinies. STRING (pour defaultValue, options.label et options.value) STRING undefined
SELECT_RADIO Affiche un sélecteur d'options avec des valeurs prédéfinies. STRING (pour defaultValue, options.label et options.value) STRING undefined
FILL_COLOR Affiche un sélecteur de couleur de remplissage. Les valeurs valides sont des codes de couleurs hexadécimales. STRING | OBJECT<Color> OBJECT<Color> Déterminé par le thème.
BORDER_COLOR Affiche un sélecteur de couleur de bordure. Les valeurs valides sont des codes de couleurs hexadécimales. STRING | OBJECT<Color> OBJECT<Color> Déterminé par le thème.
AXIS_COLOR Affiche un sélecteur de couleur d'axe. Les valeurs valides sont des codes de couleurs hexadécimales. STRING | OBJECT<Color> OBJECT<Color> Déterminé par le thème.
GRID_COLOR Affiche un sélecteur de couleur de grille. Les valeurs valides sont des codes de couleurs hexadécimales. STRING | OBJECT<Color> OBJECT<Color> Déterminé par le thème.
OPACITÉ Affiche un sélecteur d'opacité. L'unité est %. Les valeurs valides sont comprises entre 0 et 1 par incréments de 0,1 NUMBER NUMBER 1
LINE_WEIGHT Affiche un sélecteur d'épaisseur de ligne. Les valeurs valides sont comprises entre 0 et 5. 0 affiche "Aucun" dans le menu déroulant. NUMBER NUMBER
LINE_STYLE Affiche un sélecteur de style de ligne. Valeurs par défaut acceptables: solid, dashed, dotted, double. STRING STRING "solid"
BORDER_RADIUS Affiche un sélecteur d'arrondi de bordure. Les valeurs admises sont les suivantes: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100. NUMBER NUMBER Déterminé par le thème.
INTERVAL Affiche un sélecteur d'intervalle. Les valeurs sont des entiers. NUMBER NUMBER 0

Les éléments de style configurent les icônes affichées dans l'onglet Style de la propriété Panneau.

Options de l'élément de style

Certains éléments de style sont compatibles avec des options

options: array(options)
Valeur d'énumération Objet Options
SELECT_SINGLE 
        {
            label: `string`,
            value: `string`
        }
SELECT_RADIO 
        {
            label: `string`,
            value: `string`
        }
INTERVAL 
        {
            max: `number`,
            min: `number`
        }

Types de données

Objet<Couleur>

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING&lt;Color&gt;

Valeur de chaîne contenant un code couleur hexadécimal.

Exemple

"color": "#0000ff"

NUMBER<Opacité>

Une valeur numérique comprise entre 0 et 1 par incréments de 0,10

Exemple

"opacity": 0.2

InteractionType

Les types d'interaction configurent les options d'interaction disponibles dans le style Data. du panneau des propriétés. Pour le moment, seul le format "FILTER" est pris en charge.

Valeur d'énumération Description
"FILTER" Permet aux utilisateurs d'utiliser la visualisation comme filtre.

Exemple de configuration

{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "id": "metric",
        "label": "metric",
        "type": "METRIC",
        "options": {
          "min": 1,
          "max": 3
        }
      }
    ]
  }],
  "style": [
    {
      "id": "colors",
      "label": "Highlight Colors",
      "elements": [
        {
          "id": "accentColor",
          "label": "Accent Color",
          "type": "SELECT_SINGLE",
          "defaultValue": "rain",
          "options": [
            {
              "label": "Summer",
              "value": "summer"
            },
            {
              "label": "Fall",
              "value": "fall"
            }
          ]
        },
        {
          "id": "reverseColor",
          "label": "Show reverse color",
          "defaultValue": false,
          "type": "CHECKBOX"
        },
        {
          "id": "fillColor",
          "label": "Fill Color",
          "defaultValue": {
            "color": "#0000ff"
          },
          "type": "FILL_COLOR"
        },
        {
          "id": "textOpacity",
          "label": "Text Opacity",
          "defaultValue": 0.2,
          "type": "OPACITY"
        },
        {
          "id": "customText",
          "label": "Custom Text",
          "defaultValue": "0.2",
          "type": "TEXTINPUT"
        }
      ]
    },
    {
      "id": "text",
      "label": "Highlight Text",
      "elements": [
        {
          "id": "textFontSize",
          "label": "Font size",
          "defaultValue": 10,
          "type": "FONT_SIZE"
        },
        {
          "id": "font",
          "label": "Font family",
          "defaultValue": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}