Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Análise Financeira | DRE Maio 2025</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .animated-gradient { | |
| background: linear-gradient(90deg, #4f46e5, #7e22ce, #4f46e5); | |
| background-size: 200% auto; | |
| animation: gradient 3s linear infinite; | |
| } | |
| @keyframes gradient { | |
| 0% {background-position: 0%} | |
| 100% {background-position: 200%} | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(79, 70, 229, 0.5); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 50% { opacity: 0.8; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="animated-gradient text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold mb-2">Análise Financeira Completa</h1> | |
| <p class="opacity-90">Demonstração do Resultado do Exercício - Maio 2025</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 bg-white/10 backdrop-blur-sm rounded-lg px-4 py-3"> | |
| <p class="text-sm font-medium">Meta de Faturamento: <span class="text-xl font-bold">R$ 55.000</span></p> | |
| <p class="text-sm">Atingido em Maio: <span class="text-xl font-bold">106%</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Key Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <!-- Revenue Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-indigo-100 p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-indigo-500 text-white mr-4"> | |
| <i class="fas fa-money-bill-wave text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Receita Líquida</p> | |
| <h3 class="text-2xl font-bold">R$ 53.945</h3> | |
| <p class="text-sm text-green-600">+24% vs Abril</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gross Profit Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-green-50 p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-500 text-white mr-4"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Lucro Bruto</p> | |
| <h3 class="text-2xl font-bold">R$ 45.546</h3> | |
| <p class="text-sm text-green-600">78% Margem</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Operating Result Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-blue-50 p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-500 text-white mr-4"> | |
| <i class="fas fa-calculator text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Resultado Operacional</p> | |
| <h3 class="text-2xl font-bold text-blue-600">R$ 17.755</h3> | |
| <p class="text-sm">+427% vs Abril</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Net Profit Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-purple-50 p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-500 text-white mr-4"> | |
| <i class="fas fa-piggy-bank text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Lucro Líquido</p> | |
| <h3 class="text-2xl font-bold text-purple-600">R$ 17.238</h3> | |
| <p class="text-sm">32% Margem</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Charts --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <!-- Revenue Growth Chart --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-chart-bar text-indigo-500 mr-2"></i> Desempenho Mensal de Faturamento | |
| </h2> | |
| <div class="h-64"> | |
| <canvas id="revenueChart"></canvas> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600"> | |
| <p><span class="font-medium text-indigo-600">Destaque:</span> Maio superou a meta em 6%, continuando a tendência positiva desde Março.</p> | |
| </div> | |
| </div> | |
| <!-- Operational Flow Chart --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-exchange-alt text-blue-500 mr-2"></i> Fluxo de Atividades Operacionais | |
| </h2> | |
| <div class="h-64"> | |
| <canvas id="operationalFlowChart"></canvas> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600"> | |
| <p><span class="font-medium text-blue-600">Análise:</span> Custo operacional em maio foi dos mais baixos (14%), impulsionando o resultado.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detailed Analysis Sections --> | |
| <div class="grid grid-cols-1 gap-8 mb-8"> | |
| <!-- Margins Analysis --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-percentage text-green-500 mr-2"></i> Análise de Margens | |
| </h2> | |
| <div class="overflow-x-auto scrollbar-hide"> | |
| <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">Mês</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Margem Bruta</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Margem Contribuição</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Margem Operacional</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Margem Líquida</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Janeiro</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">76%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">76%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-10%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-12%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Fevereiro</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">58%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">58%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-27%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-27%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Março</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">84%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">84%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">32%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">32%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abril</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">57%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">57%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-12%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-19%</td> | |
| </tr> | |
| <tr class="bg-indigo-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-indigo-900">Maio</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-500">78%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-500">78%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-500">30%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-500">32%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-lightbulb text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| A margem de contribuição de 78% em Maio indica excelente eficiência na geração de lucro após custos diretos. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expenses Breakdown --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-wallet text-red-500 mr-2"></i> Detalhamento de Despesas (Maio) | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-medium mb-3">Despesas Operacionais</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Despesas Comerciais</span> | |
| <span class="text-sm font-medium">R$ 3.000 (5.6%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-red-400 h-2.5 rounded-full" style="width: 5.6%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Despesas Administrativas</span> | |
| <span class="text-sm font-medium">R$ 24.643 (45.7%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 45.7%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Outras Despesas Operacionais</span> | |
| <span class="text-sm font-medium">R$ 148 (0.3%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-red-300 h-2.5 rounded-full" style="width: 0.3%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-3">Investimentos & Financiamento</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Investimentos em Imobilizado</span> | |
| <span class="text-sm font-medium">R$ 28.843</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Empréstimos e Dívidas</span> | |
| <span class="text-sm font-medium">R$ 2.929</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-400 h-2.5 rounded-full" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-4 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-600"> | |
| <span class="font-bold text-purple-600">Observação:</span> Os investimentos em Maio foram significativos (R$ 28.843), impactando o resultado final. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Monthly Comparative --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-balance-scale text-blue-500 mr-2"></i> Comparativo Mensal (Jan-Mai) | |
| </h2> | |
| <div class="overflow-x-auto scrollbar-hide"> | |
| <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> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receita Bruta</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 35.611</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 42.818</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">R$ 66.173</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 46.544</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">R$ 58.301</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Receita Líquida</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 33.754</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 38.870</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">R$ 61.782</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 43.329</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">R$ 53.945</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Custos Operacionais</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 6.535</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 14.150</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">-R$ 5.990</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 16.633</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">-R$ 8.399</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Despesas Operacionais</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 30.732</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 36.300</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">-R$ 33.665</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 32.120</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">-R$ 27.791</td> | |
| </tr> | |
| <tr class="bg-blue-50 border-t-2 border-blue-200"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-900">Resultado Operacional</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 3.513</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 11.580</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">R$ 22.126</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 5.424</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">R$ 17.755</td> | |
| </tr> | |
| <tr class="bg-indigo-50 border-t-2 border-indigo-200"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-indigo-900">Lucro Líquido</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 3.913</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 10.483</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">R$ 20.065</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">-R$ 8.210</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">R$ 17.238</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Insights --> | |
| <div class="bg-white p-6 rounded-xl shadow-md mb-8"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-chart-pie text-purple-500 mr-2"></i> Análise Conclusiva de Maio | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <h3 class="font-bold text-indigo-700 mb-2 flex items-center"> | |
| <i class="fas fa-trophy mr-2"></i>Pontos Fortes | |
| </h3> | |
| <ul class="list-disc pl-5 space-y-1 text-sm text-indigo-900"> | |
| <li>Superação da meta de faturamento em 6%</li> | |
| <li>Margem de contribuição elevada (78%)</li> | |
| <li>Redução de despesas operacionais (-13.5% vs Abril)</li> | |
| <li>Custo operacional entre os menores do ano (14%)</li> | |
| </ul> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <h3 class="font-bold text-yellow-700 mb-2 flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i>Alertas | |
| </h3> | |
| <ul class="list-disc pl-5 space-y-1 text-sm text-yellow-900"> | |
| <li>Investimentos significativos em imobilizado (R$ 28.843)</li> | |
| <li>Despesas administrativas representam 45.7% da receita</li> | |
| <li>Comissões sobre vendas em Maio (R$ 821) - novo item</li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h3 class="font-bold text-green-700 mb-2 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i>Recomendações | |
| </h3> | |
| <ul class="list-disc pl-5 space-y-1 text-sm text-green-900"> | |
| <li>Manter controle sobre despesas administrativas</li> | |
| <li>Monitorar impacto das comissões nas margens</li> | |
| <li>Avaliar retorno dos investimentos realizados</li> | |
| <li>Canalizar esforços para manter custo operacional abaixo de 15%</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-xl font-bold">Análise Financeira</h2> | |
| <p class="text-gray-400">Demonstração do Resultado do Exercício</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-700 text-sm text-gray-400 text-center"> | |
| <p>© 2024 Relatório Financeiro. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Revenue Chart | |
| const revenueCtx = document.getElementById('revenueChart').getContext('2d'); | |
| const revenueChart = new Chart(revenueCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio'], | |
| datasets: [ | |
| { | |
| label: 'Meta (R$)', | |
| data: [55000, 55000, 55000, 55000, 55000], | |
| backgroundColor: 'rgba(99, 102, 241, 0.2)', | |
| borderColor: 'rgba(99, 102, 241, 1)', | |
| borderWidth: 1, | |
| type: 'line', | |
| pointRadius: 0 | |
| }, | |
| { | |
| label: 'Receita Operacional', | |
| data: [35611, 42818, 66173, 46544, 58301], | |
| backgroundColor: [ | |
| 'rgba(79, 70, 229, 0.7)', | |
| 'rgba(79, 70, 229, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(79, 70, 229, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(79, 70, 229, 1)', | |
| 'rgba(79, 70, 229, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(79, 70, 229, 1)', | |
| 'rgba(16, 185, 129, 1)' | |
| ], | |
| borderWidth: 1 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: 'Valor (R$)' | |
| } | |
| } | |
| }, | |
| 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; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Operational Flow Chart | |
| const flowCtx = document.getElementById('operationalFlowChart').getContext('2d'); | |
| const flowChart = new Chart(flowCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio'], | |
| datasets: [ | |
| { | |
| label: 'Receitas', | |
| data: [35611, 42818, 66173, 46544, 58301], | |
| backgroundColor: 'rgba(16, 185, 129, 0.7)', | |
| borderColor: 'rgba(16, 185, 129, 1)', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Custos + Despesas', | |
| data: [-37300, -50450, -39655, -48753, -36190], | |
| backgroundColor: 'rgba(239, 68, 68, 0.7)', | |
| borderColor: 'rgba(239, 68, 68, 1)', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Resultado Operacional', | |
| data: [-3513, -11580, 22126, -5424, 17755], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(16, 185, 129, 1)' | |
| ], | |
| borderWidth: 1, | |
| type: 'bar' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| title: { | |
| display: true, | |
| text: 'Valor (R$)' | |
| } | |
| } | |
| }, | |
| 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; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </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;" |