> 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/fr/dashboard-studio/open-source-studio.md).

# Studio open source

Déployez Dashboard Studio dans votre infrastructure avec une personnalisation complète du frontend React. Conservez la parité fonctionnelle tout en maîtrisant l'image de marque et le design

Dashboard Studio offre une option open source (licence MPL-2.0) aux équipes techniques qui ont besoin de personnaliser le frontend au-delà de la configuration standard. Modifiez l'interface utilisateur, intégrez-la aux applications existantes ou implémentez des systèmes de conception personnalisés tout en conservant l'ensemble des capacités d'analyse.

### Cas d'utilisation

Scénarios courants dans lesquels une approche open source peut être utile :

* Personnalisation de la marque et intégration du système de conception
* Flux de travail d'interface utilisateur spécialisés pour un secteur spécifique
* Analyses intégrées dans des applications propriétaires
* Implémentations en marque blanche pour les partenaires

### Prérequis

| Composant                          | Exigence                                                         |
| ---------------------------------- | ---------------------------------------------------------------- |
| **Accès à IoT Query**              | Instance active avec des identifiants de base de données valides |
| **Authentification**               | Jeton JWT de la passerelle d'authentification Navixy             |
| **Environnement de développement** | Nœud.js 18+, npm, Git                                            |
| **Compétences techniques**         | React, TypeScript, PostgreSQL, développement web moderne         |

{% hint style="info" %}
Consultez [App Connect](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) dans notre documentation destinée aux développeurs pour obtenir des détails sur l'implémentation de l'authentification.
{% endhint %}

## Composants open source

L'implémentation open source de Dashboard Studio comprend trois composants principaux :

### Dépôt GitHub

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

Le dépôt contient l'application frontend React complète, les services backend Nœud.js, les fichiers de configuration et une documentation complète. Clonez le dépôt pour le développement local ou pour examiner l'architecture avant l'implémentation.

### Package npm

Distribution simplifiée pour l'intégration dans les projets JavaScript. Le package reflète la base de code GitHub avec un flux de travail d'installation npm standard. Consultez le dépôt [README](https://github.com/Navixy/navixy-iot-query-dashboard?tab=readme-ov-file#navixy-iot-query-dashboard) pour obtenir les instructions d'installation et les informations de gestion des versions.

### Passerelle d'authentification

Génération de jetons JWT via la passerelle d'authentification Navixy. Le backend gère les sessions de manière transparente. Consultez [App Connect](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) dans notre documentation destinée aux développeurs pour obtenir des détails sur l'implémentation.

## Prise en main

**Étapes de configuration :**

1. Examinez le dépôt [README](https://github.com/Navixy/navixy-iot-query-dashboard)
2. Assurez-vous de disposer d'un accès actif à IoT Query
3. Installez Nœud.js 18+ et npm
4. Suivez le guide du dépôt [Démarrage rapide](https://github.com/Navixy/navixy-iot-query-dashboard) pour le déploiement local
5. Examinez la [documentation sur l'architecture](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) avant toute personnalisation

### Documentation du dépôt

Le dépôt comprend des guides complets pour travailler avec la base de code :

| Document                                                                                                   | Contenu                                                                     |
| ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| [**ARCHITECTURE.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) | Conception du système, structure des composants, Flux de données            |
| [**DEVELOPMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEVELOPMENT.md)   | Configuration locale, normes de codage, tests, flux de travail              |
| [**API.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/API.md)                   | Points de terminaison backend, formats de requête/réponse, authentification |
| [**DEPLOYMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEPLOYMENT.md)     | Hébergement en production pour divers environnements                        |

Tous les fichiers de documentation se trouvent dans le dossier [`/docs`](https://github.com/Navixy/navixy-iot-query-dashboard/tree/main/docs) . La base de code utilise TypeScript partout afin d'assurer la sûreté des types et des interfaces de composants claires.

### Options de personnalisation

L'implémentation open source fournit un accès complet au frontend pour les modifications :

{% columns %}
{% column %}
**Interface utilisateur et conception**

* Bibliothèque de composants (couleurs, typographie, espacement, modèles d'interface utilisateur)
* Intégration d'un système de conception personnalisé
* Modifications du thème

**Éditeur de tableaux de bord**

* Algorithmes de mise en page personnalisés
* Méthodes alternatives d'agencement des panneaux
* Flux de travail simplifiés pour des groupes d'utilisateurs spécifiques
  {% endcolumn %}

{% column %}
**Visualisations**

* Remplacez les composants de graphiques existants par des composants personnalisés
* Ajoutez de nouveaux types de visualisation
* Modifiez le comportement de rendu des graphiques

**Intégration**

* Implémentation de l'authentification unique
* Navigation partagée avec les applications existantes
* Vues d'analyse intégrées
  {% endcolumn %}
  {% endcolumns %}

Examinez la [`ARCHITECTURE.md`](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) fichier du dépôt avant d'effectuer des modifications importantes afin de comprendre les relations entre les composants et les changements requis.

### Parité fonctionnelle avec la version standard

Dashboard Studio open source maintient une parité fonctionnelle complète avec la version hébergée par Navixy :

| Fonctionnalité                                                  | Open source | Standard |
| --------------------------------------------------------------- | ----------- | -------- |
| Éditeur de tableaux de bord (glisser-déposer, panneaux, lignes) | ✓           | ✓        |
| Exécution SQL (Sécurité, délais d'expiration, mise en cache)    | ✓           | ✓        |
| Visualisations (barres, secteurs, tableau, statistique)         | ✓           | ✓        |
| Organisation des menus (sections, réorganisation)               | ✓           | ✓        |
| Mises à jour et nouvelles fonctionnalités                       | ✓           | ✓        |

Le dépôt reçoit des mises à jour régulières alignées sur les versions hébergées. Les nouveaux types de visualisation, les capacités de l'éditeur et les améliorations de performances apparaissent simultanément dans les deux modèles de déploiement.

### Modèle de support et d'Entretien

| Responsabilité                               | Votre équipe | Navixy |
| -------------------------------------------- | ------------ | ------ |
| Mises à jour principales de Dashboard Studio |              | ✓      |
| Correctifs de Sécurité                       |              | ✓      |
| Compatibilité avec l'API IoT Query           |              | ✓      |
| Mises à jour de la documentation             |              | ✓      |
| Entretien du code personnalisé               | ✓            |        |
| Infrastructure de déploiement                | ✓            |        |
| Synchronisation avec la branche amont        | ✓            |        |
| Tests après les mises à jour                 | ✓            |        |

Surveillez le dépôt afin d'identifier les versions contenant des correctifs de bogues, des correctifs de Sécurité et des fonctionnalités. Testez vos personnalisations après les mises à jour avant de les déployer en production.

{% hint style="info" %}

#### Support et assistance

Pour obtenir un support technique et une assistance concernant IoT Query, contactez notre équipe de support à l'adresse <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/fr/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.