Categorias

← View All Tools

Gerador de Calendário Heatmap

Gerar calendários heatmaps estilo GitHub para visualizar padrões de atividade ao longo do tempo, perfeito para rastrear contribuições anuais, hábitos ou métricas

Dados de atividade para o calendário heatmap. Formato: data|valor|etiqueta (formato AAAA-MM-DD)

Título que será exibido acima do heatmap

Ano para o calendário (deixar vazio para ano atual)

Cor de início para esquema de cor personalizado (requer seleção de cores personalizadas)

Cor final para esquema de cor personalizado (requer seleção de cores personalizadas)

Cor para dias sem atividade

Cor da borda para células

Tamanho de cada célula de dia em pixels (8-20)

Espaçamento entre células em pixels (1-5)

Duração da animação em milissegundos

Cor de fundo para o contêiner do gráfico

Mostrar valores dentro das células (funciona melhor com células maiores)

Mostrar a legenda de intensidade de cor

Mostrar nomes dos meses acima do calendário

Mostrar rótulos de dia da semana

Mostrar estatísticas de atividade abaixo do gráfico

Habilitar dicas ao passar o mouse sobre as células

Fatos principais

Categoria
Data Visualization
Tipos de entrada
textarea, text, select, number, color, checkbox
Tipo de saída
html
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Gerador de Calendário Heatmap permite criar visualizações intuitivas de padrões de atividade ao longo do ano, utilizando o estilo clássico de mapas de calor do GitHub para rastrear hábitos, produtividade ou métricas de desempenho.

Quando usar

  • •Para visualizar a consistência de hábitos diários ou metas de longo prazo.
  • •Para apresentar relatórios de produtividade ou séries temporais de forma clara e visual.
  • •Para analisar a distribuição de eventos ou contribuições ao longo de um ano específico.

Como funciona

  • •Insira seus dados no formato 'data|valor|etiqueta' ou via JSON.
  • •Personalize o esquema de cores, o tamanho das células e o ano de referência.
  • •Ajuste as configurações visuais, como rótulos de meses, dias e estatísticas.
  • •Gere o gráfico e visualize o mapa de calor interativo com suporte a dicas ao passar o mouse.

Casos de uso

Rastreamento de hábitos diários, como exercícios físicos ou leitura.
Monitoramento de métricas de vendas ou produtividade da equipe ao longo do ano.
Visualização de frequência de postagens em redes sociais ou contribuições de código.

Exemplos

1. Rastreador de Hábitos de Leitura

Estudante
Contexto
Um estudante deseja visualizar quantos minutos dedicou à leitura diariamente durante o ano para manter a motivação.
Problema
Dificuldade em identificar períodos de baixa produtividade em uma planilha comum.
Como usar
Inserir os dados diários de minutos lidos e selecionar o esquema de cores 'Roxo'.
Configuração de exemplo
{"colorScheme": "purple", "showStats": true, "showTooltip": true}
Resultado
Um mapa de calor anual onde tons mais escuros de roxo indicam dias com maior tempo de leitura, facilitando a identificação de lacunas.

2. Dashboard de Vendas Mensais

Gerente de Vendas
Contexto
O gerente precisa apresentar a frequência de fechamento de contratos para a diretoria.
Problema
Dados tabulares são difíceis de interpretar rapidamente em reuniões de status.
Como usar
Importar os dados de vendas no formato JSON e configurar o título do gráfico.
Configuração de exemplo
{"chartTitle": "Volume de Vendas 2024", "colorScheme": "blue", "showMonthLabels": true}
Resultado
Um gráfico estilo GitHub que destaca visualmente os dias de maior volume de vendas, permitindo uma análise rápida de sazonalidade.

Testar com amostras

data-visualization
Exemplos Avançados de Aplicação Grafana
Exemplos compreensivos de Grafana cobrindo design avançado de dashboards, configuração de alertas, integração de fontes de dados e desenvolvimento de plugins
keywords time,series,data
sample
Exemplos de Comunicação em Tempo Real WebRTC
Exemplos completos WebRTC para comunicação áudio/vídeo P2P, canais de dados, compartilhamento de tela e servidor de sinalização
keywords time,data
sample
Exemplos Chart.js Library
Exemplos abrangentes de Chart.js incluindo tipos de gráficos, opções de personalização, animações e designs responsivos
keywords graph,data,visualization
sample
Exemplos ClickHouse
Banco de dados colunar ClickHouse com exemplos de análises de alta performance, processamento de séries temporais e dashboards em tempo real
keywords time,series,data
sample

Hubs relacionados

Ferramentas de Json para Convert
Explore 100 ferramentas de json para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Image para Convert
Explore 100 ferramentas de image para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Audio para Convert
Explore 100 ferramentas de audio para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Design para Convert
Explore 98 ferramentas de design para fluxos de convert e encontre utilitários próximos com rapidez.

FAQ

Qual é o formato de entrada de dados aceito?

Você pode usar o formato de texto 'AAAA-MM-DD|valor|etiqueta' ou um array JSON contendo objetos com as chaves 'date', 'value' e 'label'.

Posso personalizar as cores do heatmap?

Sim, você pode escolher entre esquemas predefinidos (como verde, azul ou vermelho) ou selecionar a opção 'Cores Personalizadas' para definir tons específicos de início e fim.

É possível visualizar anos anteriores?

Sim, basta preencher o campo 'Ano' com o valor desejado (entre 2000 e 2030) para gerar o calendário correspondente.

O que acontece se eu não fornecer um valor para um dia?

Dias sem dados associados serão exibidos com a 'Cor de Dia Vazio', que pode ser personalizada nas configurações.

O gráfico é interativo?

Sim, ao habilitar a opção 'Mostrar Dicas', você pode passar o mouse sobre qualquer célula para ver os detalhes específicos daquele dia.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/calendar-heatmap

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
chartData textarea Sim Dados de atividade para o calendário heatmap. Formato: data|valor|etiqueta (formato AAAA-MM-DD)
chartTitle text Não Título que será exibido acima do heatmap
colorScheme select Não -
year number Não Ano para o calendário (deixar vazio para ano atual)
startColor color Não Cor de início para esquema de cor personalizado (requer seleção de cores personalizadas)
endColor color Não Cor final para esquema de cor personalizado (requer seleção de cores personalizadas)
emptyColor color Não Cor para dias sem atividade
borderColor color Não Cor da borda para células
cellSize number Não Tamanho de cada célula de dia em pixels (8-20)
cellSpacing number Não Espaçamento entre células em pixels (1-5)
animationDuration number Não Duração da animação em milissegundos
backgroundColor color Não Cor de fundo para o contêiner do gráfico
showValues checkbox Não Mostrar valores dentro das células (funciona melhor com células maiores)
showLegend checkbox Não Mostrar a legenda de intensidade de cor
showMonthLabels checkbox Não Mostrar nomes dos meses acima do calendário
showDayLabels checkbox Não Mostrar rótulos de dia da semana
showStats checkbox Não Mostrar estatísticas de atividade abaixo do gráfico
showTooltip checkbox Não Habilitar dicas ao passar o mouse sobre as células

Formato de resposta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-calendar-heatmap": {
      "name": "calendar-heatmap",
      "description": "Gerar calendários heatmaps estilo GitHub para visualizar padrões de atividade ao longo do tempo, perfeito para rastrear contribuições anuais, hábitos ou métricas",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=calendar-heatmap",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]