Konfigurasi visualisasi mendefinisikan 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 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 dibutuhkan oleh visualisasi. Konfigurasi ini memengaruhi panel Gaya di panel properti. Setiap objek dalam array mewakili elemen gaya yang akan dirender. Urutan elemen menentukan urutan elemen tersebut akan dirender. |
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 dan tanpa spasi. |
style[].elements[].type |
Enum string (StyleElement) |
Jenis elemen gaya. Mis. 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. Ini hanya valid 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 dapat bertindak 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. Setelan defaultnya adalah false jika tidak ditentukan. |
*defaultValue
adalah string untuk semua hal kecuali pemilih warna. Sebagai
warna, defaultValue
harus berupa objek 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 | Objek | max: number - jumlah metrik maks
min: angka - jumlah minimum metrik yang diperlukan |
DIMENSI | Objek | max: number - jumlah maksimal dimensi yang didukung.
min: angka - jumlah minimum dimensi yang diperlukan supportedTypes: daftar jenis yang didukung. supportedTypes dapat menyertakan TIME , GEO , atau DEFAULT
|
MAX_RESULTS | Objek | max: number - jumlah baris maksimum yang dapat diminta visualisasi. Default: 2.500 |
StyleElement
Nilai untuk elemen gaya bisa berupa salah satu dari berikut ini:
Nilai enum | Deskripsi | defaultValue Jenis Data (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 valid adalah font berikut: font berikut: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Coming Segera,, | STRING |
STRING |
Ditentukan berdasarkan tema. |
CHECKBOX | Merender kotak centang. | BOOLEAN |
BOOLEAN |
false |
TEXTINPUT | Merender kotak input teks. | STRING |
STRING |
"" |
TEXTAREA | Merender area input teks yang besar. | STRING |
STRING |
"" |
SELECT_SINGLE | Merender dropdown dengan nilai yang telah ditentukan sebelumnya. | 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 pengisi. Nilai yang valid adalah kode warna Hex. | STRING | OBJECT<Color> |
OBJECT<Color> |
Ditentukan berdasarkan tema. |
BORDER_COLOR | Merender pemilih warna batas. Nilai yang valid adalah kode warna Hex. | STRING | OBJECT<Color> |
OBJECT<Color> |
Ditentukan berdasarkan tema. |
AXIS_COLOR | Merender pemilih warna sumbu. Nilai yang valid adalah kode warna Hex. | STRING | OBJECT<Color> |
OBJECT<Color> |
Ditentukan berdasarkan tema. |
GRID_COLOR | Merender pemilih warna petak. Nilai yang valid adalah kode warna Hex. | STRING | OBJECT<Color> |
OBJECT<Color> |
Ditentukan berdasarkan tema. |
KETERPAPARAN | Merender pemilih opasitas, satuannya 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. Angka 0 akan dirender sebagai Tidak ada pada 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. Nilainya berupa bilangan bulat. | NUMBER |
NUMBER |
0 |
Elemen gaya mengonfigurasi ikon yang ditampilkan di tab Style
pada Properti
Panel.
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<Warna>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
STRING<Color>
Nilai string yang berisi kode warna heksadesimal.
Contoh
"color": "#0000ff"
JUMLAH<Opasitas>
Nilai angka dari 0 hingga 1 dengan kelipatan 0,10
Contoh
"opacity": 0.2
InteractionType
InteractionTypes mengonfigurasi opsi interaksi yang tersedia di gaya Data
di Panel {i>Property<i}. 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
}
}