nemesischart 1.0.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +248 -196
- package/dist/nemesischart.js +1641 -3354
- package/dist/nemesischart.umd.cjs +1 -15
- package/dist/style.css +1 -1
- package/package.json +84 -78
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Neemias Renan
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,277 +1,329 @@
|
|
|
1
1
|
# NemesisChart
|
|
2
2
|
|
|
3
|
-
Biblioteca Vue 3
|
|
3
|
+
Biblioteca de componentes Vue 3 para construção rápida de cards e dashboards com gráficos, construída sobre [Chart.js](https://www.chartjs.org/), [PrimeVue](https://primevue.org/) e [PrimeFlex](https://primeflex.org/).
|
|
4
|
+
|
|
5
|
+
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.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Sumário
|
|
10
|
+
|
|
11
|
+
- [Instalação](#instalação)
|
|
12
|
+
- [Uso rápido](#uso-rápido)
|
|
13
|
+
- [Estrutura de dados](#estrutura-de-dados)
|
|
14
|
+
- [Componentes](#componentes)
|
|
15
|
+
- [CardLinhas](#cardlinhas)
|
|
16
|
+
- [CardBarra](#cardbarra)
|
|
17
|
+
- [CardPizza](#cardpizza)
|
|
18
|
+
- [CardPolar](#cardpolar)
|
|
19
|
+
- [CardProgresso](#cardprogresso)
|
|
20
|
+
- [CardBase](#cardbase)
|
|
21
|
+
- [ChartBase](#chartbase)
|
|
22
|
+
- [Props comuns](#props-comuns)
|
|
23
|
+
- [Slots](#slots)
|
|
24
|
+
- [Eventos](#eventos)
|
|
25
|
+
- [Composables internos](#composables-internos)
|
|
26
|
+
- [Playground & Dashboard](#playground--dashboard)
|
|
27
|
+
|
|
28
|
+
---
|
|
4
29
|
|
|
5
30
|
## Instalação
|
|
6
31
|
|
|
7
32
|
```bash
|
|
8
|
-
npm install nemesischart chart.js
|
|
33
|
+
npm install nemesischart chart.js primevue primeflex primeicons
|
|
9
34
|
```
|
|
10
35
|
|
|
11
|
-
|
|
36
|
+
`vue`, `chart.js`, `primevue` e `primeflex` são peer-deps do bundle de lib.
|
|
12
37
|
|
|
13
|
-
|
|
38
|
+
## Uso rápido
|
|
39
|
+
|
|
40
|
+
### Como plugin
|
|
14
41
|
|
|
15
42
|
```js
|
|
16
43
|
import { createApp } from 'vue'
|
|
17
|
-
import
|
|
44
|
+
import PrimeVue from 'primevue/config'
|
|
45
|
+
import NemesisChart from 'nemesischart'
|
|
18
46
|
import 'nemesischart/style.css'
|
|
19
47
|
|
|
20
|
-
|
|
21
|
-
|
|
48
|
+
import 'primevue/resources/themes/lara-light-blue/theme.css'
|
|
49
|
+
import 'primeicons/primeicons.css'
|
|
50
|
+
import 'primeflex/primeflex.css'
|
|
22
51
|
|
|
23
|
-
|
|
52
|
+
import App from './App.vue'
|
|
24
53
|
|
|
25
|
-
|
|
54
|
+
createApp(App)
|
|
55
|
+
.use(PrimeVue)
|
|
56
|
+
.use(NemesisChart)
|
|
57
|
+
.mount('#app')
|
|
58
|
+
```
|
|
26
59
|
|
|
27
|
-
###
|
|
60
|
+
### Importação pontual
|
|
28
61
|
|
|
29
62
|
```vue
|
|
30
63
|
<script setup>
|
|
31
|
-
import {
|
|
64
|
+
import { CardLinhas } from 'nemesischart'
|
|
32
65
|
|
|
33
|
-
const
|
|
34
|
-
{ rotulo: 'Jan', quantidade:
|
|
35
|
-
{ rotulo: 'Fev', quantidade:
|
|
36
|
-
{ rotulo: 'Mar', quantidade:
|
|
66
|
+
const data = [
|
|
67
|
+
{ rotulo: 'Jan', quantidade: 1200 },
|
|
68
|
+
{ rotulo: 'Fev', quantidade: 2800 },
|
|
69
|
+
{ rotulo: 'Mar', quantidade: 3200 },
|
|
37
70
|
]
|
|
38
71
|
</script>
|
|
39
72
|
|
|
40
73
|
<template>
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
74
|
+
<CardLinhas
|
|
75
|
+
legenda="Faturamento"
|
|
76
|
+
sublegenda="2026"
|
|
77
|
+
titulo="R$ 7.2k"
|
|
78
|
+
descricao="acumulado"
|
|
79
|
+
tipoValor="moeda"
|
|
80
|
+
:data="data"
|
|
46
81
|
/>
|
|
47
82
|
</template>
|
|
48
83
|
```
|
|
49
84
|
|
|
50
|
-
**Props:**
|
|
51
|
-
|
|
52
|
-
| Prop | Tipo | Padrão | Descrição |
|
|
53
|
-
|------|------|--------|-----------|
|
|
54
|
-
| `dados` | `Array<{ rotulo, quantidade }>` | exemplos | Dados do gráfico |
|
|
55
|
-
| `corPaleta` | `String` | `'#1D4ED8'` | Cor base da paleta |
|
|
56
|
-
| `moeda` | `Boolean` | `false` | Formata valores como BRL no tooltip |
|
|
57
|
-
| `modo` | `'simples' \| 'dual'` | `'simples'` | Modo dual renderiza barras sobrepostas |
|
|
58
|
-
| `segmentos` | `Array<{ key, label }>` | — | Segmentos no modo dual |
|
|
59
|
-
| `segmentoTooltip` | `{ key, label }` | `null` | Campo extra só no tooltip (modo dual) |
|
|
60
|
-
|
|
61
85
|
---
|
|
62
86
|
|
|
63
|
-
|
|
87
|
+
## Estrutura de dados
|
|
64
88
|
|
|
65
|
-
|
|
66
|
-
<script setup>
|
|
67
|
-
import { CardBarra } from 'nemesischart'
|
|
89
|
+
Todos os cards recebem uma prop `data` no formato:
|
|
68
90
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
{ rotulo: '
|
|
72
|
-
{ rotulo: '
|
|
91
|
+
```js
|
|
92
|
+
[
|
|
93
|
+
{ rotulo: 'Jan', quantidade: 1200 },
|
|
94
|
+
{ rotulo: 'Fev', quantidade: 2800 },
|
|
73
95
|
]
|
|
74
|
-
</script>
|
|
75
|
-
|
|
76
|
-
<template>
|
|
77
|
-
<CardBarra
|
|
78
|
-
titulo="Produtos"
|
|
79
|
-
:dados="dados"
|
|
80
|
-
corPaleta="#7C3AED"
|
|
81
|
-
/>
|
|
82
|
-
</template>
|
|
83
96
|
```
|
|
84
97
|
|
|
85
|
-
|
|
98
|
+
- `rotulo` (string): o nome exibido no eixo / legenda.
|
|
99
|
+
- `quantidade` (number): o valor.
|
|
100
|
+
|
|
101
|
+
Variações específicas por componente:
|
|
102
|
+
|
|
103
|
+
| Componente | Extras |
|
|
104
|
+
|---|---|
|
|
105
|
+
| `CardProgresso` | cada item pode ter `meta` (number), senão usa `metaPadrao`. |
|
|
106
|
+
| `CardLinhas` / `CardBarra` | aceitam `series: [{ nome, data: [...], cor? }]` para múltiplas séries. |
|
|
86
107
|
|
|
87
108
|
---
|
|
88
109
|
|
|
89
|
-
|
|
110
|
+
## Componentes
|
|
90
111
|
|
|
91
|
-
|
|
92
|
-
<script setup>
|
|
93
|
-
import { CardRosquinha } from 'nemesischart'
|
|
112
|
+
### CardLinhas
|
|
94
113
|
|
|
95
|
-
|
|
96
|
-
{ rotulo: 'Aprovado', quantidade: 60 },
|
|
97
|
-
{ rotulo: 'Pendente', quantidade: 25 },
|
|
98
|
-
{ rotulo: 'Reprovado', quantidade: 15 },
|
|
99
|
-
]
|
|
100
|
-
</script>
|
|
114
|
+
Gráfico de linhas com gradiente sob a curva.
|
|
101
115
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
116
|
+
```vue
|
|
117
|
+
<CardLinhas
|
|
118
|
+
legenda="Receita"
|
|
119
|
+
sublegenda="2026"
|
|
120
|
+
titulo="R$ 11M"
|
|
121
|
+
descricao="acumulado no ano"
|
|
122
|
+
tema="light"
|
|
123
|
+
tipoValor="moeda"
|
|
124
|
+
corDetalhes="#3B82F6"
|
|
125
|
+
corDetalhesSecundaria="#8B5CF6"
|
|
126
|
+
:data="dados"
|
|
127
|
+
/>
|
|
112
128
|
```
|
|
113
129
|
|
|
114
|
-
|
|
130
|
+
Props específicas:
|
|
115
131
|
|
|
116
132
|
| Prop | Tipo | Padrão | Descrição |
|
|
117
|
-
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `labelRotulo` | `String` | `'Rótulo'` | Cabeçalho da coluna de rótulos na legenda |
|
|
123
|
-
| `labelQuantidade` | `String` | `'Qtd.'` | Cabeçalho da coluna de quantidades |
|
|
124
|
-
| `legendaGraficoVisivel` | `Boolean` | `true` | Exibe/oculta a legenda lateral |
|
|
125
|
-
| `opcoes` | `Object` | `{}` | Opções extras passadas ao Chart.js |
|
|
133
|
+
|---|---|---|---|
|
|
134
|
+
| `corDetalhes` | String | `#3B82F6` | Cor da linha principal. |
|
|
135
|
+
| `corDetalhesSecundaria` | String | — | Segunda cor para gradiente combinado. |
|
|
136
|
+
| `series` | Array | — | Várias linhas. |
|
|
137
|
+
| `direcao` | `top` \| `bottom` \| `left` \| `right` | `top` | Posição do header em relação ao gráfico. |
|
|
126
138
|
|
|
127
|
-
|
|
139
|
+
### CardBarra
|
|
128
140
|
|
|
129
|
-
|
|
141
|
+
Barras verticais ou horizontais, suporta empilhamento e múltiplas séries.
|
|
130
142
|
|
|
131
143
|
```vue
|
|
132
|
-
<
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
]
|
|
141
|
-
</script>
|
|
142
|
-
|
|
143
|
-
<template>
|
|
144
|
-
<CardLinhas
|
|
145
|
-
titulo="Receita"
|
|
146
|
-
descricao="Evolução mensal"
|
|
147
|
-
:dados="dados"
|
|
148
|
-
corDetalhe="#0EA5E9"
|
|
149
|
-
:moeda="true"
|
|
150
|
-
/>
|
|
151
|
-
</template>
|
|
144
|
+
<CardBarra
|
|
145
|
+
legenda="Vendas"
|
|
146
|
+
titulo="1.160"
|
|
147
|
+
orientacao="vertical"
|
|
148
|
+
:empilhado="false"
|
|
149
|
+
corDetalhes="#10B981"
|
|
150
|
+
:data="dados"
|
|
151
|
+
/>
|
|
152
152
|
```
|
|
153
153
|
|
|
154
|
-
|
|
154
|
+
Props específicas:
|
|
155
155
|
|
|
156
|
-
| Prop | Tipo | Padrão |
|
|
157
|
-
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
162
|
-
| `
|
|
156
|
+
| Prop | Tipo | Padrão |
|
|
157
|
+
|---|---|---|
|
|
158
|
+
| `orientacao` | `vertical` \| `horizontal` | `vertical` |
|
|
159
|
+
| `empilhado` | Boolean | `false` |
|
|
160
|
+
| `series` | Array | — |
|
|
161
|
+
| `cores` | Array<String> | paleta padrão |
|
|
162
|
+
| `mostrarLegendaSeries` | Boolean | `true` |
|
|
163
163
|
|
|
164
|
-
|
|
164
|
+
### CardPizza
|
|
165
165
|
|
|
166
|
-
|
|
166
|
+
Doughnut com tabela lateral opcional.
|
|
167
167
|
|
|
168
168
|
```vue
|
|
169
|
-
<
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
:total="120"
|
|
177
|
-
:executado="90"
|
|
178
|
-
corPaleta="#F59E0B"
|
|
179
|
-
:moeda="false"
|
|
180
|
-
/>
|
|
181
|
-
</template>
|
|
169
|
+
<CardPizza
|
|
170
|
+
legenda="Dispositivos"
|
|
171
|
+
titulo="100%"
|
|
172
|
+
tipoValor="percentual"
|
|
173
|
+
cutout="70%"
|
|
174
|
+
:data="dados"
|
|
175
|
+
/>
|
|
182
176
|
```
|
|
183
177
|
|
|
184
|
-
|
|
178
|
+
Props específicas:
|
|
185
179
|
|
|
186
|
-
| Prop | Tipo | Padrão |
|
|
187
|
-
|
|
188
|
-
| `
|
|
189
|
-
| `
|
|
190
|
-
| `
|
|
191
|
-
| `
|
|
192
|
-
| `
|
|
193
|
-
| `
|
|
180
|
+
| Prop | Tipo | Padrão |
|
|
181
|
+
|---|---|---|
|
|
182
|
+
| `cores` | Array<String> | paleta padrão |
|
|
183
|
+
| `cutout` | String/Number | `'70%'` |
|
|
184
|
+
| `direcao` | `left` \| `right` \| `top` \| `bottom` | `right` |
|
|
185
|
+
| `rotuloCategoria` | String | `'Categoria'` |
|
|
186
|
+
| `rotuloQuantidade` | String | `'Quantidade'` |
|
|
187
|
+
| `mostrarCabecalho` | Boolean | `true` |
|
|
194
188
|
|
|
195
|
-
|
|
189
|
+
### CardPolar
|
|
196
190
|
|
|
197
|
-
|
|
191
|
+
Polar area com grid configurável.
|
|
192
|
+
|
|
193
|
+
| Prop | Tipo | Padrão |
|
|
194
|
+
|---|---|---|
|
|
195
|
+
| `cores` | Array<String> | paleta padrão |
|
|
196
|
+
| `mostrarLinhasGrade` | Boolean | `true` |
|
|
197
|
+
|
|
198
|
+
### CardProgresso
|
|
199
|
+
|
|
200
|
+
Barras de progresso lineares ou circulares com meta.
|
|
198
201
|
|
|
199
202
|
```vue
|
|
200
|
-
<
|
|
201
|
-
|
|
202
|
-
|
|
203
|
+
<CardProgresso
|
|
204
|
+
legenda="Metas"
|
|
205
|
+
titulo="72%"
|
|
206
|
+
formato="linear"
|
|
207
|
+
:data="[
|
|
208
|
+
{ rotulo: 'Vendas', quantidade: 72, meta: 100 },
|
|
209
|
+
{ rotulo: 'Serviços', quantidade: 48, meta: 80 },
|
|
210
|
+
]"
|
|
211
|
+
/>
|
|
212
|
+
```
|
|
203
213
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
214
|
+
| Prop | Tipo | Padrão |
|
|
215
|
+
|---|---|---|
|
|
216
|
+
| `formato` | `linear` \| `circular` | `linear` |
|
|
217
|
+
| `metaPadrao` | Number | `100` |
|
|
218
|
+
| `mostrarValor` | Boolean | `true` |
|
|
219
|
+
| `mostrarPercentual` | Boolean | `true` |
|
|
220
|
+
| `alturaBarra` | Number/String | `8` |
|
|
221
|
+
| `raioBarra` | String/Number | `'999px'` |
|
|
222
|
+
| `cutout` | String/Number | `'78%'` |
|
|
223
|
+
|
|
224
|
+
### CardBase
|
|
225
|
+
|
|
226
|
+
Esqueleto sem gráfico. Útil para criar visualizações customizadas mantendo o visual da biblioteca.
|
|
227
|
+
|
|
228
|
+
```vue
|
|
229
|
+
<CardBase legenda="Custom" titulo="R$ 1k" descricao="exemplo">
|
|
230
|
+
<template #footer>
|
|
231
|
+
<MeuConteudoCustomizado />
|
|
232
|
+
</template>
|
|
233
|
+
</CardBase>
|
|
213
234
|
```
|
|
214
235
|
|
|
215
|
-
|
|
236
|
+
### ChartBase
|
|
216
237
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
238
|
+
Wrapper fino sobre Chart.js.
|
|
239
|
+
|
|
240
|
+
```vue
|
|
241
|
+
<ChartBase
|
|
242
|
+
type="line"
|
|
243
|
+
:data="chartData"
|
|
244
|
+
:options="chartOptions"
|
|
245
|
+
:height="280"
|
|
246
|
+
/>
|
|
247
|
+
```
|
|
225
248
|
|
|
226
249
|
---
|
|
227
250
|
|
|
228
|
-
## Props comuns
|
|
251
|
+
## Props comuns
|
|
229
252
|
|
|
230
|
-
|
|
253
|
+
Todas as variantes de `Card*` aceitam estas props:
|
|
231
254
|
|
|
232
255
|
| Prop | Tipo | Padrão | Descrição |
|
|
233
|
-
|
|
234
|
-
| `
|
|
235
|
-
| `
|
|
236
|
-
| `
|
|
237
|
-
| `
|
|
238
|
-
| `
|
|
239
|
-
| `
|
|
240
|
-
| `
|
|
241
|
-
| `
|
|
242
|
-
| `
|
|
243
|
-
| `
|
|
244
|
-
| `
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
|
249
|
-
|
|
250
|
-
|
|
|
256
|
+
|---|---|---|---|
|
|
257
|
+
| `legenda` | String | — | Título superior. |
|
|
258
|
+
| `sublegenda` | String | — | Texto auxiliar abaixo da legenda. |
|
|
259
|
+
| `titulo` | String | — | Valor de destaque. |
|
|
260
|
+
| `descricao` | String | — | Texto complementar do título. |
|
|
261
|
+
| `tema` | `light` \| `dark` | `light` | Paleta base. |
|
|
262
|
+
| `corFundo` | String | — | Sobrescreve fundo. |
|
|
263
|
+
| `corTexto` | String | — | Sobrescreve texto. |
|
|
264
|
+
| `corBorda` | String | `#EAE8E8` | Borda externa. |
|
|
265
|
+
| `borderRadius` | String/Number | `'1rem'` | Raio da borda. |
|
|
266
|
+
| `sombra` | String | box-shadow padrão | Sombra. |
|
|
267
|
+
| `tipoValor` | `numero` \| `moeda` \| `percentual` | `'numero'` | Formatação. |
|
|
268
|
+
| `locale` | String | `'pt-BR'` | Locale do `Intl`. |
|
|
269
|
+
| `moeda` | String | `'BRL'` | Código ISO da moeda. |
|
|
270
|
+
| `height` | Number/String | varia | Altura do gráfico. |
|
|
271
|
+
| `botaoVisivel` | Boolean | `false` | Mostra botão "Ver mais". |
|
|
272
|
+
| `textoBotao` | String | `'Ver mais'` | Texto do botão. |
|
|
273
|
+
| `exportar` | Boolean | `false` | Mostra botão de exportação. |
|
|
274
|
+
| `nomeArquivoExport` | String | `'card-*.png'` | Nome do PNG. |
|
|
275
|
+
| `data` | Array | amostra | Dados. |
|
|
276
|
+
|
|
277
|
+
## Slots
|
|
278
|
+
|
|
279
|
+
| Slot | Onde aparece |
|
|
280
|
+
|---|---|
|
|
281
|
+
| `legenda` | Substitui a `legenda`. |
|
|
282
|
+
| `sublegenda` | Substitui a `sublegenda`. |
|
|
283
|
+
| `titulo` | Substitui o `titulo`. |
|
|
284
|
+
| `descricao` | Substitui a `descricao`. |
|
|
285
|
+
| `actions` | Área superior direita do card (substitui o botão padrão). |
|
|
286
|
+
| `footer` | Conteúdo extra abaixo do gráfico. |
|
|
287
|
+
|
|
288
|
+
## Eventos
|
|
289
|
+
|
|
290
|
+
| Evento | Quando |
|
|
291
|
+
|---|---|
|
|
292
|
+
| `botaoAcao` | Clique no botão "Ver mais". |
|
|
293
|
+
| `exportado` | Após o PNG ser gerado e baixado. |
|
|
294
|
+
|
|
295
|
+
## Composables internos
|
|
296
|
+
|
|
297
|
+
Disponíveis para customizar gráficos sob medida:
|
|
298
|
+
|
|
299
|
+
- `useTema(props)` — calcula `palette` (bg, text, muted, …) e `cardStyle`.
|
|
300
|
+
- `useFormatadorValor(props)` — retorna `formatar(valor)` com base em `tipoValor`/`locale`/`moeda`.
|
|
301
|
+
- `useTooltipExterno` — utilitários para tooltip HTML customizado (`criarTooltipEl`, `prepararTooltipParent`, `clampHorizontal`).
|
|
302
|
+
- `useExportarImagem` — `exportarElementoComoImagem(el, opções)` e o ícone SVG padrão.
|
|
251
303
|
|
|
252
304
|
---
|
|
253
305
|
|
|
254
|
-
##
|
|
306
|
+
## Playground & Dashboard
|
|
255
307
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
/>
|
|
308
|
+
Este repositório já vem com um app de demonstração com 3 rotas (vue-router):
|
|
309
|
+
|
|
310
|
+
| Rota | Conteúdo |
|
|
311
|
+
|---|---|
|
|
312
|
+
| `/playground` | Exemplos estáticos lado a lado. |
|
|
313
|
+
| `/dashboard` | Dashboard interativo: arraste cards pelo cabeçalho, redimensione pelo canto inferior direito e adicione novos cards pela barra lateral. O layout é persistido no `localStorage`. |
|
|
314
|
+
| `/docs` | Documentação navegável dentro do próprio app. |
|
|
315
|
+
|
|
316
|
+
Comandos:
|
|
317
|
+
|
|
318
|
+
```bash
|
|
319
|
+
npm install
|
|
320
|
+
npm run dev # roda o playground em modo dev
|
|
321
|
+
npm run build:lib # gera o bundle distribuível em dist/
|
|
322
|
+
npm run storybook # abre o Storybook
|
|
272
323
|
```
|
|
273
324
|
|
|
274
|
-
|
|
325
|
+
---
|
|
326
|
+
|
|
327
|
+
## Licença
|
|
275
328
|
|
|
276
|
-
|
|
277
|
-
- Chart.js 4.x
|
|
329
|
+
MIT.
|