# Caderneta Um ano inteiro em quadradinhos, um por dia, que ficam mais escuros nos dias com mais atividade. > Caderneta é um componente exclusivo do THM Componentes que mostra 12 meses de atividade num calendário de quadradinhos, um por dia, em quatro tons de índigo. Tem tooltip com a data por extenso, navegação pelas setas, totais e maior sequência no topo, e serve para histórico de entregas, atendimentos ou acessos em painéis de equipe. - Categoria: Dados e visualização - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/caderneta/ ## 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 ```text 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. ## Componentes relacionados - [Sismógrafo](https://vibecode.thmtecnologia.com/componentes/sismografo/): Gráfico de área com curva suave que recebe pontos novos a todo instante e desliza o eixo do tempo. - [Alambique](https://vibecode.thmtecnologia.com/componentes/alambique/): Tabela que resume vendas por região, produto e trimestre; arraste os campos para mudar o cruzamento. - [Pindorama](https://vibecode.thmtecnologia.com/componentes/pindorama/): As 27 UFs em hexágonos na posição do mapa real, com cor mais forte onde o número é maior. - [Páreo](https://vibecode.thmtecnologia.com/componentes/pareo/): Barras horizontais que avançam período a período e trocam de lugar no ranking enquanto o tempo passa. - [Catraca](https://vibecode.thmtecnologia.com/componentes/catraca/): Números grandes que rolam como os tambores do hodômetro de um carro e param com um leve balanço. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.