osocna-react-tailwind 0.0.13 → 0.0.15
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.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './opciones-afiliados/monotributo/DashboardBarChart';
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { LegendProps } from 'recharts';
|
|
2
|
+
/**
|
|
3
|
+
* Configuración para una barra individual en el gráfico.
|
|
4
|
+
* @template T El tipo de los datos de la fila.
|
|
5
|
+
*/
|
|
6
|
+
interface BarConfig<T> {
|
|
7
|
+
/** Clave de los datos que se mostrará en esta barra. */
|
|
8
|
+
dataKey: keyof T;
|
|
9
|
+
/** Color de relleno de la barra (ej: "#8884d8"). */
|
|
10
|
+
fill?: string;
|
|
11
|
+
/** Nombre que aparecerá en la leyenda. */
|
|
12
|
+
name?: string;
|
|
13
|
+
/** ID de apilamiento si se desea un gráfico de barras apiladas. */
|
|
14
|
+
stackId?: string;
|
|
15
|
+
/** Ancho de la barra en píxeles. */
|
|
16
|
+
barSize?: number;
|
|
17
|
+
/** Duración de la animación en milisegundos. */
|
|
18
|
+
animationDuration?: number;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Propiedades para el componente DashboardBarChart.
|
|
22
|
+
* @template T El tipo de los objetos en el array de datos.
|
|
23
|
+
*/
|
|
24
|
+
interface Props<T extends object> {
|
|
25
|
+
/** Array de datos a visualizar. */
|
|
26
|
+
data: T[];
|
|
27
|
+
/** Clave del objeto de datos que se usará para el eje X (generalmente el periodo). */
|
|
28
|
+
xAxisKey: string;
|
|
29
|
+
/** Array de configuraciones para las barras que se renderizarán. */
|
|
30
|
+
bars: BarConfig<T>[];
|
|
31
|
+
/** Ancho del gráfico en píxeles. Por defecto 400. */
|
|
32
|
+
width?: number;
|
|
33
|
+
/** Alto del gráfico en píxeles. Por defecto 400. */
|
|
34
|
+
height?: number;
|
|
35
|
+
/** Ancho del eje Y. Puede ser un número o "auto". */
|
|
36
|
+
yAxisWidth?: number | "auto";
|
|
37
|
+
/** Estilos opcionales para el contenedor del Tooltip. */
|
|
38
|
+
tooltipStyle?: React.CSSProperties;
|
|
39
|
+
/** Configuración del cursor del Tooltip. */
|
|
40
|
+
tooltipCursor?: boolean | object;
|
|
41
|
+
/** Propiedades adicionales para la leyenda de Recharts. */
|
|
42
|
+
legendProps?: Partial<LegendProps>;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Componente DashboardBarChart (BarChart)
|
|
46
|
+
*
|
|
47
|
+
* Un componente genérico para renderizar gráficos de barras utilizando Recharts.
|
|
48
|
+
* Permite múltiples barras, apilamiento opcional y personalización de ejes y tooltips.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* <DashboardBarChart
|
|
52
|
+
* data={[{periodo: '2023-01', altas: 10, bajas: 5}]}
|
|
53
|
+
* xAxisKey="periodo"
|
|
54
|
+
* bars={[
|
|
55
|
+
* { dataKey: 'altas', fill: '#82ca9d', name: 'Altas' },
|
|
56
|
+
* { dataKey: 'bajas', fill: '#8884d8', name: 'Bajas' }
|
|
57
|
+
* ]}
|
|
58
|
+
* />
|
|
59
|
+
*/
|
|
60
|
+
export declare const DashboardBarChart: <T extends object>({ data, xAxisKey, bars, width, height, yAxisWidth, tooltipStyle, tooltipCursor, legendProps, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
|
61
|
+
export {};
|