pagamio-frontend-commons-lib/lib/dashboard-visuals/visuals/BubbleChart.js

Pagamio library for Frontend reusable components like the form engine and table container

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;