nemesischart 0.1.21 → 1.0.0

package/README.md

@@ -1,58 +1,277 @@
-# nemesischart
+# NemesisChart
 
-Biblioteca de componentes Vue 3 para dashboards. Cards de estatísticas e gráficos prontos para usar, com suporte a temas e tree-shaking.
-
-**[Documentação →](https://neemias-renan.github.io/nemesischart/)**
+Biblioteca Vue 3 de componentes de gráficos com animações GSAP, construída sobre Chart.js.
 
 ## Instalação
 
 ```bash
-npm install nemesischart
+npm install nemesischart chart.js
 ```
 
-## Requisitos
+## Setup
 
-```bash
-npm install primeflex primeicons chart.js
+Importe o componente e o CSS no seu `main.js` (ou equivalente):
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'nemesischart/style.css'
+
+createApp(App).mount('#app')
 ```
 
-## Como usar
+---
 
-### Plugin global
+## Componentes
 
-```js
-import { createApp } from 'vue'
-import 'primeflex/primeflex.css'
-import 'primeicons/primeicons.css'
-import NemesisChart from 'nemesischart'
-import 'nemesischart/dist/nemesischart.css'
+### CardColuna — Gráfico de colunas verticais
+
+```vue
+<script setup>
+import { CardColuna } from 'nemesischart'
+
+const dados = [
+  { rotulo: 'Jan', quantidade: 40 },
+  { rotulo: 'Fev', quantidade: 65 },
+  { rotulo: 'Mar', quantidade: 30 },
+]
+</script>
 
-const app = createApp(App)
-app.use(NemesisChart)
-app.mount('#app')
+<template>
+  <CardColuna
+    titulo="Vendas"
+    descricao="Últimos 3 meses"
+    :dados="dados"
+    corPaleta="#1D4ED8"
+  />
+</template>
 ```
 
-### Named imports (tree-shaking)
+**Props:**
 
-```js
-import { Cards, CardColumn } from 'nemesischart'
+| 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
+
+```vue
+<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>
 ```
 
-## Componentes
+**Props:** mesmas do `CardColuna` (suporta `modo` dual e `segmentos`).
+
+---
+
+### CardRosquinha — Gráfico de rosca (doughnut)
+
+```vue
+<script setup>
+import { CardRosquinha } from 'nemesischart'
 
-| Componente | Descrição |
-|---|---|
-| `Cards` | Card de estatística com título, valor, descrição e botão opcional |
-| `Polar` | Gráfico Polar Area com legenda e paleta automática |
-| `CardColumn` | Card com valor em destaque e gráfico de barras |
-| `CardLines` | Card com gráfico de linha para tendências e séries temporais |
-| `CardPizza` | Card com gráfico doughnut e legenda lateral |
-| `CardColumnDual` | Card com barras empilhadas e múltiplos segmentos |
+const dados = [
+  { rotulo: 'Aprovado', quantidade: 60 },
+  { rotulo: 'Pendente', quantidade: 25 },
+  { rotulo: 'Reprovado', quantidade: 15 },
+]
+</script>
 
-Todos os componentes aceitam a prop `cor`: `'light'` | `'dark'` | `'transparent'`.
+<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 |
+
+---
 
-Consulte a [documentação completa](https://neemias-renan.github.io/nemesischart/) para props, exemplos e playground interativo.
+### CardLinhas — Gráfico de linhas
 
-## Licença
+```vue
+<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)
+
+```vue
+<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
+
+```vue
+<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
+
+```vue
+<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
 
-MIT
+- Vue 3.x
+- Chart.js 4.x