reversa-highcharts-visualizer

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.
disable-model-invocation	true
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:

1. 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.
2. Versão pinada: highcharts@11.4.8. Core e módulos precisam ser da mesma versão.
3. Módulos por demanda: só incluir scripts extras quando necessário (ver tabela de módulos).
4. Accessibility sempre: sempre incluir assets/vendor/highcharts-accessibility.js.
5. Exporting sempre: sempre incluir assets/vendor/highcharts-exporting.js.
6. Responsivo: o gráfico deve se adaptar ao container/viewport.
7. Tema consistente: aplicar cores coesas e tipografia profissional.
8. Animação: habilitar animações de entrada e transições suaves.
9. Tooltips ricos: tooltips formatados, com unidades e contexto.
10. Dados grandes: para >10K pontos, incluir modules/boost.js (precisa entrar no vendor-pins.yaml).
11. 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 é:

1. Pedir ao Publisher que adicione o pin (commit nessa skill ou abrir issue), com URL primária + fallbacks.
2. 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.