pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
47 lines (46 loc) • 2.17 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ReactECharts from 'echarts-for-react';
import { useMemo } from 'react';
import { getBarChartData } from '../utils';
const ChartFormatter = ({ metricData, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey, chartType, chartOptions, chartHeight = '350px', notMerge = false, stacked, smooth = false, symbolConfig, }) => {
const formattedChartData = useMemo(() => {
if (metricData.length === 0)
return { xAxisValues: [], seriesData: [] };
const { xAxisValues, seriesData } = getBarChartData(metricData, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey);
let transformedSeries;
if (chartType === 'bar') {
transformedSeries = seriesData.map((series) => ({
...series,
type: 'bar',
stack: stacked ? 'stack' : undefined,
}));
}
else if (chartType === 'line') {
transformedSeries = seriesData.map((series) => ({
...series,
type: 'line',
smooth: smooth,
symbol: symbolConfig?.symbol || 'circle',
symbolSize: symbolConfig?.size || 8,
itemStyle: {
color: symbolConfig?.color,
borderColor: symbolConfig?.borderColor,
borderWidth: symbolConfig?.borderWidth || 2,
},
}));
}
return { xAxisValues, seriesData: transformedSeries };
}, [metricData, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey, chartType, stacked, smooth, symbolConfig]);
const mergedOptions = useMemo(() => {
return {
...chartOptions,
xAxis: {
...chartOptions.xAxis,
data: formattedChartData.xAxisValues,
},
series: formattedChartData.seriesData,
};
}, [chartOptions, formattedChartData]);
return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: mergedOptions, style: { height: chartHeight }, notMerge: notMerge }) }));
};
export default ChartFormatter;