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
}
}