@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/dashboard-visuals/visuals/MultiGaugeChart.d.ts

@@ -0,0 +1,39 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionQueryProps, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+interface MultiGaugeChartProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    url?: string;
+    query: QueryProps;
+    nameKey: string;
+    valueKey: string;
+    limit?: number;
+    colors?: string[];
+    chartDetails?: {
+        columns?: any[];
+        data?: any[];
+    };
+    showScaleLabels?: boolean;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    metricDetailData?: {
+        statisticsUrl?: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        chartToolTip?: ChartToolTipProps;
+        detailsTableTitle?: string;
+    };
+}
+declare const MultiGaugeChart: <TData extends {
+    id: string | number;
+}>({ title, url, query, nameKey, valueKey, limit, colors, chartDetails, showScaleLabels, metricDetailData, ...props }: MultiGaugeChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default MultiGaugeChart;

package/lib/dashboard-visuals/visuals/MultiGaugeChart.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useMemo } from 'react';
+import Card from '../components/CardWrapper';
+import ChartWrapper from '../components/ChartWrapper';
+import { useChartData } from '../hooks/useChartData';
+import { DashboardPaths } from '../utils';
+// Default colors match your image
+const defaultColors = ['#6E7CF9', '#FFD572', '#8ADE89']; // Blue, Yellow, Green
+const MultiGaugeChart = ({ title, url = DashboardPaths.QUERY, query, nameKey, valueKey, limit = 3, colors = defaultColors, chartDetails, showScaleLabels = true, metricDetailData, ...props }) => {
+    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    const chartOptions = useMemo(() => {
+        if (!metricData || metricData.length === 0)
+            return {};
+        // Transform data into gauge data format
+        const gaugeData = metricData.map((item, index) => {
+            const value = item[valueKey];
+            const name = item[nameKey];
+            // Calculate vertical positioning
+            const basePosition = -30 + index * 30; // -30%, 0%, 30%
+            const detailPosition = -20 + index * 30; // -20%, 10%, 40%
+            return {
+                value: value,
+                name: name,
+                title: {
+                    offsetCenter: ['0%', `${basePosition}%`],
+                },
+                detail: {
+                    valueAnimation: true,
+                    offsetCenter: ['0%', `${detailPosition}%`],
+                    formatter: '{value}%',
+                    color: colors[index % colors.length],
+                    backgroundColor: '#fff',
+                    borderRadius: 10,
+                    padding: [2, 4],
+                    borderColor: colors[index % colors.length],
+                    borderWidth: 1,
+                },
+                itemStyle: {
+                    color: colors[index % colors.length],
+                },
+            };
+        });
+        return {
+            backgroundColor: 'transparent',
+            series: [
+                {
+                    type: 'gauge',
+                    startAngle: 90,
+                    endAngle: -270,
+                    pointer: {
+                        show: false,
+                    },
+                    progress: {
+                        show: true,
+                        overlap: false,
+                        roundCap: true,
+                        clip: false,
+                        itemStyle: {
+                            borderWidth: 1,
+                            borderColor: '#464646',
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            width: 40,
+                            color: [[1, 'rgba(220, 226, 240, 0.6)']], // Light blue/gray background
+                        },
+                    },
+                    splitLine: {
+                        show: showScaleLabels,
+                        distance: 0,
+                        length: 10,
+                        lineStyle: {
+                            width: 1,
+                            color: 'rgba(100, 100, 100, 0.4)',
+                        },
+                    },
+                    axisTick: {
+                        show: showScaleLabels,
+                        distance: 0,
+                        length: 5,
+                        lineStyle: {
+                            width: 1,
+                            color: 'rgba(100, 100, 100, 0.4)',
+                        },
+                    },
+                    axisLabel: {
+                        show: showScaleLabels,
+                        distance: 15,
+                        fontSize: 10,
+                        color: '#999',
+                        formatter: function (value) {
+                            return value + '%';
+                        },
+                    },
+                    data: gaugeData,
+                    title: {
+                        fontSize: 14,
+                        color: '#333',
+                    },
+                    detail: {
+                        width: 50,
+                        height: 14,
+                        fontSize: 14,
+                        color: 'inherit',
+                        borderColor: 'inherit',
+                        borderRadius: 20,
+                        borderWidth: 1,
+                        formatter: '{value}%',
+                    },
+                    radius: '90%',
+                },
+            ],
+        };
+    }, [colors, metricData, nameKey, showScaleLabels, valueKey]);
+    return (_jsx(Card, { title: title, ...props, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[12px] flex justify-center", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '400px', width: '100%' } }) }) }) }));
+};
+export default MultiGaugeChart;

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

@@ -0,0 +1,59 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ColumnProps } from '../components/ChartDetailsModal';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, TableColumn, TooltipField } from '../types';
+interface StatisticsQueryData {
+    query: QueryProps;
+    valueKey: string;
+    previousValueKey?: string;
+    changeKey: string;
+    title: string;
+    format?: string;
+}
+interface PieChartProps<TData extends {
+    id: string | number;
+}> {
+    options?: Record<string, unknown>;
+    title: string;
+    colors?: string[];
+    chartDetails?: {
+        columns: ColumnProps[];
+        data: Record<string, unknown>[];
+    };
+    url?: string;
+    query: QueryProps;
+    nameKey: string;
+    valueKey: string;
+    otherKey?: string;
+    chartToolTip?: ChartToolTipProps;
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    currencyDisplaySymbol?: string;
+    metricDetailData: {
+        title: string;
+        statisticsUrl?: string;
+        topFiveChartTitle: string;
+        bottomFiveChartTitle: string;
+        itemStatisticsQuery: StatisticsQueryData;
+        valueMetricsQuery: StatisticsQueryData;
+        averageMetricsQuery: StatisticsQueryData;
+        distributionMetricsQuery: DistributionQueryProps;
+        yAxisDataNameKey: string;
+        xAxisNameKey: string;
+        xAxisLabel: string;
+        yAxisLabel: string;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        detailsTableTitle?: string;
+        distributionChartTooltip: DistributionChartTooltip;
+    };
+    showDetailsModal?: boolean;
+}
+declare const PieChart: <TData extends {
+    id: string | number;
+}>({ url, metricDetailData, nameKey, valueKey, query, otherKey, options, title, colors, tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, currencyDisplaySymbol, chartToolTip, showDetailsModal, ...props }: PieChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default PieChart;

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

@@ -0,0 +1,194 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useMemo, useState } from 'react';
+import Card from '../components/CardWrapper';
+import ChartDetailsModal from '../components/ChartDetailsModal';
+import ChartWrapper from '../components/ChartWrapper';
+import { useChartData } from '../hooks/useChartData';
+import { DashboardPaths, defaultColors, getPieChartData } from '../utils';
+import { createDistributionMetricOptions } from '../utils/chartOptions';
+import { createTooltipFormatter, processTooltipFields } from '../utils/tooltipUtils';
+const useMetricData = (url, query) => {
+    const { data = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    return { data, error, isEmpty, loading, refresh };
+};
+const sumByKey = (array, key) => {
+    return array.reduce((total, item) => {
+        return total + (item[key] ?? 0); // fallback to 0 if key is missing
+    }, 0);
+};
+const useItemMetricState = (url, queryData) => {
+    const { data, error, isEmpty, loading, refresh } = useMetricData(url, queryData.query);
+    const firstResult = Array.isArray(data) && data.length > 0 ? data[0] : {};
+    const totalNumberOfItems = sumByKey(data, queryData.valueKey);
+    return {
+        value: totalNumberOfItems ?? 0,
+        previousValue: queryData.previousValueKey ? (firstResult[queryData.previousValueKey] ?? 0) : undefined,
+        change: firstResult[queryData.changeKey] ?? 0,
+        title: queryData.title,
+        format: queryData.format ?? '',
+        isEmpty,
+        loading,
+        error,
+        currency: firstResult?.currency,
+        refresh: () => refresh().catch(() => { }),
+    };
+};
+const useMetricState = (url, queryData) => {
+    const { data, error, isEmpty, loading, refresh } = useMetricData(url, queryData.query);
+    const valueMetricData = data;
+    return {
+        value: (valueMetricData && valueMetricData[queryData.valueKey]) ?? 0,
+        previousValue: queryData.previousValueKey
+            ? (valueMetricData?.[queryData.previousValueKey] ?? 0)
+            : undefined,
+        change: (valueMetricData && valueMetricData[queryData.changeKey]) ?? 0,
+        title: queryData.title,
+        format: queryData.format ?? '',
+        isEmpty,
+        loading,
+        error,
+        currency: (typeof valueMetricData === 'object' && valueMetricData?.additionalData?.currency) ?? undefined,
+        refresh: () => refresh().catch(() => { }),
+    };
+};
+const usePieChartOptions = (data, config) => {
+    const tooltipFormatterFn = useMemo(() => {
+        const currency = data?.[0]?.currency;
+        return createTooltipFormatter(config.tooltipValueFormat, config.tooltipTitle ?? 'Value', config.tooltipUnit ?? '', config.tooltipFields.map((field) => ({
+            toolTipkey: field.toolTipkey ?? '',
+            valueKey: field.valueKey ?? '',
+            nameKey: field.nameKey ?? '',
+            label: field.label ?? '',
+            suffix: field.suffix ?? '',
+            format: field.format ?? 'number',
+            formatter: field.formatter ?? ((value) => String(value)),
+        })), data, currency, config.currencyDisplaySymbol);
+    }, [config, data]);
+    return useMemo(() => {
+        const chartData = data.length > 0 ? getPieChartData(data, config.nameKey, config.valueKey, config.otherKey) : undefined;
+        return {
+            tooltip: {
+                trigger: 'item',
+                formatter: tooltipFormatterFn,
+                ...config.chartToolTip,
+            },
+            legend: {
+                orient: 'horizontal',
+                top: 0,
+                left: 'center',
+                padding: [0, 0, 20, 0],
+                type: 'plain',
+                textStyle: { fontSize: 12 },
+            },
+            color: config.colors,
+            series: [
+                {
+                    name: config.title,
+                    type: 'pie',
+                    radius: ['0%', '65%'],
+                    center: ['50%', '60%'],
+                    data: chartData?.seriesData ?? [],
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)',
+                        },
+                    },
+                },
+            ],
+            grid: { containLabel: true },
+            ...config.options,
+        };
+    }, [data, config, tooltipFormatterFn]);
+};
+const PieChart = ({ url = DashboardPaths.QUERY, metricDetailData, nameKey, valueKey, query, otherKey, options = {}, title, colors = defaultColors, tooltipValueFormat, tooltipTitle = 'Value', tooltipUnit = '%', tooltipAdditionalFields = [], currencyDisplaySymbol, chartToolTip, showDetailsModal = true, ...props }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const statisticsUrl = metricDetailData?.statisticsUrl ?? DashboardPaths.METRICS;
+    // Base chart data
+    const { data: chartMetricData = [], error, isEmpty, loading, refresh } = useMetricData(url, query);
+    // Full metric data for expanded view
+    const fullMetricState = useMetricData(url, { ...query, limit: undefined });
+    // Statistics data
+    const itemMetrics = useItemMetricState(url, metricDetailData.itemStatisticsQuery);
+    const valueMetrics = useMetricState(statisticsUrl, metricDetailData.valueMetricsQuery);
+    const averageMetrics = useMetricState(statisticsUrl, metricDetailData.averageMetricsQuery);
+    // Distribution data
+    const distributionState = useMetricData(url, metricDetailData.distributionMetricsQuery.query);
+    const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
+    const processedDistributionTooltipFields = useMemo(() => processTooltipFields(metricDetailData.distributionChartTooltip.tooltipAdditionalFields), [metricDetailData.distributionChartTooltip.tooltipAdditionalFields]);
+    const baseChartConfig = {
+        tooltipValueFormat,
+        tooltipTitle,
+        tooltipUnit,
+        tooltipFields: processedTooltipFields,
+        currencyDisplaySymbol,
+        colors,
+        nameKey,
+        valueKey,
+        otherKey,
+        chartToolTip: {
+            trigger: 'item',
+            ...chartToolTip,
+        },
+        options,
+    };
+    // Chart options for different views
+    const chartOptions = usePieChartOptions(chartMetricData, { ...baseChartConfig, title });
+    const fullChartOptions = usePieChartOptions(fullMetricState.data, baseChartConfig);
+    const topFiveChartOptions = usePieChartOptions(fullMetricState.data?.slice(0, 5) ?? [], {
+        ...baseChartConfig,
+        tooltipTitle: metricDetailData.topFiveChartTitle,
+    });
+    const bottomFiveChartOptions = usePieChartOptions((fullMetricState.data?.slice(-5) ?? []).reverse(), {
+        ...baseChartConfig,
+        tooltipTitle: metricDetailData.bottomFiveChartTitle,
+    });
+    const { topFiveItems, bottomFiveItems } = useMemo(() => {
+        if (!fullMetricState.data?.length) {
+            return {
+                topFiveItems: {},
+                bottomFiveItems: {},
+            };
+        }
+        return {
+            topFiveItems: topFiveChartOptions,
+            bottomFiveItems: bottomFiveChartOptions,
+        };
+    }, [fullMetricState.data, topFiveChartOptions, bottomFiveChartOptions]);
+    const distributionMetricData = useMemo(() => {
+        return createDistributionMetricOptions({
+            distributionChartTooltip: metricDetailData.distributionChartTooltip,
+            distributionData: distributionState.data ?? [],
+            processedTooltipFields: processedDistributionTooltipFields,
+            xAxisDataValueKey: metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+            seriesDataValueKey: metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        });
+    }, [
+        distributionState.data,
+        metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+        metricDetailData.distributionChartTooltip,
+        processedDistributionTooltipFields,
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: title, ...props, showDetailsModal: showDetailsModal, onOpenDetails: showDetailsModal && chartMetricData ? () => setIsModalOpen(true) : undefined, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { children: _jsx(ReactECharts, { option: chartOptions, style: { height: '350px' } }) }) }) }), showDetailsModal && (_jsx(ChartDetailsModal, { title: metricDetailData.title, isOpen: isModalOpen, onClose: () => setIsModalOpen(false), data: fullMetricState.data, columns: metricDetailData.dataGridColumns, error: fullMetricState.error, isEmpty: fullMetricState.isEmpty, loading: fullMetricState.loading, detailsTableTitle: metricDetailData.detailsTableTitle, refresh: fullMetricState.refresh, renderDetailsChart: fullMetricState.data?.length <= 40, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, top5PerformingItems: topFiveItems, bottom5NonPerformingItems: bottomFiveItems, chartData: fullChartOptions, valueKey: metricDetailData.valueKey, dataGridQuery: query, searchKey: metricDetailData.dataGridSearchKey, searchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, itemMetricsData: {
+                    ...itemMetrics,
+                    error: itemMetrics.error,
+                }, valueMetricsData: {
+                    ...valueMetrics,
+                    error: valueMetrics.error,
+                }, averageMetricsData: {
+                    ...averageMetrics,
+                    error: averageMetrics.error,
+                }, distributionMetricsData: {
+                    data: distributionMetricData,
+                    title: metricDetailData.distributionMetricsQuery.title,
+                    isEmpty: distributionState.isEmpty,
+                    loading: distributionState.loading,
+                    error: distributionState.error,
+                    refresh: () => distributionState.refresh().catch(() => { }),
+                    chartToolTip: metricDetailData.distributionMetricsQuery.chartToolTip,
+                } }))] }));
+};
+export default PieChart;

package/lib/dashboard-visuals/visuals/SelectedEventTile.d.ts

@@ -0,0 +1,14 @@
+import type { QueryProps } from 'src/shared/types';
+import React from 'react';
+interface SelectedEventTileProps {
+    title?: string;
+    format?: string;
+    url: string;
+    valueKey: string;
+    previousValueKey: string;
+    changeKey: string;
+    details?: any[];
+    query: QueryProps;
+}
+declare const SelectedEventTile: React.FC<SelectedEventTileProps>;
+export default SelectedEventTile;

package/lib/dashboard-visuals/visuals/SelectedEventTile.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useApi } from '../../api';
+import Card from '../components/CardWrapper';
+import ChartWrapper from '../components/ChartWrapper';
+const SelectedEventTile = ({ query, title, format, url, details, valueKey, previousValueKey, changeKey, ...props }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const [eventDetails, setEventDetails] = useState(null);
+    const apiClient = useApi();
+    const getEventDetails = async () => {
+        setLoading(true);
+        try {
+            const response = await apiClient.get(url);
+            setEventDetails(response.event);
+        }
+        catch (error) {
+            console.error('Error fetching event details:', error);
+            // Convert Error to ApiErrorResponse format
+            setError(error instanceof Error
+                ? { message: error.message, status: 500 }
+                : { message: 'Failed to fetch event details', status: 500 });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        getEventDetails();
+    }, [url]);
+    // Safe default values with optional chaining
+    const { name = 'Event information unavailable', venueName = 'Venue unavailable', cityName = 'City unavailable', countryName = 'Country unavailable', } = eventDetails ?? {};
+    return (_jsx(Card, { title: title, className: "bg-core-add/5", children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: !eventDetails, onRetry: getEventDetails, children: _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "pb-3", children: [_jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-1", children: name }), _jsxs("div", { className: "flex items-center text-gray-600 text-sm", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })] }), _jsxs("span", { children: [venueName, ", ", cityName, ", ", countryName] })] })] }) }) }) }));
+};
+export default SelectedEventTile;

package/lib/dashboard-visuals/visuals/SpeedometerChart.d.ts

@@ -0,0 +1,53 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+interface SpeedometerProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    url?: string;
+    query: QueryProps;
+    colors?: {
+        low: string;
+        medium: string;
+        high: string;
+    };
+    thresholds?: {
+        low: number;
+        medium: number;
+    };
+    chartDetails?: {
+        columns?: any[];
+        data?: any[];
+    };
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    currencyDisplaySymbol?: string;
+    metricDetailData: {
+        statisticsUrl?: string;
+        title: string;
+        topFiveChartTitle?: string;
+        bottomFiveChartTitle?: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        yAxisDataNameKey: string;
+        xAxisNameKey: string;
+        xAxisLabel: string;
+        yAxisLabel: string;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        chartToolTip?: ChartToolTipProps;
+        detailsTableTitle?: string;
+        distributionChartTooltip: DistributionChartTooltip;
+    };
+}
+declare const SpeedometerChart: <TData extends {
+    id: string | number;
+}>({ title, url, query, colors, thresholds, chartDetails, tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, metricDetailData, ...props }: SpeedometerProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default SpeedometerChart;

package/lib/dashboard-visuals/visuals/SpeedometerChart.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useCallback } from 'react';
+import BaseChart from '../components/BaseChart';
+import { DashboardPaths } from '../utils';
+const defaultSpeedometerColors = {
+    low: '#4CAF50', // Green
+    medium: '#FFC107', // Amber
+    high: '#F44336', // Red
+};
+const SpeedometerChart = ({ title, url = DashboardPaths.QUERY, query, colors = defaultSpeedometerColors, thresholds = { low: 30, medium: 70 }, chartDetails, tooltipValueFormat, tooltipTitle = 'Value', tooltipUnit = '%', tooltipAdditionalFields = [], metricDetailData, ...props }) => {
+    const getSpeedometerOptions = useCallback((data) => {
+        if (!data || data.length === 0)
+            return {};
+        // Extract the first item for single gauge display
+        const firstItem = data[0];
+        const name = firstItem[metricDetailData.nameKey];
+        const value = firstItem[metricDetailData.valueKey];
+        return {
+            tooltip: {
+                formatter: '{a} <br/>{b} : {c}%',
+            },
+            series: [
+                {
+                    name: title,
+                    type: 'gauge',
+                    progress: {
+                        show: true,
+                        width: 18,
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            width: 18,
+                            color: [
+                                [thresholds.low / 100, colors.low],
+                                [thresholds.medium / 100, colors.medium],
+                                [1, colors.high],
+                            ],
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        length: 15,
+                        lineStyle: {
+                            width: 2,
+                            color: '#999',
+                        },
+                    },
+                    axisLabel: {
+                        distance: 25,
+                        color: '#999',
+                        fontSize: 12,
+                    },
+                    anchor: {
+                        show: true,
+                        showAbove: true,
+                        size: 25,
+                        itemStyle: {
+                            borderWidth: 10,
+                        },
+                    },
+                    title: {
+                        show: true,
+                        fontSize: 14,
+                    },
+                    detail: {
+                        valueAnimation: true,
+                        fontSize: 30,
+                        offsetCenter: [0, '70%'],
+                        formatter: '{value}%',
+                        color: 'inherit',
+                    },
+                    data: [
+                        {
+                            value: value,
+                            name: name,
+                        },
+                    ],
+                },
+            ],
+        };
+    }, [colors, metricDetailData.nameKey, thresholds.low, thresholds.medium, title, metricDetailData.valueKey]);
+    return (_jsx(BaseChart, { url: url, query: query, chartDetails: chartDetails, getChartOptions: getSpeedometerOptions, detailsModalTitle: title ?? 'Speedometer Chart', topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, ...metricDetailData, ...props, children: ({ metricData, tooltipFormatterFn }) => {
+            const chartOptions = getSpeedometerOptions(metricData);
+            // Add tooltip formatter from BaseChart
+            if (tooltipFormatterFn && chartOptions.tooltip) {
+                chartOptions.tooltip.formatter = tooltipFormatterFn;
+            }
+            return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '350px' } }) }));
+        } }));
+};
+export default SpeedometerChart;

package/lib/dashboard-visuals/visuals/Table.d.ts

@@ -0,0 +1,26 @@
+import type { QueryProps } from 'src/shared/types';
+export interface TableColumn<TData extends {
+    id: string | number;
+}> {
+    header: string;
+    accessor: keyof TData;
+    enableCopy?: boolean;
+}
+export interface DataTableProps<TData extends {
+    id: string | number;
+}> {
+    columns: TableColumn<TData>[];
+    title?: string;
+    searchKey: string;
+    url: string;
+    query: QueryProps;
+    searctInputPlaceHolder?: string;
+    expandable?: boolean;
+    renderExpandableComponent?: ({ row }: {
+        row: any;
+    }) => React.ReactNode;
+}
+declare const DataTable: <TData extends {
+    id: string | number;
+}>({ columns, title, searchKey, url, query, searctInputPlaceHolder, expandable, renderExpandableComponent, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default DataTable;