nemesischart 0.1.19 → 0.1.20
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/README.md +21 -24
- package/dist/nemesischart.css +1 -1
- package/dist/nemesischart.es.js +1874 -1836
- package/dist/nemesischart.umd.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# nemesischart
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Biblioteca de componentes Vue 3 para dashboards. Cards de estatísticas e gráficos prontos para usar, com suporte a temas e tree-shaking.
|
|
4
|
+
|
|
5
|
+
**[Documentação →](https://neemias-renan.github.io/nemesischart/)**
|
|
4
6
|
|
|
5
7
|
## Instalação
|
|
6
8
|
|
|
@@ -10,51 +12,46 @@ npm install nemesischart
|
|
|
10
12
|
|
|
11
13
|
## Requisitos
|
|
12
14
|
|
|
13
|
-
O nemesischart depende das seguintes peer dependencies instaladas no seu projeto:
|
|
14
|
-
|
|
15
15
|
```bash
|
|
16
|
-
npm install primeflex primeicons
|
|
16
|
+
npm install primeflex primeicons chart.js
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## Como usar
|
|
20
20
|
|
|
21
|
+
### Plugin global
|
|
22
|
+
|
|
21
23
|
```js
|
|
22
24
|
import { createApp } from 'vue'
|
|
23
25
|
import 'primeflex/primeflex.css'
|
|
24
26
|
import 'primeicons/primeicons.css'
|
|
25
27
|
import NemesisChart from 'nemesischart'
|
|
28
|
+
import 'nemesischart/dist/nemesischart.css'
|
|
26
29
|
|
|
27
30
|
const app = createApp(App)
|
|
28
|
-
|
|
29
31
|
app.use(NemesisChart)
|
|
30
|
-
|
|
31
32
|
app.mount('#app')
|
|
32
33
|
```
|
|
33
34
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
descricao="+12% este mês"
|
|
39
|
-
cor="light"
|
|
40
|
-
:botao_todos="true"
|
|
41
|
-
@click="handleClick"
|
|
42
|
-
/>
|
|
35
|
+
### Named imports (tree-shaking)
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import { Cards, CardColumn } from 'nemesischart'
|
|
43
39
|
```
|
|
44
40
|
|
|
45
41
|
## Componentes
|
|
46
42
|
|
|
47
|
-
|
|
43
|
+
| Componente | Descrição |
|
|
44
|
+
|---|---|
|
|
45
|
+
| `Cards` | Card de estatística com título, valor, descrição e botão opcional |
|
|
46
|
+
| `Polar` | Gráfico Polar Area com legenda e paleta automática |
|
|
47
|
+
| `CardColumn` | Card com valor em destaque e gráfico de barras |
|
|
48
|
+
| `CardLines` | Card com gráfico de linha para tendências e séries temporais |
|
|
49
|
+
| `CardPizza` | Card com gráfico doughnut e legenda lateral |
|
|
50
|
+
| `CardColumnDual` | Card com barras empilhadas e múltiplos segmentos |
|
|
48
51
|
|
|
49
|
-
|
|
50
|
-
|---|---|---|---|
|
|
51
|
-
| `titulo` | `String` | `'Card Title'` | Título do card |
|
|
52
|
-
| `valor` | `String` | `'0'` | Valor principal exibido |
|
|
53
|
-
| `descricao` | `String` | `'This is a card component...'` | Texto descritivo abaixo do valor |
|
|
54
|
-
| `cor` | `String` | `'light'` | Tema do card: `light`, `dark` ou `transparent` |
|
|
55
|
-
| `botao_todos` | `Boolean` | `false` | Exibe botão "Ver Todos" |
|
|
52
|
+
Todos os componentes aceitam a prop `cor`: `'light'` | `'dark'` | `'transparent'`.
|
|
56
53
|
|
|
57
|
-
|
|
54
|
+
Consulte a [documentação completa](https://neemias-renan.github.io/nemesischart/) para props, exemplos e playground interativo.
|
|
58
55
|
|
|
59
56
|
## Licença
|
|
60
57
|
|
package/dist/nemesischart.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.bg-black{background:#000}.bg-transparent{background:none}.nc-btn-todos[data-v-
|
|
1
|
+
.bg-black{background:#000}.bg-transparent{background:none}.nc-btn-todos[data-v-ead5a9da]{display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:none;box-shadow:none;padding:0;cursor:pointer;font-weight:500;font-family:inherit;font-size:inherit}.nc-btn-todos[data-v-ead5a9da]:focus{outline:none}.nc-card-hover[data-v-ead5a9da]:hover,.nc-card-hover[data-v-8d8f36f0]:hover,.nc-card-hover[data-v-03cd0de7]:hover,.nc-card-hover[data-v-c81361ad]:hover,.nc-card-hover[data-v-bea474a0]:hover,.nc-card-hover[data-v-124dc0bb]:hover{opacity:.92}
|