@softros/agulhao-charts-react 1.0.0

package/README.md

@@ -0,0 +1,70 @@
+# @softros/agulhao-charts-react
+
+Componente React do Agulhão Charts.
+
+Ele recebe uma `DefinicaoGrafico`, usa o `core` para gerar a option do ECharts e renderiza com `echarts-for-react`.
+
+## Instalação
+
+```bash
+npm install @softros/agulhao-charts-react
+```
+
+## Uso
+
+```tsx
+import { AgulhaoChart } from '@softros/agulhao-charts-react'
+import type { DefinicaoGrafico } from '@softros/agulhao-charts-core'
+
+const grafico: DefinicaoGrafico = {
+    tipo: 'linha',
+    titulo: 'Vendas por dia',
+    dataset: {
+        linhas: [
+            { dia: 'Seg', valor: 150 },
+            { dia: 'Ter', valor: 230 },
+            { dia: 'Qua', valor: 224 },
+        ],
+    },
+    mapeamento: {
+        eixoX: 'dia',
+        eixoY: 'valor',
+    },
+}
+
+export function MinhaTela() {
+    return <AgulhaoChart grafico={grafico} largura="100%" altura={400} />
+}
+```
+
+## Props
+
+```ts
+type AgulhaoChartProps = {
+    grafico: DefinicaoGrafico
+    largura?: number | string
+    altura?: number | string
+    className?: string
+    style?: CSSProperties
+    notMerge?: boolean
+    lazyUpdate?: boolean
+    onEvents?: Record<string, (params: unknown) => void>
+}
+```
+
+## Eventos
+
+`onEvents` é repassado para o `echarts-for-react`.
+
+Exemplo:
+
+```tsx
+<AgulhaoChart
+    grafico={grafico}
+    onEvents={{
+        click: (params) => {
+            console.log(params)
+        },
+    }}
+/>
+```

package/dist/AgulhaoChart.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import type { DefinicaoGrafico } from '@softros/agulhao-charts-core';
+export type AgulhaoChartProps = {
+    grafico: DefinicaoGrafico;
+    largura?: number | string;
+    altura?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    notMerge?: boolean;
+    lazyUpdate?: boolean;
+    onEvents?: Record<string, (params: unknown) => void>;
+};
+/**
+ * Componente do Agulhao Charts.
+ */
+export declare function AgulhaoChart({ grafico, largura, altura, className, style, notMerge, lazyUpdate, onEvents }: AgulhaoChartProps): import("react").JSX.Element;
+//# sourceMappingURL=AgulhaoChart.d.ts.map

package/dist/AgulhaoChart.d.ts.map

@@ -0,0 +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"}

package/dist/AgulhaoChart.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ReactEChartsModule from 'echarts-for-react';
+import { useMemo } from 'react';
+import { criarOpcaoECharts } from '@softros/agulhao-charts-core';
+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]);
+    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 });
+}
+/**
+ * Converte medidas numericas para pixels e preserva medidas CSS textuais.
+ */
+function formatarMedidaCss(valor) {
+    if (typeof valor === 'number') {
+        return `${valor}px`;
+    }
+    return valor;
+}
+//# sourceMappingURL=AgulhaoChart.js.map

package/dist/AgulhaoChart.js.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { AgulhaoChart } from './AgulhaoChart.js';
+export type { AgulhaoChartProps } from './AgulhaoChart.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { AgulhaoChart } from './AgulhaoChart.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "@softros/agulhao-charts-react",
+    "version": "1.0.0",
+    "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",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "test": "vitest run",
+        "prepublishOnly": "npm run build"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/SOFTROS-SISTEMAS/agulhao-charts.git",
+        "directory": "packages/react"
+    },
+    "dependencies": {
+        "@softros/agulhao-charts-core": "^1.0.0",
+        "echarts-for-react": "^3.0.2"
+    },
+    "peerDependencies": {
+        "echarts": ">=5",
+        "react": ">=18"
+    },
+    "devDependencies": {
+        "@types/react": "^19.1.8",
+        "echarts": "^5.6.0",
+        "react": "^19.1.0",
+        "typescript": "^5.8.3",
+        "vitest": "^3.2.4"
+    }
+}