> 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 dalam infrastruktur Anda dengan penyesuaian frontend React penuh. Pertahankan kesetaraan fitur sambil mengendalikan pencitraan merek dan desain

Dashboard Studio menyediakan opsi sumber terbuka (lisensi MPL-2.0) bagi tim teknis yang memerlukan kustomisasi front-end di luar konfigurasi standar. Modifikasi UI, integrasikan dengan aplikasi yang sudah ada, atau terapkan sistem desain kustom sambil mempertahankan kemampuan analitik penuh.

### Kasus penggunaan

Skenario umum ketika pendekatan sumber terbuka dapat berguna:

* Branding kustom dan integrasi sistem desain
* Alur kerja UI khusus yang spesifik untuk industri
* Analitik tersemat dalam aplikasi proprieter
* 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](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) dalam 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 front-end React lengkap, layanan back-end Node.js, file konfigurasi, dan dokumentasi lengkap. Klon repositori ini 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 kerja 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 manajemen sesi secara transparan. Lihat [App Connect](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) dalam 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 [Panduan Mulai Cepat](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 menyesuaikan

### Dokumentasi dalam repositori

Repositori ini menyertakan panduan lengkap untuk bekerja dengan basis kode:

| Dokumen                                                                                                    | Konten                                                      |
| ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| [**ARCHITECTURE.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) | Desain sistem, struktur komponen, aliran data               |
| [**DEVELOPMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEVELOPMENT.md)   | Penyiapan lokal, standar pemrograman, 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 menggunakan TypeScript secara menyeluruh untuk keamanan tipe dan antarmuka komponen yang jelas.

### Opsi penyesuaian

Implementasi sumber terbuka menyediakan akses penuh ke front-end untuk modifikasi:

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

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

**Editor dashboard**

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

{% column %}
**Visualisasi**

* Ganti komponen grafik yang ada dengan komponen kustom
* Tambahkan jenis visualisasi baru
* Modifikasi perilaku render grafik

**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 antarkomponen 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 dashboard (seret dan lepas, panel, baris) | ✓              | ✓       |
| Eksekusi SQL (keamanan, batas waktu, cache)      | ✓              | ✓       |
| Visualisasi (batang, pai, tabel, statistik)      | ✓              | ✓       |
| Pengorganisasian menu (bagian, pengurutan 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 secara bersamaan pada kedua model penerapan.

### Model dukungan dan Pemeliharaan

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

Pantau repositori untuk rilis yang berisi perbaikan bug, patch Keamanan, dan fitur. Uji penyesuaian 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.