maha3d-dre-junho / index.html
EraDigital's picture
Update index.html
9f9eb05 verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Análise Financeira Completa - Julho</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.positive {
color: #10B981;
}
.negative {
color: #EF4444;
}
.neutral {
color: #6B7280;
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8">
<header class="mb-10">
<h1 class="text-3xl font-bold text-gray-800">Análise Financeira Completa</h1>
<p class="text-xl text-gray-600">Demonstrativo de Resultados - Julho 2025</p>
<div class="mt-4 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
<p class="text-blue-800"><i class="fas fa-info-circle mr-2"></i> Esta análise contempla os meses de Janeiro a Julho, com foco no fechamento de Julho e indicadores trimestrais.</p>
</div>
</header>
<!-- Key Metrics Section -->
<section class="mb-12 fade-in">
<h2 class="text-2xl font-semibold mb-6 text-gray-700 border-b pb-2">Indicadores Chave</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Meta de Faturamento -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover transition-all">
<div class="flex items-center mb-3">
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
<i class="fas fa-bullseye text-xl"></i>
</div>
<h3 class="text-lg font-medium text-gray-700">Meta de Faturamento</h3>
</div>
<div class="flex items-end justify-between">
<div>
<p class="text-3xl font-bold text-indigo-600">88%</p>
<p class="text-gray-500">Julho</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-500">Média Trimestral</p>
<p class="text-xl font-semibold">99%</p>
</div>
</div>
<div class="mt-4">
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 88%"></div>
</div>
<p class="text-xs text-gray-500 mt-1">R$61.425 / Meta: R$55K-70K</p>
</div>
</div>
<!-- Margem de Contribuição -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover transition-all">
<div class="flex items-center mb-3">
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
<i class="fas fa-chart-line text-xl"></i>
</div>
<h3 class="text-lg font-medium text-gray-700">Margem de Contribuição</h3>
</div>
<div class="flex items-end justify-between">
<div>
<p class="text-3xl font-bold text-green-600">79%</p>
<p class="text-gray-500">Julho</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-500">Média Trimestral</p>
<p class="text-xl font-semibold">78%</p>
</div>
</div>
<div class="mt-4">
<div class="flex items-center">
<span class="text-xs font-medium mr-2">Jan: 77%</span>
<span class="text-xs font-medium">Jul: 79%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 79%"></div>
</div>
</div>
</div>
<!-- Resultado Operacional -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover transition-all">
<div class="flex items-center mb-3">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
<i class="fas fa-calculator text-xl"></i>
</div>
<h3 class="text-lg font-medium text-gray-700">Resultado Operacional</h3>
</div>
<div class="flex items-end justify-between">
<div>
<p class="text-3xl font-bold text-blue-600">R$11.024</p>
<p class="text-gray-500">Julho</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-500">2º Trimestre</p>
<p class="text-xl font-semibold">R$19.880</p>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs">
<span>Jan: -R$3.254</span>
<span>Jul: R$11.024</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
</div>
</div>
</div>
<!-- Lucro Líquido -->
<div class="bg-white p-6 rounded-xl shadow-md card-hover transition-all">
<div class="flex items-center mb-3">
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
<i class="fas fa-coins text-xl"></i>
</div>
<h3 class="text-lg font-medium text-gray-700">Lucro Líquido</h3>
</div>
<div class="flex items-end justify-between">
<div>
<p class="text-3xl font-bold text-purple-600">R$9.096</p>
<p class="text-gray-500">Julho</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-500">2º Trimestre</p>
<p class="text-xl font-semibold">R$27.790</p>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs">
<span>Jan: -R$3.654</span>
<span>Jul: R$9.096</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
<div class="bg-purple-600 h-2.5 rounded-full" style="width: 72%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Main Charts Section -->
<section class="mb-12 fade-in">
<h2 class="text-2xl font-semibold mb-6 text-gray-700 border-b pb-2">Análise Gráfica</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Fluxo de Atividades Operacionais -->
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-medium mb-4 text-gray-700">Fluxo de Atividades Operacionais</h3>
<div class="h-80">
<canvas id="operationalFlowChart"></canvas>
</div>
<div class="mt-4 text-sm text-gray-600">
<p><span class="font-medium">Análise:</span> Em Julho, as receitas operacionais (R$61.425) superaram significativamente os custos e despesas operacionais (R$9.536 + R$37.385 = R$46.921), resultando em um fluxo positivo de R$14.504.</p>
</div>
</div>
<!-- Resultado Operacional Mensal -->
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-medium mb-4 text-gray-700">Resultado Operacional Mensal</h3>
<div class="h-80">
<canvas id="operationalResultChart"></canvas>
</div>
<div class="mt-4 text-sm text-gray-600">
<p><span class="font-medium">Tendência:</span> Após um primeiro trimestre volátil, o segundo trimestre apresentou resultados operacionais consistentemente positivos, com destaque para Março (R$22.308), Maio (R$15.674) e Julho (R$11.024).</p>
</div>
</div>
</div>
</section>
<!-- Detailed DRE Section -->
<section class="mb-12 fade-in">
<h2 class="text-2xl font-semibold mb-6 text-gray-700 border-b pb-2">Demonstrativo de Resultados Detalhado</h2>
<div class="overflow-x-auto bg-white rounded-xl shadow-md">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Categoria</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Janeiro</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fevereiro</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Março</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Abril</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Maio</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Junho</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Julho</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<!-- Receitas Operacionais -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Receitas Operacionais</td>
<td class="px-6 py-4 whitespace-nowrap">R$35.611</td>
<td class="px-6 py-4 whitespace-nowrap">R$42.818</td>
<td class="px-6 py-4 whitespace-nowrap">R$66.173</td>
<td class="px-6 py-4 whitespace-nowrap">R$46.544</td>
<td class="px-6 py-4 whitespace-nowrap">R$58.101</td>
<td class="px-6 py-4 whitespace-nowrap">R$56.677</td>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">R$61.425</td>
</tr>
<!-- Deduções da Receita Bruta -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Deduções da Receita Bruta</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$1.857</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$3.948</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$4.391</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$3.215</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$6.752</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$4.992</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$3.480</td>
</tr>
<!-- Receita Líquida -->
<tr class="hover:bg-gray-50 bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-bold text-gray-900">Receita Líquida de Vendas</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">R$33.754</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">R$38.870</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">R$61.782</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">R$43.329</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">R$51.349</td>
<td class="px-6 py-4 whitespace-nowrap font-bold">R$51.686</td>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">R$57.945</td>
</tr>
<!-- Custos Operacionais -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Custos Operacionais</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$6.276</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$14.004</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$5.809</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$16.528</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$7.835</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$5.819</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$9.536</td>
</tr>
<!-- Lucro Bruto -->
<tr class="hover:bg-gray-50 bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-bold text-gray-900">Lucro Bruto</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$27.478</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$24.866</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$55.973</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$26.801</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$43.515</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$45.866</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$48.409</td>
</tr>
<!-- Despesas Operacionais -->
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Despesas Operacionais</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$30.732</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$36.300</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$33.665</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$32.358</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$27.841</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$36.103</td>
<td class="px-6 py-4 whitespace-nowrap negative">-R$37.385</td>
</tr>
<!-- Resultado Operacional -->
<tr class="hover:bg-gray-50 bg-blue-50">
<td class="px-6 py-4 whitespace-nowrap font-bold text-gray-900">Lucro/Prejuízo Operacional</td>
<td class="px-6 py-4 whitespace-nowrap font-bold negative">-R$3.254</td>
<td class="px-6 py-4 whitespace-nowrap font-bold negative">-R$11.434</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$22.308</td>
<td class="px-6 py-4 whitespace-nowrap font-bold negative">-R$5.557</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$15.674</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$9.763</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$11.024</td>
</tr>
<!-- Lucro Líquido -->
<tr class="hover:bg-gray-50 bg-purple-50">
<td class="px-6 py-4 whitespace-nowrap font-bold text-gray-900">Lucro/Prejuízo Líquido</td>
<td class="px-6 py-4 whitespace-nowrap font-bold negative">-R$3.654</td>
<td class="px-6 py-4 whitespace-nowrap font-bold negative">-R$10.337</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$20.246</td>
<td class="px-6 py-4 whitespace-nowrap font-bold negative">-R$8.343</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$15.306</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$20.827</td>
<td class="px-6 py-4 whitespace-nowrap font-bold positive">R$9.096</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Quarterly Analysis Section -->
<section class="mb-12 fade-in">
<h2 class="text-2xl font-semibold mb-6 text-gray-700 border-b pb-2">Análise Trimestral</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 1º Trimestre -->
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-medium mb-4 text-gray-700 flex items-center">
<span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
1º Trimestre (Jan-Mar)
</h3>
<div class="space-y-3">
<div>
<p class="text-sm text-gray-500">Receita Média</p>
<p class="text-xl font-semibold">R$48.200</p>
</div>
<div>
<p class="text-sm text-gray-500">Resultado Operacional</p>
<p class="text-xl font-semibold">R$2.540</p>
<p class="text-xs text-gray-500">(Média mensal)</p>
</div>
<div>
<p class="text-sm text-gray-500">Lucro Líquido</p>
<p class="text-xl font-semibold">R$2.085</p>
<p class="text-xs text-gray-500">(Média mensal)</p>
</div>
<div class="pt-2 border-t">
<p class="text-sm text-gray-500">Destaque</p>
<p class="text-sm">Março teve excelente desempenho com receita de R$66.173 e lucro líquido de R$20.246.</p>
</div>
</div>
</div>
<!-- 2º Trimestre -->
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-medium mb-4 text-gray-700 flex items-center">
<span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
2º Trimestre (Abr-Jun)
</h3>
<div class="space-y-3">
<div>
<p class="text-sm text-gray-500">Receita Média</p>
<p class="text-xl font-semibold">R$53.774</p>
</div>
<div>
<p class="text-sm text-gray-500">Resultado Operacional</p>
<p class="text-xl font-semibold">R$6.627</p>
<p class="text-xs text-gray-500">(Média mensal)</p>
</div>
<div>
<p class="text-sm text-gray-500">Lucro Líquido</p>
<p class="text-xl font-semibold">R$9.263</p>
<p class="text-xs text-gray-500">(Média mensal)</p>
</div>
<div class="pt-2 border-t">
<p class="text-sm text-gray-500">Destaque</p>
<p class="text-sm">Maior consistência nos resultados, com todos os meses apresentando receitas acima de R$46K.</p>
</div>
</div>
</div>
<!-- Julho (Início 3º Trimestre) -->
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-medium mb-4 text-gray-700 flex items-center">
<span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
Julho (Início 3º Trimestre)
</h3>
<div class="space-y-3">
<div>
<p class="text-sm text-gray-500">Receita Operacional</p>
<p class="text-xl font-semibold">R$61.425</p>
</div>
<div>
<p class="text-sm text-gray-500">Resultado Operacional</p>
<p class="text-xl font-semibold">R$11.024</p>
</div>
<div>
<p class="text-sm text-gray-500">Lucro Líquido</p>
<p class="text-xl font-semibold">R$9.096</p>
</div>
<div class="pt-2 border-t">
<p class="text-sm text-gray-500">Perspectiva</p>
<p class="text-sm">Bom início de trimestre com receita recorde e margem de contribuição saudável (79%).</p>
</div>
</div>
</div>
</div>
</section>
<!-- Recommendations Section -->
<section class="fade-in">
<h2 class="text-2xl font-semibold mb-6 text-gray-700 border-b pb-2">Recomendações Estratégicas</h2>
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-medium mb-3 text-gray-700 flex items-center">
<i class="fas fa-chart-pie mr-2 text-indigo-600"></i> Gestão de Custos
</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Reduzir custos operacionais que apresentaram picos em Fevereiro (33%) e Abril (36%)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Monitorar de perto os custos dos serviços prestados, principal componente dos custos operacionais</span>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium mb-3 text-gray-700 flex items-center">
<i class="fas fa-money-bill-wave mr-2 text-green-600"></i> Receitas e Margens
</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Manter estratégias que levaram às altas margens de contribuição (79% em Julho)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Capitalizar no modelo que gerou receita recorde em Março (R$66.173)</span>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium mb-3 text-gray-700 flex items-center">
<i class="fas fa-cogs mr-2 text-blue-600"></i> Operações
</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Otimizar despesas administrativas que representaram ~80% das despesas operacionais</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Analisar variações nas comissões sobre vendas (pico em Maio: R$2.090)</span>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium mb-3 text-gray-700 flex items-center">
<i class="fas fa-piggy-bank mr-2 text-purple-600"></i> Investimentos
</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Planejar melhor os investimentos em imobilizado (picos em Maio e Junho)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Gerenciar empréstimos para evitar impactos no lucro final</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<footer class="mt-12 pt-6 border-t text-center text-gray-500 text-sm">
<p>Relatório gerado em Agosto de 2025 | Análise Financeira DRE Completa</p>
<p class="mt-1">Dados referentes ao período de Janeiro a Julho de 2025</p>
</footer>
</div>
<script>
// Operational Flow Chart
const operationalFlowCtx = document.getElementById('operationalFlowChart').getContext('2d');
const operationalFlowChart = new Chart(operationalFlowCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul'],
datasets: [
{
label: 'Receitas Operacionais',
data: [35611, 42818, 66173, 46544, 58101, 56677, 61425],
backgroundColor: 'rgba(54, 162, 235, 0.7)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Custos + Despesas Operacionais',
data: [-37008, -50304, -39474, -48886, -35676, -41922, -46921],
backgroundColor: 'rgba(255, 99, 132, 0.7)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: 'Resultado Operacional',
data: [-3254, -11434, 22308, -5557, 15674, 9763, 11024],
backgroundColor: 'rgba(75, 192, 192, 0.7)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
type: 'line',
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
title: {
display: true,
text: 'Valores em R$'
}
},
x: {
grid: {
display: false
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(context.parsed.y);
}
return label;
}
}
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Fluxo de Atividades Operacionais Mensal',
font: {
size: 16
}
}
}
}
});
// Operational Result Chart
const operationalResultCtx = document.getElementById('operationalResultChart').getContext('2d');
const operationalResultChart = new Chart(operationalResultCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul'],
datasets: [
{
label: 'Lucro/Prejuízo Operacional',
data: [-3254, -11434, 22308, -5557, 15674, 9763, 11024],
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(255, 99, 132, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(255, 99, 132, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(75, 192, 192, 0.7)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(255, 99, 132, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)',
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
title: {
display: true,
text: 'Valores em R$'
}
},
x: {
grid: {
display: false
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(context.parsed.y);
}
return label;
}
}
},
legend: {
display: false
},
title: {
display: true,
text: 'Resultado Operacional Mensal',
font: {
size: 16
}
}
}
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;"