@softros/agulhao-charts-react 1.0.4 → 1.0.6

package/README.md

@@ -37,7 +37,7 @@ export function MinhaTela() {
 }
 ```
 
-O componente aceita qualquer `DefinicaoGrafico` suportada pelo pacote `core`, incluindo `barra`, `linha`, `area`, `pizza`, `gauge` e `mapa`.
+O componente aceita qualquer `DefinicaoGrafico` suportada pelo pacote `core`, incluindo `barra`, `linha`, `area`, `pizza`, `gauge`, `mapa` e `ranking`.
 
 Exemplo com cor por série:
 
@@ -98,6 +98,64 @@ const graficoGauge: DefinicaoGrafico = {
 }
 ```
 
+Exemplo de ranking sem ECharts:
+
+```tsx
+const graficoRanking: DefinicaoGrafico = {
+    tipo: 'ranking',
+    titulo: 'Ranking de vendedores',
+    dataset: {
+        linhas: [
+            { nome: 'Bruno', total: 240 },
+            { nome: 'Carla', total: 180 },
+            { nome: 'Ana', total: 120 },
+        ],
+    },
+    mapeamento: {
+        rotulo: 'nome',
+        valor: 'total',
+    },
+    opcoes: {
+        ranking: {
+            limite: 10,
+            mostrarPodio: true,
+        },
+    },
+}
+```
+
+## Mapa padrão do Brasil
+
+Para gráficos `tipo: 'mapa'` com `opcoes.mapa.nome: 'BR'`, o componente registra automaticamente o GeoJSON padrão dos estados brasileiros fornecido pelo `core`.
+
+```tsx
+const graficoMapa: DefinicaoGrafico = {
+    tipo: 'mapa',
+    titulo: 'Indicador por estado',
+    dataset: {
+        linhas: [
+            { estado: 'São Paulo', valor: 46649 },
+            { estado: 'Minas Gerais', valor: 21412 },
+        ],
+    },
+    mapeamento: {
+        rotulo: 'estado',
+        valor: 'valor',
+    },
+    opcoes: {
+        mostrarLegenda: false,
+        mapa: {
+            nome: 'BR',
+            tamanho: '82%',
+            centro: {
+                x: '43%',
+                y: '55%',
+            },
+        },
+    },
+}
+```
+
 ## Props
 
 ```ts
@@ -110,6 +168,7 @@ type AgulhaoChartProps = {
     notMerge?: boolean
     lazyUpdate?: boolean
     onEvents?: Record<string, (params: unknown) => void>
+    echarts?: unknown
 }
 ```
 

package/dist/AgulhaoChart.d.ts

@@ -9,9 +9,10 @@ export type AgulhaoChartProps = {
     notMerge?: boolean;
     lazyUpdate?: boolean;
     onEvents?: Record<string, (params: unknown) => void>;
+    echarts?: unknown;
 };
 /**
  * Componente do Agulhao Charts.
  */
-export declare function AgulhaoChart({ grafico, largura, altura, className, style, notMerge, lazyUpdate, onEvents }: AgulhaoChartProps): import("react").JSX.Element;
+export declare function AgulhaoChart({ grafico, largura, altura, className, style, notMerge, lazyUpdate, onEvents, echarts: echartsCustomizado, }: AgulhaoChartProps): import("react").JSX.Element;
 //# sourceMappingURL=AgulhaoChart.d.ts.map

package/dist/AgulhaoChart.d.ts.map

@@ -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"}
+{"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,EACzB,OAAO,EACP,OAAgB,EAChB,MAAY,EACZ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,EAAE,kBAAkB,GAC9B,EAAE,iBAAiB,+BAiCnB"}

package/dist/AgulhaoChart.js

@@ -1,19 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as ReactEChartsModule from 'echarts-for-react';
 import { useMemo } from 'react';
-import { criarOpcaoECharts } from '@softros/agulhao-charts-core';
+import { CSS_RANKING_GRAFICO, criarHtmlRankingGrafico, criarOpcaoECharts } from '@softros/agulhao-charts-core';
+import { registrarMapasPadrao } from './registrarMapasPadrao.js';
 const ReactECharts = (ReactEChartsModule.default ?? ReactEChartsModule);
 /**
  * Componente do Agulhao Charts.
  */
-export function AgulhaoChart({ grafico, largura = '100%', altura = 400, className, style, notMerge, lazyUpdate, onEvents }) {
-    const option = useMemo(() => criarOpcaoECharts(grafico), [grafico]);
+export function AgulhaoChart({ grafico, largura = '100%', altura = 400, className, style, notMerge, lazyUpdate, onEvents, echarts: echartsCustomizado, }) {
+    const option = useMemo(() => {
+        if (grafico.tipo === 'ranking') {
+            return undefined;
+        }
+        registrarMapasPadrao(grafico, echartsCustomizado);
+        return criarOpcaoECharts(grafico);
+    }, [echartsCustomizado, grafico]);
     const chartStyle = useMemo(() => ({
         width: formatarMedidaCss(largura),
         height: formatarMedidaCss(altura),
         ...style,
     }), [altura, largura, style]);
-    return _jsx(ReactECharts, { option: option, className: className, style: chartStyle, notMerge: notMerge, lazyUpdate: lazyUpdate, onEvents: onEvents });
+    if (grafico.tipo === 'ranking') {
+        return _jsx(RankingChart, { grafico: grafico, className: className, style: chartStyle });
+    }
+    return (_jsx(ReactECharts, { echarts: echartsCustomizado, option: option, className: className, style: chartStyle, notMerge: notMerge, lazyUpdate: lazyUpdate, onEvents: onEvents }));
+}
+function RankingChart({ grafico, className, style }) {
+    const html = useMemo(() => criarHtmlRankingGrafico(grafico), [grafico]);
+    const classeRanking = className ? `agulhao-ranking ${className}` : 'agulhao-ranking';
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: CSS_RANKING_GRAFICO }), _jsx("section", { className: classeRanking, style: style, dangerouslySetInnerHTML: { __html: html } })] }));
 }
 /**
  * Converte medidas numericas para pixels e preserva medidas CSS textuais.

package/dist/AgulhaoChart.js.map

@@ -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"}
+{"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,mBAAmB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAG9G,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAwBhE,MAAM,YAAY,GAAG,CAAC,kBAAkB,CAAC,OAAO,IAAI,kBAAkB,CAAgD,CAAA;AAEtH;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,EACzB,OAAO,EACP,OAAO,GAAG,MAAM,EAChB,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,EAAE,kBAAkB,GACX;IAChB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAA;QACpB,CAAC;QAED,oBAAoB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;QACjD,OAAO,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACrC,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAA;IACjC,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,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC7B,OAAO,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,GAAI,CAAA;IACtF,CAAC;IAED,OAAO,CACH,KAAC,YAAY,IACT,OAAO,EAAE,kBAAkB,EAC3B,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,SAAS,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAA4E;IACzH,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACvE,MAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,mBAAmB,SAAS,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAA;IAEpF,OAAO,CACH,8BACI,0BAAQ,mBAAmB,GAAS,EACpC,kBAAS,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,IAC/F,CACN,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

@@ -0,0 +1,3 @@
+import type { DefinicaoGrafico } from '@softros/agulhao-charts-core';
+export declare function registrarMapasPadrao(grafico: DefinicaoGrafico, echartsCustomizado?: unknown): void;
+//# sourceMappingURL=registrarMapasPadrao.d.ts.map

package/dist/registrarMapasPadrao.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registrarMapasPadrao.d.ts","sourceRoot":"","sources":["../src/registrarMapasPadrao.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAOpE,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,EAAE,OAAO,GAAG,IAAI,CAclG"}

package/dist/registrarMapasPadrao.js

@@ -0,0 +1,17 @@
+import { createRequire as _createRequire } from "module";
+const __require = _createRequire(import.meta.url);
+const echarts = __require("echarts");
+import { obterGeoJsonMapaBrasil, obterNomeMapa } from '@softros/agulhao-charts-core';
+export function registrarMapasPadrao(grafico, echartsCustomizado) {
+    if (obterNomeMapa(grafico) !== 'BR') {
+        return;
+    }
+    const geoJson = obterGeoJsonMapaBrasil();
+    const registradorCustomizado = echartsCustomizado?.registerMap;
+    if (registradorCustomizado) {
+        registradorCustomizado('BR', geoJson);
+        return;
+    }
+    echarts.registerMap('BR', geoJson);
+}
+//# sourceMappingURL=registrarMapasPadrao.js.map

package/dist/registrarMapasPadrao.js.map

@@ -0,0 +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;AAQpF,MAAM,UAAU,oBAAoB,CAAC,OAAyB,EAAE,kBAA4B;IACxF,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;QAClC,OAAM;IACV,CAAC;IAED,MAAM,OAAO,GAAG,sBAAsB,EAAwB,CAAA;IAC9D,MAAM,sBAAsB,GAAI,kBAA2D,EAAE,WAAW,CAAA;IAExG,IAAI,sBAAsB,EAAE,CAAC;QACzB,sBAAsB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;QACrC,OAAM;IACV,CAAC;IAED,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AACtC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@softros/agulhao-charts-react",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "description": "Componente React para renderizar graficos a partir da definicao comum do Agulhao Charts.",
     "homepage": "https://github.com/SOFTROS-SISTEMAS/agulhao-charts",
     "license": "Apache-2.0",
@@ -32,7 +32,7 @@
         "directory": "packages/react"
     },
     "dependencies": {
-        "@softros/agulhao-charts-core": "^1.0.4",
+        "@softros/agulhao-charts-core": "^1.0.6",
         "echarts-for-react": "^3.0.2"
     },
     "peerDependencies": {