@softros/agulhao-charts-react 1.0.3 → 1.0.5

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.
Files changed (10) hide show
  1. package/README.md +94 -0
  2. package/dist/AgulhaoChart.d.ts +2 -1
  3. package/dist/AgulhaoChart.d.ts.map +1 -1
  4. package/dist/AgulhaoChart.js +7 -3
  5. package/dist/AgulhaoChart.js.map +1 -1
  6. package/dist/registrarMapasPadrao.d.ts +5 -0
  7. package/dist/registrarMapasPadrao.d.ts.map +1 -0
  8. package/dist/registrarMapasPadrao.js +12 -0
  9. package/dist/registrarMapasPadrao.js.map +1 -0
  10. package/package.json +3 -3
package/README.md CHANGED
@@ -37,6 +37,99 @@ export function MinhaTela() {
37
37
  }
38
38
  ```
39
39
 
40
+ O componente aceita qualquer `DefinicaoGrafico` suportada pelo pacote `core`, incluindo `barra`, `linha`, `area`, `pizza`, `gauge` e `mapa`.
41
+
42
+ Exemplo com cor por série:
43
+
44
+ ```tsx
45
+ const graficoComCor: DefinicaoGrafico = {
46
+ tipo: 'linha',
47
+ titulo: 'Vendas por dia',
48
+ dataset: {
49
+ linhas: [
50
+ { dia: 'Seg', valor: 150 },
51
+ { dia: 'Ter', valor: 230 },
52
+ ],
53
+ },
54
+ mapeamento: {
55
+ eixoX: 'dia',
56
+ eixoY: 'valor',
57
+ },
58
+ opcoes: {
59
+ serie: {
60
+ nome: 'Vendas',
61
+ cor: [
62
+ { nome: 'Vendas', cor: '#0f766e' },
63
+ ],
64
+ },
65
+ },
66
+ }
67
+ ```
68
+
69
+ Exemplo de gauge:
70
+
71
+ ```tsx
72
+ const graficoGauge: DefinicaoGrafico = {
73
+ tipo: 'gauge',
74
+ titulo: 'Meta atingida',
75
+ dataset: {
76
+ linhas: [
77
+ { indicador: 'Conversão', percentual: 72 },
78
+ ],
79
+ },
80
+ mapeamento: {
81
+ rotulo: 'indicador',
82
+ valor: 'percentual',
83
+ },
84
+ opcoes: {
85
+ mostrarLegenda: false,
86
+ serie: {
87
+ nome: 'Performance',
88
+ cor: [
89
+ { nome: 'Performance', cor: '#0f766e' },
90
+ ],
91
+ },
92
+ gauge: {
93
+ minimo: 0,
94
+ maximo: 100,
95
+ mostrarProgresso: true,
96
+ },
97
+ },
98
+ }
99
+ ```
100
+
101
+ ## Mapa padrão do Brasil
102
+
103
+ Para gráficos `tipo: 'mapa'` com `opcoes.mapa.nome: 'BR'`, o componente registra automaticamente o GeoJSON padrão dos estados brasileiros fornecido pelo `core`.
104
+
105
+ ```tsx
106
+ const graficoMapa: DefinicaoGrafico = {
107
+ tipo: 'mapa',
108
+ titulo: 'Indicador por estado',
109
+ dataset: {
110
+ linhas: [
111
+ { estado: 'São Paulo', valor: 46649 },
112
+ { estado: 'Minas Gerais', valor: 21412 },
113
+ ],
114
+ },
115
+ mapeamento: {
116
+ rotulo: 'estado',
117
+ valor: 'valor',
118
+ },
119
+ opcoes: {
120
+ mostrarLegenda: false,
121
+ mapa: {
122
+ nome: 'BR',
123
+ tamanho: '82%',
124
+ centro: {
125
+ x: '43%',
126
+ y: '55%',
127
+ },
128
+ },
129
+ },
130
+ }
131
+ ```
132
+
40
133
  ## Props
41
134
 
42
135
  ```ts
@@ -49,6 +142,7 @@ type AgulhaoChartProps = {
49
142
  notMerge?: boolean
50
143
  lazyUpdate?: boolean
51
144
  onEvents?: Record<string, (params: unknown) => void>
145
+ echarts?: unknown
52
146
  }
53
147
  ```
54
148
 
package/dist/AgulhaoChart.d.ts CHANGED
@@ -9,9 +9,10 @@ export type AgulhaoChartProps = {
9
9
  notMerge?: boolean;
10
10
  lazyUpdate?: boolean;
11
11
  onEvents?: Record<string, (params: unknown) => void>;
12
+ echarts?: unknown;
12
13
  };
13
14
  /**
14
15
  * Componente do Agulhao Charts.
15
16
  */
16
- export declare function AgulhaoChart({ grafico, largura, altura, className, style, notMerge, lazyUpdate, onEvents }: AgulhaoChartProps): import("react").JSX.Element;
17
+ export declare function AgulhaoChart({ grafico, largura, altura, className, style, notMerge, lazyUpdate, onEvents, echarts: echartsCustomizado }: AgulhaoChartProps): import("react").JSX.Element;
17
18
  //# sourceMappingURL=AgulhaoChart.d.ts.map
package/dist/AgulhaoChart.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AgulhaoChart.d.ts","sourceRoot":"","sources":["../src/AgulhaoChart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAEpE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC,CAAA;CACvD,CAAA;AAaD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,OAAgB,EAAE,MAAY,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAY5I"}
1
+ {"version":3,"file":"AgulhaoChart.d.ts","sourceRoot":"","sources":["../src/AgulhaoChart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAGpE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC,CAAA;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAcD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,OAAgB,EAAE,MAAY,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,kBAAkB,EAAE,EAAE,iBAAiB,+BAyBzK"}
package/dist/AgulhaoChart.js CHANGED
@@ -2,18 +2,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as ReactEChartsModule from 'echarts-for-react';
3
3
  import { useMemo } from 'react';
4
4
  import { criarOpcaoECharts } from '@softros/agulhao-charts-core';
5
+ import { echarts, registrarMapasPadrao } from './registrarMapasPadrao.js';
5
6
  const ReactECharts = (ReactEChartsModule.default ?? ReactEChartsModule);
6
7
  /**
7
8
  * Componente do Agulhao Charts.
8
9
  */
9
- export function AgulhaoChart({ grafico, largura = '100%', altura = 400, className, style, notMerge, lazyUpdate, onEvents }) {
10
- const option = useMemo(() => criarOpcaoECharts(grafico), [grafico]);
10
+ export function AgulhaoChart({ grafico, largura = '100%', altura = 400, className, style, notMerge, lazyUpdate, onEvents, echarts: echartsCustomizado }) {
11
+ const option = useMemo(() => {
12
+ registrarMapasPadrao(grafico);
13
+ return criarOpcaoECharts(grafico);
14
+ }, [grafico]);
11
15
  const chartStyle = useMemo(() => ({
12
16
  width: formatarMedidaCss(largura),
13
17
  height: formatarMedidaCss(altura),
14
18
  ...style,
15
19
  }), [altura, largura, style]);
16
- return _jsx(ReactECharts, { option: option, className: className, style: chartStyle, notMerge: notMerge, lazyUpdate: lazyUpdate, onEvents: onEvents });
20
+ return (_jsx(ReactECharts, { echarts: echartsCustomizado ?? echarts, option: option, className: className, style: chartStyle, notMerge: notMerge, lazyUpdate: lazyUpdate, onEvents: onEvents }));
17
21
  }
18
22
  /**
19
23
  * Converte medidas numericas para pixels e preserva medidas CSS textuais.
package/dist/AgulhaoChart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AgulhaoChart.js","sourceRoot":"","sources":["../src/AgulhaoChart.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,kBAAkB,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAwBhE,MAAM,YAAY,GAAG,CAAC,kBAAkB,CAAC,OAAO,IAAI,kBAAkB,CAAgD,CAAA;AAEtH;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAqB;IACzI,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACnE,MAAM,UAAU,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC;QACjC,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC;QACjC,GAAG,KAAK;KACX,CAAC,EACF,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAC3B,CAAA;IAED,OAAO,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAA;AACpJ,CAAC;AAED;;GAEG;AACH,SAAS,iBAAiB,CAAC,KAAsB;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,GAAG,KAAK,IAAI,CAAA;IACvB,CAAC;IAED,OAAO,KAAK,CAAA;AAChB,CAAC"}
1
+ {"version":3,"file":"AgulhaoChart.js","sourceRoot":"","sources":["../src/AgulhaoChart.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,kBAAkB,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAGhE,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAwBzE,MAAM,YAAY,GAAG,CAAC,kBAAkB,CAAC,OAAO,IAAI,kBAAkB,CAAgD,CAAA;AAEtH;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,kBAAkB,EAAqB;IACtK,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,oBAAoB,CAAC,OAAO,CAAC,CAAA;QAC7B,OAAO,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACrC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,MAAM,UAAU,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC;QACjC,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC;QACjC,GAAG,KAAK;KACX,CAAC,EACF,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAC3B,CAAA;IAED,OAAO,CACH,KAAC,YAAY,IACT,OAAO,EAAE,kBAAkB,IAAI,OAAO,EACtC,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAA;AACL,CAAC;AAED;;GAEG;AACH,SAAS,iBAAiB,CAAC,KAAsB;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,GAAG,KAAK,IAAI,CAAA;IACvB,CAAC;IAED,OAAO,KAAK,CAAA;AAChB,CAAC"}
package/dist/registrarMapasPadrao.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import echarts = require('echarts');
2
+ import type { DefinicaoGrafico } from '@softros/agulhao-charts-core';
3
+ export declare function registrarMapasPadrao(grafico: DefinicaoGrafico): void;
4
+ export { echarts };
5
+ //# sourceMappingURL=registrarMapasPadrao.d.ts.map
package/dist/registrarMapasPadrao.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"registrarMapasPadrao.d.ts","sourceRoot":"","sources":["../src/registrarMapasPadrao.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,GAAG,QAAQ,SAAS,CAAC,CAAA;AAEnC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAIpE,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAMpE;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
package/dist/registrarMapasPadrao.js ADDED
@@ -0,0 +1,12 @@
1
+ import { createRequire as _createRequire } from "module";
2
+ const __require = _createRequire(import.meta.url);
3
+ const echarts = __require("echarts");
4
+ import { obterGeoJsonMapaBrasil, obterNomeMapa } from '@softros/agulhao-charts-core';
5
+ export function registrarMapasPadrao(grafico) {
6
+ if (obterNomeMapa(grafico) !== 'BR') {
7
+ return;
8
+ }
9
+ echarts.registerMap('BR', obterGeoJsonMapaBrasil());
10
+ }
11
+ export { echarts };
12
+ //# sourceMappingURL=registrarMapasPadrao.js.map
package/dist/registrarMapasPadrao.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"registrarMapasPadrao.js","sourceRoot":"","sources":["../src/registrarMapasPadrao.ts"],"names":[],"mappings":";;AAAA,qCAAmC;AACnC,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAKpF,MAAM,UAAU,oBAAoB,CAAC,OAAyB;IAC1D,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;QAClC,OAAM;IACV,CAAC;IAED,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,sBAAsB,EAAwB,CAAC,CAAA;AAC7E,CAAC;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@softros/agulhao-charts-react",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "Componente React para renderizar graficos a partir da definicao comum do Agulhao Charts.",
5
5
  "homepage": "https://github.com/SOFTROS-SISTEMAS/agulhao-charts",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  "directory": "packages/react"
33
33
  },
34
34
  "dependencies": {
35
- "@softros/agulhao-charts-core": "^1.0.3",
35
+ "@softros/agulhao-charts-core": "^1.0.5",
36
36
  "echarts-for-react": "^3.0.2"
37
37
  },
38
38
  "peerDependencies": {
@@ -46,4 +46,4 @@
46
46
  "typescript": "^5.8.3",
47
47
  "vitest": "^3.2.4"
48
48
  }
49
- }
49
+ }