La configurazione di visualizzazione definisce i dati e gli attributi di stile richiesti da una visualizzazione.
La configurazione è prevista come file JSON con la seguente struttura:
{
"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
}
}
| Nome campo | Tipo | Descrizione |
|---|---|---|
data[] |
Array(object) |
La configurazione dei dati della visualizzazione. Questa configurazione influisce sul riquadro Dati del riquadro delle proprietà. |
data[].id |
string |
L'ID della sezione dei dati. Deve essere una stringa non vuota senza spazi. |
data[].label |
string |
L'etichetta della sezione dei dati. |
data[].elements[] |
string |
Gli elementi di dati da visualizzare. |
data[].elements[].type |
string enum(DataElement) |
Il tipo di elemento di dati da visualizzare. |
data[].elements[].id |
string |
L'ID dell'elemento di dati. Deve essere una stringa non vuota senza spazi. |
data[].elements[].label |
string |
L'etichetta della descrizione comando per l'elemento di dati. |
data[].elements[].options |
object(DataElementOptions) |
Le opzioni relative ai dati per l'elemento. Dipende dal tipo di elemento dati. |
style[] |
Array(object) |
La configurazione dello stile richiesta dalla visualizzazione. Questa configurazione influisce sul riquadro Stile del riquadro delle proprietà. Ogni oggetto dell'array rappresenta un elemento di stile da visualizzare. L'ordine degli elementi determina l'ordine in cui verranno visualizzati. |
style[].id |
string |
L'ID della sezione di stile. Deve essere una stringa non vuota senza spazi. |
style[].label |
string |
L'etichetta della sezione Stile. |
style[].elements |
Array(object) |
Gli elementi di stile da visualizzare. |
style[].elements[].id |
string |
L'ID dell'elemento di stile. Deve essere una stringa non vuota senza spazi. |
style[].elements[].type |
string enum(StyleElement) |
Il tipo di elemento di stile. ad esempio un selettore di caratteri. |
style[].elements[].label |
string |
La descrizione comando o l'etichetta dell'elemento di stile. Questo è il testo dell'etichetta per un elemento casella di controllo e il testo della descrizione comando per gli altri tipi di elementi. |
style[].elements[].options |
Array(object) |
Il options per l'elemento. È valido solo per i tipi di elemento di stile SELECT_SINGLE e SELECT_RADIO. |
style[].elements[].defaultValue |
string OR object |
Il valore predefinito per l'elemento di stile. I valori non validi verranno ignorati.* |
interactions[] |
Array(object) |
La configurazione delle interazioni della visualizzazione. Questa configurazione determina se può fungere o meno da filtro. |
interactions[].id |
string |
L'ID dell'elemento di interazione. Deve essere una stringa non vuota senza spazi. |
interactions[].supportedActions |
Array (enum(InteractionType) |
Le possibili interazioni supportate |
features |
object |
Le funzionalità che vuoi attivare o disattivare nella visualizzazione. |
features.enableComparisonDateRange |
boolean |
Attiva gli intervalli di date di confronto. Se non specificato, il valore predefinito è false. |
*defaultValue è una stringa per tutto tranne i selettori del colore. Per i colori, defaultValue deve essere un oggetto nel formato:
{
color: `string`
}
DataElement
I valori degli elementi di dati possono essere uno dei seguenti:
| Valore numerico | Descrizione |
|---|---|
| METRICA | Visualizza un elemento del campo metrica. |
| DIMENSION | Visualizza un elemento del campo dimensione. |
| MAX_RESULTS | Definisce il numero massimo di righe di dati che possono essere richieste da questa visualizzazione |
Opzioni DataElement
I valori degli elementi di dati possono essere uno dei seguenti:
| Valore numerico | Tipo di opzione | Opzioni disponibili |
|---|---|---|
| METRICA | Oggetto | max: numero - il numero massimo di metriche
min: numero - il numero minimo di metriche richieste |
| DIMENSION | Oggetto | max: number. Il numero massimo di dimensioni supportate.
min: number - il numero minimo di dimensioni richieste supportedTypes: l'elenco dei tipi supportati. supportedTypes può includere TIME, GEO o DEFAULT
|
| MAX_RESULTS | Oggetto | max: number - Il numero massimo di righe che la visualizzazione può richiedere. Valore predefinito: 2500 |
StyleElement
I valori per gli elementi di stile possono essere uno dei seguenti:
| Valore numerico | Descrizione | defaultValue tipo di dati (configurazione) |
value tipo di dati (messaggio) |
Valore predefinito |
|---|---|---|---|---|
| FONT_COLOR | Visualizza il selettore del colore del carattere. I valori validi sono codici colore esadecimali. | STRING | OBJECT<Color> |
STRING | OBJECT<Color> |
Determinato dal tema. |
| FONT_SIZE | Visualizza il selettore delle dimensioni del carattere. I valori validi sono i seguenti 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 | Visualizza il selettore della famiglia di caratteri. I valori validi sono i seguenti caratteri: Firefox, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Prossimamente, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Flower, Lato, Lora, Montserrat, Oleowalo Script, Open Sans, Open Sans | STRING |
STRING |
Determinato dal tema. |
| Casella di controllo | Visualizza una casella di controllo. | BOOLEAN |
BOOLEAN |
false |
| INPUT DI TESTO | Visualizza una casella di immissione di testo. | STRING |
STRING |
"" |
| AREA DI TESTO | Visualizza un'area di immissione di testo di grandi dimensioni. | STRING |
STRING |
"" |
| SELECT_SINGLE | Visualizza un menu a discesa con valori predefiniti. | STRING (per defaultValue e options.label e options.value) |
STRING |
non definito |
| SELECT_RADIO | Visualizza un selettore di pulsanti di opzione con valori predefiniti. | STRING (per defaultValue e options.label e options.value) |
STRING |
non definito |
| FILL_COLOR | Visualizza un selettore del colore di riempimento. I valori validi sono codici colore esadecimali. | STRING | OBJECT<Color> |
OBJECT<Color> |
Determinato dal tema. |
| BORDER_COLOR | Visualizza un selettore del colore del bordo. I valori validi sono codici colore esadecimali. | STRING | OBJECT<Color> |
OBJECT<Color> |
Determinato dal tema. |
| AXIS_COLOR | Esegue il rendering di un selettore colori dell'asse. I valori validi sono codici colore esadecimali. | STRING | OBJECT<Color> |
OBJECT<Color> |
Determinato dal tema. |
| GRID_COLOR | Visualizza un selettore del colore della griglia. I valori validi sono codici colore esadecimali. | STRING | OBJECT<Color> |
OBJECT<Color> |
Determinato dal tema. |
| OPACITÀ | Visualizza un selettore di opacità. L'unità è %. I valori validi sono compresi tra 0 e 1 con incrementi di 0, 1 | NUMBER |
NUMBER |
1 |
| LINE_WEIGHT | Visualizza un selettore dello spessore della linea. I valori validi sono compresi tra 0 e 5. Nel menu a discesa verrà visualizzato Nessuno come 0. | NUMBER |
NUMBER |
|
| LINE_STYLE | Visualizza un selettore di stile linea. Valori predefiniti accettati: solid, dashed, dotted, double. |
STRING |
STRING |
"solid" |
| BORDER_RADIUS | Visualizza un selettore del raggio del bordo. I valori validi sono: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 | NUMBER |
NUMBER |
Determinato dal tema. |
| INTERVALLO | Esegue il rendering di un selettore di intervallo. I valori sono numeri interi. | NUMBER |
NUMBER |
0 |
Gli elementi di stile configurano le icone visualizzate nella scheda Style del riquadro delle proprietà.
Opzioni stile elemento
Alcune opzioni di supporto per alcuni elementi di stile
options: array(options)
| Valore numerico | Oggetto opzioni |
|---|---|
| SELECT_SINGLE |
{
label: `string`,
value: `string`
}
|
| SELECT_RADIO |
{
label: `string`,
value: `string`
}
|
| INTERVALLO |
{
max: `number`,
min: `number`
}
|
Tipi di dati
Oggetto<Colore>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
STRING<Colore>
Un valore stringa contenente un codice colore esadecimale.
Esempio
"color": "#0000ff"
NUMBER<Opacity>
Un valore numerico da 0 a 1 con incrementi di 0,10
Esempio
"opacity": 0.2
InteractionType
InteractionTypes configura le opzioni di interazione disponibili nello stile Data
del riquadro delle proprietà. Al momento, è supportato solo "FILTER".
| Valore numerico | Descrizione |
|---|---|
"FILTER" |
Consente agli utenti di utilizzare la visualizzazione come filtro. |
Configurazione di esempio
{
"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
}
}