> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mertani.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Detail Pemantauan

export const DrilldownTable = ({headers, rows, defaultExpanded}) => {
  const [expanded, setExpanded] = useState(() => {
    if (defaultExpanded === true) {
      const init = {};
      rows.forEach((r, i) => {
        if (r.children) init[r.key || String(i)] = true;
      });
      return init;
    }
    return {};
  });
  const [hovered, setHovered] = useState(null);
  const toggle = key => {
    setExpanded(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };
  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
  const s = {
    table: {
      width: '100%',
      borderCollapse: 'collapse',
      fontSize: '0.875rem'
    },
    th: {
      padding: '0.5rem 0.75rem',
      textAlign: 'left',
      fontWeight: 600,
      borderBottom: '1px solid ' + (isDark ? '#334155' : '#e5e7eb'),
      position: 'sticky',
      top: 0
    },
    thRight: {
      padding: '0.5rem 0.75rem',
      textAlign: 'right',
      fontWeight: 600,
      borderBottom: '1px solid ' + (isDark ? '#334155' : '#e5e7eb'),
      fontVariantNumeric: 'tabular-nums',
      position: 'sticky',
      top: 0
    },
    td: {
      padding: '0.5rem 0.75rem',
      textAlign: 'left',
      borderBottom: '1px solid ' + (isDark ? '#334155' : '#e5e7eb')
    },
    tdRight: {
      padding: '0.5rem 0.75rem',
      textAlign: 'right',
      borderBottom: '1px solid ' + (isDark ? '#334155' : '#e5e7eb'),
      fontVariantNumeric: 'tabular-nums'
    },
    parentRow: {
      cursor: 'pointer',
      userSelect: 'none'
    },
    parentHover: {
      cursor: 'pointer',
      userSelect: 'none',
      background: isDark ? '#1a0e00' : '#fff7ed'
    },
    parentTd: {
      padding: '0.5rem 0.75rem',
      textAlign: 'left',
      fontWeight: 600,
      borderBottom: '1px solid ' + (isDark ? '#334155' : '#e5e7eb')
    },
    parentTdRight: {
      padding: '0.5rem 0.75rem',
      textAlign: 'right',
      fontWeight: 600,
      borderBottom: '1px solid ' + (isDark ? '#334155' : '#e5e7eb'),
      fontVariantNumeric: 'tabular-nums'
    },
    parentExpandedRow: {
      cursor: 'pointer',
      userSelect: 'none'
    },
    parentExpandedTd: {
      padding: '0.5rem 0.75rem',
      textAlign: 'left',
      fontWeight: 600,
      background: isDark ? '#2d1600' : '#fff7ed',
      color: isDark ? '#fb923c' : '#ea580c',
      borderBottom: 'none'
    },
    parentExpandedTdRight: {
      padding: '0.5rem 0.75rem',
      textAlign: 'right',
      fontWeight: 600,
      background: isDark ? '#2d1600' : '#fff7ed',
      color: isDark ? '#fb923c' : '#ea580c',
      borderBottom: 'none',
      fontVariantNumeric: 'tabular-nums'
    },
    childTd: {
      padding: '0.5rem 0.75rem 0.5rem 2.5rem',
      textAlign: 'left',
      color: isDark ? '#94a3b8' : '#6b7280',
      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
      fontSize: '0.8125rem',
      background: isDark ? '#1a0e00' : '#fff7ed',
      borderLeft: '3px solid ' + (isDark ? '#c2410c' : '#ff6900'),
      borderBottom: '1px solid ' + (isDark ? '#334155' : '#e5e7eb')
    },
    childTdRight: {
      padding: '0.5rem 0.75rem',
      textAlign: 'right',
      color: isDark ? '#94a3b8' : '#6b7280',
      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
      fontSize: '0.8125rem',
      background: isDark ? '#1a0e00' : '#fff7ed',
      borderBottom: '1px solid ' + (isDark ? '#334155' : '#e5e7eb'),
      fontVariantNumeric: 'tabular-nums'
    },
    chevron: {
      display: 'inline-block',
      marginRight: '0.5rem',
      fontSize: '0.75rem',
      color: isDark ? '#fb923c' : '#ea580c',
      transition: 'transform 0.2s ease'
    },
    arrow: {
      color: isDark ? '#fb923c' : '#ea580c',
      marginRight: '0.25rem'
    }
  };
  return <table style={s.table}>
      <thead>
        <tr>
          {headers.map((h, i) => <th key={i} style={i === headers.length - 1 ? s.thRight : s.th}>
              {h}
            </th>)}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, i) => {
    const isParent = !!row.children;
    const key = row.key || String(i);
    const isExpanded = !!expanded[key];
    if (isParent) {
      const isHovered = hovered === key && !isExpanded;
      return [<tr key={key} onClick={() => toggle(key)} onMouseEnter={() => setHovered(key)} onMouseLeave={() => setHovered(null)} style={isExpanded ? s.parentExpandedRow : isHovered ? s.parentHover : s.parentRow}>
                <td style={isExpanded ? s.parentExpandedTd : s.parentTd}>
                  <span style={{
        ...s.chevron,
        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)'
      }}>
                    ▸
                  </span>
                  {row.label}
                </td>
                <td style={isExpanded ? s.parentExpandedTdRight : s.parentTdRight}>
                  {row.value}
                </td>
              </tr>, ...isExpanded ? row.children.map((child, j) => <tr key={`${key}-${j}`}>
                      <td style={s.childTd}>
                        <span style={s.arrow}>↳ </span>
                        {child.label}
                      </td>
                      <td style={s.childTdRight}>{child.value}</td>
                    </tr>) : []];
    }
    return <tr key={key}>
              <td style={s.td}>{row.label}</td>
              <td style={s.tdRight}>{row.value}</td>
            </tr>;
  })}
      </tbody>
    </table>;
};

Halaman **Detail Pemantauan** menampilkan data sensor dari sebuah perangkat secara lengkap, mulai dari grafik interaktif hingga tabel data historis. Halaman ini digunakan untuk menganalisis performa perangkat dan memahami tren data dari waktu ke waktu.

***

## Cara Membuka Detail Pemantauan

Halaman ini dapat diakses melalui dua jalur:

<Tabs>
  <Tab title="Dari Peta Sebaran">
    <Steps>
      <Step title="Klik marker perangkat di peta">
        Pada halaman utama (Maps), klik marker perangkat yang ingin dipantau. Ringkasan singkat perangkat akan muncul.
      </Step>

      <Step title="Klik 'Lihat Detail'">
        Klik tombol **"Lihat Detail"** untuk membuka halaman Detail Pemantauan perangkat tersebut.
      </Step>

      <Step title="Pilih sensor dan terapkan">
        Pilih sensor yang ingin ditampilkan, lalu klik **"Terapkan"**.

        <Frame>
          <div>
            <video title="Detail monitoring - from maps" src="https://mintcdn.com/mertani/SociO-6B0sRV_6DO/assets/dashboard-guides/monitoring/detail-data-frommaps.webm?fit=max&auto=format&n=SociO-6B0sRV_6DO&q=85&s=4efb42d60d825ad8123d73f352ab400e" controls autoPlay loop playsInline muted data-path="assets/dashboard-guides/monitoring/detail-data-frommaps.webm" />
          </div>
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Dari Manajemen Device">
    <Steps>
      <Step title="Buka halaman Manajemen Device">
        Masuk ke menu **Manajemen Device** untuk melihat daftar seluruh perangkat.
      </Step>

      <Step title="Klik baris perangkat">
        Klik nama atau baris perangkat pada tabel untuk langsung membuka halaman Detail Pemantauan.
      </Step>

      <Step title="Pilih sensor dan terapkan">
        Pilih sensor yang ingin ditampilkan, lalu klik **"Terapkan"**.

        <Frame>
          <div>
            <video title="Detail monitoring - from device" src="https://mintcdn.com/mertani/SociO-6B0sRV_6DO/assets/dashboard-guides/monitoring/detail-data-fromdevice.webm?fit=max&auto=format&n=SociO-6B0sRV_6DO&q=85&s=773f15bf507399d67a8e723e2595d4bb" controls autoPlay loop playsInline muted data-path="assets/dashboard-guides/monitoring/detail-data-fromdevice.webm" />
          </div>
        </Frame>
      </Step>
    </Steps>
  </Tab>
</Tabs>

***

## Tampilan Halaman

Setelah halaman terbuka, Anda akan melihat beberapa komponen utama:

| Komponen                    | Lokasi                            | Fungsi                                                   |
| --------------------------- | --------------------------------- | -------------------------------------------------------- |
| **Nama & status perangkat** | Pojok kiri atas                   | Menampilkan nama device dan status konektivitas saat ini |
| **Pilih Sensor**            | Kiri atas (bawah nama device)     | Memilih sensor yang ingin ditampilkan di grafik          |
| **Filter rentang waktu**    | Kanan atas                        | Menentukan periode data yang ditampilkan                 |
| **Realtime toggle**         | Kanan atas (sebelah filter waktu) | Mengaktifkan mode pembaruan data otomatis                |
| **Filter tampilan sensor**  | Kanan atas (dropdown "Semua")     | Menyaring sensor yang ditampilkan di grafik              |
| **Tombol unduh**            | Kanan atas (ikon ↓)               | Mengunduh data sesuai filter yang aktif                  |
| **Grafik interaktif**       | Tengah                            | Visualisasi data semua sensor dalam satu grafik          |
| **Legend sensor**           | Bawah grafik                      | Menampilkan/menyembunyikan sensor tertentu di grafik     |
| **Tabel Data Pemantauan**   | Bawah grafik                      | Data sensor dalam format tabel per waktu pencatatan      |

***

## Grafik Interaktif

Grafik menampilkan semua sensor aktif dalam satu tampilan dengan sumbu Y yang dapat berbeda untuk setiap sensor.

### Interaksi pada Grafik

* **Hover** pada titik data untuk menampilkan tooltip berisi nilai semua sensor pada waktu tersebut
* **Klik legend** di bawah grafik untuk menyembunyikan atau menampilkan kembali sensor tertentu
* **Zoom** dengan menyeret area grafik untuk memperbesar rentang waktu tertentu

### Tipe Visualisasi

| Tipe             | Kegunaan                                                  |
| ---------------- | --------------------------------------------------------- |
| **Line (Garis)** | Data kontinu seperti suhu, kelembaban, kecepatan angin    |
| **Bar**          | Data akumulasi seperti curah hujan                        |
| **Arrow**        | Arah angin -> menampilkan panah sesuai derajat arah angin |

***

## Filter & Konfigurasi Data

<Tabs>
  <Tab title="Filter Data">
    <Steps>
      <Step title="Pilih pengelompokan data">
        Tentukan bagaimana data diagregasi:

        | Pilihan    | Data yang ditampilkan              |
        | ---------- | ---------------------------------- |
        | **All**    | Data mentah sesuai interval device |
        | **Jam**    | Setiap data per jam                |
        | **Hari**   | Ringkasan per hari                 |
        | **Minggu** | Ringkasan per minggu               |
        | **Bulan**  | Ringkasan per bulan                |
        | **Tahun**  | Ringkasan per tahun                |

        <Frame>
          <div>
            <img src="https://mintcdn.com/mertani/QKCSIJ_vjKyFoAyf/assets/dashboard-guides/detail-pemantauan/select-grouping-data.webp?fit=max&auto=format&n=QKCSIJ_vjKyFoAyf&q=85&s=c46498b53199fa4ff04c21f410fca310" alt="Pilihan pengelompokan data" noZoom={true} width="1920" height="1080" data-path="assets/dashboard-guides/detail-pemantauan/select-grouping-data.webp" />
          </div>
        </Frame>
      </Step>

      <Step title="Tentukan rentang waktu">
        Klik field tanggal di kanan atas untuk memilih periode data, lalu klik **"OK"**.

        Rentang waktu yang dipilih akan langsung memperbarui grafik dan tabel.

        <Frame>
          <div>
            <img src="https://mintcdn.com/mertani/QKCSIJ_vjKyFoAyf/assets/dashboard-guides/detail-pemantauan/date-range.webp?fit=max&auto=format&n=QKCSIJ_vjKyFoAyf&q=85&s=79f46d9b7109616248ec1d31d1c88568" alt="Pemilihan rentang tanggal" noZoom={true} width="1920" height="1080" data-path="assets/dashboard-guides/detail-pemantauan/date-range.webp" />
          </div>
        </Frame>
      </Step>

      <Step title="Saring sensor yang ditampilkan">
        Gunakan dropdown **"Semua"** di kanan atas untuk menampilkan hanya sensor tertentu, atau gunakan **legend** di bawah grafik untuk show/hide sensor secara individual.

        <Frame>
          <div>
            <img src="https://mintcdn.com/mertani/QKCSIJ_vjKyFoAyf/assets/dashboard-guides/detail-pemantauan/switch-device.webp?fit=max&auto=format&n=QKCSIJ_vjKyFoAyf&q=85&s=1aed60dec4867a485749a471846204fe" alt="Filter sensor" noZoom={true} width="1920" height="1080" data-path="assets/dashboard-guides/detail-pemantauan/switch-device.webp" />
          </div>
        </Frame>
      </Step>

      <Step title="Aktifkan mode Realtime (opsional)">
        Klik toggle **"Realtime"** di kanan atas untuk mengaktifkan pembaruan data otomatis sesuai interval pengiriman perangkat.

        Saat mode Realtime aktif, grafik dan tabel akan diperbarui secara otomatis tanpa perlu refresh halaman.

        <Frame>
          <div>
            <img src="https://mintcdn.com/mertani/QKCSIJ_vjKyFoAyf/assets/dashboard-guides/detail-pemantauan/realtime-interval.webp?fit=max&auto=format&n=QKCSIJ_vjKyFoAyf&q=85&s=13692712718eb5a96962410a4ffd3a54" alt="Toggle realtime" noZoom={true} width="1920" height="1080" data-path="assets/dashboard-guides/detail-pemantauan/realtime-interval.webp" />
          </div>
        </Frame>
      </Step>

      <Step title="Unduh data">
        Klik ikon **unduh (↓)** di pojok kanan atas untuk mengekspor data sesuai filter yang sedang aktif.

        Data akan diunduh dalam format file yang dapat dibuka di spreadsheet (Excel/Google Sheets).

        <Frame>
          <div>
            <img src="https://mintcdn.com/mertani/QKCSIJ_vjKyFoAyf/assets/dashboard-guides/detail-pemantauan/unduh-data.webp?fit=max&auto=format&n=QKCSIJ_vjKyFoAyf&q=85&s=38efb959906d2a15a7d85fc54262091b" alt="Tombol unduh data" noZoom={true} width="1920" height="1080" data-path="assets/dashboard-guides/detail-pemantauan/unduh-data.webp" />
          </div>
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Konfigurasi Grafik">
    Tampilan grafik dapat disesuaikan melalui ikon **pengaturan (⚙️)** di pojok kiri atas grafik.

    <Steps>
      <Step title="Buka pengaturan grafik">
        Klik ikon **⚙️** di sebelah kiri grafik untuk membuka panel konfigurasi.
      </Step>

      <Step title="Atur posisi sumbu Y">
        Tentukan apakah sumbu Y sensor ditampilkan di sisi **kiri** atau **kanan** grafik.

        Pengaturan ini berguna saat menampilkan banyak sensor dengan satuan berbeda agar grafik tidak terlalu padat di satu sisi.
      </Step>

      <Step title="Pilih tipe grafik">
        Pilih tipe visualisasi untuk setiap sensor:

        * **Line** -> untuk data kontinu (suhu, kelembaban, dll.)
        * **Bar** -> untuk data akumulasi (curah hujan, dll.)
        * **Arrow** -> khusus untuk arah angin
      </Step>

      <Step title="Sesuaikan warna sensor">
        Pilih warna yang berbeda untuk setiap sensor agar mudah dibedakan di grafik.
      </Step>

      <Step title="Simpan konfigurasi">
        Klik **"Simpan"** untuk menerapkan perubahan. Konfigurasi akan tersimpan dan berlaku saat Anda membuka halaman ini kembali.

        <Frame>
          <div>
            <video title="config chart" src="https://mintcdn.com/mertani/SociO-6B0sRV_6DO/assets/dashboard-guides/monitoring/custom-chart.webm?fit=max&auto=format&n=SociO-6B0sRV_6DO&q=85&s=13d361c0af7b9c3948f1f9d171a80ffd" controls autoPlay loop playsInline muted data-path="assets/dashboard-guides/monitoring/custom-chart.webm" />
          </div>
        </Frame>
      </Step>
    </Steps>
  </Tab>
</Tabs>

***

## Pengelompokan Data (Grouping)

Dashboard menyediakan **6 mode pengelompokan data** yang dapat dipilih pada filter: **All**, **Jam**, **Hari**, **Minggu**, **Bulan**, dan **Tahun**. Setiap mode menentukan bagaimana data mentah dari device diagregasikan sebelum ditampilkan pada grafik maupun tabel.

<Note>
  Seluruh contoh simulasi pada halaman ini menggunakan data mentah (raw) dengan **interval pengambilan 30 menit**, sehingga dalam 1 hari terdapat **48 titik data** (00:00, 00:30, 01:00, ... 23:30). Sistem grouping menggunakan **forward sum** untuk pengelompokan, sehingga setiap data pada awal jam dan 30 menit setelahnya dijumlahkan ke jam awal.
</Note>

### Hierarki Pengelompokan

```
All (raw, sesuai interval device)
  └─ Jam
       └─ Hari
            └─ Minggu
                 └─ Bulan
                      └─ Tahun
```

Setiap tabel hasil pengelompokan (Jam, Hari, Minggu, Bulan, Tahun) mendukung **drilldown** -> **klik baris induk** untuk melihat/menyembunyikan rincian data pada level di bawahnya.

***

## Contoh Data per Mode Grouping

<Tabs>
  <Tab title="All">
    ### Mode: All (Raw)

    Data mentah tanpa agregasi, setiap baris merepresentasikan satu pembacaan sensor sesuai interval device (30 menit). Mode ini tidak memiliki drilldown karena sudah berada di level data paling mentah.

    <DrilldownTable
      headers={["Waktu", "Value Sensor"]}
      rows={[
{ key: "r1", label: "2025-01-01 00:00:00", value: "24.8" },
{ key: "r2", label: "2025-01-01 00:30:00", value: "24.6" },
{ key: "r3", label: "2025-01-01 01:00:00", value: "24.5" },
{ key: "r4", label: "2025-01-01 01:30:00", value: "24.3" },
{ key: "r5", label: "2025-01-01 02:00:00", value: "24.2" },
{ key: "r6", label: "2025-01-01 02:30:00", value: "24.1" },
{ key: "r7", label: "2025-01-01 03:00:00", value: "24.0" },
{ key: "r8", label: "2025-01-01 03:30:00", value: "23.9" },
{ key: "r9", label: "2025-01-01 04:00:00", value: "23.8" },
{ key: "r10", label: "2025-01-01 04:30:00", value: "23.9" },
{ key: "r11", label: "2025-01-01 05:00:00", value: "24.1" },
{ key: "r12", label: "2025-01-01 05:30:00", value: "24.5" },
{ key: "r13", label: "2025-01-01 06:00:00", value: "25.0" },
{ key: "r14", label: "2025-01-01 06:30:00", value: "25.7" },
{ key: "r15", label: "...", value: "..." },
{ key: "r16", label: "2025-01-01 23:30:00", value: "24.6" },
]}
    />

    Total: **48 baris data** untuk rentang 1 hari penuh.
  </Tab>

  <Tab title="Jam">
    ### Mode: Per Jam

    Data mentah (interval 30 menit) dikelompokkan ke dalam **rentang per jam** menggunakan forward sum -> 2 titik data per jam dijumlahkan ke jam awal.

    **Klik baris induk** untuk melihat/menyembunyikan data mentah penyusunnya.

    <DrilldownTable
      headers={["Waktu", "Sum Value Sensor"]}
      rows={[
{ key: "jam1", label: "2025-01-01 00:00:00", value: "49.4", children: [
  { label: "2025-01-01 00:00:00", value: "24.8" },
  { label: "2025-01-01 00:30:00", value: "24.6" },
]},
{ key: "jam2", label: "2025-01-01 01:00:00", value: "48.8", children: [
  { label: "2025-01-01 01:00:00", value: "24.5" },
  { label: "2025-01-01 01:30:00", value: "24.3" },
]},
{ key: "jam3", label: "2025-01-01 02:00:00", value: "48.3", children: [
  { label: "2025-01-01 02:00:00", value: "24.2" },
  { label: "2025-01-01 02:30:00", value: "24.1" },
]},
{ key: "jam4", label: "2025-01-01 03:00:00", value: "47.9", children: [
  { label: "2025-01-01 03:00:00", value: "24.0" },
  { label: "2025-01-01 03:30:00", value: "23.9" },
]},
{ key: "jam5", label: "2025-01-01 04:00:00", value: "47.7", children: [
  { label: "2025-01-01 04:00:00", value: "23.8" },
  { label: "2025-01-01 04:30:00", value: "23.9" },
]},
{ key: "jam6", label: "2025-01-01 05:00:00", value: "48.6", children: [
  { label: "2025-01-01 05:00:00", value: "24.1" },
  { label: "2025-01-01 05:30:00", value: "24.5" },
]},
{ key: "jam7", label: "2025-01-01 06:00:00", value: "50.7", children: [
  { label: "2025-01-01 06:00:00", value: "25.0" },
  { label: "2025-01-01 06:30:00", value: "25.7" },
]},
{ key: "jam8", label: "2025-01-01 07:00:00", value: "53.8", children: [
  { label: "2025-01-01 07:00:00", value: "26.5" },
  { label: "2025-01-01 07:30:00", value: "27.3" },
]},
{ key: "jam9", label: "2025-01-01 08:00:00", value: "56.9", children: [
  { label: "2025-01-01 08:00:00", value: "28.1" },
  { label: "2025-01-01 08:30:00", value: "28.8" },
]},
{ key: "jam10", label: "2025-01-01 09:00:00", value: "59.5", children: [
  { label: "2025-01-01 09:00:00", value: "29.4" },
  { label: "2025-01-01 09:30:00", value: "30.1" },
]},
{ key: "jam11", label: "2025-01-01 10:00:00", value: "61.9", children: [
  { label: "2025-01-01 10:00:00", value: "30.7" },
  { label: "2025-01-01 10:30:00", value: "31.2" },
]},
{ key: "jam12", label: "2025-01-01 11:00:00", value: "63.5", children: [
  { label: "2025-01-01 11:00:00", value: "31.6" },
  { label: "2025-01-01 11:30:00", value: "31.9" },
]},
{ key: "jam13", label: "2025-01-01 12:00:00", value: "64.4", children: [
  { label: "2025-01-01 12:00:00", value: "32.1" },
  { label: "2025-01-01 12:30:00", value: "32.3" },
]},
{ key: "jam14", label: "2025-01-01 13:00:00", value: "63.8", children: [
  { label: "2025-01-01 13:00:00", value: "32.0" },
  { label: "2025-01-01 13:30:00", value: "31.8" },
]},
{ key: "jam15", label: "2025-01-01 14:00:00", value: "62.4", children: [
  { label: "2025-01-01 14:00:00", value: "31.4" },
  { label: "2025-01-01 14:30:00", value: "31.0" },
]},
{ key: "jam16", label: "2025-01-01 15:00:00", value: "60.5", children: [
  { label: "2025-01-01 15:00:00", value: "30.5" },
  { label: "2025-01-01 15:30:00", value: "30.0" },
]},
{ key: "jam17", label: "2025-01-01 16:00:00", value: "58.2", children: [
  { label: "2025-01-01 16:00:00", value: "29.4" },
  { label: "2025-01-01 16:30:00", value: "28.8" },
]},
{ key: "jam18", label: "2025-01-01 17:00:00", value: "55.7", children: [
  { label: "2025-01-01 17:00:00", value: "28.2" },
  { label: "2025-01-01 17:30:00", value: "27.5" },
]},
{ key: "jam19", label: "2025-01-01 18:00:00", value: "53.6", children: [
  { label: "2025-01-01 18:00:00", value: "27.0" },
  { label: "2025-01-01 18:30:00", value: "26.6" },
]},
{ key: "jam20", label: "2025-01-01 19:00:00", value: "52.1", children: [
  { label: "2025-01-01 19:00:00", value: "26.2" },
  { label: "2025-01-01 19:30:00", value: "25.9" },
]},
{ key: "jam21", label: "2025-01-01 20:00:00", value: "51.0", children: [
  { label: "2025-01-01 20:00:00", value: "25.6" },
  { label: "2025-01-01 20:30:00", value: "25.4" },
]},
{ key: "jam22", label: "2025-01-01 21:00:00", value: "50.2", children: [
  { label: "2025-01-01 21:00:00", value: "25.2" },
  { label: "2025-01-01 21:30:00", value: "25.0" },
]},
{ key: "jam23", label: "2025-01-01 22:00:00", value: "49.7", children: [
  { label: "2025-01-01 22:00:00", value: "24.9" },
  { label: "2025-01-01 22:30:00", value: "24.8" },
]},
{ key: "jam24", label: "2025-01-01 23:00:00", value: "49.3", children: [
  { label: "2025-01-01 23:00:00", value: "24.7" },
  { label: "2025-01-01 23:30:00", value: "24.6" },
]},
]}
    />
  </Tab>

  <Tab title="Hari">
    ### Mode: Per Hari

    Secara default, pengelompokan harian mengikuti kalender standar **00:00 – 23:59**. Namun, Anda juga dapat menentukan **rentang waktu custom** untuk pengelompokan harian.

    <Note>
      Jika Anda menentukan grouping harian dari pukul **07:00 hingga 06:59** keesokan harinya, maka tanggal grup ditentukan oleh **waktu mulai periode** (07:00). Misalnya, "2025-01-01" mencakup data dari 07:00 tanggal 1 Januari hingga 06:59 tanggal 2 Januari.
    </Note>

    <Note>
      Grouping harian hanya mendukung periode hingga 24 jam. Rentang yang melebihi 24 jam tidak dapat dihitung sebagai 1 hari.
    </Note>

    <Tabs>
      <Tab title="Default (00:00 – 23:59)">
        <DrilldownTable
          headers={["Waktu", "Value Sensor"]}
          rows={[
{ key: "hari1", label: "2025-01-01", value: "1,322.3", children: [
  { label: "2025-01-01 00:00", value: "49.4" },
  { label: "2025-01-01 01:00", value: "48.8" },
  { label: "2025-01-01 02:00", value: "48.3" },
  { label: "2025-01-01 03:00", value: "47.9" },
  { label: "2025-01-01 04:00", value: "47.7" },
  { label: "2025-01-01 05:00", value: "48.6" },
  { label: "2025-01-01 06:00", value: "50.7" },
  { label: "2025-01-01 07:00", value: "53.8" },
  { label: "2025-01-01 08:00", value: "56.9" },
  { label: "2025-01-01 09:00", value: "59.5" },
  { label: "2025-01-01 10:00", value: "61.9" },
  { label: "2025-01-01 11:00", value: "63.5" },
  { label: "2025-01-01 12:00", value: "64.4" },
  { label: "2025-01-01 13:00", value: "63.8" },
  { label: "2025-01-01 14:00", value: "62.4" },
  { label: "2025-01-01 15:00", value: "60.5" },
  { label: "2025-01-01 16:00", value: "58.2" },
  { label: "2025-01-01 17:00", value: "55.7" },
  { label: "2025-01-01 18:00", value: "53.6" },
  { label: "2025-01-01 19:00", value: "52.1" },
  { label: "2025-01-01 20:00", value: "51.0" },
  { label: "2025-01-01 21:00", value: "50.2" },
  { label: "2025-01-01 22:00", value: "49.7" },
  { label: "2025-01-01 23:00", value: "49.3" },
]},
{ key: "hari2", label: "2025-01-02", value: "1,328.5", children: [
  { label: "2025-01-02 00:00", value: "50.0" },
  { label: "2025-01-02 01:00", value: "49.6" },
  { label: "2025-01-02 02:00", value: "49.2" },
  { label: "2025-01-02 03:00", value: "48.9" },
  { label: "2025-01-02 04:00", value: "48.7" },
  { label: "2025-01-02 05:00", value: "49.3" },
  { label: "2025-01-02 06:00", value: "51.2" },
  { label: "2025-01-02 07:00", value: "54.0" },
  { label: "2025-01-02 08:00", value: "57.3" },
  { label: "2025-01-02 09:00", value: "60.2" },
  { label: "2025-01-02 10:00", value: "62.1" },
  { label: "2025-01-02 11:00", value: "63.8" },
  { label: "2025-01-02 12:00", value: "64.9" },
  { label: "2025-01-02 13:00", value: "64.1" },
  { label: "2025-01-02 14:00", value: "63.0" },
  { label: "2025-01-02 15:00", value: "61.4" },
  { label: "2025-01-02 16:00", value: "59.1" },
  { label: "2025-01-02 17:00", value: "56.8" },
  { label: "2025-01-02 18:00", value: "54.3" },
  { label: "2025-01-02 19:00", value: "52.9" },
  { label: "2025-01-02 20:00", value: "51.8" },
  { label: "2025-01-02 21:00", value: "50.9" },
  { label: "2025-01-02 22:00", value: "50.1" },
  { label: "2025-01-02 23:00", value: "49.9" },
]},
{ key: "hari3", label: "2025-01-03", value: "1,335.2", children: [
  { label: "2025-01-03 00:00", value: "50.3" },
  { label: "2025-01-03 01:00", value: "49.8" },
  { label: "2025-01-03 02:00", value: "49.5" },
  { label: "2025-01-03 03:00", value: "49.1" },
  { label: "2025-01-03 04:00", value: "48.9" },
  { label: "2025-01-03 05:00", value: "49.6" },
  { label: "2025-01-03 06:00", value: "51.8" },
  { label: "2025-01-03 07:00", value: "54.5" },
  { label: "2025-01-03 08:00", value: "57.8" },
  { label: "2025-01-03 09:00", value: "60.8" },
  { label: "2025-01-03 10:00", value: "62.5" },
  { label: "2025-01-03 11:00", value: "64.2" },
  { label: "2025-01-03 12:00", value: "65.3" },
  { label: "2025-01-03 13:00", value: "64.5" },
  { label: "2025-01-03 14:00", value: "63.4" },
  { label: "2025-01-03 15:00", value: "61.8" },
  { label: "2025-01-03 16:00", value: "59.5" },
  { label: "2025-01-03 17:00", value: "57.2" },
  { label: "2025-01-03 18:00", value: "54.8" },
  { label: "2025-01-03 19:00", value: "53.2" },
  { label: "2025-01-03 20:00", value: "52.1" },
  { label: "2025-01-03 21:00", value: "51.2" },
  { label: "2025-01-03 22:00", value: "50.4" },
  { label: "2025-01-03 23:00", value: "50.1" },
]},
{ key: "hari4", label: "2025-01-04", value: "1,318.7", children: [
  { label: "2025-01-04 00:00", value: "49.7" },
  { label: "2025-01-04 01:00", value: "49.2" },
  { label: "2025-01-04 02:00", value: "48.8" },
  { label: "2025-01-04 03:00", value: "48.5" },
  { label: "2025-01-04 04:00", value: "48.3" },
  { label: "2025-01-04 05:00", value: "49.0" },
  { label: "2025-01-04 06:00", value: "50.8" },
  { label: "2025-01-04 07:00", value: "53.5" },
  { label: "2025-01-04 08:00", value: "56.5" },
  { label: "2025-01-04 09:00", value: "59.2" },
  { label: "2025-01-04 10:00", value: "61.5" },
  { label: "2025-01-04 11:00", value: "63.2" },
  { label: "2025-01-04 12:00", value: "64.1" },
  { label: "2025-01-04 13:00", value: "63.5" },
  { label: "2025-01-04 14:00", value: "62.4" },
  { label: "2025-01-04 15:00", value: "60.8" },
  { label: "2025-01-04 16:00", value: "58.5" },
  { label: "2025-01-04 17:00", value: "56.2" },
  { label: "2025-01-04 18:00", value: "53.8" },
  { label: "2025-01-04 19:00", value: "52.5" },
  { label: "2025-01-04 20:00", value: "51.5" },
  { label: "2025-01-04 21:00", value: "50.8" },
  { label: "2025-01-04 22:00", value: "50.0" },
  { label: "2025-01-04 23:00", value: "49.5" },
]},
{ key: "hari5", label: "2025-01-05", value: "1,342.1", children: [
  { label: "2025-01-05 00:00", value: "50.8" },
  { label: "2025-01-05 01:00", value: "50.3" },
  { label: "2025-01-05 02:00", value: "49.9" },
  { label: "2025-01-05 03:00", value: "49.6" },
  { label: "2025-01-05 04:00", value: "49.4" },
  { label: "2025-01-05 05:00", value: "50.1" },
  { label: "2025-01-05 06:00", value: "52.0" },
  { label: "2025-01-05 07:00", value: "55.0" },
  { label: "2025-01-05 08:00", value: "58.2" },
  { label: "2025-01-05 09:00", value: "61.2" },
  { label: "2025-01-05 10:00", value: "63.0" },
  { label: "2025-01-05 11:00", value: "64.8" },
  { label: "2025-01-05 12:00", value: "65.8" },
  { label: "2025-01-05 13:00", value: "65.0" },
  { label: "2025-01-05 14:00", value: "63.9" },
  { label: "2025-01-05 15:00", value: "62.2" },
  { label: "2025-01-05 16:00", value: "59.8" },
  { label: "2025-01-05 17:00", value: "57.5" },
  { label: "2025-01-05 18:00", value: "55.1" },
  { label: "2025-01-05 19:00", value: "53.5" },
  { label: "2025-01-05 20:00", value: "52.4" },
  { label: "2025-01-05 21:00", value: "51.5" },
  { label: "2025-01-05 22:00", value: "50.7" },
  { label: "2025-01-05 23:00", value: "50.3" },
]},
]}
        />
      </Tab>

      <Tab title="Custom (07:00 – 06:59)">
        <DrilldownTable
          headers={["Waktu", "Value Sensor"]}
          rows={[
{ key: "hari1c", label: "2025-01-01", value: "1,305.6", children: [
  { label: "2025-01-01 07:00", value: "50.7" },
  { label: "2025-01-01 08:00", value: "56.9" },
  { label: "2025-01-01 09:00", value: "59.5" },
  { label: "2025-01-01 10:00", value: "61.9" },
  { label: "2025-01-01 11:00", value: "63.5" },
  { label: "2025-01-01 12:00", value: "64.4" },
  { label: "2025-01-01 13:00", value: "63.8" },
  { label: "2025-01-01 14:00", value: "62.4" },
  { label: "2025-01-01 15:00", value: "60.5" },
  { label: "2025-01-01 16:00", value: "58.2" },
  { label: "2025-01-01 17:00", value: "55.7" },
  { label: "2025-01-01 18:00", value: "53.6" },
  { label: "2025-01-01 19:00", value: "52.1" },
  { label: "2025-01-01 20:00", value: "51.0" },
  { label: "2025-01-01 21:00", value: "50.2" },
  { label: "2025-01-01 22:00", value: "49.7" },
  { label: "2025-01-01 23:00", value: "49.3" },
  { label: "2025-01-02 00:00", value: "48.8" },
  { label: "2025-01-02 01:00", value: "48.5" },
  { label: "2025-01-02 02:00", value: "48.1" },
  { label: "2025-01-02 03:00", value: "47.9" },
  { label: "2025-01-02 04:00", value: "47.6" },
  { label: "2025-01-02 05:00", value: "47.4" },
  { label: "2025-01-02 06:00", value: "49.6" },
]},
{ key: "hari2c", label: "2025-01-02", value: "1,312.4", children: [
  { label: "2025-01-02 07:00", value: "50.0" },
  { label: "2025-01-02 08:00", value: "57.3" },
  { label: "2025-01-02 09:00", value: "60.2" },
  { label: "2025-01-02 10:00", value: "62.1" },
  { label: "2025-01-02 11:00", value: "63.8" },
  { label: "2025-01-02 12:00", value: "64.9" },
  { label: "2025-01-02 13:00", value: "64.1" },
  { label: "2025-01-02 14:00", value: "63.0" },
  { label: "2025-01-02 15:00", value: "61.4" },
  { label: "2025-01-02 16:00", value: "59.1" },
  { label: "2025-01-02 17:00", value: "56.8" },
  { label: "2025-01-02 18:00", value: "54.3" },
  { label: "2025-01-02 19:00", value: "52.9" },
  { label: "2025-01-02 20:00", value: "51.8" },
  { label: "2025-01-02 21:00", value: "50.9" },
  { label: "2025-01-02 22:00", value: "50.1" },
  { label: "2025-01-02 23:00", value: "49.9" },
  { label: "2025-01-03 00:00", value: "49.5" },
  { label: "2025-01-03 01:00", value: "49.1" },
  { label: "2025-01-03 02:00", value: "48.8" },
  { label: "2025-01-03 03:00", value: "48.5" },
  { label: "2025-01-03 04:00", value: "48.2" },
  { label: "2025-01-03 05:00", value: "48.0" },
  { label: "2025-01-03 06:00", value: "50.3" },
]},
{ key: "hari3c", label: "2025-01-03", value: "1,318.9", children: [
  { label: "2025-01-03 07:00", value: "54.5" },
  { label: "2025-01-03 08:00", value: "57.8" },
  { label: "2025-01-03 09:00", value: "60.8" },
  { label: "2025-01-03 10:00", value: "62.5" },
  { label: "2025-01-03 11:00", value: "64.2" },
  { label: "2025-01-03 12:00", value: "65.3" },
  { label: "2025-01-03 13:00", value: "64.5" },
  { label: "2025-01-03 14:00", value: "63.4" },
  { label: "2025-01-03 15:00", value: "61.8" },
  { label: "2025-01-03 16:00", value: "59.5" },
  { label: "2025-01-03 17:00", value: "57.2" },
  { label: "2025-01-03 18:00", value: "54.8" },
  { label: "2025-01-03 19:00", value: "53.2" },
  { label: "2025-01-03 20:00", value: "52.1" },
  { label: "2025-01-03 21:00", value: "51.2" },
  { label: "2025-01-03 22:00", value: "50.4" },
  { label: "2025-01-03 23:00", value: "50.1" },
  { label: "2025-01-04 00:00", value: "49.7" },
  { label: "2025-01-04 01:00", value: "49.2" },
  { label: "2025-01-04 02:00", value: "48.8" },
  { label: "2025-01-04 03:00", value: "48.5" },
  { label: "2025-01-04 04:00", value: "48.3" },
  { label: "2025-01-04 05:00", value: "49.0" },
  { label: "2025-01-04 06:00", value: "50.8" },
]},
{ key: "hari4c", label: "2025-01-04", value: "1,305.8", children: [
  { label: "2025-01-04 07:00", value: "53.5" },
  { label: "2025-01-04 08:00", value: "56.5" },
  { label: "2025-01-04 09:00", value: "59.2" },
  { label: "2025-01-04 10:00", value: "61.5" },
  { label: "2025-01-04 11:00", value: "63.2" },
  { label: "2025-01-04 12:00", value: "64.1" },
  { label: "2025-01-04 13:00", value: "63.5" },
  { label: "2025-01-04 14:00", value: "62.4" },
  { label: "2025-01-04 15:00", value: "60.8" },
  { label: "2025-01-04 16:00", value: "58.5" },
  { label: "2025-01-04 17:00", value: "56.2" },
  { label: "2025-01-04 18:00", value: "53.8" },
  { label: "2025-01-04 19:00", value: "52.5" },
  { label: "2025-01-04 20:00", value: "51.5" },
  { label: "2025-01-04 21:00", value: "50.8" },
  { label: "2025-01-04 22:00", value: "50.0" },
  { label: "2025-01-04 23:00", value: "49.5" },
  { label: "2025-01-05 00:00", value: "49.1" },
  { label: "2025-01-05 01:00", value: "48.7" },
  { label: "2025-01-05 02:00", value: "48.4" },
  { label: "2025-01-05 03:00", value: "48.1" },
  { label: "2025-01-05 04:00", value: "47.9" },
  { label: "2025-01-05 05:00", value: "47.7" },
  { label: "2025-01-05 06:00", value: "50.0" },
]},
{ key: "hari5c", label: "2025-01-05", value: "1,329.4", children: [
  { label: "2025-01-05 07:00", value: "55.0" },
  { label: "2025-01-05 08:00", value: "58.2" },
  { label: "2025-01-05 09:00", value: "61.2" },
  { label: "2025-01-05 10:00", value: "63.0" },
  { label: "2025-01-05 11:00", value: "64.8" },
  { label: "2025-01-05 12:00", value: "65.8" },
  { label: "2025-01-05 13:00", value: "65.0" },
  { label: "2025-01-05 14:00", value: "63.9" },
  { label: "2025-01-05 15:00", value: "62.2" },
  { label: "2025-01-05 16:00", value: "59.8" },
  { label: "2025-01-05 17:00", value: "57.5" },
  { label: "2025-01-05 18:00", value: "55.1" },
  { label: "2025-01-05 19:00", value: "53.5" },
  { label: "2025-01-05 20:00", value: "52.4" },
  { label: "2025-01-05 21:00", value: "51.5" },
  { label: "2025-01-05 22:00", value: "50.7" },
  { label: "2025-01-05 23:00", value: "50.3" },
  { label: "2025-01-06 00:00", value: "49.8" },
  { label: "2025-01-06 01:00", value: "49.4" },
  { label: "2025-01-06 02:00", value: "49.0" },
  { label: "2025-01-06 03:00", value: "48.7" },
  { label: "2025-01-06 04:00", value: "48.5" },
  { label: "2025-01-06 05:00", value: "48.3" },
  { label: "2025-01-06 06:00", value: "50.5" },
]},
]}
        />
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Minggu">
    ### Mode: Per Minggu

    Data harian (hasil pengelompokan **Hari**) dikelompokkan lebih lanjut menjadi rentang **7 hari**. Titik awal minggu mengikuti **hari & jam awal** dari rentang tanggal yang dipilih (default umumnya dimulai dari hari pertama pada rentang yang dipilih, bukan selalu Senin).

    **Drilldown per minggu**, klik baris induk untuk melihat rincian per hari:

    <DrilldownTable
      headers={["Minggu", "Sum Value Sensor"]}
      rows={[
{ key: "minggu1", label: "Minggu 1 (1–7 Jan 2025)", value: "9.590", children: [
  { label: "1 Jan 2025 (Hari 1)", value: "1.370" },
  { label: "2 Jan 2025 (Hari 2)", value: "1.358" },
  { label: "3 Jan 2025 (Hari 3)", value: "1.385" },
  { label: "4 Jan 2025 (Hari 4)", value: "1.372" },
  { label: "5 Jan 2025 (Hari 5)", value: "1.365" },
  { label: "6 Jan 2025 (Hari 6)", value: "1.368" },
  { label: "7 Jan 2025 (Hari 7)", value: "1.372" },
]},
{ key: "minggu2", label: "Minggu 2 (8–14 Jan 2025)", value: "9.610", children: [
  { label: "8 Jan 2025 (Hari 8)", value: "1.375" },
  { label: "9 Jan 2025 (Hari 9)", value: "1.368" },
  { label: "10 Jan 2025 (Hari 10)", value: "1.380" },
  { label: "...", value: "..." },
]},
{ key: "minggu3", label: "Minggu 3 (15–21 Jan 2025)", value: "9.575", children: [
  { label: "15 Jan 2025 (Hari 15)", value: "1.362" },
  { label: "16 Jan 2025 (Hari 16)", value: "1.370" },
  { label: "...", value: "..." },
]},
]}
    />

    <Note>
      Jika jam awal rentang tanggal diubah (misalnya mulai 07:00), maka batas awal-akhir setiap minggu akan mengikuti offset tersebut, sama seperti perilaku pada pengelompokan **Hari**.
    </Note>
  </Tab>

  <Tab title="Bulan">
    ### Mode: Per Bulan

    Data dikelompokkan berdasarkan **bulan kalender** (mengacu pada tanggal, bukan jumlah hari tetap), sehingga jumlah hari per kelompok dapat berbeda (28–31 hari) tergantung bulan berjalan.

    **Drilldown per bulan**, klik baris induk untuk melihat rincian per minggu:

    <DrilldownTable
      headers={["Bulan", "Sum Value Sensor"]}
      rows={[
{ key: "bulan1", label: "Jan 2025", value: "42.450", children: [
  { label: "Minggu 1 (1–7 Jan)", value: "9.590" },
  { label: "Minggu 2 (8–14 Jan)", value: "9.610" },
  { label: "Minggu 3 (15–21 Jan)", value: "9.575" },
  { label: "Minggu 4 (22–28 Jan)", value: "9.620" },
  { label: "Minggu 5 (29–31 Jan)", value: "4.055" },
]},
{ key: "bulan2", label: "Feb 2025", value: "38.640", children: [
  { label: "Minggu 1 (1–7 Feb)", value: "9.640" },
  { label: "Minggu 2 (8–14 Feb)", value: "9.580" },
  { label: "Minggu 3 (15–21 Feb)", value: "9.610" },
  { label: "Minggu 4 (22–28 Feb)", value: "9.810" },
]},
{ key: "bulan3", label: "Mar 2025", value: "42.780", children: [
  { label: "Minggu 1 (1–7 Mar)", value: "9.680" },
  { label: "Minggu 2 (8–14 Mar)", value: "9.720" },
  { label: "...", value: "..." },
]},
]}
    />

    <Note>
      Sama seperti mode Hari dan Minggu, jika jam awal rentang tanggal diubah, batas awal-akhir tiap bulan akan menyesuaikan mengikuti offset jam tersebut (misal: 1 Jan 07:00 – 1 Feb 06:59).
    </Note>
  </Tab>

  <Tab title="Tahun">
    ### Mode: Per Tahun

    Level pengelompokan **paling ringkas**. Data dikelompokkan berdasarkan **tahun kalender**, hasil agregasi dari seluruh data bulanan di tahun tersebut.

    **Drilldown per tahun**, klik baris induk untuk melihat rincian per bulan:

    <DrilldownTable
      headers={["Tahun", "Sum Value Sensor"]}
      rows={[
{ key: "tahun2024", label: "2024", value: "498.200", children: [
  { label: "Jan 2024", value: "42.100" },
  { label: "Feb 2024", value: "38.900" },
  { label: "Mar 2024", value: "42.500" },
  { label: "Apr 2024", value: "41.200" },
  { label: "Mei 2024", value: "42.800" },
  { label: "Jun 2024", value: "41.500" },
  { label: "Jul 2024", value: "42.900" },
  { label: "Agst 2024", value: "42.300" },
  { label: "Sep 2024", value: "41.800" },
  { label: "Okt 2024", value: "42.600" },
  { label: "Nov 2024", value: "41.400" },
  { label: "Des 2024", value: "40.200" },
]},
{ key: "tahun2025", label: "2025", value: "123.870 *(berjalan)*", children: [
  { label: "Jan 2025", value: "42.450" },
  { label: "Feb 2025", value: "38.640" },
  { label: "Mar 2025", value: "42.780" },
]},
]}
    />
  </Tab>
</Tabs>

***

## Ringkasan Grouping Data

| Mode Grouping | Isi Baris Tabel                 | Drilldown Menampilkan                     |
| ------------- | ------------------------------- | ----------------------------------------- |
| **All**       | Data mentah per interval device | – (tidak ada, sudah level terkecil)       |
| **Jam**       | Agregat per jam                 | Data mentah (All) dalam jam tersebut      |
| **Hari**      | Agregat per hari                | Data per Jam dalam hari tersebut          |
| **Minggu**    | Agregat per minggu              | Data per Hari dalam minggu tersebut       |
| **Bulan**     | Agregat per bulan               | Data per Minggu/Hari dalam bulan tersebut |
| **Tahun**     | Agregat per tahun               | Data per Bulan dalam tahun tersebut       |

<Note>
  Nilai "Value (agregat)" pada seluruh contoh di atas dapat berupa **sum**, **average**, **min**, atau **max**, tergantung jenis parameter/sensor yang ditampilkan pada dashboard.
</Note>