Skip to content

Commit 859aa28

Browse files
Genovese-FelipeGenovese-Felipe
authored
Merge pull request #3 from Genovese-Felipe/copilot/fix-00d17c6d-8693-4578-b0cc-5aac69d2007f
Create GitHub Pages accessible dashboard portfolio with static HTML versions
2 parents 2550086 + 9b01741 commit 859aa28

File tree

4 files changed

+1789
-85
lines changed

4 files changed

+1789
-85
lines changed

‎index/dashboard_v1.html‎

Lines changed: 389 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,389 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dashboard V1 - Sunburst Simples | Python Data Visualization Journey</title>
7+
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
8+
<script>
9+
// Fallback if Plotly doesn't load
10+
window.addEventListener('load', function() {
11+
if (typeof Plotly === 'undefined') {
12+
console.log('Plotly not loaded, creating placeholder');
13+
document.getElementById('sunburstChart').innerHTML =
14+
'<div style="display: flex; align-items: center; justify-content: center; height: 400px; background: #f8f9fa; border-radius: 10px; border: 2px dashed #ddd;">' +
15+
'<div style="text-align: center; color: #7f8c8d;">' +
16+
'<h3>📊 Gráfico Sunburst</h3>' +
17+
'<p>Gráfico hierárquico com 94 itens de custo</p>' +
18+
'<p><em>Para ver o gráfico interativo, execute o Dashboard V1 localmente</em></p>' +
19+
'</div></div>';
20+
}
21+
});
22+
</script>
23+
<style>
24+
* {
25+
margin: 0;
26+
padding: 0;
27+
box-sizing: border-box;
28+
}
29+
30+
body {
31+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
32+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
33+
min-height: 100vh;
34+
color: #333;
35+
}
36+
37+
.header {
38+
background: rgba(255, 255, 255, 0.95);
39+
backdrop-filter: blur(10px);
40+
padding: 15px 0;
41+
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
42+
}
43+
44+
.nav-bar {
45+
display: flex;
46+
justify-content: center;
47+
gap: 15px;
48+
flex-wrap: wrap;
49+
}
50+
51+
.nav-link {
52+
padding: 8px 16px;
53+
background: #3498db;
54+
color: white;
55+
text-decoration: none;
56+
border-radius: 20px;
57+
transition: all 0.3s ease;
58+
font-weight: 500;
59+
font-size: 0.9em;
60+
}
61+
62+
.nav-link:hover, .nav-link.active {
63+
background: #2980b9;
64+
transform: translateY(-2px);
65+
}
66+
67+
.container {
68+
max-width: 1200px;
69+
margin: 0 auto;
70+
padding: 20px;
71+
}
72+
73+
.dashboard-header {
74+
background: rgba(255, 255, 255, 0.95);
75+
border-radius: 15px;
76+
padding: 30px;
77+
margin-bottom: 30px;
78+
text-align: center;
79+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
80+
}
81+
82+
.dashboard-title {
83+
font-size: 2.5em;
84+
color: #2c3e50;
85+
margin-bottom: 10px;
86+
font-weight: 300;
87+
}
88+
89+
.dashboard-subtitle {
90+
color: #7f8c8d;
91+
font-size: 1.2em;
92+
margin-bottom: 20px;
93+
}
94+
95+
.metrics-row {
96+
display: grid;
97+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
98+
gap: 15px;
99+
margin-bottom: 20px;
100+
}
101+
102+
.metric-card {
103+
background: #f8f9fa;
104+
padding: 15px;
105+
border-radius: 10px;
106+
text-align: center;
107+
border-left: 4px solid #3498db;
108+
}
109+
110+
.metric-value {
111+
font-size: 1.5em;
112+
font-weight: bold;
113+
color: #2c3e50;
114+
}
115+
116+
.metric-label {
117+
color: #7f8c8d;
118+
font-size: 0.9em;
119+
margin-top: 5px;
120+
}
121+
122+
.chart-container {
123+
background: rgba(255, 255, 255, 0.95);
124+
border-radius: 15px;
125+
padding: 30px;
126+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
127+
margin-bottom: 30px;
128+
}
129+
130+
.chart-title {
131+
font-size: 1.5em;
132+
color: #2c3e50;
133+
margin-bottom: 20px;
134+
text-align: center;
135+
font-weight: 600;
136+
}
137+
138+
.info-section {
139+
background: rgba(255, 255, 255, 0.95);
140+
border-radius: 15px;
141+
padding: 30px;
142+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
143+
}
144+
145+
.features-grid {
146+
display: grid;
147+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
148+
gap: 20px;
149+
margin-top: 20px;
150+
}
151+
152+
.feature-item {
153+
padding: 15px;
154+
background: #f8f9fa;
155+
border-radius: 10px;
156+
border-left: 4px solid #27ae60;
157+
}
158+
159+
.feature-item h4 {
160+
color: #2c3e50;
161+
margin-bottom: 10px;
162+
}
163+
164+
.feature-item p {
165+
color: #7f8c8d;
166+
line-height: 1.5;
167+
}
168+
169+
@media (max-width: 768px) {
170+
.nav-bar {
171+
flex-direction: column;
172+
align-items: center;
173+
}
174+
175+
.dashboard-title {
176+
font-size: 2em;
177+
}
178+
179+
.metrics-row {
180+
grid-template-columns: 1fr;
181+
}
182+
}
183+
</style>
184+
</head>
185+
<body>
186+
<div class="header">
187+
<div class="container">
188+
<div class="nav-bar">
189+
<a href="principal.html" class="nav-link">🏠 Início</a>
190+
<a href="dashboard_v1.html" class="nav-link active">📊 Dashboard V1</a>
191+
<a href="dashboard_v2.html" class="nav-link">🏗️ Dashboard V2</a>
192+
<a href="dashboard_v3.html" class="nav-link">🏡 Dashboard V3</a>
193+
<a href="https://github.com/Genovese-Felipe/Python-Data-Driven-Visualization-Journey" class="nav-link" target="_blank">📚 GitHub</a>
194+
</div>
195+
</div>
196+
</div>
197+
198+
<div class="container">
199+
<div class="dashboard-header">
200+
<div class="dashboard-title">🌟 Dashboard V1 - Sunburst Simples</div>
201+
<div class="dashboard-subtitle">Explorador de Custos de Construção Hierárquico</div>
202+
203+
<div class="metrics-row">
204+
<div class="metric-card">
205+
<div class="metric-value">$10.8M</div>
206+
<div class="metric-label">Custo Total</div>
207+
</div>
208+
<div class="metric-card">
209+
<div class="metric-value">94</div>
210+
<div class="metric-label">Itens de Custo</div>
211+
</div>
212+
<div class="metric-card">
213+
<div class="metric-value">4</div>
214+
<div class="metric-label">Níveis Hierárquicos</div>
215+
</div>
216+
<div class="metric-card">
217+
<div class="metric-value">$600K</div>
218+
<div class="metric-label">Maior Custo Individual</div>
219+
</div>
220+
</div>
221+
</div>
222+
223+
<div class="chart-container">
224+
<div class="chart-title">📊 Distribuição Hierárquica de Custos de Construção</div>
225+
<div id="sunburstChart" style="height: 700px;"></div>
226+
</div>
227+
228+
<div class="info-section">
229+
<h2 style="color: #2c3e50; margin-bottom: 20px; text-align: center;">🎯 Características do Dashboard V1</h2>
230+
231+
<div class="features-grid">
232+
<div class="feature-item">
233+
<h4>📊 Visualização Sunburst</h4>
234+
<p>Gráfico hierárquico interativo com 5 níveis de profundidade, mostrando a estrutura completa de custos.</p>
235+
</div>
236+
237+
<div class="feature-item">
238+
<h4>💼 Dados Reais</h4>
239+
<p>Baseado em dados extraídos de arquivos HTML funcionais com 94 itens de custo organizados.</p>
240+
</div>
241+
242+
<div class="feature-item">
243+
<h4>🎨 Interface Limpa</h4>
244+
<p>Design responsivo e profissional com foco na clareza e usabilidade dos dados.</p>
245+
</div>
246+
247+
<div class="feature-item">
248+
<h4>📈 Métricas Resumidas</h4>
249+
<p>Indicadores-chave de performance com custo total, número de itens e análises detalhadas.</p>
250+
</div>
251+
</div>
252+
253+
<div style="margin-top: 30px; text-align: center; padding: 20px; background: #e8f6f3; border-radius: 10px;">
254+
<h3 style="color: #27ae60; margin-bottom: 10px;">🚀 Como Executar Localmente</h3>
255+
<p style="color: #2c3e50; line-height: 1.6;">
256+
<code style="background: #f8f9fa; padding: 2px 6px; border-radius: 4px;">
257+
cd dashboards/v1_simple/ && python sunburst_cost_explorer_funcional.py
258+
</code><br>
259+
<strong>Acesse:</strong> http://localhost:8052
260+
</p>
261+
</div>
262+
</div>
263+
</div>
264+
265+
<script>
266+
// Dados do gráfico Sunburst (extraídos do arquivo Python original)
267+
const labels = [
268+
"Invoicing","HVAC Installation","Layout Planning","Lighting Fixtures","Load Bearing Calculations",
269+
"Machinery Rental","Material Sourcing","Painting","Patio and Walkway Construction","Permit Application",
270+
"Planting and Tree Installation","Hardwood Installation","Plumbing Installation","Progress Reporting",
271+
"Retaining Wall Construction","Shingle Installation","Site Survey","Pouring","Lawn Installation",
272+
"Soil Testing","Steel Erection","Tiling","Tool Rental","Underlayment","Window Installation",
273+
"Wood Framing","Wiring Installation","HVAC Design","Grading Plan","Excavation",
274+
"Cabinetry Installation","Fixture Installation","Curing","Daily Supervision","Drywall Installation",
275+
"Detailed Drawings","Door Installation","Drainage Design","Electrical Design","Delivery Coordination",
276+
"Budget Monitoring","Budget Tracking & Invoicing","City & Environmental Approvals",
277+
"Complete Wiring & Fixtures","Drainage & Grading Plan","Earthwork and Site Prep",
278+
"Exterior and Interior Openings","Foundation & Frame Calculations","Foundation Pouring & Curing",
279+
"HVAC & Electrical Plans","Hardwood and Ceramic Installation","Heavy Machinery & Tools",
280+
"Initial Schematics & 3D Model"
281+
];
282+
283+
const parents = [
284+
"Management/Administration/Financial Management/Budget Tracking & Invoicing",
285+
"Construction/MEP Systems/Plumbing & HVAC/Piping, Drains & Ductwork",
286+
"Project Design/Architecture/Interior Design/Material Selection & Layout",
287+
"Finishing & Landscaping/Finishing/Fixtures & Hardware/Lighting, Faucets, and Door Knobs",
288+
"Project Design/Engineering/Structural Analysis/Foundation & Frame Calculations",
289+
"Management/Logistics/Equipment Rental/Heavy Machinery & Tools",
290+
"Management/Logistics/Supply Chain/Material Sourcing & Delivery",
291+
"Construction/Interior & Exterior/Drywall & Painting/Interior Walls and Ceilings",
292+
"Finishing & Landscaping/Landscaping/Hardscaping/Patio, Walkways, and Retaining Walls",
293+
"Management/Administration/Permits & Legal/City & Environmental Approvals",
294+
"Finishing & Landscaping/Landscaping/Softscaping/Lawn, Plants, and Trees",
295+
"Construction/Interior & Exterior/Flooring & Tiling/Hardwood and Ceramic Installation",
296+
"Construction/MEP Systems/Plumbing & HVAC/Piping, Drains & Ductwork",
297+
"Management/Administration/Project Management/On-Site Supervision & Reporting",
298+
"Finishing & Landscaping/Landscaping/Hardscaping/Patio, Walkways, and Retaining Walls",
299+
"Construction/Superstructure/Roofing/Shingle and Underlayment Installation",
300+
"Project Design/Engineering/Civil Engineering/Drainage & Grading Plan",
301+
"Construction/Site & Foundation/Concrete Work/Foundation Pouring & Curing",
302+
"Finishing & Landscaping/Landscaping/Softscaping/Lawn, Plants, and Trees",
303+
"Project Design/Engineering/Structural Analysis/Foundation & Frame Calculations",
304+
"Construction/Superstructure/Framing & Steel/Wood & Steel Frame Erection",
305+
"Construction/Interior & Exterior/Flooring & Tiling/Hardwood and Ceramic Installation",
306+
"Management/Logistics/Equipment Rental/Heavy Machinery & Tools",
307+
"Construction/Superstructure/Roofing/Shingle and Underlayment Installation",
308+
"Construction/Interior & Exterior/Window & Door Installation/Exterior and Interior Openings",
309+
"Construction/Superstructure/Framing & Steel/Wood & Steel Frame Erection",
310+
"Construction/MEP Systems/Electrical/Complete Wiring & Fixtures",
311+
"Project Design/Engineering/MarchJEP Engineering/HVAC & Electrical Plans",
312+
"Project Design/Engineering/Civil Engineering/Drainage & Grading Plan",
313+
"Construction/Site & Foundation/Excavation & Grading/Earthwork and Site Prep",
314+
"Finishing & Landscaping/Finishing/Cabinetry & Countertops/Kitchen and Bathroom Fixtures",
315+
"Construction/MEP Systems/Electrical/Complete Wiring & Fixtures",
316+
"Construction/Site & Foundation/Concrete Work/Foundation Pouring & Curing",
317+
"Management/Administration/Project Management/On-Site Supervision & Reporting",
318+
"Construction/Interior & Exterior/Drywall & Painting/Interior Walls and Ceilings",
319+
"Project Design/Architecture/Blueprint Design/Initial Schematics & 3D Model",
320+
"Construction/Interior & Exterior/Window & Door Installation/Exterior and Interior Openings",
321+
"Project Design/Engineering/Civil Engineering/Drainage & Grading Plan",
322+
"Project Design/Engineering/MarchJEP Engineering/HVAC & Electrical Plans",
323+
"Management/Logistics/Supply Chain/Material Sourcing & Delivery",
324+
"Management/Administration/Financial Management/Budget Tracking & Invoicing",
325+
"Management/Administration/Financial Management/Budget Tracking & Invoicing",
326+
"Management/Administration/Permits & Legal/City & Environmental Approvals",
327+
"Construction/MEP Systems/Electrical/Complete Wiring & Fixtures",
328+
"Project Design/Engineering/Civil Engineering/Drainage & Grading Plan",
329+
"Construction/Site & Foundation/Excavation & Grading/Earthwork and Site Prep",
330+
"Construction/Interior & Exterior/Window & Door Installation/Exterior and Interior Openings",
331+
"Project Design/Engineering/Structural Analysis/Foundation & Frame Calculations",
332+
"Construction/Site & Foundation/Concrete Work/Foundation Pouring & Curing",
333+
"Project Design/Engineering/MarchJEP Engineering/HVAC & Electrical Plans",
334+
"Construction/Interior & Exterior/Flooring & Tiling/Hardwood and Ceramic Installation",
335+
"Management/Logistics/Equipment Rental/Heavy Machinery & Tools",
336+
"Project Design/Architecture/Blueprint Design/Initial Schematics & 3D Model"
337+
];
338+
339+
const values = [
340+
310000,85000,175000,55000,65000,190000,150000,40000,70000,40000,70000,130000,80000,260000,
341+
120000,480000,65000,150000,30000,310000,190000,240000,55000,160000,60000,70000,175000,
342+
480000,80000,40000,85000,90000,260000,130000,120000,40000,95000,70000,90000,280000,
343+
105000,210000,220000,455000,120000,125000,500000,470000,600000,2025000,340000,405000,315000
344+
];
345+
346+
// Criar gráfico Sunburst se Plotly estiver disponível
347+
if (typeof Plotly !== 'undefined') {
348+
const sunburstData = [{
349+
type: "sunburst",
350+
labels: labels,
351+
parents: parents,
352+
values: values,
353+
branchvalues: "total",
354+
hovertemplate: '<b>%{label}</b><br>Custo: $%{value:,.0f}<br>Percentual: %{percentParent}<extra></extra>',
355+
maxdepth: 4,
356+
insidetextorientation: 'radial'
357+
}];
358+
359+
const sunburstLayout = {
360+
title: {
361+
text: "",
362+
font: { size: 16, family: 'Arial, sans-serif', color: '#2c3e50' }
363+
},
364+
font: { size: 12 },
365+
paper_bgcolor: 'rgba(0,0,0,0)',
366+
plot_bgcolor: 'rgba(0,0,0,0)',
367+
margin: { t: 20, l: 20, r: 20, b: 20 }
368+
};
369+
370+
const config = {
371+
responsive: true,
372+
displayModeBar: true,
373+
displaylogo: false,
374+
modeBarButtonsToRemove: ['pan2d', 'lasso2d', 'select2d']
375+
};
376+
377+
Plotly.newPlot('sunburstChart', sunburstData, sunburstLayout, config);
378+
379+
// Interactividade
380+
document.getElementById('sunburstChart').on('plotly_click', function(data) {
381+
if (data.points.length > 0) {
382+
const point = data.points[0];
383+
console.log('Clicked:', point.label, 'Value:', point.value);
384+
}
385+
});
386+
}
387+
</script>
388+
</body>
389+
</html>

0 commit comments

Comments
 (0)