@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/dashboard-visuals/utils/tooltipUtils.js

@@ -0,0 +1,180 @@
+import dayjs from 'dayjs';
+import { formatPrice } from '../../helpers';
+const createTooltipContainer = () => `
+  <div style="margin-top: 5px; border-top: 1px solid #eee; padding-top: 5px;">
+`;
+const isDateString = (value) => {
+    // Check if the string is a valid date format
+    return dayjs(value).isValid() && !Number.isNaN(Date.parse(value));
+};
+const formatDisplayName = (name) => {
+    if (isDateString(name)) {
+        return dayjs(name).format('MMM DD HH:mm');
+    }
+    return name;
+};
+const formatTooltipValue = (value, format, currency, displaySymbol) => {
+    if (format === 'number') {
+        return value.toLocaleString();
+    }
+    const numericValue = Number(value);
+    return currency ? formatPrice(numericValue, currency, 2, undefined, displaySymbol) : formatPrice(numericValue);
+};
+const createTooltipRow = (label, value, suffix = '', format = 'number', currency, displaySymbol) => {
+    return `
+  <div style="font-size: 12px; color: #666; margin-bottom: 3px;">
+    <span style="font-weight: 500;">${label}:</span> ${formatTooltipValue(value, format, currency, displaySymbol)}${suffix}
+  </div>
+`;
+};
+export const processTooltipFields = (tooltipAdditionalFields) => {
+    return tooltipAdditionalFields.map((field) => {
+        if (typeof field === 'string') {
+            return {
+                toolTipkey: field,
+                valueKey: field,
+                nameKey: field,
+                label: field.replace(/([A-Z])/g, ' $1').trim(),
+                suffix: '',
+                format: 'number',
+                formatter: (value, currency) => {
+                    if (typeof value === 'number') {
+                        return value.toLocaleString();
+                    }
+                    return String(value);
+                },
+            };
+        }
+        return {
+            toolTipkey: field.toolTipkey,
+            valueKey: field.valueKey,
+            nameKey: field.nameKey,
+            label: field.label ?? field.toolTipkey.replace(/([A-Z])/g, ' $1').trim(),
+            suffix: field.suffix ?? '',
+            format: field.format ?? 'number',
+            formatter: field.formatter ??
+                ((value, currency, displaySymbol) => {
+                    if (field.format === 'currency') {
+                        return formatPrice(Number(value), currency, 2, undefined, displaySymbol);
+                    }
+                    if (typeof value === 'number') {
+                        return value.toLocaleString();
+                    }
+                    return String(value);
+                }),
+        };
+    });
+};
+const processAdditionalFields = (data, processedTooltipFields, currency, displaySymbol) => {
+    let content = createTooltipContainer();
+    processedTooltipFields.forEach((field) => {
+        if (data[field.toolTipkey] !== undefined) {
+            const rawValue = data[field.toolTipkey];
+            if (field.formatter) {
+                // If there's a custom formatter
+                const formattedValue = field.formatter(rawValue, currency, displaySymbol);
+                content += `
+  <div style="font-size: 12px; color: #666; margin-bottom: 3px;">
+    <span style="font-weight: 500;">${field.label}:</span> ${formattedValue}${field.suffix}
+  </div>
+`;
+            }
+            else {
+                // No custom formatter, let createTooltipRow handle it
+                content += createTooltipRow(field.label, rawValue, field.suffix, field.format, currency, displaySymbol);
+            }
+        }
+    });
+    return content + '</div>';
+};
+const processLineGraphData = (date) => {
+    return createTooltipContainer() + createTooltipRow('Date', date) + '</div>';
+};
+const processMetricData = (processedTooltipFields, metricData, seriesValue, name, currency, displaySymbol) => {
+    let content = '';
+    processedTooltipFields.forEach((field) => {
+        const filteredValue = metricData.find((item) => item[field.valueKey] === seriesValue && item[field.nameKey] === name);
+        if (filteredValue) {
+            if (!content) {
+                content = createTooltipContainer();
+            }
+            const rawValue = filteredValue[field.toolTipkey];
+            if (field.formatter) {
+                // If there's a custom formatter,
+                const formattedValue = field.formatter(rawValue, currency, displaySymbol);
+                content += `
+  <div style="font-size: 12px; color: #666; margin-bottom: 3px;">
+    <span style="font-weight: 500;">${field.label}:</span> ${formattedValue}${field.suffix}
+  </div>
+`;
+            }
+            else {
+                // No custom formatter, let createTooltipRow handle it
+                content += createTooltipRow(field.label, rawValue, field.suffix, field.format, currency, displaySymbol);
+            }
+        }
+    });
+    return content ? content + '</div>' : '';
+};
+export const createTooltipFormatter = (format, tooltipTitle, tooltipUnit, processedTooltipFields, metricData, currency, displaySymbol) => {
+    return (params) => {
+        let seriesColor = '#5470c6';
+        let seriesValue = 0;
+        let isLineGraph = false;
+        let date = '';
+        const { name, value, color, data, seriesName } = Array.isArray(params) ? params[0] : params;
+        if (typeof color === 'string') {
+            seriesColor = color;
+        }
+        else if (color?.colorStops?.[0]?.color) {
+            seriesColor = color.colorStops[0].color;
+        }
+        if (Array.isArray(value)) {
+            seriesValue = value[1];
+            date = value[0];
+            isLineGraph = true;
+        }
+        else {
+            seriesValue = value;
+        }
+        // Format the main value
+        let mainValueFormatted;
+        if (format === 'number') {
+            mainValueFormatted = `${seriesValue.toLocaleString()} ${tooltipUnit}`;
+        }
+        else if (displaySymbol) {
+            // Use display symbol with explicit currency fallback
+            const currencyToUse = currency || 'ZAR';
+            mainValueFormatted = formatPrice(seriesValue, currencyToUse, 2, undefined, displaySymbol);
+        }
+        else if (currency) {
+            mainValueFormatted = formatPrice(seriesValue, currency);
+        }
+        else {
+            mainValueFormatted = formatPrice(seriesValue);
+        }
+        let tooltipContent = `
+      <div>
+        <div style="font-size: 14px; font-weight: 500; margin-bottom: 8px;"><b>${tooltipTitle}</b></div>
+        <div style="display: flex; align-items: center; margin-bottom: 5px;">
+          <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${seriesColor}; margin-right: 8px;"></span>
+          <span style="font-weight: 500;">${formatDisplayName(name === '' ? seriesName : name)}:</span>
+          <span style="margin-left: 5px;">${mainValueFormatted}</span>
+        </div>
+    `;
+        // Add additional fields if available
+        if (processedTooltipFields.length > 0) {
+            const hasAdditionalData = processedTooltipFields.some((field) => data[field.toolTipkey] !== undefined);
+            if (hasAdditionalData) {
+                tooltipContent += processAdditionalFields(data, processedTooltipFields, currency, displaySymbol);
+            }
+            else {
+                tooltipContent += isLineGraph
+                    ? processLineGraphData(date)
+                    : processMetricData(processedTooltipFields, metricData, seriesValue, name, currency, displaySymbol);
+            }
+        }
+        tooltipContent += '</div>';
+        return tooltipContent;
+    };
+};

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

@@ -0,0 +1,4 @@
+declare const componentRegistry: {
+    [key: string]: React.FC<any>;
+};
+export default componentRegistry;

package/lib/dashboard-visuals/visualRegistry.js

@@ -0,0 +1,41 @@
+import BarChart from './visuals/BarChart';
+import BarLineChart from './visuals/BarLineHybridChart';
+import BubbleChart from './visuals/BubbleChart';
+import DonutChart from './visuals/DonutChart';
+import GaugeChart from './visuals/GaugeChart';
+import GroupedBarChart from './visuals/GroupedBarChart';
+import HeatmapChart from './visuals/HeatmapChart';
+import HorizontalBarChart from './visuals/HorizontalBarChart';
+import ItemPerformanceCard from './visuals/ItemPerformanceCard';
+import LineChart from './visuals/LineChart';
+import LineGraph from './visuals/LineGraph';
+import MultiGaugeChart from './visuals/MultiGaugeChart';
+import PieChart from './visuals/PieChart';
+import SelectedEventTile from './visuals/SelectedEventTile';
+import SpeedometerChart from './visuals/SpeedometerChart';
+import Table from './visuals/Table';
+import Tile from './visuals/Tile';
+import TreeMap from './visuals/TreeMap';
+import WaterfallChart from './visuals/WaterfallChart';
+const componentRegistry = {
+    BarChart,
+    BarLineChart,
+    DonutChart,
+    GaugeChart,
+    HeatmapChart,
+    LineChart,
+    MultiGaugeChart,
+    PieChart,
+    SpeedometerChart,
+    Table,
+    Tile,
+    SelectedEventTile,
+    TreeMap,
+    ItemPerformanceCard,
+    HorizontalBarChart,
+    BubbleChart,
+    WaterfallChart,
+    LineGraph,
+    GroupedBarChart,
+};
+export default componentRegistry;

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

@@ -0,0 +1,58 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+interface BarChartProps<TData extends {
+    id: string | number;
+}> {
+    options?: any;
+    title?: string;
+    stacked?: boolean;
+    chartDetails?: {
+        columns?: any[];
+        data?: any[];
+    };
+    themeColor?: string;
+    colors?: string[];
+    url?: string;
+    query: QueryProps;
+    seriesDataNameKey: string;
+    seriesDataValueKey: string;
+    xAxisDataValueKey: string;
+    chartToolTip?: ChartToolTipProps;
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    currencyDisplaySymbol?: string;
+    metricDetailData: {
+        statisticsUrl?: string;
+        title: string;
+        topFiveChartTitle: string;
+        bottomFiveChartTitle: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        yAxisDataNameKey: string;
+        xAxisNameKey: string;
+        xAxisLabel: string;
+        yAxisLabel: string;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        chartToolTip?: ChartToolTipProps;
+        detailsTableTitle?: string;
+        distributionChartTooltip: DistributionChartTooltip;
+    };
+}
+declare const BarChart: <TData extends {
+    id: string | number;
+}>({ query, options, title, stacked, url, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey, chartToolTip, tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, currencyDisplaySymbol, metricDetailData, showDetailsModal, xAxisLabelRotate, xAxisLabelMaxLength, xAxisLabelFormatter, yAxisLabelFormatter, ...props }: BarChartProps<TData> & {
+    showDetailsModal?: boolean;
+    xAxisLabelRotate?: number;
+    xAxisLabelMaxLength?: number;
+    xAxisLabelFormatter?: (label: string) => string;
+    yAxisLabelFormatter?: (value: number) => string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default BarChart;

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import BaseChart from '../components/BaseChart';
+import ChartFormatter from '../components/ChartFormatter';
+import { DashboardPaths, defaultColors, getBarChartData } from '../utils';
+const BarChart = ({ query, options, title, stacked, url = DashboardPaths.QUERY, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey, chartToolTip, tooltipValueFormat, tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], currencyDisplaySymbol, metricDetailData, showDetailsModal = true, xAxisLabelRotate = 0, xAxisLabelMaxLength = 12, xAxisLabelFormatter, yAxisLabelFormatter, ...props }) => {
+    const createChartOptions = useCallback(() => {
+        return {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: { type: 'shadow' },
+                ...chartToolTip,
+            },
+            color: props.colors || defaultColors,
+            legend: {
+                type: 'scroll',
+                top: 0,
+            },
+            grid: {
+                top: 90,
+                bottom: 60,
+                left: 30,
+                right: 10,
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                axisLabel: {
+                    interval: 0,
+                    rotate: xAxisLabelRotate,
+                    formatter: (value) => {
+                        if (typeof value !== 'string')
+                            return value;
+                        if (xAxisLabelFormatter) {
+                            return xAxisLabelFormatter(value);
+                        }
+                        if (value.length > xAxisLabelMaxLength) {
+                            return value.slice(0, xAxisLabelMaxLength) + '…';
+                        }
+                        return value;
+                    },
+                },
+            },
+            yAxis: {
+                type: 'value',
+                splitLine: {
+                    lineStyle: {
+                        type: 'dashed',
+                    },
+                },
+                ...(yAxisLabelFormatter && {
+                    axisLabel: {
+                        formatter: yAxisLabelFormatter,
+                    },
+                }),
+            },
+            ...options,
+        };
+    }, [
+        options,
+        props.colors,
+        chartToolTip,
+        xAxisLabelRotate,
+        xAxisLabelMaxLength,
+        xAxisLabelFormatter,
+        yAxisLabelFormatter,
+    ]);
+    const barChartOptions = createChartOptions();
+    const getChartOptions = useCallback((data) => {
+        const { xAxisValues, seriesData } = getBarChartData(data, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey);
+        const chartSeries = seriesData.map((series) => ({
+            ...series,
+            type: 'bar',
+            stack: stacked ? 'stack' : undefined,
+        }));
+        const chartOptionsData = {
+            ...barChartOptions,
+            xAxis: {
+                ...barChartOptions.xAxis,
+                data: xAxisValues,
+            },
+            series: chartSeries,
+        };
+        return chartOptionsData;
+    }, [query, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey]);
+    return (_jsx(BaseChart, { title: title, detailsModalTitle: metricDetailData.title, url: url, query: query, chartDetails: props.chartDetails, itemStatisticsQuery: metricDetailData.itemStatisticsQuery, valueMetricsQuery: metricDetailData.valueMetricsQuery, averageMetricsQuery: metricDetailData.averageMetricsQuery, distributionMetricsQuery: metricDetailData.distributionMetricsQuery, nameKey: metricDetailData.nameKey, valueKey: metricDetailData.valueKey, yAxisDataNameKey: metricDetailData.yAxisDataNameKey, xAxisNameKey: metricDetailData.xAxisNameKey, yAxisLabel: metricDetailData.yAxisLabel, xAxisLabel: metricDetailData.xAxisLabel, dataGridSearchKey: metricDetailData.dataGridSearchKey, dataGridColumns: metricDetailData.dataGridColumns, dataSearchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, chartToolTip: metricDetailData.chartToolTip, detailsTableTitle: metricDetailData.detailsTableTitle, getChartOptions: getChartOptions, distributionChartTooltip: metricDetailData.distributionChartTooltip, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, showDetailsModal: showDetailsModal, currencyDisplaySymbol: currencyDisplaySymbol, ...props, children: ({ metricData, tooltipFormatterFn }) => {
+            const chartOptions = createChartOptions();
+            // Add tooltip formatter from BaseChart
+            if (tooltipFormatterFn) {
+                chartOptions.tooltip.formatter = tooltipFormatterFn;
+            }
+            return (_jsx(ChartFormatter, { metricData: metricData, xAxisDataValueKey: xAxisDataValueKey, seriesDataNameKey: seriesDataNameKey, seriesDataValueKey: seriesDataValueKey, chartType: "bar", chartOptions: chartOptions, stacked: stacked, notMerge: true }));
+        } }));
+};
+export default BarChart;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { ChartToolTipProps, TooltipField } from '../types';
+interface ChartData {
+    xAxisData: string[];
+    seriesData: Array<{
+        name: string;
+        type: 'bar' | 'line';
+        data: number[];
+        yAxisIndex?: number;
+        currency?: string;
+    }>;
+    yAxisNames?: {
+        bar: string;
+        line: string;
+    };
+}
+interface BarLineChartProps {
+    data: ChartData;
+    options?: Record<string, any>;
+    title?: string;
+    colors?: {
+        bars: string[];
+        line: string;
+    };
+    tooltipValueFormat?: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    chartToolTip?: ChartToolTipProps;
+    showDetailsModal?: boolean;
+}
+declare const BarLineChart: React.FC<BarLineChartProps>;
+export default BarLineChart;

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useMemo } from 'react';
+import Card from '../components/CardWrapper';
+import { defaultColors } from '../utils';
+import { createTooltipFormatter, processTooltipFields } from '../utils/tooltipUtils';
+const BarLineChart = ({ data, options, title, tooltipValueFormat = 'value', tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], showDetailsModal = true, ...props }) => {
+    const barColors = props.colors?.bars ?? defaultColors;
+    const lineColor = props.colors?.line ?? defaultColors[0];
+    let barSeriesIndex = 0;
+    const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
+    const tooltipFormatterFn = useMemo(() => {
+        const currency = data?.seriesData?.[0]?.currency;
+        return createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, [], currency);
+    }, [tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, data]);
+    const series = data.seriesData.map((series) => {
+        let color;
+        if (series.type === 'line') {
+            color = lineColor;
+        }
+        else if (series.type === 'bar') {
+            color = barColors[barSeriesIndex % barColors.length];
+            barSeriesIndex++;
+        }
+        return {
+            ...series,
+            yAxisIndex: series.type === 'line' ? 1 : 0,
+            color,
+        };
+    });
+    const chartOptions = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'cross' },
+            formatter: tooltipFormatterFn,
+        },
+        legend: {},
+        xAxis: [
+            {
+                type: 'category',
+                data: data.xAxisData,
+            },
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: data.yAxisNames?.bar ?? 'Bar Value',
+            },
+            {
+                type: 'value',
+                name: data.yAxisNames?.line ?? 'Line Value',
+                position: 'right',
+            },
+        ],
+        series,
+        ...options,
+    };
+    return (_jsx(Card, { title: title, ...props, children: _jsx("div", { className: "mt-[12px]", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '350px' } }) }) }));
+};
+export default BarLineChart;

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

@@ -0,0 +1,25 @@
+import type { QueryProps } from 'src/shared/types';
+import React from 'react';
+import type { ChartToolTipProps, TooltipField } from '../types';
+interface BubbleChartProps {
+    title?: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    colorPalette?: string[];
+    themeColor?: string;
+    className?: string;
+    url?: string;
+    query: QueryProps;
+    xAxisDataKey: string;
+    yAxisDataKey: string;
+    sizeDataKey: string;
+    categoryDataKey: string;
+    chartToolTip: ChartToolTipProps;
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    showDetailsModal?: boolean;
+}
+declare const BubbleChart: React.FC<BubbleChartProps>;
+export default BubbleChart;

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

@@ -0,0 +1,101 @@
+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, createTooltipFormatter, processTooltipFields } from '../utils';
+const BubbleChart = ({ title, xAxisLabel, yAxisLabel, colorPalette = ['#60A5FA', '#34D399', '#F87171', '#FBBF24', '#A78BFA'], className = '', query, url = DashboardPaths.QUERY, categoryDataKey, xAxisDataKey, yAxisDataKey, sizeDataKey, chartToolTip, tooltipValueFormat, tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], showDetailsModal = true, ...props }) => {
+    const { data: transformedData = [], error, isEmpty, loading, refresh, } = useChartData(url, query, (data) => {
+        return data.map((item) => ({
+            x: item[xAxisDataKey],
+            y: item[yAxisDataKey],
+            size: item[sizeDataKey],
+            category: item[categoryDataKey],
+        }));
+    });
+    // Get unique categories for legend
+    const categories = useMemo(() => Array.from(new Set(transformedData.map((item) => item.category))), [transformedData]);
+    const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
+    const tooltipFormatterFn = useMemo(() => {
+        const currency = Array.isArray(transformedData) && transformedData.length > 0
+            ? transformedData[0].currency
+            : undefined;
+        return createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, [], currency);
+    }, [tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, transformedData]);
+    const chartOptions = useMemo(() => {
+        if (!transformedData?.length)
+            return {};
+        // Calculate size scaling factor based on data
+        const maxSize = Math.max(...transformedData.map((item) => item.size));
+        const scaleFactor = 50 / maxSize; // Maximum bubble size of 50px
+        return {
+            tooltip: {
+                formatter: tooltipFormatterFn,
+                ...chartToolTip,
+            },
+            legend: {
+                type: 'scroll',
+                orient: 'horizontal',
+                top: title ? '30' : '0',
+                data: categories,
+            },
+            grid: {
+                left: '5%',
+                right: '5%',
+                bottom: '10%',
+                top: title ? '80' : '60',
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'value',
+                name: xAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 30,
+                axisLabel: {
+                    formatter: (value) => value.toLocaleString(),
+                },
+            },
+            yAxis: {
+                type: 'value',
+                name: yAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 45,
+                axisLabel: {
+                    formatter: (value) => value.toLocaleString(),
+                },
+            },
+            series: categories.map((category, index) => ({
+                name: category,
+                type: 'scatter',
+                data: transformedData
+                    .filter((item) => item.category === category)
+                    .map((item) => ({
+                    value: [item.x, item.y, item.size],
+                    itemStyle: {
+                        color: colorPalette[index % colorPalette.length],
+                    },
+                })),
+                symbolSize: (data) => {
+                    return data[2] * scaleFactor;
+                },
+                emphasis: {
+                    focus: 'series',
+                    label: {
+                        show: true,
+                        formatter: (params) => params.data.value[2],
+                        position: 'top',
+                    },
+                },
+            })),
+            aria: {
+                enabled: true,
+                decal: {
+                    show: false,
+                },
+            },
+        };
+    }, [transformedData, title, xAxisLabel, yAxisLabel, categories, colorPalette, tooltipFormatterFn]);
+    return (_jsx(Card, { title: title, ...props, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '350px' }, notMerge: true }) }) }) }));
+};
+export default BubbleChart;

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

@@ -0,0 +1,11 @@
+import type { ChartToolTipProps } from '../types';
+export interface DataPoint {
+    value: number;
+    name: string;
+}
+interface DistributionChartProps {
+    data: DataPoint[];
+    chartToolTip?: ChartToolTipProps;
+}
+declare const DistributionChart: ({ data, chartToolTip }: DistributionChartProps) => JSX.Element;
+export default DistributionChart;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+const DistributionChart = ({ data, chartToolTip }) => {
+    // Chart options
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+            ...chartToolTip,
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            data: data.map((item) => item.name),
+            axisTick: {
+                alignWithLabel: true,
+            },
+        },
+        yAxis: {
+            type: 'value',
+        },
+        series: [
+            {
+                name: 'Distribution',
+                type: 'scatter',
+                symbolSize: 10,
+                data: data.map((item) => item.value),
+                itemStyle: {
+                    color: '#3B82F6',
+                },
+                emphasis: {
+                    itemStyle: {
+                        opacity: 1,
+                    },
+                },
+            },
+        ],
+    };
+    return (_jsx("div", { className: "w-full overflow-x-auto overflow-y-auto rounded-lg shadow-lg bg-white p-4", children: _jsx("div", { className: "min-w-[600px] w-full h-[400px]", children: _jsx(ReactECharts, { option: option, style: { height: '100%', width: '100%' }, className: "w-full h-full" }) }) }));
+};
+export default DistributionChart;