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

# Estúdio de código aberto

Implante o Dashboard Studio na sua infraestrutura com personalização completa do frontend em React. Mantenha a paridade de recursos enquanto controla a marca e o design

Dashboard Studio oferece uma opção de código aberto (licença MPL-2.0) para equipes técnicas que precisam de personalização de frontend além da configuração padrão. Modifique a interface do usuário, integre com aplicações existentes ou implemente sistemas de design personalizados, mantendo todos os recursos analíticos.

### Casos de uso

Cenários comuns em que a abordagem de código aberto pode ser útil:

* Branding personalizado e integração de sistema de design
* Fluxos de trabalho de interface especializados por setor
* Analytics incorporados em aplicações proprietárias
* Implementações de marca branca para parceiros

### Pré-requisitos

| Componente                      | Requisito                                                  |
| ------------------------------- | ---------------------------------------------------------- |
| **IoT Query**                   | Instância ativa com credenciais válidas do banco de dados  |
| **Autenticação**                | Token JWT do Navixy Authentication Gateway                 |
| **Ambiente de desenvolvimento** | Nó.js 18+, npm, Git                                        |
| **Conhecimentos técnicos**      | React, TypeScript, PostgreSQL, desenvolvimento web moderno |

{% hint style="info" %}
Veja [App Connect](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) na nossa documentação para desenvolvedores para detalhes de implementação da autenticação.
{% endhint %}

## Componentes de código aberto

A implementação de código aberto do Dashboard Studio consiste em três componentes principais:

### Repositório do GitHub

**Localização:** <https://github.com/Navixy/navixy-iot-query-dashboard>

O repositório contém a aplicação completa de frontend em React, os serviços de backend em Nó.js, os arquivos de configuração e a documentação completa. Faça clone do repositório para desenvolvimento local ou para revisar a arquitetura antes da implementação.

### Pacote npm

Distribuição simplificada para integração em projetos JavaScript. O pacote espelha a base de código do GitHub com o fluxo padrão de instalação do npm. Veja o repositório [README](https://github.com/Navixy/navixy-iot-query-dashboard?tab=readme-ov-file#navixy-iot-query-dashboard) para instruções de instalação e versionamento.

### Gateway de autenticação

Geração de token JWT por meio do gateway de autenticação da Navixy. O backend gerencia as sessões de forma transparente. Veja [App Connect](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) na nossa documentação para desenvolvedores para detalhes de implementação.

## Primeiros passos

**Etapas de configuração:**

1. Revise o repositório [README](https://github.com/Navixy/navixy-iot-query-dashboard)
2. Certifique-se de que você tenha acesso ativo ao IoT Query
3. Instale Nó.js 18+ e npm
4. Siga o [guia de Início rápido](https://github.com/Navixy/navixy-iot-query-dashboard) para implantação local
5. Revise a [documentação de arquitetura](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) antes de personalizar

### Documentação no repositório

O repositório inclui guias abrangentes para trabalhar com a base de código:

| Documento                                                                                                  | Conteúdo                                                            |
| ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| [**ARCHITECTURE.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) | Design do sistema, estrutura de componentes, fluxo de dados         |
| [**DEVELOPMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEVELOPMENT.md)   | Configuração local, padrões de código, testes, fluxos de trabalho   |
| [**API.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/API.md)                   | Endpoints de backend, formatos de requisição/resposta, autenticação |
| [**DEPLOYMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEPLOYMENT.md)     | Hospedagem em produção para vários ambientes                        |

Todos os arquivos de documentação estão localizados na [`/docs`](https://github.com/Navixy/navixy-iot-query-dashboard/tree/main/docs) pasta do repositório. A base de código usa TypeScript em toda a sua extensão para segurança de tipos e interfaces de componentes claras.

### Opções de personalização

A implementação de código aberto oferece acesso completo ao frontend para modificações:

{% columns %}
{% column %}
**Interface e design**

* Biblioteca de componentes (cores, tipografia, espaçamento, padrões de interface do usuário)
* Integração com sistema de design personalizado
* Modificações de tema

**Editor de painel**

* Algoritmos de layout personalizados
* Métodos alternativos de organização de painéis
* Fluxos de trabalho simplificados para grupos específicos de usuários
  {% endcolumn %}

{% column %}
**Visualizações**

* Substitua os componentes de gráfico existentes por personalizados
* Adicione novos tipos de visualização
* Modifique o comportamento de renderização dos gráficos

**Integração**

* Implementação de logon único
* Navegação compartilhada com aplicativos existentes
* Visualizações analíticas incorporadas
  {% endcolumn %}
  {% endcolumns %}

Revise a [`ARCHITECTURE.md`](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) arquivo no repositório antes de modificações significativas para entender as relações entre componentes e as mudanças necessárias.

### Paridade de recursos com a versão padrão

O Dashboard Studio de código aberto mantém paridade completa de recursos com a versão hospedada pela Navixy:

| Recurso                                               | Código aberto | Padrão |
| ----------------------------------------------------- | ------------- | ------ |
| Editor de painel (arrastar e soltar, painéis, linhas) | ✓             | ✓      |
| Execução de SQL (Segurança, tempos limite, cache)     | ✓             | ✓      |
| Visualizações (barra, pizza, tabela, indicador)       | ✓             | ✓      |
| Organização do menu (seções, reordenação)             | ✓             | ✓      |
| Atualizações e novos recursos                         | ✓             | ✓      |

O repositório recebe atualizações regulares alinhadas às versões hospedadas. Novos tipos de visualização, recursos do editor e melhorias de desempenho aparecem em ambos os modelos de implantação simultaneamente.

### Modelo de suporte e Manutenção

| Responsabilidade                            | Sua equipe | Navixy |
| ------------------------------------------- | ---------- | ------ |
| Atualizações principais do Dashboard Studio |            | ✓      |
| Correções de Segurança                      |            | ✓      |
| Compatibilidade com a API do IoT Query      |            | ✓      |
| Atualizações da documentação                |            | ✓      |
| Manutenção de código personalizado          | ✓          |        |
| Infraestrutura de implantação               | ✓          |        |
| Sincronização com o upstream                | ✓          |        |
| Testes após atualizações                    | ✓          |        |

Monitore o repositório em busca de releases que contenham correções de bugs, patches de Segurança e recursos. Teste suas personalizações após as atualizações antes de implantá-las em produção.

{% hint style="info" %}

#### Suporte e assistência

Para suporte técnico e assistência com IoT Query, entre em contato com nossa equipe de suporte em <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/pt-br/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.