Konfiguracja wizualizacji określa atrybuty danych i stylu wymagane przez wizualizację.
Konfiguracja jest oczekiwana w postaci pliku JSON o następującej strukturze:
{
"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
}
}
Nazwa pola | Typ | Opis |
---|---|---|
data[] |
Array(object) |
Konfiguracja danych wizualizacji. Ta konfiguracja wpływa na panel Dane w panelu właściwości. |
data[].id |
string |
Identyfikator sekcji danych. To nie może być pusty ciąg znaków bez spacji. |
data[].label |
string |
Etykieta sekcji danych. |
data[].elements[] |
string |
Elementy danych do wyrenderowania. |
data[].elements[].type |
Wyliczenie string (DataElement) |
Typ elementu danych do wyrenderowania. |
data[].elements[].id |
string |
Identyfikator elementu danych. To nie może być pusty ciąg znaków bez spacji. |
data[].elements[].label |
string |
Etykieta etykietki elementu danych. |
data[].elements[].options |
object(DataElementOptions) |
Opcje danych elementu. Zależy to od typu elementu danych. |
style[] |
Array(object) |
Konfiguracja stylu wymagana przez wizualizację. Ta konfiguracja wpływa na panel Styl w panelu właściwości. Każdy obiekt w tablicy reprezentuje element stylu do wyrenderowania. Kolejność elementów określa kolejność ich renderowania. |
style[].id |
string |
Identyfikator sekcji stylu. To nie może być pusty ciąg znaków bez spacji. |
style[].label |
string |
Etykieta sekcji stylu. |
style[].elements |
Array(object) |
Elementy stylu do wyrenderowania. |
style[].elements[].id |
string |
Identyfikator elementu stylu. To nie może być pusty ciąg znaków bez spacji. |
style[].elements[].type |
Wyliczenie string (StyleElement) |
Typ elementu stylu. Na przykład selektor czcionki. |
style[].elements[].label |
string |
Etykietka lub etykieta elementu stylu. To tekst etykiety dla elementu pola wyboru i tekst etykietki dla innych typów elementów. |
style[].elements[].options |
Array(object) |
Wartość options elementu. Dotyczy to tylko elementów stylu SELECT_SINGLE i SELECT_RADIO . |
style[].elements[].defaultValue |
string OR object |
Wartość domyślna elementu stylu. Nieprawidłowe wartości będą ignorowane.* |
interactions[] |
Array(object) |
Konfiguracja interakcji na wizualizacji. Ta konfiguracja określa, czy może ona działać jako filtr. |
interactions[].id |
string |
Identyfikator elementu interakcji. To nie może być pusty ciąg znaków bez spacji. |
interactions[].supportedActions |
Array (wyliczenie(InteractionType) |
Możliwe obsługiwane interakcje |
features |
object |
Funkcje, które chcesz włączyć lub wyłączyć w wizualizacji. |
features.enableComparisonDateRange |
boolean |
Włącz porównywalne zakresy dat. Jeśli nie określono inaczej, domyślnie jest to false . |
*defaultValue
to ciąg znaków do wszystkiego oprócz selektorów kolorów. W przypadku kolorów defaultValue
powinna być obiektem formatu:
{
color: `string`
}
DataElement
Możliwe wartości elementów danych:
Wartość wyliczeniowa | Opis |
---|---|
DANE | Renderuje element pola danych. |
WYMIAR | Renderuje element pola wymiaru. |
MAX_RESULTS | Określa maksymalną liczbę wierszy danych, których może zażądać ta wersja |
Opcje elementu DataElement
Możliwe wartości elementów danych:
Wartość wyliczeniowa | Typ opcji | Dostępne opcje |
---|---|---|
DANE | Obiekt | max: liczba – maksymalna liczba wskaźników
min: liczba – minimalna liczba wymaganych wskaźników |
WYMIAR | Obiekt | max: liczba – maksymalna liczba obsługiwanych wymiarów.
min: liczba – minimalna liczba wymaganych wymiarów supportedTypes: lista obsługiwanych typów. supportedTypes może obejmować TIME , GEO lub DEFAULT
|
MAX_RESULTS | Obiekt | max: liczba – maksymalna liczba wierszy, o które może poprosić wizualizacja. Domyślnie: 2500 |
StyleElement
Możliwe wartości elementów stylu:
Wartość wyliczeniowa | Opis | defaultValue typ danych (konfiguracja) |
value typ danych (wiadomość) |
Wartość domyślna |
---|---|---|---|---|
FONT_COLOR | Renderuje selektor koloru czcionki. Prawidłowe wartości to szesnastkowe kody kolorów. | STRING | OBJECT<Color> |
STRING | OBJECT<Color> |
Określane na podstawie motywu. |
FONT_SIZE | Wyświetla selektor rozmiaru czcionki. Prawidłowe wartości to: 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 | Renderuje selektor rodziny czcionek. Prawidłowe wartości to te czcionki: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Coming wkrótce, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Flower, Lato, Lora, Montserrat, Oleo Script, Lora, Montserrat, Oleo Script. | STRING |
STRING |
Określane na podstawie motywu. |
POZIOM KONTROLNY | Renderuje pole wyboru. | BOOLEAN |
BOOLEAN |
false |
WPROWADZENIE TEKSTOWE | Renderuje pole tekstowe. | STRING |
STRING |
"" |
OBSZAR TEKSTOWY | Renderuje duży obszar wprowadzania tekstu. | STRING |
STRING |
"" |
SELECT_SINGLE | Renderuje menu ze wstępnie zdefiniowanymi wartościami. | STRING (wartości domyślne oraz opcje.label i options.value) |
STRING |
nie zdefiniowano |
SELECT_RADIO | Renderuje selektor opcji ze zdefiniowanymi wstępnie wartościami. | STRING (wartości domyślne oraz opcje.label i options.value) |
STRING |
nie zdefiniowano |
FILL_COLOR | Renderuje selektor koloru wypełnienia. Prawidłowe wartości to szesnastkowe kody kolorów. | STRING | OBJECT<Color> |
OBJECT<Color> |
Określane na podstawie motywu. |
BORDER_COLOR | Renderuje selektor koloru obramowania. Prawidłowe wartości to szesnastkowe kody kolorów. | STRING | OBJECT<Color> |
OBJECT<Color> |
Określane na podstawie motywu. |
AXIS_COLOR | Renderuje selektor koloru osi. Prawidłowe wartości to szesnastkowe kody kolorów. | STRING | OBJECT<Color> |
OBJECT<Color> |
Określane na podstawie motywu. |
GRID_COLOR | Renderuje selektor koloru siatki. Prawidłowe wartości to szesnastkowe kody kolorów. | STRING | OBJECT<Color> |
OBJECT<Color> |
Określane na podstawie motywu. |
OPACITY | Renderuje selektor przezroczystości, jednostka: %. Prawidłowe wartości mieszczą się w zakresie od 0 do 1 w przyrostach co 0,1 | NUMBER |
NUMBER |
1 |
LINE_WEIGHT | Renderuje selektor szerokości linii. Prawidłowe wartości to od 0 do 5. Wartość 0 wyświetla się w menu jako Brak. | NUMBER |
NUMBER |
|
LINE_STYLE | Renderuje selektor stylu linii. Akceptowane wartości domyślne: solid , dashed , dotted oraz double . |
STRING |
STRING |
"solid" |
BORDER_RADIUS | Renderuje selektor promienia obramowania. Prawidłowe wartości to: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 | NUMBER |
NUMBER |
Określane na podstawie motywu. |
INTERWAŁ | Renderuje selektor interwału. Wartości są liczbami całkowitymi. | NUMBER |
NUMBER |
0 |
Elementy stylu służą do konfigurowania ikon wyświetlanych na karcie Style
w panelu właściwości.
Opcje elementu stylu
Opcje obsługi niektórych elementów stylu
options: array(options)
Wartość wyliczeniowa | Obiekt opcji |
---|---|
SELECT_SINGLE | { label: `string`, value: `string` } |
SELECT_RADIO | { label: `string`, value: `string` } |
INTERWAŁ | { max: `number`, min: `number` } |
Typy danych
Obiekt<Kolor>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
STRING<Kolor>
Wartość ciągu zawierająca szesnastkowy kod koloru.
Przykład
"color": "#0000ff"
NUMBER<Opacity>
Wartość liczbowa od 0 do 1 w przyrostach co 0,10
Przykład
"opacity": 0.2
InteractionType
Moduł InteractionTypes konfiguruje opcje interakcji dostępne w stylu Data
panelu właściwości. Obecnie obsługiwana jest tylko opcja "FILTER"
.
Wartość wyliczeniowa | Opis |
---|---|
"FILTER" |
Pozwala użytkownikom używać wizualizacji jako filtra. |
Przykładowa konfiguracja
{
"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
}
}