> For the complete documentation index, see [llms.txt](https://wedocs.gitbook.io/wedocs-5.1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wedocs.gitbook.io/wedocs-5.1/wedocs-5.0/cliente-desktop/criacao-e-edicao-de-dashboards/componente-python.md).

# Componente Python

Weknow Client Desktop –  Criação e Edição de Dashboards - Componente Python

Na aba Dashboard existe a opção de componente Python.

<figure><img src="https://3141998830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3rfrVQUzWJmlMPOo1fW7%2Fuploads%2FCkE7I4ZK0WB2sYzQiQ11%2Fimage.png?alt=media&amp;token=2704d4fe-662e-41d1-93b8-7e1bbdaecec2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Caso o componente não esteja habilitado, acesse *Administração > Acesso ao Menu Principal*, localize o componente Python e conceda permissão aos usuários desejados.
{% endhint %}

### 📌 Como criar um componente visual com Python

Você pode criar um componente visual escrevendo um script Python que **gera uma imagem em formato SVG** para ser exibida na tela.

#### 1️⃣ Regras e convenções obrigatórias

1. **Resultado final**
   * Seu script **deve terminar** atribuindo o conteúdo SVG a uma variável chamada `result`.
   * Exemplo:

     ```python
     result = svg.getvalue()
     ```
2. **Formato da imagem**
   * O valor de `result` **deve ser** uma imagem **SVG** (Scalable Vector Graphics).
3. **Dados disponíveis no script**
   * `df_internalvalues`: dados originais retornados pelo metadado.
   * `df_displayvalues`: dados formatados para exibição (se não houver formatação, serão iguais ao `df_internalvalues`).
   * Ambas são **DataFrames** do Pandas.
4. **Tamanho da área de exibição**
   * `height` e `width`: altura e largura em **pixels** do espaço disponível para o gráfico.
   * Algumas bibliotecas (como o Matplotlib) usam **polegadas**, então você precisa converter pixels para polegadas:

     ```python
     fig_height = height / rcParams['figure.dpi']
     fig_width = width / rcParams['figure.dpi']
     ```

***

#### 2️⃣ Exemplo prático – Gráfico de linhas com Matplotlib

Neste exemplo, o metadado retorna duas colunas:

* `product_category_name`: nomes das categorias de produtos.
* `product_name_cnt`: quantidade de produtos em cada categoria.

O objetivo é exibir um gráfico de linha mostrando essa relação.

```python
# 📚 Importa bibliotecas necessárias
from matplotlib import rcParams
from matplotlib.figure import Figure
from matplotlib.backends.backend_svg import FigureCanvasSVG
from io import StringIO

# 🎯 Passo 1 – Converter pixels para polegadas
fig_height = height / rcParams['figure.dpi']
fig_width = width / rcParams['figure.dpi']

# 🎯 Passo 2 – Criar figura e "canvas" para SVG
fig = Figure(figsize=(fig_width, fig_height))
canvas = FigureCanvasSVG(fig)

# 🎯 Passo 3 – Adicionar e plotar os dados
ax = fig.add_subplot()
ax.plot(
    df_displayvalues['product_category_name'],  # Eixo X (formatado)
    df_internalvalues['product_name_cnt']       # Eixo Y (valor original)
)

# 🎯 Passo 4 – Exportar para SVG
svg = StringIO()
canvas.print_svg(svg)

# 🎯 Passo 5 – Retornar o SVG para o sistema
result = svg.getvalue()
```

***

#### 3️⃣ Resumo do fluxo

1. **Receba os dados** do metadado (`df_internalvalues` e `df_displayvalues`).
2. **Ajuste o tamanho** da imagem usando `height` e `width`.
3. **Crie e personalize** o gráfico usando a biblioteca de sua escolha (ex.: Matplotlib, Plotly, Seaborn).
4. **Exporte** o gráfico para SVG (em memória).
5. **Atribua** o SVG à variável `result`.

Na criação ou edição do componente, também é possível instalar novas bibliotecas.

<figure><img src="https://3141998830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3rfrVQUzWJmlMPOo1fW7%2Fuploads%2FlZiWreD4MhjSVaMzqCFs%2Fimage.png?alt=media&amp;token=15a66680-2824-4b4e-9f48-2419c47664b7" alt=""><figcaption></figcaption></figure>

Abaixo consta um exemplo de script Python criado utilizando o [metadado gerado no release](https://wedocs.gitbook.io/wedocs-5.0/release-notes/release-notes-5.0#criacao-de-metadado-via-script-python).

```python
from matplotlib import rcParams
from matplotlib.figure import Figure
from matplotlib.backends.backend_svg import FigureCanvasSVG
from io import StringIO

# --- Busca o índice do hospital com maior taxa de ocupação ---
idx = df_internalvalues['ocupacao_%'].idxmax()

# --- Recupera dados formatados (display) ---
hospital = df_displayvalues.loc[idx, 'hospital']
cidade = df_displayvalues.loc[idx, 'cidade']
tipo = df_displayvalues.loc[idx, 'tipo']

# --- Recupera dados originais (internal) ---
ocupacao = df_internalvalues.loc[idx, 'ocupacao_%']
leitos = df_internalvalues.loc[idx, 'leitos']
pacientes = df_internalvalues.loc[idx, 'pacientes_atendidos']
avaliacao = df_internalvalues.loc[idx, 'avaliacao']

# --- Define tamanho da figura em polegadas ---
fig_height = height / rcParams['figure.dpi']
fig_width = width / rcParams['figure.dpi']

# --- Cria figura e canvas ---
fig = Figure(figsize=(fig_width, fig_height))
canvas = FigureCanvasSVG(fig)
ax = fig.add_subplot()
ax.axis('off')  # Remove eixos
fig.patch.set_facecolor('white')

# --- Fundo colorido para destaque ---
ax.fill_between([0, 1], 0, 1, color='#f0f4f8')

# --- Título e informações ---
ax.text(0.05, 0.85, "Hospital com Maior Ocupação", fontsize=16, weight='bold', color='#2c3e50')
ax.text(0.05, 0.75, hospital, fontsize=14, weight='bold', color='#34495e')
ax.text(0.05, 0.70, f"Cidade: {cidade} | Tipo: {tipo}", fontsize=11, color='#7f8c8d')

# --- Indicadores principais ---
ax.text(0.05, 0.60, f"Leitos: {leitos}", fontsize=13, color='#2980b9')
ax.text(0.05, 0.53, f"Pacientes Atendidos: {pacientes:,}", fontsize=13, color='#27ae60')
ax.text(0.05, 0.46, f"Avaliação: {avaliacao:.2f} / 5", fontsize=13, color='#f39c12')
ax.text(0.05, 0.39, f"Ocupação: {ocupacao:.1f} %", fontsize=13, color='#c0392b')

# --- Fonte dos dados ---
ax.text(0.05, 0.10, "Fonte: Dados simulados do metadado", fontsize=8, color='gray')

# --- Exporta para SVG ---
svg = StringIO()
canvas.print_svg(svg)
result = svg.getvalue()

```

***

#### Resumo do que o script faz:

* Procura o hospital com a maior ocupação (%).
* Busca informações desse hospital para mostrar: nome, cidade, tipo, leitos, pacientes atendidos, avaliação e taxa de ocupação.
* Cria uma imagem gráfica limpa, sem eixos, com fundo claro.
* Adiciona textos organizados para mostrar as informações de forma visualmente agradável.
* Gera essa imagem no formato SVG e a disponibiliza para exibição no sistema.

<div align="left"><figure><img src="https://3141998830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3rfrVQUzWJmlMPOo1fW7%2Fuploads%2FuRuZP4xPTaJnGxSPEgfg%2Fimage.png?alt=media&amp;token=4e235186-e682-4626-b518-3178198ed8af" alt=""><figcaption></figcaption></figure></div>

{% hint style="danger" %} <mark style="color:red;">**IMPORTANTE**</mark>**:** Os campos utilizados no Script Python devem ser previamente configurados na seção 'Campos' para que o script possa ser executado corretamente.
{% endhint %}