@pagamio/frontend-commons-lib 0.8.213 → 0.8.214

package/lib/dashboard-visuals-v2/charts/AreaChart.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BaseChart } from './BaseChart';
+/**
+ * Area Chart component
+ * Line chart with filled area underneath
+ */
+export function AreaChart({ data = [], series: providedSeries, categories: providedCategories, xKey = 'label', yKey = 'value', yKeys, seriesNames, curve = 'smooth', strokeWidth = 2, showMarkers = false, markerSize = 4, fillOpacity = 0.3, gradient = true, style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }) {
+    // Build series from data
+    const chartSeries = useMemo(() => {
+        if (providedSeries) {
+            return providedSeries.map((s) => ({
+                name: s.name,
+                data: s.data,
+            }));
+        }
+        if (yKeys && yKeys.length > 0) {
+            return yKeys.map((key, index) => ({
+                name: seriesNames?.[index] ?? String(key),
+                data: data.map((item) => Number(item[key]) || 0),
+            }));
+        }
+        return [
+            {
+                name: seriesNames?.[0] ?? String(yKey),
+                data: data.map((item) => Number(item[yKey]) || 0),
+            },
+        ];
+    }, [providedSeries, data, yKey, yKeys, seriesNames]);
+    // Build categories from data
+    const categories = useMemo(() => {
+        if (providedCategories)
+            return providedCategories;
+        return data.map((item) => String(item[xKey] ?? ''));
+    }, [providedCategories, data, xKey]);
+    const isEmpty = chartSeries.every((s) => s.data.length === 0);
+    const curveMap = {
+        smooth: 'smooth',
+        straight: 'straight',
+        stepline: 'stepline',
+    };
+    const options = useMemo(() => ({
+        chart: {
+            events: onDataPointClick
+                ? {
+                    markerClick: (event, chartContext, config) => {
+                        void event;
+                        void chartContext;
+                        const { dataPointIndex, seriesIndex } = config;
+                        onDataPointClick(dataPointIndex, seriesIndex, data[dataPointIndex]);
+                    },
+                }
+                : undefined,
+        },
+        stroke: {
+            curve: curveMap[curve] ?? 'smooth',
+            width: strokeWidth,
+        },
+        markers: {
+            size: showMarkers ? markerSize : 0,
+            strokeWidth: 2,
+            hover: {
+                size: markerSize + 2,
+            },
+        },
+        fill: gradient
+            ? {
+                type: 'gradient',
+                gradient: {
+                    shadeIntensity: 1,
+                    opacityFrom: fillOpacity + 0.2,
+                    opacityTo: 0.1,
+                    stops: [0, 90, 100],
+                },
+            }
+            : {
+                type: 'solid',
+                opacity: fillOpacity,
+            },
+        xaxis: {
+            categories,
+            title: xAxis?.title ? { text: xAxis.title } : undefined,
+            labels: {
+                show: xAxis?.show !== false,
+                formatter: xAxis?.formatter,
+            },
+            type: xAxis?.type,
+        },
+        yaxis: {
+            title: yAxis?.title ? { text: yAxis.title } : undefined,
+            labels: {
+                show: yAxis?.show !== false,
+                formatter: yAxis?.formatter,
+            },
+            min: yAxis?.min,
+            max: yAxis?.max,
+            tickAmount: yAxis?.tickAmount,
+        },
+        tooltip: {
+            enabled: tooltip?.enabled !== false,
+            shared: tooltip?.shared ?? true,
+            y: {
+                formatter: tooltip?.valueFormatter,
+            },
+        },
+        ...apexOptions,
+    }), [
+        curve,
+        strokeWidth,
+        showMarkers,
+        markerSize,
+        fillOpacity,
+        gradient,
+        categories,
+        xAxis,
+        yAxis,
+        tooltip,
+        apexOptions,
+        onDataPointClick,
+        data,
+    ]);
+    return (_jsx(BaseChart, { type: "area", options: options, series: chartSeries, isEmpty: isEmpty, style: style, ...baseProps }));
+}
+export default AreaChart;

package/lib/dashboard-visuals-v2/charts/BarChart.d.ts

@@ -0,0 +1,7 @@
+import type { BarChartProps, ChartDataPoint } from '../types';
+/**
+ * Bar Chart component
+ * Supports vertical/horizontal bars, stacking, and multi-series
+ */
+export declare function BarChart<TData extends ChartDataPoint = ChartDataPoint>({ data, series: providedSeries, categories: providedCategories, xKey, yKey, yKeys, seriesNames, horizontal, stacked, borderRadius, columnWidth, style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }: BarChartProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default BarChart;

package/lib/dashboard-visuals-v2/charts/BarChart.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BaseChart } from './BaseChart';
+/**
+ * Bar Chart component
+ * Supports vertical/horizontal bars, stacking, and multi-series
+ */
+export function BarChart({ data = [], series: providedSeries, categories: providedCategories, xKey = 'label', yKey = 'value', yKeys, seriesNames, horizontal = false, stacked = false, borderRadius = 4, columnWidth = '60%', style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }) {
+    // Build series from data
+    const chartSeries = useMemo(() => {
+        if (providedSeries) {
+            return providedSeries.map((s) => ({
+                name: s.name,
+                data: s.data,
+            }));
+        }
+        if (yKeys && yKeys.length > 0) {
+            // Multi-series from data
+            return yKeys.map((key, index) => ({
+                name: seriesNames?.[index] ?? String(key),
+                data: data.map((item) => Number(item[key]) || 0),
+            }));
+        }
+        // Single series from data
+        return [
+            {
+                name: seriesNames?.[0] ?? String(yKey),
+                data: data.map((item) => Number(item[yKey]) || 0),
+            },
+        ];
+    }, [providedSeries, data, yKey, yKeys, seriesNames]);
+    // Build categories from data
+    const categories = useMemo(() => {
+        if (providedCategories)
+            return providedCategories;
+        return data.map((item) => String(item[xKey] ?? ''));
+    }, [providedCategories, data, xKey]);
+    // Check if data is empty
+    const isEmpty = chartSeries.every((s) => s.data.length === 0);
+    // Build ApexCharts options
+    const options = useMemo(() => ({
+        chart: {
+            stacked,
+            events: onDataPointClick
+                ? {
+                    dataPointSelection: (event, chartContext, config) => {
+                        void event;
+                        void chartContext;
+                        const { dataPointIndex, seriesIndex } = config;
+                        onDataPointClick(dataPointIndex, seriesIndex, data[dataPointIndex]);
+                    },
+                }
+                : undefined,
+        },
+        plotOptions: {
+            bar: {
+                horizontal,
+                borderRadius,
+                columnWidth,
+                dataLabels: {
+                    position: 'top',
+                },
+            },
+        },
+        xaxis: {
+            categories,
+            title: xAxis?.title ? { text: xAxis.title } : undefined,
+            labels: {
+                show: xAxis?.show !== false,
+                formatter: xAxis?.formatter,
+            },
+        },
+        yaxis: {
+            title: yAxis?.title ? { text: yAxis.title } : undefined,
+            labels: {
+                show: yAxis?.show !== false,
+                formatter: yAxis?.formatter,
+            },
+            min: yAxis?.min,
+            max: yAxis?.max,
+            tickAmount: yAxis?.tickAmount,
+        },
+        tooltip: {
+            enabled: tooltip?.enabled !== false,
+            shared: tooltip?.shared ?? true,
+            y: {
+                formatter: tooltip?.valueFormatter,
+            },
+        },
+        ...apexOptions,
+    }), [
+        stacked,
+        horizontal,
+        borderRadius,
+        columnWidth,
+        categories,
+        xAxis,
+        yAxis,
+        tooltip,
+        apexOptions,
+        onDataPointClick,
+        data,
+    ]);
+    return _jsx(BaseChart, { type: "bar", options: options, series: chartSeries, isEmpty: isEmpty, style: style, ...baseProps });
+}
+export default BarChart;

package/lib/dashboard-visuals-v2/charts/BaseChart.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview Base chart wrapper component for ApexCharts
+ * Provides loading, error, and empty states with consistent styling
+ */
+import type { ApexOptions } from 'apexcharts';
+import React from 'react';
+import type { ChartStyleOptions } from '../types';
+/**
+ * Props for BaseChart component
+ */
+export interface BaseChartComponentProps {
+    /** ApexCharts chart type */
+    type: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radialBar' | 'heatmap' | 'treemap' | 'scatter';
+    /** ApexCharts options (will be merged with base options) */
+    options: ApexOptions;
+    /** ApexCharts series data */
+    series: ApexOptions['series'];
+    /** Whether data is empty */
+    isEmpty?: boolean;
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Error message */
+    error?: string | null;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Styling options */
+    style?: ChartStyleOptions;
+    /** Custom class name */
+    className?: string;
+    /** Class names for sub-components */
+    classNames?: {
+        container?: string;
+        header?: string;
+        title?: string;
+        subtitle?: string;
+        chart?: string;
+        loading?: string;
+        error?: string;
+        empty?: string;
+    };
+    /** Header action element */
+    headerAction?: React.ReactNode;
+    /** Chart colors */
+    colors?: string[];
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show grid */
+    showGrid?: boolean;
+    /** Chart height */
+    height?: number | string;
+}
+/**
+ * Base chart wrapper component
+ * Handles loading, error, empty states and provides consistent styling
+ */
+export declare const BaseChart: React.FC<BaseChartComponentProps>;
+export default BaseChart;

package/lib/dashboard-visuals-v2/charts/BaseChart.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Chart from 'react-apexcharts';
+import { twMerge } from 'tailwind-merge';
+import { useMemo } from 'react';
+import { DEFAULT_CHART_COLORS, DEFAULT_CHART_STYLE } from '../types/chart.types';
+/**
+ * Loading skeleton for charts
+ */
+const ChartLoading = ({ height, className }) => (_jsx("div", { className: twMerge('animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg', className), style: { height: typeof height === 'number' ? `${height}px` : height } }));
+/**
+ * Error state component
+ */
+const ChartError = ({ message, className }) => (_jsx("div", { className: twMerge('flex items-center justify-center p-8 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800', className), children: _jsxs("div", { className: "text-center", children: [_jsx("svg", { className: "w-12 h-12 mx-auto text-red-400 dark:text-red-500 mb-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }), _jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })] }) }));
+/**
+ * Empty state component
+ */
+const ChartEmpty = ({ message, className }) => (_jsx("div", { className: twMerge('flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700', className), children: _jsxs("div", { className: "text-center", children: [_jsx("svg", { className: "w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }), _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: message })] }) }));
+/**
+ * Chart header component
+ */
+const ChartHeader = ({ title, subtitle, action, classNames }) => {
+    if (!title && !action)
+        return null;
+    return (_jsxs("div", { className: twMerge('flex items-center justify-between mb-4', classNames?.header), children: [_jsxs("div", { children: [title && (_jsx("h3", { className: twMerge('text-lg font-semibold text-gray-900 dark:text-white', classNames?.title), children: title })), subtitle && (_jsx("p", { className: twMerge('text-sm text-gray-500 dark:text-gray-400 mt-0.5', classNames?.subtitle), children: subtitle }))] }), action && _jsx("div", { children: action })] }));
+};
+/**
+ * Base chart wrapper component
+ * Handles loading, error, empty states and provides consistent styling
+ */
+export const BaseChart = ({ type, options, series, title, subtitle, loading = false, error = null, isEmpty = false, emptyMessage = 'No data available', style = {}, className, classNames = {}, headerAction, colors, showLegend, showGrid, height, }) => {
+    // Merge style options with defaults
+    const mergedStyle = useMemo(() => ({
+        ...DEFAULT_CHART_STYLE,
+        ...style,
+        ...(colors && { colors }),
+        ...(typeof showLegend !== 'undefined' && { showLegend }),
+        ...(height && { height }),
+    }), [style, colors, showLegend, height]);
+    // Build base ApexCharts options
+    const baseOptions = useMemo(() => ({
+        chart: {
+            type,
+            toolbar: {
+                show: mergedStyle.showToolbar,
+            },
+            animations: {
+                enabled: !mergedStyle.disableAnimations,
+                speed: mergedStyle.animationDuration,
+                animateGradually: {
+                    enabled: true,
+                    delay: 150,
+                },
+                dynamicAnimation: {
+                    enabled: true,
+                    speed: 350,
+                },
+            },
+            fontFamily: 'inherit',
+            background: 'transparent',
+        },
+        colors: mergedStyle.colors ?? DEFAULT_CHART_COLORS,
+        legend: {
+            show: mergedStyle.showLegend,
+            position: mergedStyle.legendPosition,
+            horizontalAlign: 'left',
+            fontSize: '13px',
+            fontWeight: 500,
+            markers: {
+                size: 6,
+                strokeWidth: 0,
+                offsetX: -2,
+            },
+            itemMargin: {
+                horizontal: 12,
+                vertical: 4,
+            },
+        },
+        dataLabels: {
+            enabled: mergedStyle.showDataLabels,
+        },
+        stroke: {
+            curve: 'smooth',
+        },
+        grid: {
+            borderColor: '#E5E7EB',
+            strokeDashArray: 4,
+            xaxis: {
+                lines: {
+                    show: false,
+                },
+            },
+            yaxis: {
+                lines: {
+                    show: true,
+                },
+            },
+        },
+        tooltip: {
+            theme: 'light',
+            style: {
+                fontSize: '13px',
+            },
+        },
+        states: {
+            hover: {
+                filter: {
+                    type: 'darken',
+                    value: 0.9,
+                },
+            },
+            active: {
+                filter: {
+                    type: 'darken',
+                    value: 0.8,
+                },
+            },
+        },
+        responsive: [
+            {
+                breakpoint: 640,
+                options: {
+                    legend: {
+                        position: 'bottom',
+                    },
+                },
+            },
+        ],
+    }), [type, mergedStyle]);
+    // Deep merge base options with provided options
+    const mergedOptions = useMemo(() => {
+        return deepMerge(baseOptions, options);
+    }, [baseOptions, options]);
+    // Get chart height
+    const chartHeight = mergedStyle.height ?? DEFAULT_CHART_STYLE.height;
+    // Render loading state
+    if (loading) {
+        return (_jsxs("div", { className: twMerge('bg-white dark:bg-gray-900 rounded-xl p-4', className, classNames.container), children: [_jsx(ChartHeader, { title: title, subtitle: subtitle, action: headerAction, classNames: classNames }), _jsx(ChartLoading, { height: chartHeight, className: classNames.loading })] }));
+    }
+    // Render error state
+    if (error) {
+        return (_jsxs("div", { className: twMerge('bg-white dark:bg-gray-900 rounded-xl p-4', className, classNames.container), children: [_jsx(ChartHeader, { title: title, subtitle: subtitle, action: headerAction, classNames: classNames }), _jsx(ChartError, { message: error, className: classNames.error })] }));
+    }
+    // Render empty state
+    if (isEmpty) {
+        return (_jsxs("div", { className: twMerge('bg-white dark:bg-gray-900 rounded-xl p-4', className, classNames.container), children: [_jsx(ChartHeader, { title: title, subtitle: subtitle, action: headerAction, classNames: classNames }), _jsx(ChartEmpty, { message: emptyMessage, className: classNames.empty })] }));
+    }
+    return (_jsxs("div", { className: twMerge('bg-white dark:bg-gray-900 rounded-xl p-4', className, classNames.container), children: [_jsx(ChartHeader, { title: title, subtitle: subtitle, action: headerAction, classNames: classNames }), _jsx("div", { className: classNames.chart, children: _jsx(Chart, { type: type, options: mergedOptions, series: series, height: chartHeight, width: mergedStyle.width ?? '100%' }) })] }));
+};
+/**
+ * Deep merge utility for ApexCharts options
+ */
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = result[key];
+            if (sourceValue &&
+                typeof sourceValue === 'object' &&
+                !Array.isArray(sourceValue) &&
+                targetValue &&
+                typeof targetValue === 'object' &&
+                !Array.isArray(targetValue)) {
+                result[key] = deepMerge(targetValue, sourceValue);
+            }
+            else if (sourceValue !== undefined) {
+                result[key] = sourceValue;
+            }
+        }
+    }
+    return result;
+}
+export default BaseChart;

package/lib/dashboard-visuals-v2/charts/DonutChart.d.ts

@@ -0,0 +1,7 @@
+import type { ChartDataPoint, DonutChartProps } from '../types';
+/**
+ * Donut Chart component
+ * Ring chart with optional center content
+ */
+export declare function DonutChart<TData extends ChartDataPoint = ChartDataPoint>({ data, labelKey, valueKey, labels: providedLabels, values: providedValues, donutSize, showTotal, totalLabel, totalFormatter, style, tooltip, apexOptions, onDataPointClick, ...baseProps }: DonutChartProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default DonutChart;

package/lib/dashboard-visuals-v2/charts/DonutChart.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BaseChart } from './BaseChart';
+/**
+ * Donut Chart component
+ * Ring chart with optional center content
+ */
+export function DonutChart({ data = [], labelKey = 'label', valueKey = 'value', labels: providedLabels, values: providedValues, donutSize = '65%', showTotal = true, totalLabel = 'Total', totalFormatter, style, tooltip, apexOptions, onDataPointClick, ...baseProps }) {
+    // Build labels and values from data
+    const { labels, values } = useMemo(() => {
+        if (providedLabels && providedValues) {
+            return { labels: providedLabels, values: providedValues };
+        }
+        return {
+            labels: data.map((item) => String(item[labelKey] ?? '')),
+            values: data.map((item) => Number(item[valueKey]) || 0),
+        };
+    }, [data, labelKey, valueKey, providedLabels, providedValues]);
+    const isEmpty = values.length === 0 || values.every((v) => v === 0);
+    // Calculate total for center display
+    const total = useMemo(() => values.reduce((acc, val) => acc + val, 0), [values]);
+    const options = useMemo(() => ({
+        chart: {
+            events: onDataPointClick
+                ? {
+                    dataPointSelection: (event, chartContext, config) => {
+                        void event;
+                        void chartContext;
+                        const { dataPointIndex } = config;
+                        onDataPointClick(dataPointIndex, 0, data[dataPointIndex]);
+                    },
+                }
+                : undefined,
+        },
+        labels,
+        plotOptions: {
+            pie: {
+                donut: {
+                    size: donutSize,
+                    labels: {
+                        show: showTotal,
+                        name: {
+                            show: true,
+                            fontSize: '14px',
+                            fontWeight: 600,
+                            color: '#6B7280',
+                        },
+                        value: {
+                            show: true,
+                            fontSize: '24px',
+                            fontWeight: 700,
+                            color: '#111827',
+                            formatter: totalFormatter ? (val) => totalFormatter(Number(val)) : (val) => val,
+                        },
+                        total: {
+                            show: showTotal,
+                            showAlways: true,
+                            label: totalLabel,
+                            fontSize: '14px',
+                            fontWeight: 600,
+                            color: '#6B7280',
+                            formatter: totalFormatter
+                                ? () => totalFormatter(total)
+                                : (w) => {
+                                    const sum = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
+                                    return sum.toLocaleString();
+                                },
+                        },
+                    },
+                },
+            },
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        legend: {
+            position: 'right',
+            fontSize: '13px',
+            markers: {
+                size: 6,
+                strokeWidth: 0,
+            },
+            formatter: (seriesName, opts) => {
+                const value = opts.w.globals.series[opts.seriesIndex];
+                return `${seriesName}: ${value.toLocaleString()}`;
+            },
+        },
+        tooltip: {
+            enabled: tooltip?.enabled !== false,
+            y: {
+                formatter: tooltip?.valueFormatter ?? ((val) => val.toLocaleString()),
+            },
+        },
+        responsive: [
+            {
+                breakpoint: 640,
+                options: {
+                    legend: {
+                        position: 'bottom',
+                    },
+                },
+            },
+        ],
+        ...apexOptions,
+    }), [labels, donutSize, showTotal, totalLabel, totalFormatter, total, tooltip, apexOptions, onDataPointClick, data]);
+    return _jsx(BaseChart, { type: "donut", options: options, series: values, isEmpty: isEmpty, style: style, ...baseProps });
+}
+export default DonutChart;

package/lib/dashboard-visuals-v2/charts/HeatmapChart.d.ts

@@ -0,0 +1,7 @@
+import type { ChartDataPoint, HeatmapChartProps } from '../types';
+/**
+ * Heatmap Chart component
+ * Grid-based visualization with color intensity
+ */
+export declare function HeatmapChart<TData extends ChartDataPoint = ChartDataPoint>({ data, series: providedSeries, categories: providedCategories, xKey, yKey, valueKey, colorScale, showValue, style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }: HeatmapChartProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default HeatmapChart;