Konfigurasi visualisasi menentukan atribut data dan gaya yang diperlukan oleh visualisasi.
Konfigurasi diharapkan sebagai file JSON dengan struktur berikut:
{
"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
}
}
Nama kolom | Jenis | Deskripsi |
---|---|---|
data[] |
Array(object) |
Konfigurasi data dari visualisasi. Konfigurasi ini memengaruhi panel Data di panel properti. |
data[].id |
string |
ID bagian data. String ini harus berupa string yang tidak kosong tanpa spasi. |
data[].label |
string |
Label untuk bagian data. |
data[].elements[] |
string |
Elemen data yang akan dirender. |
data[].elements[].type |
Enum string (DataElement) |
Jenis elemen data yang akan dirender. |
data[].elements[].id |
string |
ID elemen data. String ini harus berupa string yang tidak kosong tanpa spasi. |
data[].elements[].label |
string |
Label tooltip untuk elemen data. |
data[].elements[].options |
object(DataElementOptions) |
Opsi data untuk elemen. Hal ini bergantung pada Jenis Elemen Data. |
style[] |
Array(object) |
Konfigurasi gaya yang diperlukan oleh visualisasi. Konfigurasi ini memengaruhi panel Gaya di panel properti. Setiap objek dalam array mewakili elemen gaya yang akan dirender. Urutan elemen menentukan urutan renderingnya. |
style[].id |
string |
ID bagian gaya. String ini harus berupa string yang tidak kosong tanpa spasi. |
style[].label |
string |
Label untuk bagian gaya. |
style[].elements |
Array(object) |
Elemen gaya yang akan dirender. |
style[].elements[].id |
string |
ID elemen gaya. String ini harus berupa string yang tidak kosong tanpa spasi. |
style[].elements[].type |
Enum string (StyleElement) |
Jenis elemen gaya. Misalnya, pemilih font. |
style[].elements[].label |
string |
Tooltip atau label untuk elemen gaya. Ini adalah teks label untuk elemen kotak centang dan teks tooltip untuk jenis elemen lainnya. |
style[].elements[].options |
Array(object) |
options untuk elemen. Hal ini hanya berlaku untuk jenis Elemen Gaya SELECT_SINGLE dan SELECT_RADIO . |
style[].elements[].defaultValue |
string OR object |
Nilai default untuk elemen gaya. Nilai yang tidak valid akan diabaikan.* |
interactions[] |
Array(object) |
Konfigurasi interaksi dari visualisasi. Konfigurasi ini menentukan apakah konfigurasi dapat berfungsi sebagai filter atau tidak. |
interactions[].id |
string |
ID elemen interaksi. String ini harus berupa string yang tidak kosong tanpa spasi. |
interactions[].supportedActions |
Array (enum(InteractionType) |
Kemungkinan interaksi yang didukung |
features |
object |
Fitur yang ingin Anda aktifkan atau nonaktifkan dalam visualisasi Anda. |
features.enableComparisonDateRange |
boolean |
Aktifkan rentang tanggal perbandingan. Nilai defaultnya adalah false jika tidak ditentukan. |
*defaultValue
adalah string untuk semua kecuali pemilih warna. Untuk
warna, defaultValue
harus berupa objek dengan format:
{
color: `string`
}
DataElement
Nilai untuk elemen data dapat berupa salah satu dari berikut ini:
Nilai enum | Deskripsi |
---|---|
METRIK | Merender elemen kolom metrik. |
DIMENSI | Merender elemen kolom dimensi. |
MAX_RESULTS | Menentukan baris data maksimum yang dapat diminta oleh visualisasi ini |
Opsi DataElement
Nilai untuk elemen data dapat berupa salah satu dari berikut ini:
Nilai enum | Jenis Opsi | Opsi yang tersedia |
---|---|---|
METRIK | Object | maks: angka - jumlah metrik maksimum
min: angka - jumlah metrik minimum yang diperlukan |
DIMENSI | Object | maks: angka - jumlah dimensi maksimum yang didukung.
min: angka - jumlah dimensi minimum yang diperlukan supportedTypes: daftar jenis yang didukung. supportedTypes dapat menyertakan TIME , GEO , atau DEFAULT
|
MAX_RESULTS | Object | maks: angka - jumlah baris maksimum yang dapat diminta visualisasi. Default: 2500 |
StyleElement
Nilai untuk elemen gaya dapat berupa salah satu dari hal berikut:
Nilai enum | Deskripsi | Jenis Data defaultValue (Konfigurasi) |
value Jenis Data (Pesan) |
Nilai Default |
---|---|---|---|---|
FONT_COLOR | Merender pemilih warna font. Nilai yang valid adalah kode warna heksadesimal. | STRING | OBJECT<Color> |
STRING | OBJECT<Color> |
Ditentukan berdasarkan tema. |
FONT_SIZE | Merender pemilih ukuran font. Nilai yang valid adalah piksel berikut: 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 | Merender pemilih jenis font. Nilai yang valid adalah font berikut: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans Roboto MS, Segera Hadir, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Flower, Lato, Lora, Montserrat, Oleo Script, Open Sans, Montserrat, Oleo Script | STRING |
STRING |
Ditentukan berdasarkan tema. |
KOTAK PERIKSA | Merender kotak centang. | BOOLEAN |
BOOLEAN |
false |
MASUKAN TEKS | Merender kotak input teks. | STRING |
STRING |
"" |
AREA TEKS | Merender area input teks yang besar. | STRING |
STRING |
"" |
SELECT_SINGLE | Merender dropdown dengan nilai yang telah ditentukan. | STRING (untuk defaultValue dan options.label serta options.value) |
STRING |
belum ditentukan |
SELECT_RADIO | Merender pemilih radio dengan nilai yang telah ditentukan sebelumnya. | STRING (untuk defaultValue dan options.label serta options.value) |
STRING |
belum ditentukan |
FILL_COLOR | Merender pemilih warna isian. Nilai yang valid adalah kode warna Heksadesimal. | STRING | OBJECT<Color> |
OBJECT<Color> |
Ditentukan berdasarkan tema. |
BORDER_COLOR | Merender pemilih warna batas. Nilai yang valid adalah kode warna Heksadesimal. | STRING | OBJECT<Color> |
OBJECT<Color> |
Ditentukan berdasarkan tema. |
AXIS_COLOR | Merender pemilih warna sumbu. Nilai yang valid adalah kode warna Heksadesimal. | STRING | OBJECT<Color> |
OBJECT<Color> |
Ditentukan berdasarkan tema. |
GRID_COLOR | Merender pemilih warna petak. Nilai yang valid adalah kode warna Heksadesimal. | STRING | OBJECT<Color> |
OBJECT<Color> |
Ditentukan berdasarkan tema. |
KETERLIBATAN | Merender pemilih opasitas, unit adalah %. Nilai yang valid adalah dari 0 hingga 1 dengan kelipatan 0,1 | NUMBER |
NUMBER |
1 |
LINE_WEIGHT | Merender pemilih ketebalan garis. Nilai yang valid adalah dari 0 hingga 5. 0 akan dirender sebagai Tidak ada di dropdown. | NUMBER |
NUMBER |
|
LINE_STYLE | Merender pemilih gaya garis. Nilai default yang dapat diterima: solid , dashed , dotted , double . |
STRING |
STRING |
"solid" |
BORDER_RADIUS | Merender pemilih radius batas. Nilai yang valid adalah: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 | NUMBER |
NUMBER |
Ditentukan berdasarkan tema. |
INTERVAL | Merender pemilih interval. Nilai berupa bilangan bulat. | NUMBER |
NUMBER |
0 |
Elemen gaya mengonfigurasi ikon yang ditampilkan di tab Style
pada Panel
Properti.
Opsi Elemen Gaya
Beberapa elemen gaya mendukung opsi
options: array(options)
Nilai enum | Objek Opsi |
---|---|
SELECT_SINGLE | { label: `string`, value: `string` } |
SELECT_RADIO | { label: `string`, value: `string` } |
INTERVAL | { max: `number`, min: `number` } |
Jenis Data
Objek<Color>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
STRING<Warna>
Nilai string yang berisi kode warna heksadesimal.
Contoh
"color": "#0000ff"
NUMBER<Opacity>
Nilai angka dari 0 hingga 1 dengan kelipatan 0,10
Contoh
"opacity": 0.2
InteractionType
InteractionTypes mengonfigurasi opsi interaksi yang tersedia di gaya Data
pada Panel Properti. Saat ini, hanya "FILTER"
yang didukung.
Nilai enum | Deskripsi |
---|---|
"FILTER" |
Memungkinkan pengguna menggunakan visualisasi sebagai filter. |
Contoh konfigurasi
{
"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
}
}