Mapping Dynamic Table ke Bentuk Tabel

Halaman ini menjelaskan bagaimana response dynamic table BPS dipetakan menjadi tabel yang bisa dirender di UI, termasuk kondisi ketika ada turtahun.

Visual 1 — Mapping dari Struktur Tabel

Visual ini membantu melihat bagaimana dimensi response dipetakan menjadi baris, kolom, dan nilai sel — tanpa bergantung ke asset SVG terpisah.

DIMENSI RESPONSE

vervarvarturvartahunturtahundatacontent

Setiap nilai tabel dibentuk dari kombinasi dimensi di atas.

KUNCI KOMPOSIT

7315+31+0+99+0=7315310990

Contoh: Pinrang × Jumlah Penduduk × 1999

BENTUK TABEL HASIL RENDER

Wilayah	1999	2000	2001
Pinrang	308.669	311.595	312.473

vervar → baris

tahun → kolom

datacontent → nilai sel

Sel yang di-highlight: Pinrang × Jumlah Penduduk × 1999 = 308669
diambil dari datacontent[7315310990]

Inti Mapping

• Baris berasal dari vervar
• Kolom utama berasal dari tahun
• Sub-kolom bisa berasal dari turvar
• Sub-kolom level berikutnya bisa berasal dari turtahun
• Nilai sel diambil dari datacontent
• Setiap nilai dicari lewat kunci komposit:

{vervar}{var}{turvar}{tahun}{turtahun}

Contoh:

7315 + 31 + 0 + 99 + 0 = 7315310990

Lalu lookup:

datacontent[7315310990] = 308669

Visual 2 — Mapping Lengkap termasuk turtahun

Visual berikut menunjukkan empat kondisi penting struktur header tabel:

• Kasus A: 1 turvar + 1 turtahun
• Kasus B: banyak turvar + 1 turtahun
• Kasus C: 1 turvar + banyak turtahun
• Kasus D: banyak turvar + banyak turtahun

BPS API — Mapping respons JSON → tabel

Cara membaca key datacontent dan merender tabel dengan header bertingkat

Anatomi Kunci

vervar+var+turvar+tahun+turtahun→gabungan field val

Contoh (Pinrang / Kec A / 1999 / Feb):7315+31+1+99+2="7315311992"

⚠ Panjang key bersifat variabel — selalu bangun lewat lookup, jangan split fixed-width.

---

Respons JSON (Kasus D — semua dimensi)

"vervar": [ {"val": 7315, "label": "Pinrang" } ]

"var": [ { "val": 31, "label": "Jumlah Penduduk", "unit": "Jiwa" } ]

"turvar": [

{ "val": 1, "label": "Kec A" },

{ "val": 2, "label": "Kec B" }

]

"tahun": [

{ "val": 99, "label": "1999" },

{ "val": 100, "label": "2000" }

]

"turtahun": [

{ "val": 2, "label": "Februari" },

{ "val": 3, "label": "Maret" }

]

"datacontent": {

"7315311992":101,234,

"7315312992":98,441,

"7315311993":102,887,

"7315312993":99,103, ... 8 keys total

}

Aturan Baris Header

Baris 1

tahun  — selalu ditampilkan

colspan = count(turtahun) × count(turvar)

Baris 2

turtahun  — lewati jika hanya 1 nilai

colspan = count(turvar)

Baris 3

turvar  — lewati jika hanya 1 nilai

colspan = 1  (kolom leaf)

Wilayah

rowspan

= total baris header yang dirender (1, 2, atau 3)

Ringkasan Kasus

Asatu turvar + satu turtahun1 baris header

Bbanyak turvar, satu turtahun2 baris: tahun → turvar

Csatu turvar, banyak turtahun2 baris: tahun → turtahun

Dbanyak turvar + banyak turtahun3 baris: tahun → turtahun → turvar

Loop: vervar × var × tahun × turtahun × turvar
→ bangun key → lookup datacontent → nilai sel

CASE ASingle turvar + single turtahun — 1 baris header

Wilayah	1999	2000
Pinrang	308,669	311,595

↑ key sel 1999:7315310990= "7315310990"

CASE BBanyak turvar, satu turtahun — 2 baris header (tahun → turvar)

Wilayah	1999		2000
	Kec A	Kec B	Kec A	Kec B
Pinrang	308,669	295,421	311,595	300,112

↑ colspan tahun =count(turvar)=2

CASE CSatu turvar, banyak turtahun — 2 baris header (tahun → turtahun)

Wilayah	1999		2000
	Februari	Maret	Februari	Maret
Pinrang	101,234	102,887	103,991	105,112

↑ colspan tahun =count(turtahun)=2

CASE DBanyak turvar + banyak turtahun — 3 baris header (tahun → turtahun → turvar)

Wilayah	1999				2000
	Februari		Maret		Februari		Maret
	Kec A	Kec B	Kec A	Kec B	Kec A	Kec B	Kec A	Kec B
Pinrang	101,234	98,441	102,887	99,103	103,991	100,234	105,112	101,876

↑ colspan tahun =count(turtahun)×count(turvar)=2 × 2 = 4

↑ colspan turtahun =count(turvar)=2

↑ turvar colspan = 1(leaf)

vervar

var

turvar

tahun

turtahun

Aturan Mental Model

1. Baris

Selalu mulai dari vervar.

setiap item di vervar = satu baris utama

2. Kolom

• kalau turvar hanya satu / tidak ada dimensi turunan yang bermakna → kolom cukup tahun
• kalau turvar lebih dari satu → kolom menjadi turvar × tahun

3. Level tambahan turtahun

Kalau ada lebih dari satu turtahun, maka header kolom perlu satu level lagi.

Rule praktisnya:

• tahun selalu jadi level atas
• turtahun jadi level tengah kalau jumlahnya > 1
• turvar jadi level bawah kalau jumlahnya > 1

Sehingga susunan header bisa menjadi:

tahun

atau:

tahun -> turvar

atau:

tahun -> turtahun

atau kondisi penuh:

tahun -> turtahun -> turvar

Dalam stadata-js

Opsi 1 — toStructuredData()

Kalau mau render tabel sendiri dengan kontrol penuh:

const structured = table.toStructuredData()

Opsi 2 — DynamicTableHtmlGenerator

Kalau mau cepat jadi HTML table:

import { DynamicTableHtmlGenerator } from 'stadata-js'

const html = DynamicTableHtmlGenerator.generate(table)

Kapan Perlu Parse Manual?

Manual parsing biasanya cuma perlu kalau:

• mau bikin visualisasi yang sangat custom
• mau export ke format sendiri
• mau membuat pivot logic yang beda dari helper bawaan

Kalau tidak, pakai helper bawaan lebih aman.

Lihat Juga

• Dynamic Table Helpers
• Dynamic Tables API