pagamio-frontend-commons-lib/lib/dashboard-visuals/components/BaseChart.js

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

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// BaseChart.tsx
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, formatDonutChartData } from '../utils';
import { getChartBarOptions, getLargeDatasetChartOptions } from '../utils/chartOptions';
import { createTooltipFormatter, processTooltipFields } from '../utils/tooltipUtils';
import { sortMetricData } from '../visuals/HorizontalBarChart';
const BaseChart = ({ title, url = DashboardPaths.QUERY, query, chartDetails, children, detailsModalTitle, statisticsUrl = DashboardPaths.METRICS, itemStatisticsQuery, valueMetricsQuery, averageMetricsQuery, distributionMetricsQuery, yAxisDataNameKey, xAxisNameKey, xAxisLabel, yAxisLabel, nameKey, valueKey, dataGridSearchKey, dataGridColumns, dataSearchInputPlaceHolder, chartToolTip, detailsTableTitle, getChartOptions, tooltipValueFormat = 'value', tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], topFivePerformingChartTitle, bottomFivePerformingChartTitle, distributionChartTooltip, showDetailsModal = true, currencyDisplaySymbol, ...props }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
    // Process tooltip fields
    const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
    const processedDistributionTooltipFields = useMemo(() => processTooltipFields(distributionChartTooltip.tooltipAdditionalFields), [distributionChartTooltip.tooltipAdditionalFields]);
    // Create tooltip formatter function
    const tooltipFormatterFn = useMemo(() => {
        // Use the currency from metricData, or fallback to a default
        const currency = metricData?.[0]?.currency || 'ZAR';
        return createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, metricData, currency, currencyDisplaySymbol);
    }, [tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, metricData, currencyDisplaySymbol]);
    // Get full data for detailed view
    const { data: fullMetricData = [], error: fullDataError, isEmpty: isfullMetricDataEmpty, loading: isLoadingFullMetricData, refresh: refreshFullMetricData, } = useChartData(url, {
        ...query,
        limit: undefined,
    });
    // Get item Statistics Query data for detailed view
    const { data: itemStatData, error: itemStatDataError, isEmpty: isitemStatMetricDataEmpty, loading: isLoadingItemStatlMetricData, refresh: refreshItemStatMetricData, } = useChartData(statisticsUrl, {
        ...itemStatisticsQuery.query,
    });
    // Get value Metrics Query data for detailed view
    const { data: valueStatData, error: valueStatDataError, isEmpty: isValueStatMetricDataEmpty, loading: isLoadingValueStatlMetricData, refresh: refreshValueStatMetricData, } = useChartData(statisticsUrl, {
        ...valueMetricsQuery.query,
    });
    // Get average Metrics Query data for detailed view
    const { data: averageStatData, error: averageStatDataError, isEmpty: isAverageStatMetricDataEmpty, loading: isLoadingAverageStatlMetricData, refresh: refreshAverageStatMetricData, } = useChartData(statisticsUrl, {
        ...averageMetricsQuery.query,
    });
    // Get distribution Metrics Query data for detailed view
    const { data: distributionStatData, error: distributionStatDataError, isEmpty: isDistributionStatMetricDataEmpty, loading: isLoadingDistributionStatlMetricData, refresh: refreshDistributionStatMetricData, } = useChartData(url, {
        ...distributionMetricsQuery.query,
    });
    const distributionMetricData = useMemo(() => {
        const formattedData = formatDonutChartData(distributionStatData ?? [], distributionMetricsQuery.xAxisDataValueKey, distributionMetricsQuery.seriesDataValueKey);
        const { tooltipValueFormat, tooltipTitle, tooltipUnit, treeMapSegmentLabel } = distributionChartTooltip;
        const labelFormatter = (params) => {
            const formattedValue = params.value.toLocaleString();
            return `${params.name}\n${treeMapSegmentLabel}: ${formattedValue}`;
        };
        const tooltipFormatter = createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedDistributionTooltipFields, distributionStatData ?? [], distributionStatData?.[0]?.currency, currencyDisplaySymbol);
        const distributionMetricOptions = getLargeDatasetChartOptions({
            data: formattedData,
            labelFormatter,
            tooltipFormatter,
        });
        return distributionMetricOptions;
    }, [
        distributionStatData,
        distributionMetricsQuery.seriesDataValueKey,
        distributionMetricsQuery.xAxisDataValueKey,
        currencyDisplaySymbol,
    ]);
    const fullChartOptions = useMemo(() => {
        const chartOptions = getChartOptions(fullMetricData);
        return chartOptions;
    }, [fullMetricData]);
    const createChartOptions = useCallback((data, title, colorScheme, metricDetailData, tooltipConfig) => {
        const currency = data?.[0]?.currency;
        const formatterFn = tooltipConfig
            ? createTooltipFormatter(tooltipValueFormat, tooltipConfig.tooltipTitle ?? tooltipTitle, tooltipConfig.tooltipUnit ?? tooltipUnit, tooltipConfig.tooltipFields ?? processedTooltipFields, tooltipConfig.data ?? data, currency, currencyDisplaySymbol)
            : tooltipFormatterFn;
        return getChartBarOptions({
            title,
            colorScheme,
            yAxisDataNameKey: metricDetailData.yAxisDataNameKey,
            xAxisNameKey: metricDetailData.xAxisNameKey,
            xAxisLabel: metricDetailData.xAxisLabel,
            yAxisLabel: metricDetailData.yAxisLabel,
            chartToolTip: {
                ...metricDetailData.chartToolTip,
                formatter: formatterFn,
            },
            data,
        });
    }, [tooltipFormatterFn, tooltipTitle, tooltipUnit, processedTooltipFields]);
    const createChartOptionsWithData = useCallback((data, tooltipConfig) => createChartOptions(data, title, ['#60A5FA', '#93C5FD'], {
        yAxisDataNameKey,
        xAxisNameKey,
        xAxisLabel,
        yAxisLabel,
        chartToolTip,
    }, tooltipConfig), [title, yAxisDataNameKey, xAxisNameKey, xAxisLabel, yAxisLabel, chartToolTip, createChartOptions]);
    const sortedFullMetricData = useMemo(() => sortMetricData(fullMetricData, valueKey, 'desc'), [fullMetricData, valueKey]);
    const { topFiveItems, bottomFiveItems } = useMemo(() => {
        if (!sortedFullMetricData || sortedFullMetricData.length === 0) {
            return {
                topFiveItems: [],
                bottomFiveItems: [],
            };
        }
        const topFiveMetric = sortedFullMetricData.slice(0, 5);
        const bottomFiveMetric = sortedFullMetricData.slice(-5).reverse();
        return {
            topFiveItems: createChartOptionsWithData(topFiveMetric, {
                tooltipTitle: topFivePerformingChartTitle,
                tooltipUnit,
                tooltipFields: processedTooltipFields,
                data: topFiveMetric,
            }),
            bottomFiveItems: createChartOptionsWithData(bottomFiveMetric, {
                tooltipTitle: bottomFivePerformingChartTitle,
                tooltipUnit,
                tooltipFields: processedTooltipFields,
                data: bottomFiveMetric,
            }),
        };
    }, [
        sortedFullMetricData,
        createChartOptionsWithData,
        tooltipUnit,
        processedTooltipFields,
        topFivePerformingChartTitle,
        bottomFivePerformingChartTitle,
    ]);
    const itemMetricsData = {
        value: itemStatData?.[itemStatisticsQuery.valueKey] ?? 0,
        previousValue: itemStatisticsQuery.previousValueKey
            ? (itemStatData?.[itemStatisticsQuery.previousValueKey] ?? 0)
            : undefined,
        change: itemStatData?.[itemStatisticsQuery.changeKey] ?? 0,
        currency: itemStatData?.additionalData?.currency,
    };
    const valueMetricsData = {
        value: valueStatData?.[valueMetricsQuery.valueKey] ?? 0,
        previousValue: valueMetricsQuery.previousValueKey
            ? (valueStatData?.[valueMetricsQuery.previousValueKey] ?? 0)
            : undefined,
        change: valueStatData?.[valueMetricsQuery.changeKey] ?? 0,
        currency: valueStatData?.additionalData?.currency,
    };
    const averageMetricsData = {
        value: averageStatData?.[averageMetricsQuery.valueKey] ?? 0,
        previousValue: averageMetricsQuery.previousValueKey
            ? (averageStatData?.[averageMetricsQuery.previousValueKey] ?? 0)
            : undefined,
        change: averageStatData?.[averageMetricsQuery.changeKey] ?? 0,
        currency: averageStatData?.additionalData?.currency,
    };
    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: title, ...props, onOpenDetails: metricData.length > 0 && showDetailsModal ? () => setIsModalOpen(true) : undefined, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: children({
                        loading,
                        error,
                        isEmpty,
                        refresh,
                        metricData,
                        tooltipFormatterFn,
                        processedTooltipFields,
                    }) }) }), showDetailsModal && (_jsx(ChartDetailsModal, { title: detailsModalTitle, isOpen: isModalOpen, onClose: () => setIsModalOpen(false), data: fullMetricData, columns: dataGridColumns, error: fullDataError, isEmpty: isfullMetricDataEmpty, loading: isLoadingFullMetricData, detailsTableTitle: detailsTableTitle, refresh: refreshFullMetricData, renderDetailsChart: fullMetricData.length <= 40, chartData: fullChartOptions, topFivePerformingChartTitle: topFivePerformingChartTitle, bottomFivePerformingChartTitle: bottomFivePerformingChartTitle, top5PerformingItems: topFiveItems, bottom5NonPerformingItems: bottomFiveItems, valueKey: valueKey, dataGridQuery: query, searchKey: dataGridSearchKey, searchInputPlaceHolder: dataSearchInputPlaceHolder, itemMetricsData: {
                    ...itemMetricsData,
                    title: itemStatisticsQuery.title,
                    format: itemStatisticsQuery.format,
                    isEmpty: isitemStatMetricDataEmpty,
                    loading: isLoadingItemStatlMetricData,
                    error: itemStatDataError,
                    refresh: () => {
                        refreshItemStatMetricData().catch(() => { });
                    },
                }, valueMetricsData: {
                    ...valueMetricsData,
                    title: valueMetricsQuery.title,
                    format: valueMetricsQuery.format,
                    isEmpty: isValueStatMetricDataEmpty,
                    loading: isLoadingValueStatlMetricData,
                    error: valueStatDataError,
                    refresh: () => {
                        refreshValueStatMetricData().catch(() => { });
                    },
                }, averageMetricsData: {
                    ...averageMetricsData,
                    title: averageMetricsQuery.title,
                    format: averageMetricsQuery.format,
                    isEmpty: isAverageStatMetricDataEmpty,
                    loading: isLoadingAverageStatlMetricData,
                    error: averageStatDataError,
                    refresh: () => {
                        refreshAverageStatMetricData().catch(() => { });
                    },
                }, distributionMetricsData: {
                    data: distributionMetricData ?? [],
                    title: distributionMetricsQuery.title,
                    isEmpty: isDistributionStatMetricDataEmpty,
                    loading: isLoadingDistributionStatlMetricData,
                    error: distributionStatDataError,
                    refresh: () => {
                        refreshDistributionStatMetricData().catch(() => { });
                    },
                    chartToolTip: distributionMetricsQuery.chartToolTip,
                } }))] }));
};
export default BaseChart;