pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
72 lines (71 loc) • 4.13 kB
JavaScript
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 = [], metricDetailData, ...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: 30,
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
...options,
};
}, [options, props.colors, chartToolTip]);
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, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, ...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;