Referensi Konfigurasi Visualisasi Komunitas

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
  }
}