Como ele é
Lembra a grade de contribuições de um perfil de programador: colunas de semanas, linhas de dias, os meses em cima e segunda, quarta e sexta à esquerda. Dias sem atividade ficam num cinza bem claro; os outros vão do azul lavanda ao índigo escuro, conforme o volume. Quando o mapa entra na tela, os quadradinhos surgem um a um, crescendo do centro, numa onda que corre da semana mais antiga para a mais recente. Ao passar o mouse, o dia cresce um pouco, ganha contorno e mostra a data e a quantidade. Em telas estreitas, a grade rola para o lado e começa nos dias mais recentes.
Você pode estar procurando isto se pediu algo assim
- aquele gráfico de quadradinhos do GitHub para mostrar atividade
- calendário que pinta os dias mais movimentados com cor mais forte
- mostrar quantos atendimentos a equipe fez em cada dia do ano
- mapa de calor por dia para o painel da empresa
- grade do ano inteiro com um quadrado para cada dia
- ver a frequência de acessos ao longo dos meses
Também chamado de
- mapa de calor de calendário
- calendar heatmap
- gráfico de contribuições
- contribution graph
- heatmap de atividade
- streak calendar
Quando usar
- Painel de equipe que acompanha entregas, chamados ou atendimentos por dia
- Perfil de usuário que mostra constância de uso, estudo ou treino
- Relatório anual que precisa mostrar sazonalidade e semanas mais fortes
- Área de métricas de um SaaS com acessos ou eventos diários
Quando evitar
- Dados com poucos dias registrados, que deixam a grade quase vazia
- Comparação de valores exatos entre dias, já que as cores agrupam os valores em faixas
- Sites de fundo escuro sem adaptar as cores, já que o texto padrão é azul-marinho sobre fundo transparente
Como pedir para a sua IA
Crie um mapa de calor de atividade em formato de calendário, com um quadrado por dia nos últimos 12 meses, para o painel de atendimentos. Use a rampa de cores da minha marca, tooltip com a data em pt-BR, navegação pelas setas e uma revelação que respeite movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Caderneta
Como ligo meus dados a Caderneta?
Passe a prop data com uma lista de objetos com data no formato AAAA-MM-DD e valor, ou com um mapa de data para número; valores do mesmo dia são somados. Sem dados, Caderneta mostra valores fictícios por semente. As props unit e unitPlural trocam a palavra do tooltip, como 8 atendimentos.
Caderneta funciona com teclado e leitor de tela?
Sim. A grade de Caderneta recebe foco e as setas percorrem os dias, com Home e End para as pontas e Esc para fechar o tooltip. Leitores de tela ouvem um resumo com total, maior sequência e dia mais intenso, acessam uma tabela oculta com os totais por mês e recebem o anúncio do dia em foco.
Caderneta respeita quem prefere menos movimento?
Respeita. Com a preferência de reduzir movimento ativa, Caderneta mostra todos os dias de uma vez, sem a revelação em onda e sem transições. Sem essa preferência, a revelação só começa quando um quarto do mapa entra na tela e não se repete a cada rolagem.
