@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
61 lines (60 loc) • 2.4 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ReactECharts from 'echarts-for-react';
import { useMemo } from 'react';
import Card from '../components/CardWrapper';
import { defaultColors } from '../utils';
import { createTooltipFormatter, processTooltipFields } from '../utils/tooltipUtils';
const BarLineChart = ({ data, options, title, tooltipValueFormat = 'value', tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], showDetailsModal = true, ...props }) => {
const barColors = props.colors?.bars ?? defaultColors;
const lineColor = props.colors?.line ?? defaultColors[0];
let barSeriesIndex = 0;
const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
const tooltipFormatterFn = useMemo(() => {
const currency = data?.seriesData?.[0]?.currency;
return createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, [], currency);
}, [tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, data]);
const series = data.seriesData.map((series) => {
let color;
if (series.type === 'line') {
color = lineColor;
}
else if (series.type === 'bar') {
color = barColors[barSeriesIndex % barColors.length];
barSeriesIndex++;
}
return {
...series,
yAxisIndex: series.type === 'line' ? 1 : 0,
color,
};
});
const chartOptions = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
formatter: tooltipFormatterFn,
},
legend: {},
xAxis: [
{
type: 'category',
data: data.xAxisData,
},
],
yAxis: [
{
type: 'value',
name: data.yAxisNames?.bar ?? 'Bar Value',
},
{
type: 'value',
name: data.yAxisNames?.line ?? 'Line Value',
position: 'right',
},
],
series,
...options,
};
return (_jsx(Card, { title: title, ...props, children: _jsx("div", { className: "mt-[12px]", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '350px' } }) }) }));
};
export default BarLineChart;