@pagamio/frontend-commons-lib 0.8.213 → 0.8.214

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BaseChart } from './BaseChart';
+/**
+ * Heatmap Chart component
+ * Grid-based visualization with color intensity
+ */
+export function HeatmapChart({ data = [], series: providedSeries, categories: providedCategories, xKey = 'x', yKey = 'y', valueKey = 'value', colorScale, showValue = true, style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }) {
+    // Transform data into heatmap series format
+    const chartSeries = useMemo(() => {
+        if (providedSeries) {
+            return providedSeries.map((s) => ({
+                name: s.name,
+                data: s.data.map((value, index) => ({
+                    x: providedCategories?.[index] ?? index.toString(),
+                    y: value,
+                })),
+            }));
+        }
+        // Group data by yKey to create series
+        const grouped = data.reduce((acc, item) => {
+            const yValue = String(item[yKey] ?? '');
+            if (!acc[yValue]) {
+                acc[yValue] = [];
+            }
+            acc[yValue].push({
+                x: String(item[xKey] ?? ''),
+                y: Number(item[valueKey]) || 0,
+            });
+            return acc;
+        }, {});
+        return Object.entries(grouped).map(([name, values]) => ({
+            name,
+            data: values,
+        }));
+    }, [providedSeries, providedCategories, data, xKey, yKey, valueKey]);
+    const isEmpty = chartSeries.length === 0;
+    const options = useMemo(() => ({
+        chart: {
+            events: onDataPointClick
+                ? {
+                    dataPointSelection: (event, chartContext, config) => {
+                        void event;
+                        void chartContext;
+                        const { dataPointIndex, seriesIndex } = config;
+                        onDataPointClick(dataPointIndex, seriesIndex, data[dataPointIndex]);
+                    },
+                }
+                : undefined,
+        },
+        plotOptions: {
+            heatmap: {
+                shadeIntensity: 0.5,
+                radius: 4,
+                useFillColorAsStroke: false,
+                colorScale: colorScale ?? {
+                    ranges: [
+                        { from: 0, to: 25, color: '#FEF3C7', name: 'Low' },
+                        { from: 26, to: 50, color: '#FCD34D', name: 'Medium' },
+                        { from: 51, to: 75, color: '#F59E0B', name: 'High' },
+                        { from: 76, to: 100, color: '#D97706', name: 'Very High' },
+                    ],
+                },
+            },
+        },
+        dataLabels: {
+            enabled: showValue,
+            style: {
+                fontSize: '12px',
+                fontWeight: 500,
+            },
+        },
+        stroke: {
+            width: 2,
+            colors: ['#fff'],
+        },
+        xaxis: {
+            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,
+            },
+        },
+        tooltip: {
+            enabled: tooltip?.enabled !== false,
+            y: {
+                formatter: tooltip?.valueFormatter ?? ((val) => val?.toString() ?? ''),
+            },
+        },
+        ...apexOptions,
+    }), [colorScale, showValue, xAxis, yAxis, tooltip, apexOptions, onDataPointClick, data]);
+    return (_jsx(BaseChart, { type: "heatmap", options: options, series: chartSeries, isEmpty: isEmpty, style: style, ...baseProps }));
+}
+export default HeatmapChart;

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

@@ -0,0 +1,7 @@
+import type { ChartDataPoint, LineChartProps } from '../types';
+/**
+ * Line Chart component
+ * Supports single/multi-series lines with markers
+ */
+export declare function LineChart<TData extends ChartDataPoint = ChartDataPoint>({ data, series: providedSeries, categories: providedCategories, xKey, yKey, yKeys, seriesNames, curve, strokeWidth, showMarkers, markerSize, style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }: LineChartProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default LineChart;

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BaseChart } from './BaseChart';
+/**
+ * Line Chart component
+ * Supports single/multi-series lines with markers
+ */
+export function LineChart({ data = [], series: providedSeries, categories: providedCategories, xKey = 'label', yKey = 'value', yKeys, seriesNames, curve = 'smooth', strokeWidth = 3, showMarkers = true, markerSize = 5, 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);
+    // Map curve type to ApexCharts
+    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,
+            },
+        },
+        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,
+        categories,
+        xAxis,
+        yAxis,
+        tooltip,
+        apexOptions,
+        onDataPointClick,
+        data,
+    ]);
+    return (_jsx(BaseChart, { type: "line", options: options, series: chartSeries, isEmpty: isEmpty, style: style, ...baseProps }));
+}
+export default LineChart;

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

@@ -0,0 +1,7 @@
+import type { ChartDataPoint, MixedChartProps } from '../types';
+/**
+ * Mixed Chart component
+ * Combines bar, line, and area charts in one visualization
+ */
+export declare function MixedChart<TData extends ChartDataPoint = ChartDataPoint>({ data, categories: providedCategories, xKey, seriesConfig, style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }: MixedChartProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default MixedChart;

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BaseChart } from './BaseChart';
+/**
+ * Mixed Chart component
+ * Combines bar, line, and area charts in one visualization
+ */
+export function MixedChart({ data = [], categories: providedCategories, xKey = 'label', seriesConfig, style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }) {
+    // Build series from seriesConfig
+    const chartSeries = useMemo(() => {
+        return seriesConfig.map((config) => ({
+            name: config.name,
+            type: config.type,
+            data: data.map((item) => Number(item[config.dataKey]) || 0),
+        }));
+    }, [data, seriesConfig]);
+    // Build categories from data
+    const categories = useMemo(() => {
+        if (providedCategories)
+            return providedCategories;
+        return data.map((item) => String(item[xKey] ?? ''));
+    }, [providedCategories, data, xKey]);
+    // Extract colors from seriesConfig
+    const colors = useMemo(() => {
+        return seriesConfig.map((config) => config.color).filter(Boolean);
+    }, [seriesConfig]);
+    const isEmpty = chartSeries.every((s) => s.data.length === 0);
+    const options = useMemo(() => ({
+        chart: {
+            stacked: false,
+            events: onDataPointClick
+                ? {
+                    dataPointSelection: (event, chartContext, config) => {
+                        void event;
+                        void chartContext;
+                        const { dataPointIndex, seriesIndex } = config;
+                        onDataPointClick(dataPointIndex, seriesIndex, data[dataPointIndex]);
+                    },
+                }
+                : undefined,
+        },
+        colors: colors.length > 0 ? colors : undefined,
+        stroke: {
+            width: seriesConfig.map((config) => (config.type === 'line' ? 3 : 0)),
+            curve: 'smooth',
+        },
+        plotOptions: {
+            bar: {
+                columnWidth: '50%',
+                borderRadius: 4,
+            },
+        },
+        fill: {
+            opacity: seriesConfig.map((config) => (config.type === 'area' ? 0.3 : 1)),
+            type: seriesConfig.map((config) => (config.type === 'area' ? 'gradient' : 'solid')),
+        },
+        markers: {
+            size: seriesConfig.map((config) => (config.type === 'line' ? 4 : 0)),
+        },
+        xaxis: {
+            categories,
+            title: xAxis?.title ? { text: xAxis.title } : undefined,
+            labels: {
+                show: xAxis?.show !== false,
+                formatter: xAxis?.formatter,
+            },
+            type: xAxis?.type,
+        },
+        yaxis: Array.isArray(yAxis)
+            ? yAxis.map((axis) => ({
+                title: axis?.title ? { text: axis.title } : undefined,
+                labels: {
+                    show: axis?.show !== false,
+                    formatter: axis?.formatter,
+                },
+                min: axis?.min,
+                max: axis?.max,
+                tickAmount: axis?.tickAmount,
+            }))
+            : {
+                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,
+            },
+        },
+        legend: {
+            position: 'top',
+            horizontalAlign: 'left',
+        },
+        ...apexOptions,
+    }), [colors, seriesConfig, categories, xAxis, yAxis, tooltip, apexOptions, onDataPointClick, data]);
+    return (_jsx(BaseChart, { type: "line" // ApexCharts uses the individual series types
+        , options: options, series: chartSeries, isEmpty: isEmpty, style: style, ...baseProps }));
+}
+export default MixedChart;

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

@@ -0,0 +1,7 @@
+import type { ChartDataPoint, PieChartProps } from '../types';
+/**
+ * Pie Chart component
+ * Standard pie chart (donut with no hole)
+ */
+export declare function PieChart<TData extends ChartDataPoint = ChartDataPoint>(props: PieChartProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default PieChart;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DonutChart } from './DonutChart';
+/**
+ * Pie Chart component
+ * Standard pie chart (donut with no hole)
+ */
+export function PieChart(props) {
+    return _jsx(DonutChart, { ...props, donutSize: "0%", showTotal: false });
+}
+export default PieChart;

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

@@ -0,0 +1,7 @@
+import type { RadialChartProps } from '../types';
+/**
+ * Radial Chart component
+ * Circular gauge/progress visualization
+ */
+export declare function RadialChart({ values, labels, showValue, valueFormatter, trackBackground, hollowSize, startAngle, endAngle, style, tooltip, apexOptions, ...baseProps }: RadialChartProps): import("react/jsx-runtime").JSX.Element;
+export default RadialChart;

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BaseChart } from './BaseChart';
+/**
+ * Radial Chart component
+ * Circular gauge/progress visualization
+ */
+export function RadialChart({ values, labels, showValue = true, valueFormatter, trackBackground = '#E5E7EB', hollowSize = '65%', startAngle = -135, endAngle = 135, style, tooltip, apexOptions, ...baseProps }) {
+    const isEmpty = values.length === 0 || values.every((v) => v === 0);
+    const options = useMemo(() => ({
+        chart: {
+            type: 'radialBar',
+        },
+        labels,
+        plotOptions: {
+            radialBar: {
+                startAngle,
+                endAngle,
+                hollow: {
+                    size: hollowSize,
+                    background: 'transparent',
+                },
+                track: {
+                    background: trackBackground,
+                    strokeWidth: '100%',
+                    margin: 5,
+                },
+                dataLabels: {
+                    show: showValue,
+                    name: {
+                        show: true,
+                        fontSize: '14px',
+                        fontWeight: 600,
+                        color: '#6B7280',
+                        offsetY: -10,
+                    },
+                    value: {
+                        show: true,
+                        fontSize: '24px',
+                        fontWeight: 700,
+                        color: '#111827',
+                        offsetY: 5,
+                        formatter: valueFormatter ?? ((val) => `${val}%`),
+                    },
+                    total: {
+                        show: labels.length > 1,
+                        label: 'Average',
+                        fontSize: '14px',
+                        fontWeight: 600,
+                        color: '#6B7280',
+                        formatter: (w) => {
+                            const avg = Math.round(w.globals.seriesTotals.reduce((a, b) => a + b, 0) / w.globals.series.length);
+                            return valueFormatter ? valueFormatter(avg) : `${avg}%`;
+                        },
+                    },
+                },
+            },
+        },
+        stroke: {
+            lineCap: 'round',
+        },
+        tooltip: {
+            enabled: tooltip?.enabled !== false,
+            y: {
+                formatter: tooltip?.valueFormatter ?? valueFormatter ?? ((val) => `${val}%`),
+            },
+        },
+        ...apexOptions,
+    }), [labels, startAngle, endAngle, hollowSize, trackBackground, showValue, valueFormatter, tooltip, apexOptions]);
+    return (_jsx(BaseChart, { type: "radialBar", options: options, series: values, isEmpty: isEmpty, style: style, ...baseProps }));
+}
+export default RadialChart;

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

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview Charts index - Export all chart components
+ */
+export { BaseChart, type BaseChartComponentProps } from './BaseChart';
+export { BarChart } from './BarChart';
+export { LineChart } from './LineChart';
+export { AreaChart } from './AreaChart';
+export { DonutChart } from './DonutChart';
+export { PieChart } from './PieChart';
+export { HeatmapChart } from './HeatmapChart';
+export { RadialChart } from './RadialChart';
+export { MixedChart } from './MixedChart';

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

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview Charts index - Export all chart components
+ */
+export { BaseChart } from './BaseChart';
+export { BarChart } from './BarChart';
+export { LineChart } from './LineChart';
+export { AreaChart } from './AreaChart';
+export { DonutChart } from './DonutChart';
+export { PieChart } from './PieChart';
+export { HeatmapChart } from './HeatmapChart';
+export { RadialChart } from './RadialChart';
+export { MixedChart } from './MixedChart';

package/lib/dashboard-visuals-v2/components/DataFetchingVisual.js

@@ -0,0 +1 @@
+"use strict";

package/lib/dashboard-visuals-v2/components/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/dashboard-visuals-v2/hooks/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @fileoverview Dashboard Visuals V2 Hooks
+ */
+export { useChartData, useChartQueryData, type UseChartDataOptions, type UseChartDataResult } from './useChartData';

package/lib/dashboard-visuals-v2/hooks/index.js

@@ -0,0 +1,4 @@
+/**
+ * @fileoverview Dashboard Visuals V2 Hooks
+ */
+export { useChartData, useChartQueryData } from './useChartData';

package/lib/dashboard-visuals-v2/hooks/useChartData.d.ts

@@ -0,0 +1,72 @@
+import type { ChartQueryProps } from '../types';
+export interface UseChartDataOptions<TData> {
+    /** URL to fetch data from */
+    url?: string;
+    /** HTTP method */
+    method?: 'GET' | 'POST';
+    /** Request body for POST requests */
+    body?: Record<string, unknown>;
+    /** Query parameters */
+    params?: Record<string, string>;
+    /** Transform function for response data */
+    transform?: (data: unknown) => TData[];
+    /** Whether to enable the query */
+    enabled?: boolean;
+    /** Stale time in milliseconds (how long data is considered fresh) */
+    staleTime?: number;
+    /** Garbage collection time in milliseconds */
+    gcTime?: number;
+    /** Refetch interval in milliseconds (0 = disabled) */
+    refetchInterval?: number;
+    /** Refetch on window focus */
+    refetchOnWindowFocus?: boolean;
+    /** Initial data */
+    initialData?: TData[];
+    /** Query key prefix for cache management */
+    queryKeyPrefix?: string;
+}
+export interface UseChartDataResult<TData> {
+    /** The fetched and transformed data */
+    data: TData[];
+    /** Whether the initial fetch is in progress */
+    isLoading: boolean;
+    /** Whether a background refetch is in progress */
+    isFetching: boolean;
+    /** Whether there was an error */
+    isError: boolean;
+    /** The error object if any */
+    error: Error | null;
+    /** Function to manually refetch data */
+    refetch: () => void;
+}
+/**
+ * Hook for fetching chart data using TanStack Query
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, error, refetch } = useChartData({
+ *   url: '/api/sales/monthly',
+ *   params: { year: '2024' },
+ *   transform: (raw) => raw.data.map(item => ({
+ *     name: item.month,
+ *     value: item.total
+ *   })),
+ *   staleTime: 5 * 60 * 1000, // 5 minutes
+ * });
+ * ```
+ */
+export declare function useChartData<TData = unknown>(options: UseChartDataOptions<TData>): UseChartDataResult<TData>;
+/**
+ * Props adapter for using ChartQueryProps with useChartData
+ *
+ * @example
+ * ```tsx
+ * // In your chart component
+ * const { data, isLoading, error } = useChartQueryData(
+ *   queryProps,
+ *   staticData // fallback data if no query
+ * );
+ * ```
+ */
+export declare function useChartQueryData<TData>(queryProps: ChartQueryProps | undefined, staticData?: TData[]): UseChartDataResult<TData>;
+export default useChartData;

package/lib/dashboard-visuals-v2/hooks/useChartData.js

@@ -0,0 +1,122 @@
+/**
+ * @fileoverview useChartData hook - Data fetching for V2 charts
+ * Uses TanStack Query for declarative, cache-aware data fetching
+ */
+import { useCallback, useMemo } from 'react';
+import { useApiQuery } from '../../api/tanstackQuery';
+/**
+ * Hook for fetching chart data using TanStack Query
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, error, refetch } = useChartData({
+ *   url: '/api/sales/monthly',
+ *   params: { year: '2024' },
+ *   transform: (raw) => raw.data.map(item => ({
+ *     name: item.month,
+ *     value: item.total
+ *   })),
+ *   staleTime: 5 * 60 * 1000, // 5 minutes
+ * });
+ * ```
+ */
+export function useChartData(options) {
+    const { url, method = 'GET', body, params, transform, enabled = true, staleTime, gcTime, refetchInterval, refetchOnWindowFocus, initialData = [], queryKeyPrefix = 'chart', } = options;
+    // Build query string for GET requests
+    const queryString = useMemo(() => {
+        if (!params || Object.keys(params).length === 0)
+            return '';
+        return '?' + new URLSearchParams(params).toString();
+    }, [params]);
+    const fullUrl = url ? `${url}${queryString}` : '';
+    // Build stable query key
+    const queryKey = useMemo(() => [queryKeyPrefix, url, method, params, body].filter(Boolean), [queryKeyPrefix, url, method, params, body]);
+    // Use TanStack Query for data fetching
+    const { data: rawData, isLoading, isFetching, isError, error, refetch: queryRefetch, } = useApiQuery({
+        queryKey,
+        endpoint: fullUrl,
+        requestConfig: {
+            method,
+            ...(method === 'POST' && body ? { body: JSON.stringify(body) } : {}),
+        },
+        enabled: enabled && !!url,
+        staleTime,
+        gcTime,
+        refetchInterval: refetchInterval || false,
+        refetchOnWindowFocus: refetchOnWindowFocus ?? false,
+    });
+    // Transform data if transform function provided
+    const transformedData = useMemo(() => {
+        if (!rawData)
+            return initialData;
+        if (transform) {
+            try {
+                return transform(rawData);
+            }
+            catch (e) {
+                console.error('Error transforming chart data:', e);
+                return initialData;
+            }
+        }
+        // Default: assume data is array or has data property
+        if (Array.isArray(rawData))
+            return rawData;
+        if (rawData && typeof rawData === 'object' && 'data' in rawData) {
+            return rawData.data;
+        }
+        return initialData;
+    }, [rawData, transform, initialData]);
+    // Memoized refetch function
+    const refetch = useCallback(() => {
+        queryRefetch();
+    }, [queryRefetch]);
+    return {
+        data: transformedData,
+        isLoading,
+        isFetching,
+        isError,
+        error: error,
+        refetch,
+    };
+}
+/**
+ * Props adapter for using ChartQueryProps with useChartData
+ *
+ * @example
+ * ```tsx
+ * // In your chart component
+ * const { data, isLoading, error } = useChartQueryData(
+ *   queryProps,
+ *   staticData // fallback data if no query
+ * );
+ * ```
+ */
+export function useChartQueryData(queryProps, staticData) {
+    const result = useChartData({
+        url: queryProps?.url,
+        method: queryProps?.method,
+        body: queryProps?.body,
+        params: queryProps?.params,
+        transform: queryProps?.transform,
+        enabled: queryProps?.enabled ?? !!queryProps?.url,
+        staleTime: queryProps?.staleTime,
+        gcTime: queryProps?.gcTime,
+        refetchInterval: queryProps?.refetchInterval,
+        refetchOnWindowFocus: queryProps?.refetchOnWindowFocus,
+        initialData: staticData,
+        queryKeyPrefix: queryProps?.queryKey?.[0]?.toString() ?? 'chart',
+    });
+    // If no query props, return static data
+    if (!queryProps?.url) {
+        return {
+            data: staticData || [],
+            isLoading: false,
+            isFetching: false,
+            isError: false,
+            error: null,
+            refetch: () => { },
+        };
+    }
+    return result;
+}
+export default useChartData;