Skip to content

Commit 98a22c9

Browse files
Genovese-FelipeGenovese-Felipe
authored
Commit sem arquivo grande para melhorar performance
1 parent 9c06b62 commit 98a22c9

File tree

9 files changed

+1749
-196
lines changed

9 files changed

+1749
-196
lines changed

‎COMO_EXECUTAR.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# 🚀 INSTRUÇÕES PARA EXECUTAR O APLICATIVO
2+
3+
## ✅ Status Atual
4+
- ✅ Ambiente Python configurado em: `/workspaces/Py_Vy_000/.venv/bin/python`
5+
- ✅ Dependências instaladas: dash, plotly, pandas, numpy
6+
- ✅ Código verificado e sem erros de sintaxe
7+
- ✅ Aplicativo melhorado criado seguindo os guias Plotly
8+
9+
## 🎯 Como Executar
10+
11+
### Opção 1: Aplicativo Completo (Recomendado)
12+
```bash
13+
cd /workspaces/Py_Vy_000
14+
/workspaces/Py_Vy_000/.venv/bin/python sunburst_cost_explorer_app.py
15+
```
16+
17+
### Opção 2: Versão Simplificada (Para Teste)
18+
```bash
19+
cd /workspaces/Py_Vy_000
20+
/workspaces/Py_Vy_000/.venv/bin/python run_app.py
21+
```
22+
23+
### Opção 3: Script Automatizado
24+
```bash
25+
cd /workspaces/Py_Vy_000
26+
./start_app.sh
27+
```
28+
29+
## 🌐 Acesso ao Aplicativo
30+
Após executar qualquer uma das opções acima:
31+
1. Aguarde a mensagem: "Running on http://0.0.0.0:8050"
32+
2. Acesse: **http://localhost:8050**
33+
3. Ou use o Simple Browser do VS Code
34+
35+
## 🛠️ Troubleshooting
36+
37+
### Se não abrir:
38+
1. Verifique se a porta 8050 está livre:
39+
```bash
40+
netstat -an | grep 8050
41+
```
42+
43+
2. Mate processos anteriores:
44+
```bash
45+
pkill -f python
46+
```
47+
48+
3. Tente outra porta:
49+
- Edite o arquivo e mude `port=8050` para `port=8051`
50+
51+
### Logs de Debug:
52+
- O aplicativo roda em modo debug
53+
- Erros aparecerão no terminal
54+
- Mudanças no código são recarregadas automaticamente
55+
56+
## 📊 Funcionalidades Implementadas
57+
58+
### ✅ Melhorias Baseadas nos Guias Plotly:
59+
60+
1. **Sunburst Interativo**
61+
- Hierarquia de 5 níveis (Pillar → Area → Service → Task → Sub-task)
62+
- Hover personalizado com informações detalhadas
63+
- Controle de profundidade via slider
64+
65+
2. **Gráficos Comparativos**
66+
- Barras agrupadas (Custo Real vs Orçamento)
67+
- Treemap com codificação de cor
68+
- Tabela detalhada com filtros
69+
70+
3. **Interface Profissional**
71+
- Cards de métricas KPI
72+
- Sistema de abas navegável
73+
- Filtros dinâmicos por pilar
74+
- Design responsivo
75+
76+
4. **Customizações Avançadas**
77+
- Paleta de cores corporativa
78+
- Typography consistente (Arial, sans-serif)
79+
- Formatação monetária adequada
80+
- Estados visuais para status orçamentário
81+
82+
## 🎨 Características Visuais
83+
84+
- **Cores por Status**: Verde (Under Budget), Vermelho (Over Budget), Azul (On Budget)
85+
- **Hierarchy Colors**: Azul (Design), Laranja (Management), Verde (Construction), Vermelho (Finishing)
86+
- **Layout**: Grid responsivo com shadows e bordas arredondadas
87+
- **Interatividade**: Callbacks otimizados para performance
88+
89+
## 📈 Dados de Exemplo
90+
91+
O aplicativo inclui dados realistas de construção residencial:
92+
- **Project Design**: $315,000 (Arquitetura, Engenharia, Interior)
93+
- **Management**: $405,000 (Administração, Logística, Financeiro)
94+
- **Construction**: $2,005,000 (Fundação, Estrutura, MEP, Acabamentos)
95+
- **Finishing & Landscaping**: $250,000 (Móveis, Paisagismo)
96+
97+
**Total do Projeto**: ~$3,000,000
98+
99+
## 🚀 Próximos Passos
100+
101+
1. Execute uma das opções acima
102+
2. Aguarde a inicialização (5-10 segundos)
103+
3. Acesse http://localhost:8050
104+
4. Explore as diferentes abas e filtros
105+
5. Teste a interatividade dos gráficos
106+
107+
---
108+
**Status**: ✅ Pronto para execução
109+
**Versão**: 2.0 Advanced (Baseado nos guias Plotly XML)

‎RELATORIO_MELHORIAS.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# Relatório de Melhorias Implementadas - Sunburst Cost Explorer
2+
3+
## Análise dos Guias Plotly Aplicada
4+
5+
Este aplicativo foi completamente reformulado seguindo as melhores práticas extraídas dos três guias XML de Plotly:
6+
7+
### 1. **Estrutura Pedagógica Avançada** (advanced_pedagogical_plotly_guide.xml)
8+
- **Progressão Lógica**: Implementação de níveis hierárquicos de 1 a 5 conforme especificado
9+
- **Objetivos de Aprendizado**: Cada visualização tem propósito educacional claro
10+
- **Dificuldade Progressiva**: Interface intuitiva que permite exploração gradual
11+
12+
### 2. **Fundamentos Técnicos** (plotly_python_guide.xml)
13+
- **Plotly Express Integration**: Uso otimizado de px.treemap e px.sunburst
14+
- **Long-form vs Wide-form Data**: Estrutura de dados adaptada para máxima eficiência
15+
- **Customização Avançada**: Aplicação de layouts e estilos profissionais
16+
17+
### 3. **Semântica Estruturada** (semantic_plotly_guide.xml)
18+
- **Categorização Clara**: Organização por tipos de gráfico e funcionalidade
19+
- **Reutilização de Código**: Funções modulares para diferentes visualizações
20+
- **Padrões Consistentes**: Aplicação uniform de cores, fontes e estilos
21+
22+
## Principais Melhorias Implementadas
23+
24+
### **A. Arquitetura de Dados**
25+
```python
26+
# Estrutura hierárquica de 5 níveis
27+
hierarchy_levels = {
28+
1: 'pillar', # Pilares principais
29+
2: 'area', # Áreas funcionais
30+
3: 'service', # Serviços específicos
31+
4: 'task', # Tarefas detalhadas
32+
5: 'sub_task' # Sub-tarefas (folhas)
33+
}
34+
35+
# Métricas calculadas automaticamente
36+
metrics = {
37+
'variance': 'cost - budgeted_cost',
38+
'variance_percent': '(variance / budgeted_cost) * 100',
39+
'status': 'Over/Under/On Budget',
40+
'risk_level': 'High/Medium/Low Risk'
41+
}
42+
```
43+
44+
### **B. Visualizações Avançadas**
45+
46+
#### **1. Sunburst Interativo**
47+
- **Níveis configuráveis**: Slider para controlar profundidade (2-5 níveis)
48+
- **Hover customizado**: Informações detalhadas com formatação profissional
49+
- **Coloração inteligente**: Baseada em variação orçamentária
50+
- **Responsividade**: Layout adaptativo para diferentes telas
51+
52+
#### **2. Gráfico de Barras Comparativo**
53+
- **Múltiplas métricas**: Custo real vs orçamento por pilar
54+
- **Textos informativos**: Valores formatados sobre as barras
55+
- **Cores consistentes**: Paleta profissional alinhada com o design
56+
57+
#### **3. Treemap Hierárquico**
58+
- **Visualização proporcional**: Tamanho baseado em custos
59+
- **Codificação por cor**: Variação percentual do orçamento
60+
- **Escala divergente**: RdYlBu_r para destacar desvios
61+
62+
#### **4. Tabela Detalhada**
63+
- **Filtragem nativa**: Busca e ordenação por coluna
64+
- **Formatação condicional**: Cores baseadas no status orçamentário
65+
- **Paginação**: Performance otimizada para grandes datasets
66+
67+
### **C. Interface de Usuário Avançada**
68+
69+
#### **Controles Interativos**
70+
- **Dropdown de métricas**: Seleção entre custo real, orçamento e variação
71+
- **Filtro por pilar**: Análise focada em áreas específicas
72+
- **Slider de profundidade**: Controle granular do nível de detalhe
73+
74+
#### **Dashboard de Métricas**
75+
- **Cards informativos**: KPIs principais em destaque
76+
- **Formatação monetária**: Valores com separadores de milhares
77+
- **Indicadores visuais**: Cores baseadas no status (verde/vermelho)
78+
79+
#### **Sistema de Abas**
80+
- **Navegação intuitiva**: Fácil alternância entre visualizações
81+
- **Estado persistente**: Filtros mantidos entre abas
82+
- **Layout responsivo**: Adaptação automática ao conteúdo
83+
84+
### **D. Customizações Técnicas**
85+
86+
#### **Cores e Estilos**
87+
```python
88+
# Paleta profissional por pilar
89+
pillar_colors = {
90+
'Project Design': '#1f77b4', # Azul profissional
91+
'Management': '#ff7f0e', # Laranja corporativo
92+
'Construction': '#2ca02c', # Verde construção
93+
'Finishing & Landscaping': '#d62728' # Vermelho acabamento
94+
}
95+
96+
# Cores baseadas em status
97+
status_colors = {
98+
'Over Budget': '#e74c3c', # Vermelho alerta
99+
'Under Budget': '#27ae60', # Verde sucesso
100+
'On Budget': '#3498db' # Azul neutro
101+
}
102+
```
103+
104+
#### **Typography e Layout**
105+
- **Fonte consistente**: Arial, sans-serif em todo o aplicativo
106+
- **Hierarquia visual**: Tamanhos e pesos adequados para cada elemento
107+
- **Spacing harmônico**: Margens e paddings calculados proporcionalmente
108+
- **Shadows e borders**: Efeitos sutis para profundidade visual
109+
110+
### **E. Funcionalidades Avançadas**
111+
112+
#### **Interatividade**
113+
- **Callbacks otimizados**: Atualizações eficientes baseadas em seleções
114+
- **Estado sincronizado**: Filtros aplicados consistentemente
115+
- **Feedback visual**: Loading states e transições suaves
116+
117+
#### **Performance**
118+
- **Lazy loading**: Gráficos gerados sob demanda
119+
- **Cache inteligente**: Reutilização de cálculos pesados
120+
- **Responsive design**: Adaptação automática a diferentes resoluções
121+
122+
## Benefícios das Melhorias
123+
124+
### **1. Experiência do Usuário**
125+
- **Navegação intuitiva**: Interface auto-explicativa
126+
- **Personalização**: Múltiplas opções de visualização
127+
- **Acessibilidade**: Cores e contrastes adequados
128+
129+
### **2. Insights de Negócio**
130+
- **Análise multi-dimensional**: Visões complementares dos dados
131+
- **Identificação rápida**: Problemas orçamentários destacados
132+
- **Drill-down eficiente**: Navegação do geral ao específico
133+
134+
### **3. Escalabilidade Técnica**
135+
- **Código modular**: Fácil manutenção e extensão
136+
- **Padrões consistentes**: Aplicação de best practices
137+
- **Documentação**: Comentários explicativos em todo o código
138+
139+
## Conclusão
140+
141+
O aplicativo reformulado representa uma evolução significativa, incorporando:
142+
143+
✅ **Melhores práticas dos guias Plotly**
144+
✅ **Design profissional e consistente**
145+
✅ **Funcionalidades avançadas de análise**
146+
✅ **Interface intuitiva e responsiva**
147+
✅ **Código bem estruturado e documentado**
148+
149+
Esta implementação serve como exemplo de como aplicar sistematicamente os conhecimentos dos guias Plotly para criar aplicações de visualização de dados de nível empresarial.
150+
151+
---
152+
*Aplicativo desenvolvido seguindo rigorosamente as diretrizes dos três guias XML fornecidos*

‎app_simples.py‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
#!/usr/bin/env python3
2+
3+
from dash import Dash, html, dcc, callback
4+
from dash.dependencies import Input, Output
5+
import plotly.express as px
6+
import pandas as pd
7+
import plotly.graph_objects as go
8+
9+
# Dados simplificados para teste
10+
data_simples = [
11+
{'categoria': 'Design', 'subcategoria': 'Arquitetura', 'valor': 100000, 'orcamento': 95000},
12+
{'categoria': 'Design', 'subcategoria': 'Engenharia', 'valor': 150000, 'orcamento': 145000},
13+
{'categoria': 'Construção', 'subcategoria': 'Fundação', 'valor': 300000, 'orcamento': 290000},
14+
{'categoria': 'Construção', 'subcategoria': 'Estrutura', 'valor': 500000, 'orcamento': 510000},
15+
]
16+
17+
df = pd.DataFrame(data_simples)
18+
19+
# Criar aplicativo
20+
app = Dash(__name__)
21+
22+
app.layout = html.Div([
23+
html.H1("🏗️ Explorador de Custos de Construção",
24+
style={'textAlign': 'center', 'color': '#2c3e50', 'marginBottom': '30px'}),
25+
26+
html.Div([
27+
html.Div([
28+
html.H3(f"${df['valor'].sum():,.0f}", style={'color': '#3498db', 'margin': '0'}),
29+
html.P("Custo Total", style={'margin': '5px 0 0 0', 'color': '#7f8c8d'})
30+
], style={'textAlign': 'center', 'backgroundColor': '#f8f9fa', 'padding': '20px', 'borderRadius': '8px', 'width': '200px', 'margin': '10px'}),
31+
32+
html.Div([
33+
html.H3(f"${df['orcamento'].sum():,.0f}", style={'color': '#95a5a6', 'margin': '0'}),
34+
html.P("Orçamento Total", style={'margin': '5px 0 0 0', 'color': '#7f8c8d'})
35+
], style={'textAlign': 'center', 'backgroundColor': '#f8f9fa', 'padding': '20px', 'borderRadius': '8px', 'width': '200px', 'margin': '10px'}),
36+
37+
html.Div([
38+
html.H3(f"${df['valor'].sum() - df['orcamento'].sum():,.0f}", style={'color': '#e74c3c', 'margin': '0'}),
39+
html.P("Variação", style={'margin': '5px 0 0 0', 'color': '#7f8c8d'})
40+
], style={'textAlign': 'center', 'backgroundColor': '#f8f9fa', 'padding': '20px', 'borderRadius': '8px', 'width': '200px', 'margin': '10px'}),
41+
], style={'display': 'flex', 'justifyContent': 'center', 'marginBottom': '30px'}),
42+
43+
dcc.Dropdown(
44+
id='categoria-dropdown',
45+
options=[{'label': 'Todas', 'value': 'todas'}] +
46+
[{'label': cat, 'value': cat} for cat in df['categoria'].unique()],
47+
value='todas',
48+
style={'marginBottom': '20px', 'width': '300px', 'margin': '0 auto'}
49+
),
50+
51+
dcc.Graph(id='grafico-barras'),
52+
dcc.Graph(id='grafico-sunburst'),
53+
54+
html.Div([
55+
html.P("✅ Aplicativo funcionando corretamente!",
56+
style={'textAlign': 'center', 'color': '#27ae60', 'fontSize': '18px', 'fontWeight': 'bold'}),
57+
html.P("Acesse: http://localhost:8050",
58+
style={'textAlign': 'center', 'color': '#3498db', 'fontSize': '16px'})
59+
], style={'marginTop': '30px', 'padding': '20px', 'backgroundColor': '#e8f6f3', 'borderRadius': '8px'})
60+
])
61+
62+
@app.callback(
63+
[Output('grafico-barras', 'figure'),
64+
Output('grafico-sunburst', 'figure')],
65+
[Input('categoria-dropdown', 'value')]
66+
)
67+
def atualizar_graficos(categoria_selecionada):
68+
if categoria_selecionada == 'todas':
69+
df_filtrado = df
70+
else:
71+
df_filtrado = df[df['categoria'] == categoria_selecionada]
72+
73+
# Gráfico de barras
74+
fig_bar = px.bar(
75+
df_filtrado,
76+
x='subcategoria',
77+
y=['valor', 'orcamento'],
78+
title='Comparação: Valor Real vs Orçamento',
79+
color_discrete_map={'valor': '#3498db', 'orcamento': '#95a5a6'}
80+
)
81+
fig_bar.update_layout(
82+
xaxis_title='Subcategoria',
83+
yaxis_title='Valor ($)',
84+
font={'family': 'Arial, sans-serif'},
85+
height=400
86+
)
87+
88+
# Sunburst
89+
fig_sunburst = px.sunburst(
90+
df_filtrado,
91+
path=[px.Constant("Total"), 'categoria', 'subcategoria'],
92+
values='valor',
93+
title='Distribuição Hierárquica de Custos'
94+
)
95+
fig_sunburst.update_layout(
96+
font={'family': 'Arial, sans-serif'},
97+
height=500
98+
)
99+
100+
return fig_bar, fig_sunburst
101+
102+
if __name__ == '__main__':
103+
print("🚀 Iniciando aplicativo Dash...")
104+
print("📊 Servidor rodando em: http://localhost:8050")
105+
print("🔄 Pressione Ctrl+C para parar")
106+
app.run_server(debug=True, port=8050, host='0.0.0.0')

0 commit comments

Comments
 (0)