# Pindorama As 27 UFs em hexágonos na posição do mapa real, com cor mais forte onde o número é maior. > Pindorama é um componente exclusivo do THM Componentes que mostra as 27 UFs em hexágonos dispostos como no mapa real, pintados do claro ao índigo conforme o valor. Cada hexágono traz sigla e número, com tooltip, cartão de detalhe com posição e participação e navegação pelas setas entre estados vizinhos. Serve para painéis regionais. - 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, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/pindorama/ ## Como ele é Imagine o mapa do Brasil montado com peças de colmeia: cada UF é um hexágono na posição aproximada do território, de Roraima no alto ao Rio Grande do Sul embaixo. As cores vão de um azul lavanda claro, nos menores valores, a um índigo forte, nos maiores, com a sigla e o número compacto dentro de cada peça. Passar o mouse clareia o hexágono e abre um balão escuro com nome, região e valor. Clicar fixa o estado num cartão ao lado, com posição no ranking, participação e uma barra. Na demonstração, dois botões em pílula alternam entre duas métricas. ## Você pode estar procurando isto se pediu algo assim - “mapa do Brasil pintado por estado para o meu dashboard” - “mostrar vendas por estado com cor mais forte onde vende mais” - “mapa com os estados brasileiros em formato de colmeia” - “clicar num estado e ver os números dele num cartão” - “gráfico por UF que funcione bem num painel de governo” - “mapa do Brasil leve, sem biblioteca de mapas” ## Também chamado de mapa coroplético, choropleth map, hexbin map, mapa do Brasil por UF, mapa de hexágonos, tile map ## Quando usar - Dashboards regionais de vendas, clientes ou receita por estado - Painéis de saúde e de governo que comparam indicadores por UF - Relatórios em que estados pequenos, como DF e SE, precisam aparecer - Páginas institucionais que mostram a presença da empresa no país ## Quando evitar - Quando o formato e a área real dos estados importam para a leitura - Dados por município ou por região menor que o estado ## Como pedir para a sua IA ```text Crie um mapa do Brasil por UF em grade de hexágonos, pintado por valor com as cores da minha marca, para o painel de vendas. Quero tooltip em pt-BR, clique que fixa um cartão de detalhe, navegação pelas setas entre estados vizinhos e uma tabela oculta para leitores de tela. ``` 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 Pindorama ### Como coloco meus números em Pindorama? Passe a prop values com um objeto de sigla para número, como SP: 120, e Pindorama pinta cada UF numa escala entre o menor e o maior valor. Com seus dados, a segunda métrica de demonstração some; sem values, o componente gera duas métricas fictícias por semente. ### Pindorama funciona com teclado e leitor de tela? Sim. O mapa recebe foco e as setas pulam para a UF vizinha na direção escolhida, Enter fixa ou solta o estado e Esc limpa a seleção. Para leitores de tela, Pindorama traz um resumo com os maiores e o menor valor, uma tabela oculta com as 27 UFs e anúncios do estado em foco. ### Pindorama precisa de biblioteca de mapas ou de GeoJSON? Não. Pindorama é SVG puro, sem dependências: as posições das 27 UFs já estão no código, numa grade hexagonal que lembra o mapa real. Por isso o componente é classificado como Leve no THM Componentes e não baixa nenhum arquivo de fronteiras. ## Componentes relacionados - [Ponte aérea](https://vibecode.thmtecnologia.com/componentes/ponte-aerea/): Um mapa do mundo feito de pontinhos, com arcos que se desenham entre cidades marcadas por pontos azuis. - [Meridiano](https://vibecode.thmtecnologia.com/componentes/meridiano/): Globo de pontinhos que gira sozinho, com arcos de luz ligando 12 cidades reais pelo mundo. - [Loteamento](https://vibecode.thmtecnologia.com/componentes/loteamento/): Um painel de retângulos coloridos, cada um do tamanho da sua fatia; clique para entrar no próximo nível. - [Caderneta](https://vibecode.thmtecnologia.com/componentes/caderneta/): Um ano inteiro em quadradinhos, um por dia, que ficam mais escuros nos dias com mais atividade. - [Alambique](https://vibecode.thmtecnologia.com/componentes/alambique/): Tabela que resume vendas por região, produto e trimestre; arraste os campos para mudar o cruzamento. --- 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.