@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
132 lines (131 loc) • 4.94 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ReactECharts from 'echarts-for-react';
import { useMemo } from 'react';
const LineGraph = ({ data, title, yAxisLabel, color = '#60A5FA', // Default blue color
className = '', loading = false, }) => {
const chartOptions = useMemo(() => {
if (!data?.length)
return {};
// Process dates to ensure consistent format
const processedData = data.map((point) => ({
value: [point.date instanceof Date ? point.date : new Date(point.date), point.value],
}));
return {
title: title
? {
text: title,
left: 'center',
top: 0,
textStyle: {
color: '#1F2937', // gray-800
fontWeight: 'normal',
},
}
: undefined,
tooltip: {
trigger: 'axis',
formatter: (params) => {
const dataPoint = params[0];
const date = new Date(dataPoint.value[0]);
return `
${date.toLocaleDateString('en-US', {
month: '2-digit',
day: '2-digit',
year: 'numeric',
})}<br/>
Value: ${dataPoint.value[1].toLocaleString()}
`;
},
},
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: title ? '60' : '30',
containLabel: true,
},
xAxis: {
type: 'time',
axisLabel: {
formatter: (value) => {
const date = new Date(value);
return date.toLocaleDateString('en-US', {
month: '2-digit',
day: '2-digit',
year: 'numeric',
});
},
hideOverlap: true,
},
splitLine: {
show: false,
},
},
yAxis: {
type: 'value',
name: yAxisLabel,
nameLocation: 'middle',
nameGap: 50,
axisLabel: {
formatter: (value) => value.toLocaleString(),
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
legend: {
show: true,
top: title ? '30' : '0',
left: 'center',
data: [yAxisLabel || 'Value'],
},
series: [
{
name: yAxisLabel || 'Value',
type: 'line',
data: processedData,
showSymbol: false,
smooth: true,
lineStyle: {
color: color,
width: 2,
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: color,
opacity: 0.2,
},
{
offset: 1,
color: color,
opacity: 0,
},
],
},
},
},
],
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
};
}, [data, title, yAxisLabel, color]);
if (loading) {
return (_jsx("div", { className: `animate-pulse ${className}`, children: _jsx("div", { className: "w-full aspect-[16/9] bg-gray-200 rounded-lg" }) }));
}
if (!data?.length) {
return (_jsx("div", { className: `flex items-center justify-center w-full aspect-[16/9] bg-gray-50 rounded-lg ${className}`, children: _jsx("p", { className: "text-gray-500", children: "No data available" }) }));
}
return (_jsx("div", { className: `relative ${className}`, children: _jsx(ReactECharts, { option: chartOptions, style: { height: '100%' }, className: "w-full aspect-[16/9] sm:aspect-[16/9]", opts: { renderer: 'canvas' }, notMerge: true }) }));
};
export default LineGraph;