Referensi Konfigurasi Visualisasi Komunitas

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&lt;Color&gt;

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