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

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

La configuration est attendue 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 des données. Il doit s'agir d'une chaîne non vide sans espaces.
data[].label string Libellé de la section des données.
data[].elements[] string Éléments de données à afficher.
data[].elements[].type enum string(DataElement) Type d'élément de données à afficher.
data[].elements[].id string Identifiant 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. Tout dépend du type d'élément de données.
style[] Array(object) La configuration du style requise par la visualisation. Cette configuration affecte 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 du style. Il doit s'agir d'une chaîne non vide sans espaces.
style[].label string Libellé de la section des styles.
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 enum string(StyleElement) Type d'élément de style. (par 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. Cet attribut n'est valide que pour les types É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 si elle peut servir 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 tout sauf les sélecteurs de couleur. Pour les couleurs, defaultValue doit être un objet au format suivant:

{
    color: `string`
}

DataElement

Les valeurs des éléments de données peuvent être l'une des 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 des éléments de données

Les valeurs des éléments de données peuvent être l'une des 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 requises
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. Valeur 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 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 valides sont les polices suivantes: Arial, Boogaloo, Bubblegum Sans, Chewy,Comic Sans MS, Bientôt, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Flower, Lato, Lora, Montserrat, Oleo Script, Open Sans, Orbitron, Robotden Marker, Oswa STRING STRING Déterminé par thème.
Case à cocher Affiche une case à cocher. BOOLEAN BOOLEAN false
SAISIE DE TEXTE Affiche une zone de saisie de texte. STRING STRING ""
ZONE TEXTE 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 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 thème.
AXIS_COLOR Affiche un sélecteur de couleur de l'axe. Les valeurs valides sont des codes de couleurs hexadécimales. STRING | OBJECT<Color> OBJECT<Color> Déterminé par thème.
GRID_COLOR Affiche un sélecteur de couleur de la grille. Les valeurs valides sont des codes de couleurs hexadécimales. STRING | OBJECT<Color> OBJECT<Color> Déterminé par thème.
OPACITÉ Affiche un sélecteur d'opacité, l'unité est le pourcentage. 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 du trait. Les valeurs valides sont comprises entre 0 et 5. 0 s'affichera en tant que None dans le menu déroulant. NUMBER NUMBER
LINE_STYLE Affiche un sélecteur de style de ligne. Valeurs par défaut acceptées: solid, dashed, dotted, double. STRING STRING "solid"
BORDER_RADIUS Affiche un sélecteur d'arrondi de bordure. Les valeurs valides sont 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90 et 100. NUMBER NUMBER Déterminé par thème.
INTERVAL Affiche un sélecteur d'intervalles. Les valeurs sont des entiers. NUMBER NUMBER 0

Les éléments de style configurent les icônes affichées dans l'onglet Style du panneau des propriétés.

Options des éléments 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<Color>

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

STRING<couleur>

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

Exemple

"color": "#0000ff"

NUMBER<Opacity>

Un nombre compris entre 0 et 1 par incréments de 0,10

Exemple

"opacity": 0.2

InteractionType

Les objets InteractionTypes 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
  }
}