Teste dashboard.html

última modificação 17/03/2026 17h59
Conteúdo do arquivo

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Dashboard CEHU</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    body { font-family: Arial; margin: 20px; background: #f4f6f9; }
    h2 { text-align: center; }
    .container { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
    .card {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        width: 500px;
    }
    canvas { max-width: 100%; }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }
    th { background: #2c3e50; color: white; }
</style>
</head>

<body>

<h2>Dashboard de Distribuição de Recursos - CEHU</h2>

<div class="container">

<div class="card">
<canvas id="barChart"></canvas>
</div>

<div class="card">
<canvas id="pieChart"></canvas>
</div>

</div>

<div class="card" style="margin:auto; width:90%;">
<table>
<thead>
<tr>
<th>Destinação</th>
<th>Valor Total (R$)</th>
<th>Empenhado (R$)</th>
<th>Saldo (R$)</th>
</tr>
</thead>
<tbody id="tabelaDados"></tbody>
</table>
</div>

<script>

// Dados
const dados = [
    {nome: "Administração CEHU", valor: 11618.34, empenhado: 0},
    {nome: "Direito", valor: 9405.32, empenhado: 0},
    {nome: "Bacharelado em Geografia", valor: 9405.32, empenhado: 0},
    {nome: "Licenciatura em Geografia", valor: 9405.32, empenhado: 0},
    {nome: "B.I. em Humanidades", valor: 9405.32, empenhado: 0},
    {nome: "Administração", valor: 9405.32, empenhado: 0},
    {nome: "Bacharelado em História", valor: 9405.32, empenhado: 0},
    {nome: "Licenciatura em História", valor: 9405.32, empenhado: 0}
];

// Preencher tabela
const tabela = document.getElementById("tabelaDados");

dados.forEach(d => {
    let saldo = d.valor - d.empenhado;
    tabela.innerHTML += `
        <tr>
            <td>${d.nome}</td>
            <td>${d.valor.toLocaleString('pt-BR')}</td>
            <td contenteditable="true" oninput="atualizar()">${d.empenhado}</td>
            <td>${saldo.toLocaleString('pt-BR')}</td>
        </tr>
    `;
});

// Gráficos
const labels = dados.map(d => d.nome);
const valores = dados.map(d => d.valor);

// Gráfico de barras
new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Valor (R$)',
            data: valores
        }]
    }
});

// Gráfico de pizza
new Chart(document.getElementById('pieChart'), {
    type: 'pie',
    data: {
        labels: labels,
        datasets: [{
            data: valores
        }]
    }
});

</script>

</body>
</html>
Voltar ao topo
Todo o conteúdo deste site está publicado sob a licença Creative Commons Atribuição-SemDerivações 3.0 Não Adaptada.