@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

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

@@ -0,0 +1,50 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+interface DonutChartProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    url?: string;
+    query: QueryProps;
+    nameKey: string;
+    valueKey: string;
+    colors?: string[];
+    chartDetails?: {
+        columns?: any[];
+        data?: any[];
+    };
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    currencyDisplaySymbol?: string;
+    showLabels?: boolean;
+    showTooltipMarker?: boolean;
+    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;
+    };
+    showDetailsModal?: boolean;
+}
+declare const DonutChart: <TData extends {
+    id: string | number;
+}>({ title, url, query, nameKey, valueKey, colors, tooltipValueFormat, chartDetails, tooltipTitle, tooltipUnit, tooltipAdditionalFields, showLabels, showTooltipMarker, metricDetailData, showDetailsModal, ...props }: DonutChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default DonutChart;

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

@@ -0,0 +1,105 @@
+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, defaultColors } from '../utils';
+const DonutChart = ({ title, url = DashboardPaths.QUERY, query, nameKey, valueKey, colors = defaultColors, tooltipValueFormat, chartDetails, tooltipTitle, tooltipUnit = '', tooltipAdditionalFields = [], showLabels = true, showTooltipMarker = true, metricDetailData, showDetailsModal = true, ...props }) => {
+    const formatChartData = useCallback((data) => {
+        if (!data?.length)
+            return { legendData: [], seriesData: [] };
+        const legendData = data.map((item) => item[nameKey]);
+        const seriesData = data.map((item) => {
+            const dataPoint = {
+                name: item[nameKey],
+                value: item[valueKey],
+            };
+            return dataPoint;
+        });
+        return { legendData, seriesData };
+    }, [nameKey, valueKey]);
+    const createChartOptions = useCallback((chartData) => {
+        return {
+            tooltip: {
+                trigger: 'item',
+                extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);',
+                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                textStyle: {
+                    color: '#333',
+                },
+                borderWidth: 1,
+                borderColor: '#ddd',
+                appendToBody: true,
+                formatter: undefined,
+            },
+            legend: {
+                orient: 'horizontal',
+                bottom: 0,
+                left: 'center',
+                itemWidth: 15,
+                itemHeight: 10,
+                textStyle: {
+                    fontSize: 12,
+                },
+                icon: 'rect',
+                pageIconSize: 12,
+            },
+            color: colors,
+            series: [
+                {
+                    name: title,
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    center: ['50%', '45%'],
+                    avoidLabelOverlap: false,
+                    itemStyle: {
+                        borderColor: '#fff',
+                        borderWidth: 2,
+                    },
+                    label: {
+                        show: showLabels,
+                        position: 'outside',
+                        formatter: '{b}',
+                        fontSize: 12,
+                        lineHeight: 15,
+                        rich: {
+                            b: {
+                                fontSize: 12,
+                                lineHeight: 15,
+                            },
+                        },
+                    },
+                    labelLine: {
+                        show: showLabels,
+                        length: 15,
+                        length2: 10,
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: 14,
+                            fontWeight: 'bold',
+                        },
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)',
+                        },
+                    },
+                    data: chartData.seriesData,
+                },
+            ],
+        };
+    }, [colors, showLabels, title]);
+    return (_jsx(BaseChart, { title: title, detailsModalTitle: metricDetailData.title, url: url, query: query, chartDetails: chartDetails, itemStatisticsQuery: metricDetailData.itemStatisticsQuery, valueMetricsQuery: metricDetailData.valueMetricsQuery, averageMetricsQuery: metricDetailData.averageMetricsQuery, distributionMetricsQuery: metricDetailData.distributionMetricsQuery, yAxisDataNameKey: metricDetailData.yAxisDataNameKey, xAxisNameKey: metricDetailData.xAxisNameKey, xAxisLabel: metricDetailData.xAxisLabel, yAxisLabel: metricDetailData.yAxisLabel, nameKey: metricDetailData.nameKey, valueKey: metricDetailData.valueKey, distributionChartTooltip: metricDetailData.distributionChartTooltip, dataGridSearchKey: metricDetailData.dataGridSearchKey, dataGridColumns: metricDetailData.dataGridColumns, dataSearchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, chartToolTip: metricDetailData.chartToolTip, detailsTableTitle: metricDetailData.detailsTableTitle, showDetailsModal: showDetailsModal, getChartOptions: (data) => createChartOptions(formatChartData(data)), topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, ...props, children: ({ metricData, tooltipFormatterFn }) => {
+            const chartData = formatChartData(metricData);
+            const chartOptions = createChartOptions(chartData);
+            if (tooltipFormatterFn) {
+                chartOptions.tooltip = {
+                    ...chartOptions.tooltip,
+                    formatter: tooltipFormatterFn,
+                };
+            }
+            return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '350px' } }) }));
+        } }));
+};
+export default DonutChart;

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

@@ -0,0 +1,32 @@
+import type { QueryProps } from 'src/shared/types';
+import type { TooltipField } from '../types';
+import type { MetricDetailData } from '../types/metricDetailData';
+interface GaugeChartProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    url?: string;
+    query: QueryProps;
+    nameKey: string;
+    valueKey: string;
+    colors?: {
+        low: string;
+        medium: string;
+        high: string;
+    };
+    chartDetails?: {
+        columns?: any[];
+        data?: any[];
+    };
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    currencyDisplaySymbol?: string;
+    metricDetailData: MetricDetailData<TData>;
+    showDetailsModal?: boolean;
+}
+declare const GaugeChart: <TData extends {
+    id: string | number;
+}>({ title, url, query, nameKey, valueKey, colors, chartDetails, tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, metricDetailData, showDetailsModal, ...props }: GaugeChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default GaugeChart;

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

@@ -0,0 +1,53 @@
+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 defaultGaugeColors = {
+    low: '#F44336', // Red
+    medium: '#FFC107', // Amber
+    high: '#4CAF50', // Green
+};
+const GaugeChart = ({ title, url = DashboardPaths.QUERY, query, nameKey, valueKey, colors = defaultGaugeColors, chartDetails, tooltipValueFormat, tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], metricDetailData, showDetailsModal = true, ...props }) => {
+    const getGaugeOptions = useCallback((data, tooltipFormatter) => {
+        if (!data || data.length === 0)
+            return {};
+        // Extract the first item for single gauge display
+        const firstItem = data[0];
+        const name = firstItem[nameKey];
+        const value = firstItem[valueKey];
+        return {
+            tooltip: {
+                formatter: tooltipFormatter || `{a} <br/>{b} : {c}%`,
+            },
+            series: [
+                {
+                    name: title,
+                    type: 'gauge',
+                    detail: { formatter: '{value}%' },
+                    data: [{ value, name }],
+                    axisLine: {
+                        lineStyle: {
+                            width: 30,
+                            color: [
+                                [0.33, colors.low],
+                                [0.66, colors.medium],
+                                [1, colors.high],
+                            ],
+                        },
+                    },
+                    pointer: {
+                        itemStyle: {
+                            color: 'auto',
+                        },
+                    },
+                },
+            ],
+        };
+    }, [colors, nameKey, title, valueKey]);
+    return (_jsx(BaseChart, { title: title, detailsModalTitle: metricDetailData.title, url: url, query: query, chartDetails: chartDetails, itemStatisticsQuery: metricDetailData.itemStatisticsQuery, valueMetricsQuery: metricDetailData.valueMetricsQuery, averageMetricsQuery: metricDetailData.averageMetricsQuery, distributionMetricsQuery: metricDetailData.distributionMetricsQuery, yAxisDataNameKey: metricDetailData.yAxisDataNameKey, xAxisNameKey: metricDetailData.xAxisNameKey, xAxisLabel: metricDetailData.xAxisLabel, yAxisLabel: metricDetailData.yAxisLabel, nameKey: metricDetailData.nameKey, valueKey: metricDetailData.valueKey, dataGridSearchKey: metricDetailData.dataGridSearchKey, dataGridColumns: metricDetailData.dataGridColumns, dataSearchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, chartToolTip: metricDetailData.chartToolTip, detailsTableTitle: metricDetailData.detailsTableTitle, getChartOptions: getGaugeOptions, distributionChartTooltip: metricDetailData.distributionChartTooltip, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, showDetailsModal: showDetailsModal, ...props, children: ({ metricData, tooltipFormatterFn }) => {
+            const gaugeOptions = getGaugeOptions(metricData, tooltipFormatterFn);
+            return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: gaugeOptions, style: { height: '350px' } }) }));
+        } }));
+};
+export default GaugeChart;

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

@@ -0,0 +1,47 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+interface GroupedBarChartProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    className?: string;
+    url?: string;
+    query: QueryProps;
+    xAxisLabel: string;
+    xAxisValueKey: string;
+    rightYAxisValueKey: string;
+    leftYAxisValueKey: string;
+    chartToolTip: ChartToolTipProps;
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    yAxisLabelFormatter?: (value: number) => string;
+    metricDetailData: {
+        title: string;
+        statisticsUrl?: 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;
+        topFiveChartTitle?: string;
+        bottomFiveChartTitle?: string;
+        distributionChartTooltip: DistributionChartTooltip;
+    };
+    showDetailsModal?: boolean;
+}
+declare const GroupedBarChart: <TData extends {
+    id: string | number;
+}>({ title, className, url, query, xAxisLabel, xAxisValueKey, leftYAxisValueKey, rightYAxisValueKey, tooltipValueFormat, chartToolTip, tooltipTitle, tooltipUnit, tooltipAdditionalFields, yAxisLabelFormatter, metricDetailData, showDetailsModal, ...props }: GroupedBarChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default GroupedBarChart;

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

@@ -0,0 +1,131 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useCallback, 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, createTooltipFormatter, processTooltipFields } from '../utils';
+import { createDistributionMetricOptions, getGroupedChartOptions } from '../utils/chartOptions';
+const useMetricData = (url, queryConfig) => {
+    const { data, error, isEmpty, loading, refresh } = useChartData(url, {
+        ...queryConfig.query,
+    });
+    return {
+        metricData: {
+            value: data?.[queryConfig.valueKey] ?? 0,
+            previousValue: queryConfig.previousValueKey ? (data?.[queryConfig.previousValueKey] ?? 0) : undefined,
+            change: data?.[queryConfig.changeKey] ?? 0,
+            title: queryConfig.title,
+            format: queryConfig.format,
+            isEmpty,
+            loading,
+            error,
+            refresh: () => refresh().catch(() => { }),
+            currency: data?.additionalData?.currency,
+        },
+        data,
+        error,
+        isEmpty,
+        loading,
+        refresh,
+    };
+};
+const GroupedBarChart = ({ title, className = '', url = DashboardPaths.QUERY, query, xAxisLabel, xAxisValueKey, leftYAxisValueKey, rightYAxisValueKey, tooltipValueFormat, chartToolTip, tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], yAxisLabelFormatter, metricDetailData, showDetailsModal = true, ...props }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    const statisticsUrl = metricDetailData?.statisticsUrl ?? DashboardPaths.METRICS;
+    const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
+    const processedDistributionTooltipFields = useMemo(() => processTooltipFields(metricDetailData.distributionChartTooltip.tooltipAdditionalFields), [metricDetailData.distributionChartTooltip.tooltipAdditionalFields]);
+    const tooltipFormatterFn = useMemo(() => createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, metricData, metricData[0]?.currency), [tooltipTitle, tooltipUnit, processedTooltipFields, metricData, tooltipValueFormat]);
+    const createChartOptions = useCallback((data, title, metricDetailData, tooltipConfig) => {
+        const tooltipFields = tooltipConfig?.tooltipFields
+            ? processTooltipFields(tooltipConfig.tooltipFields)
+            : processTooltipFields(processedTooltipFields);
+        const formatterFn = tooltipConfig
+            ? createTooltipFormatter(tooltipValueFormat, tooltipConfig.tooltipTitle ?? tooltipTitle, tooltipConfig.tooltipUnit ?? tooltipUnit, tooltipFields, tooltipConfig.data ?? data, tooltipConfig.data?.[0]?.currency ?? data[0]?.currency)
+            : tooltipFormatterFn;
+        return getGroupedChartOptions({
+            leftYAxisValueKey: leftYAxisValueKey,
+            rightYAxisValueKey: rightYAxisValueKey,
+            xAxisValueKey: xAxisValueKey,
+            xAxisLabel: xAxisLabel,
+            chartToolTip: {
+                ...chartToolTip,
+                formatter: formatterFn,
+            },
+            data,
+            yAxisLabelFormatter,
+        });
+    }, [
+        tooltipFormatterFn,
+        tooltipTitle,
+        tooltipUnit,
+        processedTooltipFields,
+        chartToolTip,
+        tooltipValueFormat,
+        yAxisLabelFormatter,
+    ]);
+    const createChartOptionsWithData = useCallback((data, tooltipConfig) => createChartOptions(data, title, metricDetailData, tooltipConfig), [title, metricDetailData, createChartOptions]);
+    const chartOptions = useMemo(() => createChartOptionsWithData(metricData), [metricData, createChartOptionsWithData]);
+    const { metricData: itemMetricsData } = useMetricData(statisticsUrl, metricDetailData.itemStatisticsQuery);
+    const { metricData: valueMetricsData } = useMetricData(statisticsUrl, metricDetailData.valueMetricsQuery);
+    const { metricData: averageMetricsData } = useMetricData(statisticsUrl, metricDetailData.averageMetricsQuery);
+    const { data: fullMetricData = [], error: fullDataError, isEmpty: isfullMetricDataEmpty, loading: isLoadingFullMetricData, refresh: refreshFullMetricData, } = useChartData(url, {
+        ...query,
+        limit: undefined,
+    });
+    const fullChartOptions = useMemo(() => createChartOptionsWithData(fullMetricData), [fullMetricData, createChartOptionsWithData]);
+    const { data: distributionStatData, error: distributionStatDataError, isEmpty: isDistributionStatMetricDataEmpty, loading: isLoadingDistributionStatlMetricData, refresh: refreshDistributionStatMetricData, } = useChartData(url, {
+        ...metricDetailData.distributionMetricsQuery.query,
+    });
+    const distributionMetricData = useMemo(() => {
+        return createDistributionMetricOptions({
+            distributionChartTooltip: metricDetailData.distributionChartTooltip,
+            distributionData: distributionStatData ?? [],
+            processedTooltipFields: processedDistributionTooltipFields,
+            xAxisDataValueKey: metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+            seriesDataValueKey: metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        });
+    }, [
+        distributionStatData,
+        metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+        metricDetailData.distributionChartTooltip,
+        processedDistributionTooltipFields,
+    ]);
+    const { topFiveItems, bottomFiveItems } = useMemo(() => {
+        if (!fullMetricData || fullMetricData.length === 0) {
+            return {
+                topFiveItems: [],
+                bottomFiveItems: [],
+            };
+        }
+        const topFiveMetric = fullMetricData.slice(0, 5);
+        const bottomFiveMetric = fullMetricData.slice(-5).reverse();
+        return {
+            topFiveItems: createChartOptionsWithData(topFiveMetric, {
+                tooltipTitle: metricDetailData.topFiveChartTitle,
+                tooltipUnit,
+                tooltipFields: processedTooltipFields,
+                data: topFiveMetric,
+            }),
+            bottomFiveItems: createChartOptionsWithData(bottomFiveMetric, {
+                tooltipTitle: metricDetailData.bottomFiveChartTitle,
+                tooltipUnit,
+                tooltipFields: processedTooltipFields,
+                data: bottomFiveMetric,
+            }),
+        };
+    }, [fullMetricData, createChartOptionsWithData, tooltipUnit, processedTooltipFields, metricDetailData]);
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: title, ...props, onOpenDetails: metricData ? () => setIsModalOpen(true) : undefined, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '100%', minHeight: '340px' }, className: "h-[340px] md:h-[400px]", opts: { renderer: 'canvas' }, notMerge: true }) }) }) }), showDetailsModal && (_jsx(ChartDetailsModal, { title: metricDetailData.title, isOpen: isModalOpen, onClose: () => setIsModalOpen(false), data: fullMetricData, columns: metricDetailData.dataGridColumns, error: fullDataError, isEmpty: isfullMetricDataEmpty, loading: isLoadingFullMetricData, detailsTableTitle: metricDetailData.detailsTableTitle, refresh: refreshFullMetricData, renderDetailsChart: fullMetricData.length <= 40, top5PerformingItems: topFiveItems, bottom5NonPerformingItems: bottomFiveItems, chartData: fullChartOptions, valueKey: metricDetailData.valueKey, dataGridQuery: query, searchKey: metricDetailData.dataGridSearchKey, searchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, itemMetricsData: itemMetricsData, valueMetricsData: valueMetricsData, averageMetricsData: averageMetricsData, distributionMetricsData: {
+                    data: distributionMetricData ?? [],
+                    title: metricDetailData.distributionMetricsQuery.title,
+                    isEmpty: isDistributionStatMetricDataEmpty,
+                    loading: isLoadingDistributionStatlMetricData,
+                    error: distributionStatDataError,
+                    refresh: () => refreshDistributionStatMetricData().catch(() => { }),
+                    chartToolTip: metricDetailData.distributionMetricsQuery.chartToolTip,
+                } }))] }));
+};
+export default GroupedBarChart;

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

@@ -0,0 +1,79 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionQueryProps, StatisticsQueryProps, TableColumn } from '../types';
+interface HeatmapChartProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    url?: string;
+    query: QueryProps;
+    xAxisKey: string;
+    yAxisKey: string;
+    valueKey: string;
+    colorRange?: [string, string];
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    visualMapLabels?: [string, string];
+    visualMapRange?: [number, number];
+    visualMapConfig?: {
+        min?: number;
+        max?: number;
+        calculable?: boolean;
+        orient?: 'horizontal' | 'vertical';
+        left?: string | number;
+        right?: string | number;
+        top?: string | number;
+        bottom?: string | number;
+        show?: boolean;
+        precision?: number;
+        text?: [string, string];
+        textStyle?: {
+            color?: string;
+            fontSize?: number;
+        };
+        inRange?: {
+            color?: string[];
+            opacity?: number[];
+        };
+    };
+    grid?: {
+        top?: number | string;
+        bottom?: number | string;
+        left?: number | string;
+        right?: number | string;
+    };
+    showSplitArea?: boolean;
+    splitAreaConfig?: {
+        show?: boolean;
+        areaStyle?: {
+            color?: string[];
+            opacity?: number;
+        };
+    };
+    xAxisLabelFormatter?: (label: string) => string;
+    yAxisLabelFormatter?: (label: string) => string;
+    transformData?: (data: any[], xAxisKey: string, yAxisKey: string, valueKey: string) => {
+        xAxis: string[];
+        yAxis: string[];
+        data: [number, number, number][];
+    };
+    metricDetailData?: {
+        statisticsUrl?: string;
+        title: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        chartToolTip?: ChartToolTipProps;
+        detailsTableTitle?: string;
+    };
+    showDetailsModal?: boolean;
+}
+declare const HeatmapChart: <TData extends {
+    id: string | number;
+}>({ title, url, query, xAxisKey, yAxisKey, valueKey, colorRange, tooltipTitle, tooltipUnit, visualMapLabels, visualMapRange, visualMapConfig, grid, showSplitArea, splitAreaConfig, xAxisLabelFormatter, yAxisLabelFormatter, transformData, metricDetailData, showDetailsModal, }: HeatmapChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default HeatmapChart;

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

@@ -0,0 +1,146 @@
+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, getHeatmapData } from '../utils';
+const HeatmapChart = ({ title, url = DashboardPaths.QUERY, query, xAxisKey, yAxisKey, valueKey, colorRange = ['#d73027', '#1a9850'], tooltipTitle = 'Value', tooltipUnit = '', visualMapLabels = ['Low', 'High'], visualMapRange = [0, 100], visualMapConfig, grid = { top: 60, bottom: 120, left: 120, right: 60 }, showSplitArea = false, splitAreaConfig, xAxisLabelFormatter, yAxisLabelFormatter, transformData, metricDetailData, showDetailsModal = true, }) => {
+    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    const chartData = useMemo(() => {
+        if (!metricData.length)
+            return { xAxis: [], yAxis: [], data: [] };
+        // Use custom transformData function if provided, otherwise use generic getHeatmapData
+        const transformFunction = transformData || getHeatmapData;
+        const { xAxis, yAxis, data } = transformFunction(metricData, xAxisKey, yAxisKey, valueKey);
+        // Apply formatters to axis categories if provided
+        const formattedXAxis = xAxis.map((category) => {
+            if (xAxisLabelFormatter) {
+                return xAxisLabelFormatter(category);
+            }
+            return category;
+        });
+        const formattedYAxis = yAxis.map((category) => {
+            if (yAxisLabelFormatter) {
+                return yAxisLabelFormatter(category);
+            }
+            return category;
+        });
+        return {
+            xAxis: formattedXAxis,
+            yAxis: formattedYAxis,
+            data,
+        };
+    }, [metricData, xAxisKey, yAxisKey, valueKey, transformData, xAxisLabelFormatter, yAxisLabelFormatter]);
+    const dataRange = useMemo(() => {
+        if (chartData.data.length === 0)
+            return visualMapRange;
+        // Extract values from the heatmap data (third element in each array)
+        const values = chartData.data
+            .map((item) => item[2])
+            .filter((val) => typeof val === 'number');
+        if (values.length === 0)
+            return visualMapRange;
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        // Ensure we have a proper range for the visual map
+        return min === max ? [0, Math.max(max, 1)] : [min, max];
+    }, [chartData.data, visualMapRange]);
+    const chartOptions = useMemo(() => ({
+        tooltip: {
+            position: 'top',
+            formatter: ({ value }) => {
+                if (!value || value.length < 3)
+                    return '';
+                const xLabel = chartData.xAxis[value[0]];
+                const yLabel = chartData.yAxis[value[1]];
+                const dataValue = value[2];
+                return `
+          <div>
+            <strong>${tooltipTitle}</strong><br/>
+            ${yAxisKey}: ${yLabel}<br/>
+            ${xAxisKey}: ${xLabel}<br/>
+            ${valueKey}: ${dataValue.toLocaleString()} ${tooltipUnit}
+          </div>
+        `;
+            },
+        },
+        grid: { ...grid, containLabel: true },
+        xAxis: {
+            type: 'category',
+            data: chartData.xAxis,
+            splitArea: {
+                show: showSplitArea,
+                ...splitAreaConfig,
+            },
+            axisLabel: {
+                rotate: 0,
+                fontSize: 11,
+                interval: 0,
+                margin: 10,
+                overflow: 'none',
+                width: 80,
+                textStyle: {
+                    fontSize: 11,
+                },
+            },
+            axisTick: { alignWithLabel: true },
+        },
+        yAxis: {
+            type: 'category',
+            data: chartData.yAxis,
+            splitArea: {
+                show: showSplitArea,
+                ...splitAreaConfig,
+            },
+            axisLabel: {
+                fontSize: 11,
+                margin: 8,
+            },
+        },
+        visualMap: {
+            min: visualMapConfig?.min ?? dataRange[0],
+            max: visualMapConfig?.max ?? dataRange[1],
+            calculable: visualMapConfig?.calculable ?? true,
+            orient: visualMapConfig?.orient ?? 'horizontal',
+            left: visualMapConfig?.left ?? 'center',
+            right: visualMapConfig?.right,
+            top: visualMapConfig?.top,
+            bottom: visualMapConfig?.bottom ?? '5%',
+            show: visualMapConfig?.show ?? true,
+            precision: visualMapConfig?.precision ?? 0,
+            text: visualMapConfig?.text ?? [visualMapLabels[1], visualMapLabels[0]],
+            textStyle: visualMapConfig?.textStyle,
+            inRange: {
+                color: visualMapConfig?.inRange?.color ?? colorRange,
+                ...visualMapConfig?.inRange,
+            },
+        },
+        series: [
+            {
+                name: title,
+                type: 'heatmap',
+                data: chartData.data,
+                label: { show: true, fontSize: 10 },
+                emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)' } },
+            },
+        ],
+    }), [
+        chartData,
+        colorRange,
+        title,
+        tooltipTitle,
+        tooltipUnit,
+        xAxisKey,
+        yAxisKey,
+        valueKey,
+        dataRange,
+        grid,
+        visualMapConfig,
+        visualMapLabels,
+        showSplitArea,
+        splitAreaConfig,
+    ]);
+    return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx(ReactECharts, { option: chartOptions, style: { height: '400px', width: '100%', minWidth: '600px' } }) }) }));
+};
+export default HeatmapChart;