> For the complete documentation index, see [llms.txt](https://navixy.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://navixy.com/docs/analytics/id/dashboard-studio/open-source-studio.md).

# Studio sumber terbuka

Terapkan Dashboard Studio di infrastruktur Anda dengan kustomisasi penuh frontend React. Pertahankan kesetaraan fitur sambil mengendalikan branding dan desain

Dashboard Studio menyediakan opsi sumber terbuka (lisensi MPL-2.0) bagi tim teknis yang memerlukan kustomisasi frontend melampaui konfigurasi standar. Ubah UI, integrasikan dengan aplikasi yang sudah ada, atau terapkan sistem desain khusus sambil tetap mempertahankan kemampuan analitik penuh.

### Kasus penggunaan

Skenario umum ketika pendekatan sumber terbuka dapat berguna:

* Integrasi branding khusus dan sistem desain
* Alur kerja UI khusus untuk industri tertentu
* Analitik tersemat dalam aplikasi berpemilik
* Implementasi white-label untuk mitra

### Prasyarat

| Komponen                    | Persyaratan                                            |
| --------------------------- | ------------------------------------------------------ |
| **Akses IoT Query**         | Instans aktif dengan kredensial basis data yang valid  |
| **Autentikasi**             | Token JWT dari Gateway Autentikasi Navixy              |
| **Lingkungan pengembangan** | Node.js 18+, npm, Git                                  |
| **Keterampilan teknis**     | React, TypeScript, PostgreSQL, pengembangan web modern |

{% hint style="info" %}
Lihat [App Connect Navixy](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) di dokumentasi pengembang kami untuk detail implementasi autentikasi.
{% endhint %}

## Komponen sumber terbuka

Implementasi sumber terbuka Dashboard Studio terdiri dari tiga komponen utama:

### Repositori GitHub

**Lokasi:** <https://github.com/Navixy/navixy-iot-query-dashboard>

Repositori ini berisi aplikasi frontend React lengkap, layanan backend Node.js, file konfigurasi, dan dokumentasi lengkap. Klon repositori untuk pengembangan lokal atau untuk meninjau arsitektur sebelum implementasi.

### Paket npm

Distribusi yang disederhanakan untuk integrasi proyek JavaScript. Paket ini mencerminkan basis kode GitHub dengan alur instalasi npm standar. Lihat repositori [README](https://github.com/Navixy/navixy-iot-query-dashboard?tab=readme-ov-file#navixy-iot-query-dashboard) untuk petunjuk instalasi dan penomoran versi.

### Gateway autentikasi

Pembuatan token JWT melalui gateway autentikasi Navixy. Backend menangani pengelolaan sesi secara transparan. Lihat [App Connect Navixy](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) di dokumentasi pengembang kami untuk detail implementasi.

## Memulai

**Langkah penyiapan:**

1. Tinjau repositori [README](https://github.com/Navixy/navixy-iot-query-dashboard)
2. Pastikan Anda memiliki akses IoT Query yang aktif
3. Instal Node.js 18+ dan npm
4. Ikuti repositori [Panduan Quick Start](https://github.com/Navixy/navixy-iot-query-dashboard) untuk penerapan lokal
5. Tinjau [dokumentasi arsitektur](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) sebelum melakukan kustomisasi

### Dokumentasi dalam repositori

Repositori ini mencakup panduan lengkap untuk bekerja dengan basis kode:

| Dokumen                                                                                                    | Konten                                                      |
| ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| [**ARCHITECTURE.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) | Perancangan sistem, struktur komponen, aliran data          |
| [**DEVELOPMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEVELOPMENT.md)   | Penyiapan lokal, standar pengodean, pengujian, alur kerja   |
| [**API.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/API.md)                   | Titik akhir backend, format permintaan/respons, autentikasi |
| [**DEPLOYMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEPLOYMENT.md)     | Hosting produksi untuk berbagai lingkungan                  |

Semua file dokumentasi berada di folder [`/docs`](https://github.com/Navixy/navixy-iot-query-dashboard/tree/main/docs) repositori. Basis kode ini menggunakan TypeScript secara menyeluruh untuk keamanan tipe dan antarmuka komponen yang jelas.

### Opsi kustomisasi

Implementasi sumber terbuka menyediakan akses frontend penuh untuk modifikasi:

{% columns %}
{% column %}
**UI dan desain**

* Pustaka komponen (warna, tipografi, spasi, pola UI)
* Integrasi sistem desain khusus
* Modifikasi tema

**Editor dasbor**

* Algoritma tata letak khusus
* Metode pengaturan panel alternatif
* Alur kerja yang disederhanakan untuk kelompok pengguna tertentu
  {% endcolumn %}

{% column %}
**Visualisasi**

* Ganti komponen bagan yang ada dengan komponen khusus
* Tambahkan jenis visualisasi baru
* Ubah perilaku rendering bagan

**Integrasi**

* Implementasi masuk tunggal
* Navigasi bersama dengan aplikasi yang sudah ada
* Tampilan analitik tersemat
  {% endcolumn %}
  {% endcolumns %}

Tinjau [`ARCHITECTURE.md`](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) berkas di repositori sebelum modifikasi besar untuk memahami hubungan komponen dan perubahan yang diperlukan.

### Kesetaraan fitur dengan versi standar

Dashboard Studio sumber terbuka mempertahankan kesetaraan fitur penuh dengan versi yang dihosting Navixy:

| Fitur                                          | Sumber terbuka | Standar |
| ---------------------------------------------- | -------------- | ------- |
| Editor dasbor (seret dan lepas, panel, baris)  | ✓              | ✓       |
| Eksekusi SQL (Keamanan, batas waktu, cache)    | ✓              | ✓       |
| Visualisasi (batang, pai, tabel, statistik)    | ✓              | ✓       |
| Pengorganisasian menu (bagian, penataan ulang) | ✓              | ✓       |
| Pembaruan dan fitur baru                       | ✓              | ✓       |

Repositori menerima pembaruan rutin yang selaras dengan rilis versi yang dihosting. Jenis visualisasi baru, kemampuan editor, dan peningkatan performa muncul di kedua model penerapan secara bersamaan.

### Model dukungan dan pemeliharaan

| Tanggung jawab                  | Tim Anda | Navixy |
| ------------------------------- | -------- | ------ |
| Pembaruan inti Dashboard Studio |          | ✓      |
| Patch Keamanan                  |          | ✓      |
| Kompatibilitas API IoT Query    |          | ✓      |
| Pembaruan dokumentasi           |          | ✓      |
| Pemeliharaan kode khusus        | ✓        |        |
| Infrastruktur penerapan         | ✓        |        |
| Sinkronisasi dengan upstream    | ✓        |        |
| Pengujian setelah pembaruan     | ✓        |        |

Pantau repositori untuk rilis yang berisi perbaikan bug, patch Keamanan, dan fitur. Uji kustomisasi Anda setelah pembaruan sebelum menerapkannya ke produksi.

{% hint style="info" %}

#### Dukungan dan bantuan

Untuk dukungan teknis dan bantuan dengan IoT Query, hubungi tim dukungan kami di <iotquery@navixy.com>.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://navixy.com/docs/analytics/id/dashboard-studio/open-source-studio.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.