NemesisChart

Biblioteca Vue 3 de componentes de gráficos com animações GSAP, construída sobre Chart.js.

Instalação

npm install nemesischart chart.js

Setup

Importe o componente e o CSS no seu main.js (ou equivalente):

import { createApp } from 'vue'
import App from './App.vue'
import 'nemesischart/style.css'  // ou: import 'nemesischart/dist/nemesischart.css'

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

Componentes

CardColuna — Gráfico de colunas verticais

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

const dados = [
  { rotulo: 'Jan', quantidade: 40 },
  { rotulo: 'Fev', quantidade: 65 },
  { rotulo: 'Mar', quantidade: 30 },
]
</script>

<template>
  <CardColuna
    titulo="Vendas"
    descricao="Últimos 3 meses"
    :dados="dados"
    corPaleta="#1D4ED8"
  />
</template>

Props:

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | dados | Array<{ rotulo, quantidade }> | exemplos | Dados do gráfico | | corPaleta | String | '#1D4ED8' | Cor base da paleta | | moeda | Boolean | false | Formata valores como BRL no tooltip | | modo | 'simples' \| 'dual' | 'simples' | Modo dual renderiza barras sobrepostas | | segmentos | Array<{ key, label }> | — | Segmentos no modo dual | | segmentoTooltip | { key, label } | null | Campo extra só no tooltip (modo dual) |

CardBarra — Gráfico de barras horizontais

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

const dados = [
  { rotulo: 'Produto A', quantidade: 80 },
  { rotulo: 'Produto B', quantidade: 65 },
  { rotulo: 'Produto C', quantidade: 50 },
]
</script>

<template>
  <CardBarra
    titulo="Produtos"
    :dados="dados"
    corPaleta="#7C3AED"
  />
</template>

Props: mesmas do CardColuna (suporta modo dual e segmentos).

CardRosquinha — Gráfico de rosca (doughnut)

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

const dados = [
  { rotulo: 'Aprovado', quantidade: 60 },
  { rotulo: 'Pendente', quantidade: 25 },
  { rotulo: 'Reprovado', quantidade: 15 },
]
</script>

<template>
  <CardRosquinha
    titulo="Status"
    descricao="Solicitações"
    :dados="dados"
    corPaleta="#059669"
    valor="60%"
    valorDescricao="aprovados"
  />
</template>

Props:

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | dados | Array<{ rotulo, quantidade }> | exemplos | Dados do gráfico | | corPaleta | String | '#1D4ED8' | Cor base da paleta | | valor | String | '' | Texto exibido no centro da rosca | | valorDescricao | String | '' | Subtexto no centro | | labelRotulo | String | 'Rótulo' | Cabeçalho da coluna de rótulos na legenda | | labelQuantidade | String | 'Qtd.' | Cabeçalho da coluna de quantidades | | legendaGraficoVisivel | Boolean | true | Exibe/oculta a legenda lateral | | opcoes | Object | {} | Opções extras passadas ao Chart.js |

CardLinhas — Gráfico de linhas

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

const dados = [
  { rotulo: 'Jan', quantidade: 30 },
  { rotulo: 'Fev', quantidade: 55 },
  { rotulo: 'Mar', quantidade: 40 },
  { rotulo: 'Abr', quantidade: 70 },
]
</script>

<template>
  <CardLinhas
    titulo="Receita"
    descricao="Evolução mensal"
    :dados="dados"
    corDetalhe="#0EA5E9"
    :moeda="true"
  />
</template>

Props:

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | dados | Array<{ rotulo, quantidade }> | exemplos | Dados do gráfico | | corDetalhe | String | — | Cor da linha e área | | moeda | Boolean | false | Formata valores como BRL | | legendaGraficoVisivel | Boolean | false | Exibe legenda do Chart.js | | opcoes | Object | {} | Opções extras passadas ao Chart.js |

CardSemiCirculo — Gráfico semicircular (meio donut)

<script setup>
import { CardSemiCirculo } from 'nemesischart'
</script>

<template>
  <CardSemiCirculo
    titulo="Execução"
    :total="120"
    :executado="90"
    corPaleta="#F59E0B"
    :moeda="false"
  />
</template>

Props:

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | dados | Array<{ rotulo, quantidade }> | exemplos | Dados das fatias | | corPaleta | String | '#1D4ED8' | Cor base | | valor | String | '' | Texto central | | valorDescricao | String | '' | Subtexto central | | legendaGraficoVisivel | Boolean | true | Exibe legenda lateral | | opcoes | Object | {} | Opções extras Chart.js |

CardProgresso — Barra de progresso

<script setup>
import { CardProgresso } from 'nemesischart'
</script>

<template>
  <CardProgresso
    titulo="Meta mensal"
    :total="100000"
    :executado="73500"
    rotulo="Faturamento"
    :moeda="true"
  />
</template>

Props:

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | total | Number | 100 | Valor máximo | | executado | Number | 0 | Valor atual | | rotulo | String | '' | Rótulo exibido abaixo da barra | | exibirValores | Boolean | true | Exibe executado/total | | moeda | Boolean | false | Formata valores como BRL | | animado | Boolean | true | Anima a barra na entrada |

Props comuns (todos os componentes)

Todos os componentes aceitam as seguintes props herdadas do CardBase:

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | tema | 'Light' \| 'Dark' \| 'Transparent' | 'Light' | Tema visual | | titulo | String | '' | Título principal | | descricao | String | '' | Subtítulo abaixo do título | | legenda | String | — | Label no topo esquerdo | | sublegenda | String | — | Sublabel no topo esquerdo | | tituloVisivel | Boolean | true | Exibe/oculta bloco de título | | botaoVisivel | Boolean | false | Exibe link de ação | | textoBotao | String | 'Ver Todos' | Texto do link de ação | | direcao | 'vertical' \| 'horizontal' | 'vertical' | Layout do card | | carregamento | Boolean | false | Estado de loading | | corFundo | String | — | Cor de fundo personalizada (hex/rgb) |

Eventos comuns

| Evento | Descrição | |--------|-----------| | @botao-click | Emitido ao clicar no botão/link de ação |

Exemplo com tema Dark e layout horizontal

<CardRosquinha
  tema="Dark"
  direcao="horizontal"
  titulo="R$ 84.200"
  descricao="Total faturado"
  legenda="FATURAMENTO"
  sublegenda="Março 2025"
  :dados="dados"
  corPaleta="#6366F1"
  valor="84k"
  valorDescricao="faturado"
  :botaoVisivel="true"
  textoBotao="Ver detalhes"
  @botao-click="abrirDetalhes"
/>

Requisitos

• Vue 3.x
• Chart.js 4.x