nemesischart

NemesisChart

Biblioteca de componentes Vue 3 para construção rápida de cards e dashboards com gráficos, construída sobre Chart.js — sem dependências de UI externas (todo o CSS necessário já vem no bundle).

Todos os componentes seguem o mesmo padrão: um cartão (Card*) que exibe legenda, sublegenda, valor de destaque, descrição e o gráfico correspondente — com suporte a temas claro/escuro, formatação automática de valores e exportação como imagem.

Sumário

• Instalação
• Uso rápido
• Estrutura de dados
• Componentes
  • CardLinhas
  • CardBarra
  • CardPizza
  • CardPolar
  • CardProgresso
  • CardBase
  • ChartBase
• Props comuns
• Slots
• Eventos
• Composables internos
• Playground & Dashboard

Instalação

npm install nemesischart chart.js

vue e chart.js são as únicas peer-deps do bundle de lib. A partir da v2.1.0, PrimeVue, PrimeFlex e PrimeIcons não são mais necessários — os estilos utilitários usados pelos componentes são embutidos em nemesischart/style.css (prefixo nc-), mantendo o mesmo visual.

Uso rápido

Como plugin

import { createApp } from 'vue'
import NemesisChart from 'nemesischart'
import 'nemesischart/style.css'

import App from './App.vue'

createApp(App)
  .use(NemesisChart)
  .mount('#app')

Importação pontual

<script setup>
import { CardLinhas } from 'nemesischart'

const data = [
  { rotulo: 'Jan', quantidade: 1200 },
  { rotulo: 'Fev', quantidade: 2800 },
  { rotulo: 'Mar', quantidade: 3200 },
]
</script>

<template>
  <CardLinhas
    legenda="Faturamento"
    sublegenda="2026"
    titulo="R$ 7.2k"
    descricao="acumulado"
    tipoValor="moeda"
    :data="data"
  />
</template>

Estrutura de dados

Todos os cards recebem uma prop data no formato:

[
  { rotulo: 'Jan', quantidade: 1200 },
  { rotulo: 'Fev', quantidade: 2800 },
]

• rotulo (string): o nome exibido no eixo / legenda.
• quantidade (number): o valor.

Variações específicas por componente:

Componentes

CardLinhas

Gráfico de linhas com gradiente sob a curva.

<CardLinhas
  legenda="Receita"
  sublegenda="2026"
  titulo="R$ 11M"
  descricao="acumulado no ano"
  tema="light"
  tipoValor="moeda"
  corDetalhes="#3B82F6"
  corDetalhesSecundaria="#8B5CF6"
  :data="dados"
/>

Props específicas:

Exemplo — mostrar a quantidade de pagamentos por mês no tooltip, além do valor:

<CardLinhas
  legenda="Pagamentos realizados"
  tipoValor="moeda"
  :data="[
    { rotulo: 'Jan', quantidade: 2456173.9, pagamentos: 1353 },
    { rotulo: 'Fev', quantidade: 3889895.3, pagamentos: 1269 },
  ]"
  :detalheTooltip="(item) => `${item.pagamentos} pagamentos`"
/>

CardBarra

Barras verticais ou horizontais, suporta empilhamento e múltiplas séries.

<CardBarra
  legenda="Vendas"
  titulo="1.160"
  orientacao="vertical"
  :empilhado="false"
  corDetalhes="#10B981"
  :data="dados"
/>

Props específicas:

CardPizza

Doughnut com tabela lateral opcional.

<CardPizza
  legenda="Dispositivos"
  titulo="100%"
  tipoValor="percentual"
  cutout="70%"
  :data="dados"
/>

Props específicas:

CardPolar

Polar area com grid configurável.

CardProgresso

Barras de progresso lineares ou circulares. Suporta metas de crescimento e de redução por item.

<CardProgresso
  legenda="Metas"
  formato="linear"
  :data="[
    { rotulo: 'Vendas', quantidade: 72, meta: 100 },
    { rotulo: 'Reclamações', quantidade: 320, meta: 100, valor_referencia: 500, modo: 'reducao' },
  ]"
/>

Estrutura do data

Modo crescimento — percentual = quantidade / meta. A barra cresce em direção à meta.

Modo redução — percentual = (valor_referencia − quantidade) / (valor_referencia − meta). A barra representa o progresso de redução; o fundo da trilha usa corExcesso.

Props específicas

CardBase

Esqueleto sem gráfico. Útil para criar visualizações customizadas mantendo o visual da biblioteca.

<CardBase legenda="Custom" titulo="R$ 1k" descricao="exemplo">
  <template #footer>
    <MeuConteudoCustomizado />
  </template>
</CardBase>

ChartBase

Wrapper fino sobre Chart.js.

<ChartBase
  type="line"
  :data="chartData"
  :options="chartOptions"
  :height="280"
/>

Props comuns

Todas as variantes de Card* aceitam estas props:

Slots

Eventos

Composables internos

Disponíveis para customizar gráficos sob medida:

• useTema(props) — calcula palette (bg, text, muted, …) e cardStyle.
• useFormatadorValor(props) — retorna formatar(valor) com base em tipoValor/locale/moeda.
• useTooltipExterno — utilitários para tooltip HTML customizado (criarTooltipEl, prepararTooltipParent, clampHorizontal, ttTitulo, ttLinhaValor, aplicarCaretFlip, criarTooltipExternoPadrao).
• useLinhasReferencia({ linhasReferencia, horizontal, formatar }) — plugin Chart.js de linhas de referência (metas/limites) com rótulo e tooltip próprios.
• useExportarImagem — exportarElementoComoImagem(el, opções), useExportarCard(props, palette, emit) e o ícone SVG padrão.
• propsCartao / propsValor / propsDirecao / propsTabela — fábricas das definições de props compartilhadas, úteis para criar novos cards seguindo o mesmo contrato.

Playground & Dashboard

Este repositório já vem com um app de demonstração com 3 rotas (vue-router):

Comandos:

npm install
npm run dev       # roda o playground em modo dev
npm run build:lib # gera o bundle distribuível em dist/
npm run storybook # abre o Storybook

Licença

MIT.