Componentes

Visuais HTML para Power BI

Crie dashboards mais elegantes e profissionais com componentes HTML prontos. Copie, personalize e use no Power BI para transformar seus relatórios em experiências visuais modernas e interativas.

Colaborar
0 visuais disponíveis nesta página

🧭 Guia de Navegação

Aprenda a navegar pelo dashboard em 3 minutos

1️⃣ Filtros

Use os filtros no topo da página para refinar seus dados:

  • Data: Selecione o período de análise
  • Categoria: Filtre por tipo de produto
  • Região: Escolha a localização geográfica

2️⃣ Gráficos Interativos

Clique em qualquer elemento dos gráficos para aplicar filtros cruzados automaticamente

3️⃣ Exportação

Use o menu "..." em cada visual para exportar dados em Excel ou PDF

💡 Pressione F11 para modo tela cheia


        <div style="max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="border-left: 5px solid #0078D4; padding-left: 15px; margin-bottom: 25px;">
    <h1 style="font-size: 28px; font-weight: 700; color: #1F2937; margin: 0 0 5px 0;">🧭 Guia de Navegação</h1>
    <p style="font-size: 15px; color: #6B7280; margin: 0;">Aprenda a navegar pelo dashboard em 3 minutos</p>
  </div>
  
  <div style="display: grid; gap: 15px;">
    <div style="background: #F0F9FF; padding: 18px; border-radius: 8px; border-left: 4px solid #0078D4;">
      <h3 style="font-size: 18px; font-weight: 600; color: #0078D4; margin: 0 0 10px 0;">1️⃣ Filtros</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0 0 8px 0;">Use os filtros no topo da página para refinar seus dados:</p>
      <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #6B7280;">
        <li>Data: Selecione o período de análise</li>
        <li>Categoria: Filtre por tipo de produto</li>
        <li>Região: Escolha a localização geográfica</li>
      </ul>
    </div>
    
    <div style="background: #FEF3C7; padding: 18px; border-radius: 8px; border-left: 4px solid #FDB813;">
      <h3 style="font-size: 18px; font-weight: 600; color: #D97706; margin: 0 0 10px 0;">2️⃣ Gráficos Interativos</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0;">Clique em qualquer elemento dos gráficos para aplicar filtros cruzados automaticamente</p>
    </div>
    
    <div style="background: #ECFDF5; padding: 18px; border-radius: 8px; border-left: 4px solid #10B981;">
      <h3 style="font-size: 18px; font-weight: 600; color: #059669; margin: 0 0 10px 0;">3️⃣ Exportação</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0;">Use o menu "..." em cada visual para exportar dados em Excel ou PDF</p>
    </div>
  </div>
  
  <div style="background: #EEF2FF; padding: 15px; border-radius: 8px; margin-top: 20px; text-align: center;">
    <p style="font-size: 13px; color: #6366F1; margin: 0; font-weight: 500;">💡 Pressione F11 para modo tela cheia</p>
  </div>
</div>
                  

        DocumentaçãoHTML = 
        "
        <div style='max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='border-left: 5px solid #0078D4; padding-left: 15px; margin-bottom: 25px;'>
    <h1 style='font-size: 28px; font-weight: 700; color: #1F2937; margin: 0 0 5px 0;'>🧭 Guia de Navegação</h1>
    <p style='font-size: 15px; color: #6B7280; margin: 0;'>Aprenda a navegar pelo dashboard em 3 minutos</p>
  </div>
  
  <div style='display: grid; gap: 15px;'>
    <div style='background: #F0F9FF; padding: 18px; border-radius: 8px; border-left: 4px solid #0078D4;'>
      <h3 style='font-size: 18px; font-weight: 600; color: #0078D4; margin: 0 0 10px 0;'>1️⃣ Filtros</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0 0 8px 0;'>Use os filtros no topo da página para refinar seus dados:</p>
      <ul style='margin: 0; padding-left: 20px; font-size: 14px; color: #6B7280;'>
        <li>Data: Selecione o período de análise</li>
        <li>Categoria: Filtre por tipo de produto</li>
        <li>Região: Escolha a localização geográfica</li>
      </ul>
    </div>
    
    <div style='background: #FEF3C7; padding: 18px; border-radius: 8px; border-left: 4px solid #FDB813;'>
      <h3 style='font-size: 18px; font-weight: 600; color: #D97706; margin: 0 0 10px 0;'>2️⃣ Gráficos Interativos</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0;'>Clique em qualquer elemento dos gráficos para aplicar filtros cruzados automaticamente</p>
    </div>
    
    <div style='background: #ECFDF5; padding: 18px; border-radius: 8px; border-left: 4px solid #10B981;'>
      <h3 style='font-size: 18px; font-weight: 600; color: #059669; margin: 0 0 10px 0;'>3️⃣ Exportação</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0;'>Use o menu '...' em cada visual para exportar dados em Excel ou PDF</p>
    </div>
  </div>
  
  <div style='background: #EEF2FF; padding: 15px; border-radius: 8px; margin-top: 20px; text-align: center;'>
    <p style='font-size: 13px; color: #6366F1; margin: 0; font-weight: 500;'>💡 Pressione F11 para modo tela cheia</p>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
🎯

Como Usar Filtros

Filtre seus dados para análises precisas

1

Filtros de Data

Selecione períodos específicos para sua análise:

• Clique no calendário
• Escolha data inicial e final
• Ou use opções rápidas: Hoje, Esta Semana, Este Mês
2

Filtros de Categoria

Use checkboxes para selecionar múltiplas categorias ou use a busca para encontrar itens específicos.

3

Limpar Filtros

Clique no botão "Limpar Filtros" no canto superior direito para resetar todas as seleções.


        <div style="max-width: 750px; margin: 0 auto; padding: 25px; background: #F9FAFB; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 25px;">
    <div style="font-size: 48px; margin-bottom: 10px;">🎯</div>
    <h1 style="font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Como Usar Filtros</h1>
    <p style="font-size: 16px; color: #6B7280; margin: 0;">Filtre seus dados para análises precisas</p>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
      <span style="background: #0078D4; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;">1</span>
      <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Filtros de Data</h3>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0 0 10px 0; padding-left: 44px;">Selecione períodos específicos para sua análise:</p>
    <div style="background: #F3F4F6; padding: 12px; border-radius: 6px; margin-left: 44px; font-size: 13px; color: #6B7280;">
      • Clique no calendário<br>
      • Escolha data inicial e final<br>
      • Ou use opções rápidas: Hoje, Esta Semana, Este Mês
    </div>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
      <span style="background: #FDB813; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;">2</span>
      <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Filtros de Categoria</h3>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0; padding-left: 44px;">Use checkboxes para selecionar múltiplas categorias ou use a busca para encontrar itens específicos.</p>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
      <span style="background: #10B981; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;">3</span>
      <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Limpar Filtros</h3>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0; padding-left: 44px;">Clique no botão "Limpar Filtros" no canto superior direito para resetar todas as seleções.</p>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
        <div style='max-width: 750px; margin: 0 auto; padding: 25px; background: #F9FAFB; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='text-align: center; margin-bottom: 25px;'>
    <div style='font-size: 48px; margin-bottom: 10px;'>🎯</div>
    <h1 style='font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>Como Usar Filtros</h1>
    <p style='font-size: 16px; color: #6B7280; margin: 0;'>Filtre seus dados para análises precisas</p>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
    <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
      <span style='background: #0078D4; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;'>1</span>
      <h3 style='font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;'>Filtros de Data</h3>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0 0 10px 0; padding-left: 44px;'>Selecione períodos específicos para sua análise:</p>
    <div style='background: #F3F4F6; padding: 12px; border-radius: 6px; margin-left: 44px; font-size: 13px; color: #6B7280;'>
      • Clique no calendário<br>
      • Escolha data inicial e final<br>
      • Ou use opções rápidas: Hoje, Esta Semana, Este Mês
    </div>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
    <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
      <span style='background: #FDB813; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;'>2</span>
      <h3 style='font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;'>Filtros de Categoria</h3>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0; padding-left: 44px;'>Use checkboxes para selecionar múltiplas categorias ou use a busca para encontrar itens específicos.</p>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
    <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
      <span style='background: #10B981; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;'>3</span>
      <h3 style='font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;'>Limpar Filtros</h3>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0; padding-left: 44px;'>Clique no botão 'Limpar Filtros' no canto superior direito para resetar todas as seleções.</p>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
❓

Perguntas Frequentes

Respostas rápidas para suas dúvidas

🔄 Com que frequência os dados são atualizados?

Os dados são atualizados automaticamente a cada 15 minutos. A última atualização é exibida no canto superior direito.

📊 Por que alguns gráficos estão vazios?

Verifique se há filtros ativos que possam estar ocultando os dados. Clique em "Limpar Filtros" para ver todos os dados disponíveis.

💾 Como exporto os dados?

Clique no ícone "..." no canto de cada visual e selecione "Exportar dados" para baixar em Excel ou CSV.

🔍 Como faço buscas avançadas?

Use a barra de pesquisa no topo. Você pode buscar por nomes, códigos ou usar filtros combinados.

📱 O dashboard funciona em mobile?

Sim! O dashboard é totalmente responsivo e pode ser acessado de qualquer dispositivo.


        <div style="max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 30px;">
    <div style="font-size: 44px; margin-bottom: 10px;">❓</div>
    <h1 style="font-size: 32px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Perguntas Frequentes</h1>
    <p style="font-size: 15px; color: #6B7280; margin: 0;">Respostas rápidas para suas dúvidas</p>
  </div>
  
  <div style="border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden;">
    <div style="background: #F9FAFB; padding: 18px; border-bottom: 1px solid #E5E7EB;">
      <h3 style="font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;">🔄 Com que frequência os dados são atualizados?</h3>
      <p style="font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;">Os dados são atualizados automaticamente a cada 15 minutos. A última atualização é exibida no canto superior direito.</p>
    </div>
    
    <div style="background: white; padding: 18px; border-bottom: 1px solid #E5E7EB;">
      <h3 style="font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;">📊 Por que alguns gráficos estão vazios?</h3>
      <p style="font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;">Verifique se há filtros ativos que possam estar ocultando os dados. Clique em "Limpar Filtros" para ver todos os dados disponíveis.</p>
    </div>
    
    <div style="background: #F9FAFB; padding: 18px; border-bottom: 1px solid #E5E7EB;">
      <h3 style="font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;">💾 Como exporto os dados?</h3>
      <p style="font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;">Clique no ícone "..." no canto de cada visual e selecione "Exportar dados" para baixar em Excel ou CSV.</p>
    </div>
    
    <div style="background: white; padding: 18px; border-bottom: 1px solid #E5E7EB;">
      <h3 style="font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;">🔍 Como faço buscas avançadas?</h3>
      <p style="font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;">Use a barra de pesquisa no topo. Você pode buscar por nomes, códigos ou usar filtros combinados.</p>
    </div>
    
    <div style="background: #F9FAFB; padding: 18px;">
      <h3 style="font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;">📱 O dashboard funciona em mobile?</h3>
      <p style="font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;">Sim! O dashboard é totalmente responsivo e pode ser acessado de qualquer dispositivo.</p>
    </div>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
        <div style='max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='text-align: center; margin-bottom: 30px;'>
    <div style='font-size: 44px; margin-bottom: 10px;'>❓</div>
    <h1 style='font-size: 32px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>Perguntas Frequentes</h1>
    <p style='font-size: 15px; color: #6B7280; margin: 0;'>Respostas rápidas para suas dúvidas</p>
  </div>
  
  <div style='border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden;'>
    <div style='background: #F9FAFB; padding: 18px; border-bottom: 1px solid #E5E7EB;'>
      <h3 style='font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;'>🔄 Com que frequência os dados são atualizados?</h3>
      <p style='font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;'>Os dados são atualizados automaticamente a cada 15 minutos. A última atualização é exibida no canto superior direito.</p>
    </div>
    
    <div style='background: white; padding: 18px; border-bottom: 1px solid #E5E7EB;'>
      <h3 style='font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;'>📊 Por que alguns gráficos estão vazios?</h3>
      <p style='font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;'>Verifique se há filtros ativos que possam estar ocultando os dados. Clique em 'Limpar Filtros' para ver todos os dados disponíveis.</p>
    </div>
    
    <div style='background: #F9FAFB; padding: 18px; border-bottom: 1px solid #E5E7EB;'>
      <h3 style='font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;'>💾 Como exporto os dados?</h3>
      <p style='font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;'>Clique no ícone '...' no canto de cada visual e selecione 'Exportar dados' para baixar em Excel ou CSV.</p>
    </div>
    
    <div style='background: white; padding: 18px; border-bottom: 1px solid #E5E7EB;'>
      <h3 style='font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;'>🔍 Como faço buscas avançadas?</h3>
      <p style='font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;'>Use a barra de pesquisa no topo. Você pode buscar por nomes, códigos ou usar filtros combinados.</p>
    </div>
    
    <div style='background: #F9FAFB; padding: 18px;'>
      <h3 style='font-size: 16px; font-weight: 600; color: #1F2937; margin: 0 0 8px 0;'>📱 O dashboard funciona em mobile?</h3>
      <p style='font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6;'>Sim! O dashboard é totalmente responsivo e pode ser acessado de qualquer dispositivo.</p>
    </div>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
📚

Glossário de Termos

Entenda os principais conceitos do dashboard

KPI (Key Performance Indicator)

Indicador-chave de desempenho. Métrica utilizada para avaliar o sucesso de uma atividade ou objetivo específico.

ROI (Return on Investment)

Retorno sobre investimento. Mede a rentabilidade de um investimento, calculado como (Ganho - Custo) / Custo × 100%.

Churn Rate

Taxa de cancelamento. Percentual de clientes que deixaram de usar o serviço em um determinado período.

CAC (Customer Acquisition Cost)

Custo de aquisição de cliente. Valor total gasto em marketing e vendas dividido pelo número de novos clientes.

LTV (Lifetime Value)

Valor do tempo de vida do cliente. Receita total prevista gerada por um cliente durante todo relacionamento com a empresa.

Conversão

Percentual de visitantes ou leads que completaram uma ação desejada (compra, cadastro, etc.).


       <div style="max-width: 750px; margin: 0 auto; padding: 25px; background: linear-gradient(to bottom, #F9FAFB, white); border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 25px;">
    <div style="font-size: 42px; margin-bottom: 10px;">📚</div>
    <h1 style="font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Glossário de Termos</h1>
    <p style="font-size: 15px; color: #6B7280; margin: 0;">Entenda os principais conceitos do dashboard</p>
  </div>
  
  <div style="display: grid; gap: 12px;">
    <div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #0078D4; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
      <h3 style="font-size: 16px; font-weight: 700; color: #0078D4; margin: 0 0 8px 0;">KPI (Key Performance Indicator)</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;">Indicador-chave de desempenho. Métrica utilizada para avaliar o sucesso de uma atividade ou objetivo específico.</p>
    </div>
    
    <div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #FDB813; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
      <h3 style="font-size: 16px; font-weight: 700; color: #D97706; margin: 0 0 8px 0;">ROI (Return on Investment)</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;">Retorno sobre investimento. Mede a rentabilidade de um investimento, calculado como (Ganho - Custo) / Custo × 100%.</p>
    </div>
    
    <div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #10B981; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
      <h3 style="font-size: 16px; font-weight: 700; color: #059669; margin: 0 0 8px 0;">Churn Rate</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;">Taxa de cancelamento. Percentual de clientes que deixaram de usar o serviço em um determinado período.</p>
    </div>
    
    <div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #6366F1; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
      <h3 style="font-size: 16px; font-weight: 700; color: #6366F1; margin: 0 0 8px 0;">CAC (Customer Acquisition Cost)</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;">Custo de aquisição de cliente. Valor total gasto em marketing e vendas dividido pelo número de novos clientes.</p>
    </div>
    
    <div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #EC4899; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
      <h3 style="font-size: 16px; font-weight: 700; color: #EC4899; margin: 0 0 8px 0;">LTV (Lifetime Value)</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;">Valor do tempo de vida do cliente. Receita total prevista gerada por um cliente durante todo relacionamento com a empresa.</p>
    </div>
    
    <div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #8B5CF6; box-shadow: 0 2px 6px rgba(0,0,0,0.06);">
      <h3 style="font-size: 16px; font-weight: 700; color: #8B5CF6; margin: 0 0 8px 0;">Conversão</h3>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;">Percentual de visitantes ou leads que completaram uma ação desejada (compra, cadastro, etc.).</p>
    </div>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
        <div style='max-width: 750px; margin: 0 auto; padding: 25px; background: linear-gradient(to bottom, #F9FAFB, white); border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='text-align: center; margin-bottom: 25px;'>
    <div style='font-size: 42px; margin-bottom: 10px;'>📚</div>
    <h1 style='font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>Glossário de Termos</h1>
    <p style='font-size: 15px; color: #6B7280; margin: 0;'>Entenda os principais conceitos do dashboard</p>
  </div>
  
  <div style='display: grid; gap: 12px;'>
    <div style='background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #0078D4; box-shadow: 0 2px 6px rgba(0,0,0,0.06);'>
      <h3 style='font-size: 16px; font-weight: 700; color: #0078D4; margin: 0 0 8px 0;'>KPI (Key Performance Indicator)</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;'>Indicador-chave de desempenho. Métrica utilizada para avaliar o sucesso de uma atividade ou objetivo específico.</p>
    </div>
    
    <div style='background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #FDB813; box-shadow: 0 2px 6px rgba(0,0,0,0.06);'>
      <h3 style='font-size: 16px; font-weight: 700; color: #D97706; margin: 0 0 8px 0;'>ROI (Return on Investment)</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;'>Retorno sobre investimento. Mede a rentabilidade de um investimento, calculado como (Ganho - Custo) / Custo × 100%.</p>
    </div>
    
    <div style='background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #10B981; box-shadow: 0 2px 6px rgba(0,0,0,0.06);'>
      <h3 style='font-size: 16px; font-weight: 700; color: #059669; margin: 0 0 8px 0;'>Churn Rate</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;'>Taxa de cancelamento. Percentual de clientes que deixaram de usar o serviço em um determinado período.</p>
    </div>
    
    <div style='background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #6366F1; box-shadow: 0 2px 6px rgba(0,0,0,0.06);'>
      <h3 style='font-size: 16px; font-weight: 700; color: #6366F1; margin: 0 0 8px 0;'>CAC (Customer Acquisition Cost)</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;'>Custo de aquisição de cliente. Valor total gasto em marketing e vendas dividido pelo número de novos clientes.</p>
    </div>
    
    <div style='background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #EC4899; box-shadow: 0 2px 6px rgba(0,0,0,0.06);'>
      <h3 style='font-size: 16px; font-weight: 700; color: #EC4899; margin: 0 0 8px 0;'>LTV (Lifetime Value)</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;'>Valor do tempo de vida do cliente. Receita total prevista gerada por um cliente durante todo relacionamento com a empresa.</p>
    </div>
    
    <div style='background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #8B5CF6; box-shadow: 0 2px 6px rgba(0,0,0,0.06);'>
      <h3 style='font-size: 16px; font-weight: 700; color: #8B5CF6; margin: 0 0 8px 0;'>Conversão</h3>
      <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.5;'>Percentual de visitantes ou leads que completaram uma ação desejada (compra, cadastro, etc.).</p>
    </div>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques

📈 Entendendo os Gráficos

Guia completo para interpretar visualizações

📊

Gráfico de Barras

Quando usar: Comparar valores entre diferentes categorias.

Como ler: Quanto maior a barra, maior o valor. Compare alturas para ver diferenças.

💡 Dica: Clique em uma barra para filtrar todos os outros gráficos por essa categoria.

📈

Gráfico de Linhas

Quando usar: Mostrar tendências ao longo do tempo.

Como ler: Linha subindo = crescimento. Linha descendo = queda. Picos indicam valores máximos.

💡 Dica: Passe o mouse sobre pontos específicos para ver valores exatos.

🥧

Gráfico de Pizza

Quando usar: Mostrar proporções de um todo (100%).

Como ler: Fatias maiores = maior participação. Todas as fatias somam 100%.

💡 Dica: Ideal para visualizar 5-7 categorias no máximo.


       <div style="max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="border-bottom: 3px solid #0078D4; padding-bottom: 20px; margin-bottom: 25px;">
    <h1 style="font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">📈 Entendendo os Gráficos</h1>
    <p style="font-size: 16px; color: #6B7280; margin: 0;">Guia completo para interpretar visualizações</p>
  </div>
  
  <div style="margin-bottom: 25px;">
    <div style="background: #F0F9FF; padding: 20px; border-radius: 10px; border: 2px solid #0078D4;">
      <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
        <span style="font-size: 32px;">📊</span>
        <h2 style="font-size: 22px; font-weight: 600; color: #0078D4; margin: 0;">Gráfico de Barras</h2>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;"><strong>Quando usar:</strong> Comparar valores entre diferentes categorias.</p>
      <p style="font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;"><strong>Como ler:</strong> Quanto maior a barra, maior o valor. Compare alturas para ver diferenças.</p>
      <div style="background: white; padding: 12px; border-radius: 6px; margin-top: 10px;">
        <p style="font-size: 13px; color: #6B7280; margin: 0;">💡 <strong>Dica:</strong> Clique em uma barra para filtrar todos os outros gráficos por essa categoria.</p>
      </div>
    </div>
  </div>
  
  <div style="margin-bottom: 25px;">
    <div style="background: #FEF3C7; padding: 20px; border-radius: 10px; border: 2px solid #FDB813;">
      <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
        <span style="font-size: 32px;">📈</span>
        <h2 style="font-size: 22px; font-weight: 600; color: #D97706; margin: 0;">Gráfico de Linhas</h2>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;"><strong>Quando usar:</strong> Mostrar tendências ao longo do tempo.</p>
      <p style="font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;"><strong>Como ler:</strong> Linha subindo = crescimento. Linha descendo = queda. Picos indicam valores máximos.</p>
      <div style="background: white; padding: 12px; border-radius: 6px; margin-top: 10px;">
        <p style="font-size: 13px; color: #6B7280; margin: 0;">💡 <strong>Dica:</strong> Passe o mouse sobre pontos específicos para ver valores exatos.</p>
      </div>
    </div>
  </div>
  
  <div>
    <div style="background: #ECFDF5; padding: 20px; border-radius: 10px; border: 2px solid #10B981;">
      <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
        <span style="font-size: 32px;">🥧</span>
        <h2 style="font-size: 22px; font-weight: 600; color: #059669; margin: 0;">Gráfico de Pizza</h2>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;"><strong>Quando usar:</strong> Mostrar proporções de um todo (100%).</p>
      <p style="font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;"><strong>Como ler:</strong> Fatias maiores = maior participação. Todas as fatias somam 100%.</p>
      <div style="background: white; padding: 12px; border-radius: 6px; margin-top: 10px;">
        <p style="font-size: 13px; color: #6B7280; margin: 0;">💡 <strong>Dica:</strong> Ideal para visualizar 5-7 categorias no máximo.</p>
      </div>
    </div>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
        <div style='max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='border-bottom: 3px solid #0078D4; padding-bottom: 20px; margin-bottom: 25px;'>
    <h1 style='font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>📈 Entendendo os Gráficos</h1>
    <p style='font-size: 16px; color: #6B7280; margin: 0;'>Guia completo para interpretar visualizações</p>
  </div>
  
  <div style='margin-bottom: 25px;'>
    <div style='background: #F0F9FF; padding: 20px; border-radius: 10px; border: 2px solid #0078D4;'>
      <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
        <span style='font-size: 32px;'>📊</span>
        <h2 style='font-size: 22px; font-weight: 600; color: #0078D4; margin: 0;'>Gráfico de Barras</h2>
      </div>
      <p style='font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;'><strong>Quando usar:</strong> Comparar valores entre diferentes categorias.</p>
      <p style='font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;'><strong>Como ler:</strong> Quanto maior a barra, maior o valor. Compare alturas para ver diferenças.</p>
      <div style='background: white; padding: 12px; border-radius: 6px; margin-top: 10px;'>
        <p style='font-size: 13px; color: #6B7280; margin: 0;'>💡 <strong>Dica:</strong> Clique em uma barra para filtrar todos os outros gráficos por essa categoria.</p>
      </div>
    </div>
  </div>
  
  <div style='margin-bottom: 25px;'>
    <div style='background: #FEF3C7; padding: 20px; border-radius: 10px; border: 2px solid #FDB813;'>
      <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
        <span style='font-size: 32px;'>📈</span>
        <h2 style='font-size: 22px; font-weight: 600; color: #D97706; margin: 0;'>Gráfico de Linhas</h2>
      </div>
      <p style='font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;'><strong>Quando usar:</strong> Mostrar tendências ao longo do tempo.</p>
      <p style='font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;'><strong>Como ler:</strong> Linha subindo = crescimento. Linha descendo = queda. Picos indicam valores máximos.</p>
      <div style='background: white; padding: 12px; border-radius: 6px; margin-top: 10px;'>
        <p style='font-size: 13px; color: #6B7280; margin: 0;'>💡 <strong>Dica:</strong> Passe o mouse sobre pontos específicos para ver valores exatos.</p>
      </div>
    </div>
  </div>
  
  <div>
    <div style='background: #ECFDF5; padding: 20px; border-radius: 10px; border: 2px solid #10B981;'>
      <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
        <span style='font-size: 32px;'>🥧</span>
        <h2 style='font-size: 22px; font-weight: 600; color: #059669; margin: 0;'>Gráfico de Pizza</h2>
      </div>
      <p style='font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;'><strong>Quando usar:</strong> Mostrar proporções de um todo (100%).</p>
      <p style='font-size: 14px; color: #4B5563; margin: 0 0 10px 0; line-height: 1.6;'><strong>Como ler:</strong> Fatias maiores = maior participação. Todas as fatias somam 100%.</p>
      <div style='background: white; padding: 12px; border-radius: 6px; margin-top: 10px;'>
        <p style='font-size: 13px; color: #6B7280; margin: 0;'>💡 <strong>Dica:</strong> Ideal para visualizar 5-7 categorias no máximo.</p>
      </div>
    </div>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
📊

Entendendo os KPIs

Guia completo dos indicadores de performance

💰 Receita Total

O que é: Soma de todas as vendas realizadas no período selecionado.

Como interpretar: Quanto maior, melhor. Acompanhe a tendência mensal.

✓ Meta: Crescimento de 15% ao mês

📦 Número de Vendas

O que é: Quantidade total de transações realizadas.

Como interpretar: Indica o volume de atividade. Compare com ticket médio.

✓ Meta: 500 vendas/mês

👥 Novos Clientes

O que é: Clientes que fizeram sua primeira compra no período.

Como interpretar: Mede a aquisição. Compare com o CAC (custo de aquisição).

✓ Meta: 150 novos clientes/mês

📈 Taxa de Crescimento

O que é: Percentual de crescimento comparado ao período anterior.

Como interpretar: Positivo = crescimento. Negativo = retração. Objetivo: sempre positivo.

✓ Meta: +10% vs mês anterior


      <div style="max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 30px;">
    <div style="font-size: 44px; margin-bottom: 10px;">📊</div>
    <h1 style="font-size: 32px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Entendendo os KPIs</h1>
    <p style="font-size: 15px; color: #6B7280; margin: 0;">Guia completo dos indicadores de performance</p>
  </div>
  
  <div style="display: grid; gap: 18px;">
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: linear-gradient(135deg, #0078D4, #005A9E); padding: 15px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0;">💰 Receita Total</h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>O que é:</strong> Soma de todas as vendas realizadas no período selecionado.</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Como interpretar:</strong> Quanto maior, melhor. Acompanhe a tendência mensal.</p>
        <div style="background: #F0F9FF; padding: 10px; border-radius: 6px; border-left: 3px solid #0078D4;">
          <p style="font-size: 13px; color: #1E40AF; margin: 0; font-weight: 500;">✓ Meta: Crescimento de 15% ao mês</p>
        </div>
      </div>
    </div>
    
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: linear-gradient(135deg, #10B981, #059669); padding: 15px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0;">📦 Número de Vendas</h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>O que é:</strong> Quantidade total de transações realizadas.</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Como interpretar:</strong> Indica o volume de atividade. Compare com ticket médio.</p>
        <div style="background: #ECFDF5; padding: 10px; border-radius: 6px; border-left: 3px solid #10B981;">
          <p style="font-size: 13px; color: #065F46; margin: 0; font-weight: 500;">✓ Meta: 500 vendas/mês</p>
        </div>
      </div>
    </div>
    
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: linear-gradient(135deg, #FDB813, #F7931E); padding: 15px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0;">👥 Novos Clientes</h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>O que é:</strong> Clientes que fizeram sua primeira compra no período.</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Como interpretar:</strong> Mede a aquisição. Compare com o CAC (custo de aquisição).</p>
        <div style="background: #FEF3C7; padding: 10px; border-radius: 6px; border-left: 3px solid #FDB813;">
          <p style="font-size: 13px; color: #92400E; margin: 0; font-weight: 500;">✓ Meta: 150 novos clientes/mês</p>
        </div>
      </div>
    </div>
    
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: linear-gradient(135deg, #6366F1, #4F46E5); padding: 15px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0;">📈 Taxa de Crescimento</h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>O que é:</strong> Percentual de crescimento comparado ao período anterior.</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Como interpretar:</strong> Positivo = crescimento. Negativo = retração. Objetivo: sempre positivo.</p>
        <div style="background: #EEF2FF; padding: 10px; border-radius: 6px; border-left: 3px solid #6366F1;">
          <p style="font-size: 13px; color: #3730A3; margin: 0; font-weight: 500;">✓ Meta: +10% vs mês anterior</p>
        </div>
      </div>
    </div>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
        <div style='max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='text-align: center; margin-bottom: 30px;'>
    <div style='font-size: 44px; margin-bottom: 10px;'>📊</div>
    <h1 style='font-size: 32px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>Entendendo os KPIs</h1>
    <p style='font-size: 15px; color: #6B7280; margin: 0;'>Guia completo dos indicadores de performance</p>
  </div>
  
  <div style='display: grid; gap: 18px;'>
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: linear-gradient(135deg, #0078D4, #005A9E); padding: 15px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0;'>💰 Receita Total</h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>O que é:</strong> Soma de todas as vendas realizadas no período selecionado.</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Como interpretar:</strong> Quanto maior, melhor. Acompanhe a tendência mensal.</p>
        <div style='background: #F0F9FF; padding: 10px; border-radius: 6px; border-left: 3px solid #0078D4;'>
          <p style='font-size: 13px; color: #1E40AF; margin: 0; font-weight: 500;'>✓ Meta: Crescimento de 15% ao mês</p>
        </div>
      </div>
    </div>
    
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: linear-gradient(135deg, #10B981, #059669); padding: 15px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0;'>📦 Número de Vendas</h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>O que é:</strong> Quantidade total de transações realizadas.</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Como interpretar:</strong> Indica o volume de atividade. Compare com ticket médio.</p>
        <div style='background: #ECFDF5; padding: 10px; border-radius: 6px; border-left: 3px solid #10B981;'>
          <p style='font-size: 13px; color: #065F46; margin: 0; font-weight: 500;'>✓ Meta: 500 vendas/mês</p>
        </div>
      </div>
    </div>
    
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: linear-gradient(135deg, #FDB813, #F7931E); padding: 15px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0;'>👥 Novos Clientes</h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>O que é:</strong> Clientes que fizeram sua primeira compra no período.</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Como interpretar:</strong> Mede a aquisição. Compare com o CAC (custo de aquisição).</p>
        <div style='background: #FEF3C7; padding: 10px; border-radius: 6px; border-left: 3px solid #FDB813;'>
          <p style='font-size: 13px; color: #92400E; margin: 0; font-weight: 500;'>✓ Meta: 150 novos clientes/mês</p>
        </div>
      </div>
    </div>
    
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: linear-gradient(135deg, #6366F1, #4F46E5); padding: 15px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0;'>📈 Taxa de Crescimento</h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>O que é:</strong> Percentual de crescimento comparado ao período anterior.</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Como interpretar:</strong> Positivo = crescimento. Negativo = retração. Objetivo: sempre positivo.</p>
        <div style='background: #EEF2FF; padding: 10px; border-radius: 6px; border-left: 3px solid #6366F1;'>
          <p style='font-size: 13px; color: #3730A3; margin: 0; font-weight: 500;'>✓ Meta: +10% vs mês anterior</p>
        </div>
      </div>
    </div>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
💡

Dicas de Análise

Extraia o máximo de insights dos seus dados

🎯

Compare Períodos

Sempre compare o período atual com o anterior (mês, trimestre, ano). Tendências são mais importantes que valores absolutos.

🔍

Procure Padrões

Identifique sazonalidades, picos e quedas. Use gráficos de linha para visualizar comportamentos ao longo do tempo.

🎲

Segmente Seus Dados

Analise por região, produto, cliente. Segmentos diferentes podem ter comportamentos muito distintos.

⚠️

Questione Anomalias

Valores muito altos ou baixos merecem investigação. Podem ser oportunidades ou problemas escondidos.

🔗

Relacione Métricas

Analise KPIs em conjunto. Por exemplo: muitas vendas + baixo ticket médio pode indicar necessidade de upsell.

📅

Análise Regular

Estabeleça uma rotina de análise (diária, semanal, mensal). Consistência gera insights mais profundos.

🚀 Lembre-se: dados só geram valor quando transformados em ações!


     <div style="max-width: 750px; margin: 0 auto; padding: 25px; background: #F9FAFB; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 25px;">
    <div style="font-size: 46px; margin-bottom: 10px;">💡</div>
    <h1 style="font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Dicas de Análise</h1>
    <p style="font-size: 16px; color: #6B7280; margin: 0;">Extraia o máximo de insights dos seus dados</p>
  </div>
  
  <div style="display: grid; gap: 15px;">
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #0078D4;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">🎯</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Compare Períodos</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Sempre compare o período atual com o anterior (mês, trimestre, ano). Tendências são mais importantes que valores absolutos.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #10B981;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">🔍</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Procure Padrões</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Identifique sazonalidades, picos e quedas. Use gráficos de linha para visualizar comportamentos ao longo do tempo.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #FDB813;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">🎲</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Segmente Seus Dados</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Analise por região, produto, cliente. Segmentos diferentes podem ter comportamentos muito distintos.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #6366F1;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">⚠️</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Questione Anomalias</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Valores muito altos ou baixos merecem investigação. Podem ser oportunidades ou problemas escondidos.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #EC4899;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">🔗</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Relacione Métricas</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Analise KPIs em conjunto. Por exemplo: muitas vendas + baixo ticket médio pode indicar necessidade de upsell.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #8B5CF6;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">📅</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Análise Regular</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Estabeleça uma rotina de análise (diária, semanal, mensal). Consistência gera insights mais profundos.</p>
    </div>
  </div>
  
  <div style="background: linear-gradient(135deg, #0078D4, #005A9E); color: white; padding: 18px; border-radius: 8px; margin-top: 20px; text-align: center;">
    <p style="font-size: 15px; margin: 0; font-weight: 500;">🚀 Lembre-se: dados só geram valor quando transformados em ações!</p>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
        <div style="max-width: 750px; margin: 0 auto; padding: 25px; background: #F9FAFB; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 25px;">
    <div style="font-size: 46px; margin-bottom: 10px;">💡</div>
    <h1 style="font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Dicas de Análise</h1>
    <p style="font-size: 16px; color: #6B7280; margin: 0;">Extraia o máximo de insights dos seus dados</p>
  </div>
  
  <div style="display: grid; gap: 15px;">
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #0078D4;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">🎯</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Compare Períodos</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Sempre compare o período atual com o anterior (mês, trimestre, ano). Tendências são mais importantes que valores absolutos.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #10B981;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">🔍</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Procure Padrões</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Identifique sazonalidades, picos e quedas. Use gráficos de linha para visualizar comportamentos ao longo do tempo.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #FDB813;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">🎲</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Segmente Seus Dados</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Analise por região, produto, cliente. Segmentos diferentes podem ter comportamentos muito distintos.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #6366F1;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">⚠️</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Questione Anomalias</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Valores muito altos ou baixos merecem investigação. Podem ser oportunidades ou problemas escondidos.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #EC4899;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">🔗</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Relacione Métricas</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Analise KPIs em conjunto. Por exemplo: muitas vendas + baixo ticket médio pode indicar necessidade de upsell.</p>
    </div>
    
    <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #8B5CF6;">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
        <span style="font-size: 24px;">📅</span>
        <h3 style="font-size: 18px; font-weight: 600; color: #1F2937; margin: 0;">Análise Regular</h3>
      </div>
      <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Estabeleça uma rotina de análise (diária, semanal, mensal). Consistência gera insights mais profundos.</p>
    </div>
  </div>
  
  <div style="background: linear-gradient(135deg, #0078D4, #005A9E); color: white; padding: 18px; border-radius: 8px; margin-top: 20px; text-align: center;">
    <p style="font-size: 15px; margin: 0; font-weight: 500;">🚀 Lembre-se: dados só geram valor quando transformados em ações!</p>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
⚖️

Comparativo de Métricas

Diferenças entre métricas que se parecem

Receita vs Lucro

💰 Receita

Total de vendas ANTES de descontar custos. Inclui impostos e despesas.

💵 Lucro

O que sobra DEPOIS de pagar todos os custos. É o ganho real.

Clientes vs Leads

👥 Clientes

Pessoas que JÁ compraram. Têm histórico de transações.

🎯 Leads

Potenciais clientes. Demonstraram interesse mas AINDA NÃO compraram.

Taxa de Conversão vs Taxa de Retenção

🎯 Conversão

% de NOVOS visitantes/leads que se tornaram clientes.

🔄 Retenção

% de clientes EXISTENTES que continuaram comprando.

📚 Consulte sempre o Glossário para esclarecer dúvidas sobre métricas


     <div style="max-width: 850px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 30px;">
    <div style="font-size: 44px; margin-bottom: 10px;">⚖️</div>
    <h1 style="font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Comparativo de Métricas</h1>
    <p style="font-size: 15px; color: #6B7280; margin: 0;">Diferenças entre métricas que se parecem</p>
  </div>
  
  <div style="border: 2px solid #E5E7EB; border-radius: 10px; margin-bottom: 20px; overflow: hidden;">
    <div style="background: #F9FAFB; padding: 15px; border-bottom: 2px solid #E5E7EB;">
      <h2 style="font-size: 20px; font-weight: 700; color: #1F2937; margin: 0;">Receita vs Lucro</h2>
    </div>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0;">
      <div style="padding: 18px; border-right: 1px solid #E5E7EB;">
        <h3 style="font-size: 16px; font-weight: 600; color: #0078D4; margin: 0 0 10px 0;">💰 Receita</h3>
        <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Total de vendas ANTES de descontar custos. Inclui impostos e despesas.</p>
      </div>
      <div style="padding: 18px;">
        <h3 style="font-size: 16px; font-weight: 600; color: #10B981; margin: 0 0 10px 0;">💵 Lucro</h3>
        <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">O que sobra DEPOIS de pagar todos os custos. É o ganho real.</p>
      </div>
    </div>
  </div>
  
  <div style="border: 2px solid #E5E7EB; border-radius: 10px; margin-bottom: 20px; overflow: hidden;">
    <div style="background: #F9FAFB; padding: 15px; border-bottom: 2px solid #E5E7EB;">
      <h2 style="font-size: 20px; font-weight: 700; color: #1F2937; margin: 0;">Clientes vs Leads</h2>
    </div>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0;">
      <div style="padding: 18px; border-right: 1px solid #E5E7EB;">
        <h3 style="font-size: 16px; font-weight: 600; color: #0078D4; margin: 0 0 10px 0;">👥 Clientes</h3>
        <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Pessoas que JÁ compraram. Têm histórico de transações.</p>
      </div>
      <div style="padding: 18px;">
        <h3 style="font-size: 16px; font-weight: 600; color: #FDB813; margin: 0 0 10px 0;">🎯 Leads</h3>
        <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">Potenciais clientes. Demonstraram interesse mas AINDA NÃO compraram.</p>
      </div>
    </div>
  </div>
  
  <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
    <div style="background: #F9FAFB; padding: 15px; border-bottom: 2px solid #E5E7EB;">
      <h2 style="font-size: 20px; font-weight: 700; color: #1F2937; margin: 0;">Taxa de Conversão vs Taxa de Retenção</h2>
    </div>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0;">
      <div style="padding: 18px; border-right: 1px solid #E5E7EB;">
        <h3 style="font-size: 16px; font-weight: 600; color: #0078D4; margin: 0 0 10px 0;">🎯 Conversão</h3>
        <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">% de NOVOS visitantes/leads que se tornaram clientes.</p>
      </div>
      <div style="padding: 18px;">
        <h3 style="font-size: 16px; font-weight: 600; color: #6366F1; margin: 0 0 10px 0;">🔄 Retenção</h3>
        <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;">% de clientes EXISTENTES que continuaram comprando.</p>
      </div>
    </div>
  </div>
  
  <div style="background: #EEF2FF; padding: 16px; border-radius: 8px; margin-top: 20px; text-align: center;">
    <p style="font-size: 13px; color: #4F46E5; margin: 0; font-weight: 500;">📚 Consulte sempre o Glossário para esclarecer dúvidas sobre métricas</p>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
        <div style='max-width: 850px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='text-align: center; margin-bottom: 30px;'>
    <div style='font-size: 44px; margin-bottom: 10px;'>⚖️</div>
    <h1 style='font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>Comparativo de Métricas</h1>
    <p style='font-size: 15px; color: #6B7280; margin: 0;'>Diferenças entre métricas que se parecem</p>
  </div>
  
  <div style='border: 2px solid #E5E7EB; border-radius: 10px; margin-bottom: 20px; overflow: hidden;'>
    <div style='background: #F9FAFB; padding: 15px; border-bottom: 2px solid #E5E7EB;'>
      <h2 style='font-size: 20px; font-weight: 700; color: #1F2937; margin: 0;'>Receita vs Lucro</h2>
    </div>
    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 0;'>
      <div style='padding: 18px; border-right: 1px solid #E5E7EB;'>
        <h3 style='font-size: 16px; font-weight: 600; color: #0078D4; margin: 0 0 10px 0;'>💰 Receita</h3>
        <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'>Total de vendas ANTES de descontar custos. Inclui impostos e despesas.</p>
      </div>
      <div style='padding: 18px;'>
        <h3 style='font-size: 16px; font-weight: 600; color: #10B981; margin: 0 0 10px 0;'>💵 Lucro</h3>
        <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'>O que sobra DEPOIS de pagar todos os custos. É o ganho real.</p>
      </div>
    </div>
  </div>
  
  <div style='border: 2px solid #E5E7EB; border-radius: 10px; margin-bottom: 20px; overflow: hidden;'>
    <div style='background: #F9FAFB; padding: 15px; border-bottom: 2px solid #E5E7EB;'>
      <h2 style='font-size: 20px; font-weight: 700; color: #1F2937; margin: 0;'>Clientes vs Leads</h2>
    </div>
    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 0;'>
      <div style='padding: 18px; border-right: 1px solid #E5E7EB;'>
        <h3 style='font-size: 16px; font-weight: 600; color: #0078D4; margin: 0 0 10px 0;'>👥 Clientes</h3>
        <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'>Pessoas que JÁ compraram. Têm histórico de transações.</p>
      </div>
      <div style='padding: 18px;'>
        <h3 style='font-size: 16px; font-weight: 600; color: #FDB813; margin: 0 0 10px 0;'>🎯 Leads</h3>
        <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'>Potenciais clientes. Demonstraram interesse mas AINDA NÃO compraram.</p>
      </div>
    </div>
  </div>
  
  <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
    <div style='background: #F9FAFB; padding: 15px; border-bottom: 2px solid #E5E7EB;'>
      <h2 style='font-size: 20px; font-weight: 700; color: #1F2937; margin: 0;'>Taxa de Conversão vs Taxa de Retenção</h2>
    </div>
    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 0;'>
      <div style='padding: 18px; border-right: 1px solid #E5E7EB;'>
        <h3 style='font-size: 16px; font-weight: 600; color: #0078D4; margin: 0 0 10px 0;'>🎯 Conversão</h3>
        <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'>% de NOVOS visitantes/leads que se tornaram clientes.</p>
      </div>
      <div style='padding: 18px;'>
        <h3 style='font-size: 16px; font-weight: 600; color: #6366F1; margin: 0 0 10px 0;'>🔄 Retenção</h3>
        <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'>% de clientes EXISTENTES que continuaram comprando.</p>
      </div>
    </div>
  </div>
  
  <div style='background: #EEF2FF; padding: 16px; border-radius: 8px; margin-top: 20px; text-align: center;'>
    <p style='font-size: 13px; color: #4F46E5; margin: 0; font-weight: 500;'>📚 Consulte sempre o Glossário para esclarecer dúvidas sobre métricas</p>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
📈

Análise de Tendências

Identifique padrões e preveja resultados

📊 Tendência de Alta (Crescimento)

Características:

  • Valores aumentando consistentemente
  • Cada ponto mais alto que o anterior
  • Linha ascendente no gráfico

O que fazer: Identifique o que está funcionando e replique. Invista mais nesses canais/produtos.

📉 Tendência de Baixa (Queda)

Características:

  • Valores diminuindo ao longo do tempo
  • Linha descendente no gráfico
  • Performance piorando

O que fazer: Investigue as causas. Faça ajustes rápidos. Considere mudança de estratégia.

➡️ Tendência Estável (Platô)

Características:

  • Valores praticamente constantes
  • Linha horizontal no gráfico
  • Pouca variação entre períodos

O que fazer: Busque inovação. Teste novas estratégias para sair da estagnação.

🔄 Padrão Sazonal

Características:

  • Picos e quedas em períodos previsíveis
  • Padrão se repete anualmente
  • Relacionado a datas/eventos específicos

O que fazer: Prepare-se para os picos. Otimize estoque e equipe antes das altas temporadas.


    <div style="max-width: 750px; margin: 0 auto; padding: 25px; background: #F9FAFB; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 25px;">
    <div style="font-size: 46px; margin-bottom: 10px;">📈</div>
    <h1 style="font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Análise de Tendências</h1>
    <p style="font-size: 16px; color: #6B7280; margin: 0;">Identifique padrões e preveja resultados</p>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
    <h2 style="font-size: 20px; font-weight: 700; color: #10B981; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;">
      <span>📊</span> Tendência de Alta (Crescimento)
    </h2>
    <div style="background: #ECFDF5; padding: 15px; border-radius: 8px; border-left: 4px solid #10B981; margin-bottom: 12px;">
      <p style="font-size: 14px; color: #065F46; margin: 0 0 8px 0; font-weight: 600;">Características:</p>
      <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #065F46;">
        <li>Valores aumentando consistentemente</li>
        <li>Cada ponto mais alto que o anterior</li>
        <li>Linha ascendente no gráfico</li>
      </ul>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;"><strong>O que fazer:</strong> Identifique o que está funcionando e replique. Invista mais nesses canais/produtos.</p>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
    <h2 style="font-size: 20px; font-weight: 700; color: #DC2626; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;">
      <span>📉</span> Tendência de Baixa (Queda)
    </h2>
    <div style="background: #FEE2E2; padding: 15px; border-radius: 8px; border-left: 4px solid #DC2626; margin-bottom: 12px;">
      <p style="font-size: 14px; color: #7F1D1D; margin: 0 0 8px 0; font-weight: 600;">Características:</p>
      <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #7F1D1D;">
        <li>Valores diminuindo ao longo do tempo</li>
        <li>Linha descendente no gráfico</li>
        <li>Performance piorando</li>
      </ul>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;"><strong>O que fazer:</strong> Investigue as causas. Faça ajustes rápidos. Considere mudança de estratégia.</p>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
    <h2 style="font-size: 20px; font-weight: 700; color: #0078D4; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;">
      <span>➡️</span> Tendência Estável (Platô)
    </h2>
    <div style="background: #F0F9FF; padding: 15px; border-radius: 8px; border-left: 4px solid #0078D4; margin-bottom: 12px;">
      <p style="font-size: 14px; color: #1E40AF; margin: 0 0 8px 0; font-weight: 600;">Características:</p>
      <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #1E40AF;">
        <li>Valores praticamente constantes</li>
        <li>Linha horizontal no gráfico</li>
        <li>Pouca variação entre períodos</li>
      </ul>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;"><strong>O que fazer:</strong> Busque inovação. Teste novas estratégias para sair da estagnação.</p>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
    <h2 style="font-size: 20px; font-weight: 700; color: #F59E0B; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;">
      <span>🔄</span> Padrão Sazonal
    </h2>
    <div style="background: #FEF3C7; padding: 15px; border-radius: 8px; border-left: 4px solid #F59E0B; margin-bottom: 12px;">
      <p style="font-size: 14px; color: #92400E; margin: 0 0 8px 0; font-weight: 600;">Características:</p>
      <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #92400E;">
        <li>Picos e quedas em períodos previsíveis</li>
        <li>Padrão se repete anualmente</li>
        <li>Relacionado a datas/eventos específicos</li>
      </ul>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;"><strong>O que fazer:</strong> Prepare-se para os picos. Otimize estoque e equipe antes das altas temporadas.</p>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
        <div style='max-width: 750px; margin: 0 auto; padding: 25px; background: #F9FAFB; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='text-align: center; margin-bottom: 25px;'>
    <div style='font-size: 46px; margin-bottom: 10px;'>📈</div>
    <h1 style='font-size: 30px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>Análise de Tendências</h1>
    <p style='font-size: 16px; color: #6B7280; margin: 0;'>Identifique padrões e preveja resultados</p>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
    <h2 style='font-size: 20px; font-weight: 700; color: #10B981; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;'>
      <span>📊</span> Tendência de Alta (Crescimento)
    </h2>
    <div style='background: #ECFDF5; padding: 15px; border-radius: 8px; border-left: 4px solid #10B981; margin-bottom: 12px;'>
      <p style='font-size: 14px; color: #065F46; margin: 0 0 8px 0; font-weight: 600;'>Características:</p>
      <ul style='margin: 0; padding-left: 20px; font-size: 14px; color: #065F46;'>
        <li>Valores aumentando consistentemente</li>
        <li>Cada ponto mais alto que o anterior</li>
        <li>Linha ascendente no gráfico</li>
      </ul>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'><strong>O que fazer:</strong> Identifique o que está funcionando e replique. Invista mais nesses canais/produtos.</p>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
    <h2 style='font-size: 20px; font-weight: 700; color: #DC2626; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;'>
      <span>📉</span> Tendência de Baixa (Queda)
    </h2>
    <div style='background: #FEE2E2; padding: 15px; border-radius: 8px; border-left: 4px solid #DC2626; margin-bottom: 12px;'>
      <p style='font-size: 14px; color: #7F1D1D; margin: 0 0 8px 0; font-weight: 600;'>Características:</p>
      <ul style='margin: 0; padding-left: 20px; font-size: 14px; color: #7F1D1D;'>
        <li>Valores diminuindo ao longo do tempo</li>
        <li>Linha descendente no gráfico</li>
        <li>Performance piorando</li>
      </ul>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'><strong>O que fazer:</strong> Investigue as causas. Faça ajustes rápidos. Considere mudança de estratégia.</p>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
    <h2 style='font-size: 20px; font-weight: 700; color: #0078D4; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;'>
      <span>➡️</span> Tendência Estável (Platô)
    </h2>
    <div style='background: #F0F9FF; padding: 15px; border-radius: 8px; border-left: 4px solid #0078D4; margin-bottom: 12px;'>
      <p style='font-size: 14px; color: #1E40AF; margin: 0 0 8px 0; font-weight: 600;'>Características:</p>
      <ul style='margin: 0; padding-left: 20px; font-size: 14px; color: #1E40AF;'>
        <li>Valores praticamente constantes</li>
        <li>Linha horizontal no gráfico</li>
        <li>Pouca variação entre períodos</li>
      </ul>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'><strong>O que fazer:</strong> Busque inovação. Teste novas estratégias para sair da estagnação.</p>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
    <h2 style='font-size: 20px; font-weight: 700; color: #F59E0B; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px;'>
      <span>🔄</span> Padrão Sazonal
    </h2>
    <div style='background: #FEF3C7; padding: 15px; border-radius: 8px; border-left: 4px solid #F59E0B; margin-bottom: 12px;'>
      <p style='font-size: 14px; color: #92400E; margin: 0 0 8px 0; font-weight: 600;'>Características:</p>
      <ul style='margin: 0; padding-left: 20px; font-size: 14px; color: #92400E;'>
        <li>Picos e quedas em períodos previsíveis</li>
        <li>Padrão se repete anualmente</li>
        <li>Relacionado a datas/eventos específicos</li>
      </ul>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0; line-height: 1.6;'><strong>O que fazer:</strong> Prepare-se para os picos. Otimize estoque e equipe antes das altas temporadas.</p>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
🔍

Tipos de Filtros

Domine todos os tipos de filtro do dashboard

📅 Filtro de Data

Quando usar: Para análises temporais (diário, semanal, mensal, anual).

Tipos disponíveis:

  • Intervalo personalizado: Escolha data inicial e final
  • Relativos: Últimos 7 dias, Este mês, Este ano
  • Específicos: Hoje, Ontem, Esta semana

☑️ Filtro de Seleção Múltipla

Quando usar: Para escolher várias categorias ao mesmo tempo.

Exemplos: Múltiplos produtos, várias regiões, diferentes vendedores.

💡 Use Ctrl+clique para selecionar múltiplos itens

🔢 Filtro Numérico (Slider)

Quando usar: Para definir intervalos de valores (preço, quantidade, etc.).

Exemplos: Faixa de preço (R$ 0 - R$ 1.000), Idade (18-65), Quantidade (1-100).

💡 Arraste as extremidades para ajustar o intervalo

🔎 Filtro de Busca (Pesquisa)

Quando usar: Para encontrar itens específicos em listas grandes.

Exemplos: Buscar cliente por nome, procurar produto por código.

💡 Digite parte do nome para filtrar automaticamente

🎯 Filtro Cruzado

Quando usar: Filtro automático ao clicar em elementos de gráficos.

Como funciona: Ao clicar numa barra/fatia, todos os gráficos são filtrados automaticamente.

💡 Clique novamente no mesmo elemento para remover o filtro


    <div style="max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 30px;">
    <div style="font-size: 46px; margin-bottom: 10px;">🔍</div>
    <h1 style="font-size: 32px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Tipos de Filtros</h1>
    <p style="font-size: 15px; color: #6B7280; margin: 0;">Domine todos os tipos de filtro do dashboard</p>
  </div>
  
  <div style="display: grid; gap: 18px;">
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: #0078D4; padding: 16px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;">
          <span>📅</span> Filtro de Data
        </h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Quando usar:</strong> Para análises temporais (diário, semanal, mensal, anual).</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Tipos disponíveis:</strong></p>
        <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #6B7280;">
          <li><strong>Intervalo personalizado:</strong> Escolha data inicial e final</li>
          <li><strong>Relativos:</strong> Últimos 7 dias, Este mês, Este ano</li>
          <li><strong>Específicos:</strong> Hoje, Ontem, Esta semana</li>
        </ul>
      </div>
    </div>
    
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: #10B981; padding: 16px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;">
          <span>☑️</span> Filtro de Seleção Múltipla
        </h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Quando usar:</strong> Para escolher várias categorias ao mesmo tempo.</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Exemplos:</strong> Múltiplos produtos, várias regiões, diferentes vendedores.</p>
        <div style="background: #ECFDF5; padding: 12px; border-radius: 6px;">
          <p style="font-size: 13px; color: #065F46; margin: 0; font-weight: 500;">💡 Use Ctrl+clique para selecionar múltiplos itens</p>
        </div>
      </div>
    </div>
    
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: #FDB813; padding: 16px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;">
          <span>🔢</span> Filtro Numérico (Slider)
        </h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Quando usar:</strong> Para definir intervalos de valores (preço, quantidade, etc.).</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Exemplos:</strong> Faixa de preço (R$ 0 - R$ 1.000), Idade (18-65), Quantidade (1-100).</p>
        <div style="background: #FEF3C7; padding: 12px; border-radius: 6px;">
          <p style="font-size: 13px; color: #92400E; margin: 0; font-weight: 500;">💡 Arraste as extremidades para ajustar o intervalo</p>
        </div>
      </div>
    </div>
    
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: #6366F1; padding: 16px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;">
          <span>🔎</span> Filtro de Busca (Pesquisa)
        </h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Quando usar:</strong> Para encontrar itens específicos em listas grandes.</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Exemplos:</strong> Buscar cliente por nome, procurar produto por código.</p>
        <div style="background: #EEF2FF; padding: 12px; border-radius: 6px;">
          <p style="font-size: 13px; color: #4338CA; margin: 0; font-weight: 500;">💡 Digite parte do nome para filtrar automaticamente</p>
        </div>
      </div>
    </div>
    
    <div style="border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;">
      <div style="background: #EC4899; padding: 16px;">
        <h3 style="font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;">
          <span>🎯</span> Filtro Cruzado
        </h3>
      </div>
      <div style="padding: 18px;">
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Quando usar:</strong> Filtro automático ao clicar em elementos de gráficos.</p>
        <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Como funciona:</strong> Ao clicar numa barra/fatia, todos os gráficos são filtrados automaticamente.</p>
        <div style="background: #FCE7F3; padding: 12px; border-radius: 6px;">
          <p style="font-size: 13px; color: #9F1239; margin: 0; font-weight: 500;">💡 Clique novamente no mesmo elemento para remover o filtro</p>
        </div>
      </div>
    </div>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
       <div style='max-width: 800px; margin: 0 auto; padding: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='text-align: center; margin-bottom: 30px;'>
    <div style='font-size: 46px; margin-bottom: 10px;'>🔍</div>
    <h1 style='font-size: 32px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>Tipos de Filtros</h1>
    <p style='font-size: 15px; color: #6B7280; margin: 0;'>Domine todos os tipos de filtro do dashboard</p>
  </div>
  
  <div style='display: grid; gap: 18px;'>
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: #0078D4; padding: 16px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;'>
          <span>📅</span> Filtro de Data
        </h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Quando usar:</strong> Para análises temporais (diário, semanal, mensal, anual).</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Tipos disponíveis:</strong></p>
        <ul style='margin: 0; padding-left: 20px; font-size: 14px; color: #6B7280;'>
          <li><strong>Intervalo personalizado:</strong> Escolha data inicial e final</li>
          <li><strong>Relativos:</strong> Últimos 7 dias, Este mês, Este ano</li>
          <li><strong>Específicos:</strong> Hoje, Ontem, Esta semana</li>
        </ul>
      </div>
    </div>
    
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: #10B981; padding: 16px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;'>
          <span>☑️</span> Filtro de Seleção Múltipla
        </h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Quando usar:</strong> Para escolher várias categorias ao mesmo tempo.</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Exemplos:</strong> Múltiplos produtos, várias regiões, diferentes vendedores.</p>
        <div style='background: #ECFDF5; padding: 12px; border-radius: 6px;'>
          <p style='font-size: 13px; color: #065F46; margin: 0; font-weight: 500;'>💡 Use Ctrl+clique para selecionar múltiplos itens</p>
        </div>
      </div>
    </div>
    
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: #FDB813; padding: 16px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;'>
          <span>🔢</span> Filtro Numérico (Slider)
        </h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Quando usar:</strong> Para definir intervalos de valores (preço, quantidade, etc.).</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Exemplos:</strong> Faixa de preço (R$ 0 - R$ 1.000), Idade (18-65), Quantidade (1-100).</p>
        <div style='background: #FEF3C7; padding: 12px; border-radius: 6px;'>
          <p style='font-size: 13px; color: #92400E; margin: 0; font-weight: 500;'>💡 Arraste as extremidades para ajustar o intervalo</p>
        </div>
      </div>
    </div>
    
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: #6366F1; padding: 16px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;'>
          <span>🔎</span> Filtro de Busca (Pesquisa)
        </h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Quando usar:</strong> Para encontrar itens específicos em listas grandes.</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Exemplos:</strong> Buscar cliente por nome, procurar produto por código.</p>
        <div style='background: #EEF2FF; padding: 12px; border-radius: 6px;'>
          <p style='font-size: 13px; color: #4338CA; margin: 0; font-weight: 500;'>💡 Digite parte do nome para filtrar automaticamente</p>
        </div>
      </div>
    </div>
    
    <div style='border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden;'>
      <div style='background: #EC4899; padding: 16px;'>
        <h3 style='font-size: 20px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; gap: 10px;'>
          <span>🎯</span> Filtro Cruzado
        </h3>
      </div>
      <div style='padding: 18px;'>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Quando usar:</strong> Filtro automático ao clicar em elementos de gráficos.</p>
        <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Como funciona:</strong> Ao clicar numa barra/fatia, todos os gráficos são filtrados automaticamente.</p>
        <div style='background: #FCE7F3; padding: 12px; border-radius: 6px;'>
          <p style='font-size: 13px; color: #9F1239; margin: 0; font-weight: 500;'>💡 Clique novamente no mesmo elemento para remover o filtro</p>
        </div>
      </div>
    </div>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques
📥

Exportação de Dados

Baixe e compartilhe suas análises

📊

Excel (.xlsx)

Formato recomendado para análises

Melhor para: Manipular dados, criar tabelas dinâmicas, fazer cálculos personalizados.

Como exportar:

  1. Clique no "..." no canto do visual
  2. Selecione "Exportar dados"
  3. Escolha "Excel" e clique em "Exportar"
📄

PDF

Para relatórios e apresentações

Melhor para: Compartilhar relatórios finalizados, apresentações para clientes, arquivamento.

Como exportar:

  1. Clique em "Arquivo" no menu
  2. Selecione "Exportar para PDF"
  3. Escolha páginas e clique em "Exportar"
📋

CSV (.csv)

Formato universal de dados

Melhor para: Importar em outros sistemas, integração com ferramentas externas.

💡 CSV não mantém formatação, apenas dados brutos

🖼️

Imagem (.png)

Para slides e documentos

Melhor para: Inserir gráficos em apresentações PowerPoint, documentos Word, emails.

Como exportar:

Clique com botão direito no visual → "Exportar como imagem"


    <div style="max-width: 750px; margin: 0 auto; padding: 25px; background: linear-gradient(to bottom, white, #F9FAFB); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;">
  <div style="text-align: center; margin-bottom: 30px;">
    <div style="font-size: 48px; margin-bottom: 10px;">📥</div>
    <h1 style="font-size: 32px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;">Exportação de Dados</h1>
    <p style="font-size: 15px; color: #6B7280; margin: 0;">Baixe e compartilhe suas análises</p>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; border: 2px solid #E5E7EB;">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
      <span style="font-size: 36px;">📊</span>
      <div>
        <h3 style="font-size: 20px; font-weight: 700; color: #10B981; margin: 0;">Excel (.xlsx)</h3>
        <p style="font-size: 13px; color: #6B7280; margin: 0;">Formato recomendado para análises</p>
      </div>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Melhor para:</strong> Manipular dados, criar tabelas dinâmicas, fazer cálculos personalizados.</p>
    <div style="background: #F0F9FF; padding: 12px; border-radius: 6px;">
      <p style="font-size: 13px; color: #1E40AF; margin: 0 0 6px 0; font-weight: 600;">Como exportar:</p>
      <ol style="margin: 0; padding-left: 20px; font-size: 13px; color: #1E40AF;">
        <li>Clique no "..." no canto do visual</li>
        <li>Selecione "Exportar dados"</li>
        <li>Escolha "Excel" e clique em "Exportar"</li>
      </ol>
    </div>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; border: 2px solid #E5E7EB;">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
      <span style="font-size: 36px;">📄</span>
      <div>
        <h3 style="font-size: 20px; font-weight: 700; color: #DC2626; margin: 0;">PDF</h3>
        <p style="font-size: 13px; color: #6B7280; margin: 0;">Para relatórios e apresentações</p>
      </div>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Melhor para:</strong> Compartilhar relatórios finalizados, apresentações para clientes, arquivamento.</p>
    <div style="background: #FEE2E2; padding: 12px; border-radius: 6px;">
      <p style="font-size: 13px; color: #7F1D1D; margin: 0 0 6px 0; font-weight: 600;">Como exportar:</p>
      <ol style="margin: 0; padding-left: 20px; font-size: 13px; color: #7F1D1D;">
        <li>Clique em "Arquivo" no menu</li>
        <li>Selecione "Exportar para PDF"</li>
        <li>Escolha páginas e clique em "Exportar"</li>
      </ol>
    </div>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; border: 2px solid #E5E7EB;">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
      <span style="font-size: 36px;">📋</span>
      <div>
        <h3 style="font-size: 20px; font-weight: 700; color: #0078D4; margin: 0;">CSV (.csv)</h3>
        <p style="font-size: 13px; color: #6B7280; margin: 0;">Formato universal de dados</p>
      </div>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Melhor para:</strong> Importar em outros sistemas, integração com ferramentas externas.</p>
    <div style="background: #F0F9FF; padding: 12px; border-radius: 6px;">
      <p style="font-size: 13px; color: #1E40AF; margin: 0; font-weight: 600;">💡 CSV não mantém formatação, apenas dados brutos</p>
    </div>
  </div>
  
  <div style="background: white; padding: 20px; border-radius: 10px; border: 2px solid #E5E7EB;">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
      <span style="font-size: 36px;">🖼️</span>
      <div>
        <h3 style="font-size: 20px; font-weight: 700; color: #FDB813; margin: 0;">Imagem (.png)</h3>
        <p style="font-size: 13px; color: #6B7280; margin: 0;">Para slides e documentos</p>
      </div>
    </div>
    <p style="font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;"><strong>Melhor para:</strong> Inserir gráficos em apresentações PowerPoint, documentos Word, emails.</p>
    <div style="background: #FEF3C7; padding: 12px; border-radius: 6px;">
      <p style="font-size: 13px; color: #92400E; margin: 0 0 6px 0; font-weight: 600;">Como exportar:</p>
      <p style="font-size: 13px; color: #92400E; margin: 0;">Clique com botão direito no visual → "Exportar como imagem"</p>
    </div>
  </div>
</div>
                  

        DocumentaçãoHTML =
        "
       <div style='max-width: 750px; margin: 0 auto; padding: 25px; background: linear-gradient(to bottom, white, #F9FAFB); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Segoe UI', Arial, sans-serif;'>
  <div style='text-align: center; margin-bottom: 30px;'>
    <div style='font-size: 48px; margin-bottom: 10px;'>📥</div>
    <h1 style='font-size: 32px; font-weight: 700; color: #1F2937; margin: 0 0 8px 0;'>Exportação de Dados</h1>
    <p style='font-size: 15px; color: #6B7280; margin: 0;'>Baixe e compartilhe suas análises</p>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; border: 2px solid #E5E7EB;'>
    <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
      <span style='font-size: 36px;'>📊</span>
      <div>
        <h3 style='font-size: 20px; font-weight: 700; color: #10B981; margin: 0;'>Excel (.xlsx)</h3>
        <p style='font-size: 13px; color: #6B7280; margin: 0;'>Formato recomendado para análises</p>
      </div>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Melhor para:</strong> Manipular dados, criar tabelas dinâmicas, fazer cálculos personalizados.</p>
    <div style='background: #F0F9FF; padding: 12px; border-radius: 6px;'>
      <p style='font-size: 13px; color: #1E40AF; margin: 0 0 6px 0; font-weight: 600;'>Como exportar:</p>
      <ol style='margin: 0; padding-left: 20px; font-size: 13px; color: #1E40AF;'>
        <li>Clique no '...' no canto do visual</li>
        <li>Selecione 'Exportar dados'</li>
        <li>Escolha 'Excel' e clique em 'Exportar'</li>
      </ol>
    </div>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; border: 2px solid #E5E7EB;'>
    <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
      <span style='font-size: 36px;'>📄</span>
      <div>
        <h3 style='font-size: 20px; font-weight: 700; color: #DC2626; margin: 0;'>PDF</h3>
        <p style='font-size: 13px; color: #6B7280; margin: 0;'>Para relatórios e apresentações</p>
      </div>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Melhor para:</strong> Compartilhar relatórios finalizados, apresentações para clientes, arquivamento.</p>
    <div style='background: #FEE2E2; padding: 12px; border-radius: 6px;'>
      <p style='font-size: 13px; color: #7F1D1D; margin: 0 0 6px 0; font-weight: 600;'>Como exportar:</p>
      <ol style='margin: 0; padding-left: 20px; font-size: 13px; color: #7F1D1D;'>
        <li>Clique em 'Arquivo' no menu</li>
        <li>Selecione 'Exportar para PDF'</li>
        <li>Escolha páginas e clique em 'Exportar'</li>
      </ol>
    </div>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 10px; margin-bottom: 18px; border: 2px solid #E5E7EB;'>
    <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
      <span style='font-size: 36px;'>📋</span>
      <div>
        <h3 style='font-size: 20px; font-weight: 700; color: #0078D4; margin: 0;'>CSV (.csv)</h3>
        <p style='font-size: 13px; color: #6B7280; margin: 0;'>Formato universal de dados</p>
      </div>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Melhor para:</strong> Importar em outros sistemas, integração com ferramentas externas.</p>
    <div style='background: #F0F9FF; padding: 12px; border-radius: 6px;'>
      <p style='font-size: 13px; color: #1E40AF; margin: 0; font-weight: 600;'>💡 CSV não mantém formatação, apenas dados brutos</p>
    </div>
  </div>
  
  <div style='background: white; padding: 20px; border-radius: 10px; border: 2px solid #E5E7EB;'>
    <div style='display: flex; align-items: center; gap: 12px; margin-bottom: 15px;'>
      <span style='font-size: 36px;'>🖼️</span>
      <div>
        <h3 style='font-size: 20px; font-weight: 700; color: #FDB813; margin: 0;'>Imagem (.png)</h3>
        <p style='font-size: 13px; color: #6B7280; margin: 0;'>Para slides e documentos</p>
      </div>
    </div>
    <p style='font-size: 14px; color: #4B5563; margin: 0 0 12px 0; line-height: 1.6;'><strong>Melhor para:</strong> Inserir gráficos em apresentações PowerPoint, documentos Word, emails.</p>
    <div style='background: #FEF3C7; padding: 12px; border-radius: 6px;'>
      <p style='font-size: 13px; color: #92400E; margin: 0 0 6px 0; font-weight: 600;'>Como exportar:</p>
      <p style='font-size: 13px; color: #92400E; margin: 0;'>Clique com botão direito no visual → 'Exportar como imagem'</p>
    </div>
  </div>
</div>
        "
LinkedIn Criado por Davi Marques