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

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

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;