Die Visualisierungskonfiguration definiert die für eine Visualisierung erforderlichen Daten- und Stilattribute.
Die Konfiguration wird als JSON-Datei mit folgender Struktur erwartet:
{
"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
}
}
Feldname | Typ | Beschreibung |
---|---|---|
data[] |
Array(object) |
Die Datenkonfiguration der Visualisierung. Diese Konfiguration wirkt sich auf den Bereich Daten des Eigenschaftenbereichs aus. |
data[].id |
string |
Die ID des Datenabschnitts. Dies muss ein nicht leerer String ohne Leerzeichen sein. |
data[].label |
string |
Das Label für den Datenabschnitt. |
data[].elements[] |
string |
Die zu rendernden Datenelemente. |
data[].elements[].type |
string -Enum(DataElement) |
Der zu rendernde Datenelementtyp. |
data[].elements[].id |
string |
Die ID des Datenelements. Dies muss ein nicht leerer String ohne Leerzeichen sein. |
data[].elements[].label |
string |
Das Label der Kurzinfo für das Datenelement. |
data[].elements[].options |
object(DataElementOptions) |
Die Datenoptionen für das Element. Dies hängt vom Typ des Datenelements ab. |
style[] |
Array(object) |
Die für die Visualisierung erforderliche Stilkonfiguration. Diese Konfiguration wirkt sich auf den Bereich Stil des Eigenschaftenbereichs aus. Jedes Objekt im Array stellt ein Stilelement dar, das gerendert werden soll. Die Reihenfolge der Elemente bestimmt die Reihenfolge, in der sie gerendert werden. |
style[].id |
string |
Die ID des Stilabschnitts. Dies muss ein nicht leerer String ohne Leerzeichen sein. |
style[].label |
string |
Das Label für den Stilbereich. |
style[].elements |
Array(object) |
Die Stilelemente, die gerendert werden sollen. |
style[].elements[].id |
string |
ID des Stilelements Dies muss ein nicht leerer String ohne Leerzeichen sein. |
style[].elements[].type |
string -Enum(StyleElement) |
Der Stilelementtyp. z.B. Schriftartauswahl. |
style[].elements[].label |
string |
Die Kurzinfo oder das Label für das Stilelement. Dies ist der Labeltext für ein Kästchenelement und der Kurzinfotext für andere Elementtypen. |
style[].elements[].options |
Array(object) |
Der options für das Element. Gilt nur für die Stilelementtypen SELECT_SINGLE und SELECT_RADIO . |
style[].elements[].defaultValue |
string OR object |
Der Standardwert für das Stilelement. Ungültige Werte werden ignoriert.* |
interactions[] |
Array(object) |
Die Interaktionskonfiguration der Visualisierung. Anhand dieser Konfiguration wird festgelegt, ob sie als Filter verwendet werden kann. |
interactions[].id |
string |
ID des Interaktionselements Dies muss ein nicht leerer String ohne Leerzeichen sein. |
interactions[].supportedActions |
Array (enum(InteractionType) |
Unterstützte mögliche Interaktionen |
features |
object |
Die Funktionen, die Sie in Ihrer Visualisierung aktivieren oder deaktivieren möchten. |
features.enableComparisonDateRange |
boolean |
Aktivieren Sie Vergleichszeiträume. Wenn kein Wert angegeben ist, wird standardmäßig false verwendet. |
*defaultValue
ist ein String für alles außer der Farbauswahl. Bei Farben sollte defaultValue
ein Objekt mit folgendem Format sein:
{
color: `string`
}
DataElement
Folgende Werte sind möglich:
Enum-Wert | Beschreibung |
---|---|
MESSWERT | Rendert ein Messwertfeldelement. |
DIMENSION | Rendert ein Dimensionsfeldelement. |
MAX_RESULTS | Definiert die maximale Anzahl von Datenzeilen, die von dieser Visualisierung angefordert werden können |
DataElement-Optionen
Folgende Werte sind möglich:
Enum-Wert | Optionstyp | Verfügbare Optionen |
---|---|---|
MESSWERT | Objekt | max: number: die maximale Anzahl von Messwerten
min: number: die Mindestanzahl der erforderlichen Messwerte |
DIMENSION | Objekt | max: number – die maximale Anzahl unterstützter Dimensionen
min: number – die Mindestanzahl der erforderlichen Dimensionen supportedTypes: die Liste der unterstützten Typen. supportedTypes kann TIME , GEO oder DEFAULT enthalten
|
MAX_RESULTS | Objekt | max: number – die maximale Anzahl von Zeilen, die für die Visualisierung angefordert werden können. Standardwert: 2.500 |
StyleElement
Folgende Werte für Stilelemente sind möglich:
Enum-Wert | Beschreibung | Datentyp „defaultValue “ (Konfiguration) |
Datentyp „value “ (Nachricht) |
Standardwert |
---|---|---|---|---|
FONT_COLOR | Rendert die Auswahl für die Schriftfarbe. Gültige Werte sind Hex-Farbcodes. | STRING | OBJECT<Color> |
STRING | OBJECT<Color> |
Thematisch festgelegt. |
FONT_SIZE | Rendert die Auswahl für die Schriftgröße. Gültige Werte sind die folgenden Pixel: 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 | Rendert die Schriftfamilienauswahl. Gültige Werte sind die folgenden Schriftarten: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Demnächst verfügbar, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Permanent Flower, Lato, Lora, Montserrat, Sans Ossi, Lora, Montserrat, Oleo Script, Open, Montserrat, Oleo Script, Open | STRING |
STRING |
Thematisch festgelegt. |
KÄSTCHEN | Rendert ein Kästchen. | BOOLEAN |
BOOLEAN |
false |
TEXTINPUT | Rendert ein Texteingabefeld. | STRING |
STRING |
"" |
TEXTAREA | Rendert einen großen Texteingabebereich. | STRING |
STRING |
"" |
SELECT_SINGLE | Rendert ein Drop-down-Menü mit vordefinierten Werten. | STRING (für defaultValue, options.label und options.value) |
STRING |
nicht definiert |
SELECT_RADIO | Rendert eine Optionsfelder mit vordefinierten Werten. | STRING (für defaultValue, options.label und options.value) |
STRING |
nicht definiert |
FILL_COLOR | Rendert eine Auswahl für die Füllfarbe. Gültige Werte sind Hex-Farbcodes. | STRING | OBJECT<Color> |
OBJECT<Color> |
Thematisch festgelegt. |
BORDER_COLOR | Rendert eine Auswahl für Rahmenfarbe. Gültige Werte sind Hex-Farbcodes. | STRING | OBJECT<Color> |
OBJECT<Color> |
Thematisch festgelegt. |
AXIS_COLOR | Rendert eine Farbauswahl für die Achse. Gültige Werte sind Hex-Farbcodes. | STRING | OBJECT<Color> |
OBJECT<Color> |
Thematisch festgelegt. |
GRID_COLOR | Rendert eine Rasterfarbenauswahl. Gültige Werte sind Hex-Farbcodes. | STRING | OBJECT<Color> |
OBJECT<Color> |
Thematisch festgelegt. |
OPACITY | Gibt einen Deckkraftselektor mit der Einheit % wieder. Gültige Werte sind 0 bis 1 in Schritten von 0, 1. | NUMBER |
NUMBER |
1 |
LINE_WEIGHT | Rendert eine Auswahl für die Linienstärke. Gültige Werte sind 0 bis 5. „0“ wird im Drop-down-Menü als „Keine“ gerendert. | NUMBER |
NUMBER |
|
LINE_STYLE | Rendert eine Auswahl für den Linienstil. Zulässige Standardwerte: solid , dashed , dotted und double . |
STRING |
STRING |
"solid" |
BORDER_RADIUS | Gibt eine Rahmenradiusauswahl wieder. Gültige Werte: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 | NUMBER |
NUMBER |
Thematisch festgelegt. |
INTERVAL | Rendert einen Intervallselektor. Werte sind Ganzzahlen. | NUMBER |
NUMBER |
0 |
Mit Stilelementen werden die Symbole konfiguriert, die auf dem Tab Style
des Eigenschaftenbereichs angezeigt werden.
Optionen für Stilelemente
Einige Stilelemente unterstützen Optionen
options: array(options)
Enum-Wert | Optionsobjekt |
---|---|
SELECT_SINGLE | { label: `string`, value: `string` } |
SELECT_RADIO | { label: `string`, value: `string` } |
INTERVAL | { max: `number`, min: `number` } |
Datentypen
Objekt<Farbe>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
STRING<Farbe>
Ein String-Wert, der einen Hex-Farbcode enthält.
Beispiel
"color": "#0000ff"
NUMBER<Opacity>
Ein Zahlenwert von 0 bis 1 in Schritten von 0,10
Beispiel
"opacity": 0.2
InteractionType
InteractionTypes konfigurieren die Interaktionsoptionen, die im Data
-Stil des Steuerfelds „Property“ verfügbar sind. Derzeit wird nur "FILTER"
unterstützt.
Enum-Wert | Beschreibung |
---|---|
"FILTER" |
Ermöglicht Benutzern, Visualisierung als Filter zu verwenden. |
Beispielkonfiguration
{
"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
}
}