| name | reversa-highcharts-visualizer |
| description | Cria visualizações de dados interativas com Highcharts.js, gerando HTML standalone com gráficos animados, responsivos e acessíveis a partir de dados inline, CSV ou JSON. Use com "gráfico", "chart", "dashboard", "highcharts", "visualização de dados" (linhas, barras, pizza, heatmap, treemap, sankey, gantt). |
| license | MIT |
| compatibility | Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills. |
| metadata | {"author":"sandeco","version":"1.0.0","framework":"reversa","team":"shared-skills","role":"charts-renderer"} |
Highcharts Visualizer
Cria visualizações de dados profissionais usando Highcharts.js. Gera sempre HTML standalone
(arquivo único, self-contained) com gráficos interativos, animados, responsivos e acessíveis.
Fluxo de Trabalho
1. Receber os Dados
Os dados podem vir de:
- Inline na conversa → Usuário cola dados, tabela, lista de valores
- CSV/JSON enviado → Analise o conteúdo usando
view_file e injete os dados diretamente no HTML gerado. Nunca crie scripts em Python.
- Planilha Excel → Extraia os dados das tabelas e injete-os no HTML. Não use Python.
- Dados de exemplo → Quando o usuário quer explorar um tipo de gráfico sem dados reais
- URL de dados → Usar
web_fetch para buscar dados remotos
2. Analisar os Dados
Antes de gerar o gráfico, entender a natureza dos dados:
- Dimensões: quantas séries? Quantas categorias? Temporal ou categórico?
- Escala: range dos valores, outliers, distribuição
- Relações: comparação, composição, distribuição, tendência, correlação
- Volume: poucos pontos (<100), médio (100-10K), grande (>10K — usar boost module)
Analise os dados internamente após a leitura e injete as tags via string. Não crie programas Python intermediários.
3. Escolher o Tipo de Gráfico
Consultar references/CHART_CATALOG.md para o catálogo completo de 40+ tipos de gráfico,
com orientação de quando usar cada um.
Regra de decisão rápida:
| Objetivo | Tipos recomendados |
|---|
| Tendência ao longo do tempo | line, area, spline, areaspline |
| Comparação entre categorias | column, bar, lollipop, bullet |
| Composição / proporção | pie, donut, stacked column, stacked area, treemap, sunburst |
| Distribuição | histogram, box plot, scatter, bell curve |
| Correlação | scatter, bubble, heatmap |
| Fluxo / processo | sankey, dependency wheel, network graph |
| Hierarquia | treemap, sunburst, organization chart |
| Geográfico | map (Highcharts Maps module) |
| Financeiro / timeline | stock chart (candlestick, OHLC, flags) |
| Progresso / KPI | gauge, solid gauge, activity gauge |
| Projeto / planejamento | gantt chart |
| Funil / conversão | funnel, pyramid |
Se o usuário não especificou o tipo, sugerir 2-3 opções que melhor representam os dados.
4. Gerar o Código
Consultar references/HIGHCHARTS_PATTERNS.md para padrões de código testados.
Regras fundamentais:
- HTML standalone: arquivo único
.html. Quando rodada pelo Time Reversa Docs, Highcharts vem de assets/vendor/ (baixado pelo Publisher via vendor-pins.yaml). Quando rodada isoladamente, aceita CDN como fallback mas o caminho preferido é local.
- Versão pinada:
highcharts@11.4.8. Core e módulos precisam ser da mesma versão.
- Módulos por demanda: só incluir scripts extras quando necessário (ver tabela de módulos).
- Accessibility sempre: sempre incluir
assets/vendor/highcharts-accessibility.js.
- Exporting sempre: sempre incluir
assets/vendor/highcharts-exporting.js.
- Responsivo: o gráfico deve se adaptar ao container/viewport.
- Tema consistente: aplicar cores coesas e tipografia profissional.
- Animação: habilitar animações de entrada e transições suaves.
- Tooltips ricos: tooltips formatados, com unidades e contexto.
- Dados grandes: para >10K pontos, incluir
modules/boost.js (precisa entrar no vendor-pins.yaml).
- Sem
fetch() para arquivos locais: dados vêm de window.RV_DATA.metrics (ou window.RV_DATA.timeline), carregado por assets/js/data.js.
Módulos necessários por tipo de gráfico (preferência: caminho local em assets/vendor/):
| Recurso | Local (quando rodado pelo time Docs) | Fallback CDN |
|---|
| Core (obrigatório) | assets/vendor/highcharts.js | https://code.highcharts.com/11.4.8/highcharts.js |
| Accessibility (obrigatório) | assets/vendor/highcharts-accessibility.js | .../11.4.8/modules/accessibility.js |
| Exporting (obrigatório) | assets/vendor/highcharts-exporting.js | .../11.4.8/modules/exporting.js |
| Treemap | assets/vendor/highcharts-treemap.js | .../11.4.8/modules/treemap.js |
| Sankey | assets/vendor/highcharts-sankey.js | .../11.4.8/modules/sankey.js |
| Timeline | assets/vendor/highcharts-timeline.js | .../11.4.8/modules/timeline.js |
| Outros (Sunburst, Heatmap, Funnel, etc) | adicionar em vendor-pins.yaml antes de usar | .../11.4.8/modules/<modulo>.js |
| Stock (candlestick, OHLC) | adicionar em vendor-pins.yaml antes de usar | .../stock/11.4.8/highstock.js |
| Maps | adicionar em vendor-pins.yaml antes de usar | .../maps/11.4.8/highmaps.js |
| Gantt | adicionar em vendor-pins.yaml antes de usar | .../gantt/11.4.8/highcharts-gantt.js |
Se uma página precisa de módulo que ainda não está em vendor-pins.yaml, o caminho correto é:
- Pedir ao Publisher que adicione o pin (commit nessa skill ou abrir issue), com URL primária + fallbacks.
- Só depois usar o módulo.
Apontar diretamente para CDN nas páginas finais é ruptura da invariante "funciona via
file:// sem internet".
Todos os CDNs (fallback) no formato: https://code.highcharts.com/11.4.8/{path}.
5. Salvar e Entregar
Salvar o HTML gerado diretamente na pasta de destino usando write_to_file. Sempre gere o arquivo HTML puro com todos os dados processados e injetados nas variáveis <script>. Não use trechos de Python.
Diretrizes de Qualidade
- Estética profissional: cores coesas (usar paletas Highcharts ou custom), tipografia limpa, espaçamentos adequados
- Dados formatados: números com separadores de milhar, datas localizadas, unidades nos eixos
- Legendas claras: nomes de séries descritivos, posição que não obstrui os dados
- Interatividade rica: hover highlights, tooltips contextuais, zoom quando aplicável
- Dark mode: quando apropriado, oferecer versão dark com
backgroundColor: '#1a1a2e'
- Múltiplos gráficos: para dashboards, organizar em grid CSS responsivo
- Código comentado: comentários em português explicando cada seção
Tratamento de Erros
Consultar references/ERRORS.md para cenários de erro e soluções.
