yuris/titik-gambut-next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Responsive cartographic fire cluster and KHG data table #17

New issue
Closed
opened 2026-10-14 20:36:26 +00:00 by yuris · 0 comments
yuris commented 2026-10-14 20:36:26 +00:00
Owner
Copy link

What to build

Implement the cartographic data table from the original Streamlit app, replacing canvas-based data grids with a clean, responsive HTML/Tailwind table featuring sticky headers, sorting, and status badges.

Reference repository

Reference app.py in https://git.nokopia.com/yuris/titik-gambut (lines 361–425) for:

  • .carto-table-wrap and .carto-table: sticky header, border #2E3832, dark background, and hover highlights.
  • .badge-status: badge opacity and border styling for .badge-siaga, .badge-waspada, .badge-pantau, and .badge-padam.

Technical specifications

  1. Target files:

    • src/components/table/carto-data-table.tsx: Table component with sticky header and horizontal scroll.
    • src/components/table/status-badge.tsx: Color-coded status badge component (SIAGA, WASPADA, PANTAU, AMAN).
    • src/types/table.ts: Normalized row models for fire clusters and KHG units.

  2. Columns:

    • Lokasi (Kecamatan / Kabupaten, Provinsi)
    • KHG (Nama & Kode KHG)
    • Kedalaman Gambut (cm & klasifikasi)
    • Skor Bahaya (0–100 dengan badge warna)
    • Status (SIAGA, WASPADA, PANTAU)
    • Waktu Deteksi (WIB)

  3. Interactivity:

    • Hovering or clicking a row highlights the corresponding cluster on the map and pans the camera.
    • Clicking a status badge filters the map to only show that risk tier.

Acceptance criteria

  • Table renders below or beside the map with sticky #1F2622 header and #2E3832 border.
  • Sorting by Danger Score or Hotspot Count operates in-memory under 10ms.
  • Status badges match the exact opacity and borders defined in DESIGN.md.
### What to build Implement the cartographic data table from the original Streamlit app, replacing canvas-based data grids with a clean, responsive HTML/Tailwind table featuring sticky headers, sorting, and status badges. ### Reference repository Reference `app.py` in `https://git.nokopia.com/yuris/titik-gambut` (lines 361–425) for: - `.carto-table-wrap` and `.carto-table`: sticky header, border `#2E3832`, dark background, and hover highlights. - `.badge-status`: badge opacity and border styling for `.badge-siaga`, `.badge-waspada`, `.badge-pantau`, and `.badge-padam`. ### Technical specifications 1. **Target files**: - src/components/table/carto-data-table.tsx: Table component with sticky header and horizontal scroll. - src/components/table/status-badge.tsx: Color-coded status badge component (SIAGA, WASPADA, PANTAU, AMAN). - src/types/table.ts: Normalized row models for fire clusters and KHG units. 2. **Columns**: - Lokasi (Kecamatan / Kabupaten, Provinsi) - KHG (Nama & Kode KHG) - Kedalaman Gambut (cm & klasifikasi) - Skor Bahaya (0–100 dengan badge warna) - Status (SIAGA, WASPADA, PANTAU) - Waktu Deteksi (WIB) 3. **Interactivity**: - Hovering or clicking a row highlights the corresponding cluster on the map and pans the camera. - Clicking a status badge filters the map to only show that risk tier. ### Acceptance criteria - [x] Table renders below or beside the map with sticky #1F2622 header and #2E3832 border. - [x] Sorting by Danger Score or Hotspot Count operates in-memory under 10ms. - [x] Status badges match the exact opacity and borders defined in DESIGN.md.
yuris closed this issue 2026-10-14 21:59:22 +00:00
yuris changed title from Issue 16: Responsive cartographic fire cluster and KHG data table to Responsive cartographic fire cluster and KHG data table 2026-10-14 22:31:30 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
feat/issue-51-concessions-layer
feat/issue-46-dual-mode-tile-url-resolver
feat/issue-44-45-protomaps-basemap-cutover
No results found.
Labels
Clear labels   
backend
Backend task

  
frontend
Frontend task

No labels
backend
frontend
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/titik-gambut-next#17
No description provided.