145 lines
2.9 KiB
JavaScript
145 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import ReactApexChart from "react-apexcharts";
|
|
import PropTypes from "prop-types";
|
|
|
|
const LineChart = ({
|
|
seriesData = [],
|
|
categories = [],
|
|
colors = ["#1E90FF", "#FF6347"],
|
|
loading = false,
|
|
lineChartCategoriesDates = [],
|
|
}) => {
|
|
const hasValidData =
|
|
Array.isArray(seriesData) &&
|
|
seriesData.length > 0 &&
|
|
Array.isArray(categories) &&
|
|
categories.length > 0;
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-center items-center h-[350px] text-gray-500">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mr-2" />
|
|
Loading chart...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!hasValidData) {
|
|
return <div className="text-center text-gray-500">No data to display</div>;
|
|
}
|
|
|
|
const chartOptions = {
|
|
chart: {
|
|
type: "line",
|
|
height: 350,
|
|
zoom: {
|
|
enabled: true,
|
|
type: 'x',
|
|
autoScaleYaxis: true
|
|
},
|
|
toolbar: {
|
|
show: true,
|
|
tools: {
|
|
zoom: true,
|
|
zoomin: true,
|
|
zoomout: true,
|
|
pan: true,
|
|
reset: true
|
|
}
|
|
},
|
|
background: 'transparent'
|
|
},
|
|
colors,
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2
|
|
},
|
|
grid: {
|
|
show: false,
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
markers: {
|
|
size: 5,
|
|
strokeWidth: 0,
|
|
hover: {
|
|
size: 7
|
|
}
|
|
},
|
|
xaxis: {
|
|
type: 'category',
|
|
categories,
|
|
labels: {
|
|
show: true,
|
|
rotate: -45,
|
|
style: {
|
|
fontSize: '12px'
|
|
}
|
|
},
|
|
tooltip: { enabled: false }
|
|
},
|
|
yaxis: {
|
|
labels: { show: false },
|
|
axisBorder: { show: false },
|
|
axisTicks: { show: false },
|
|
min: 0
|
|
},
|
|
legend: {
|
|
show: true
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
x: {
|
|
formatter: (value, { dataPointIndex }) => {
|
|
if (
|
|
lineChartCategoriesDates &&
|
|
lineChartCategoriesDates.length > dataPointIndex
|
|
) {
|
|
return lineChartCategoriesDates[dataPointIndex];
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="w-full overflow-x-false">
|
|
<ReactApexChart
|
|
options={chartOptions}
|
|
series={seriesData}
|
|
type="line"
|
|
height={350}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
LineChart.propTypes = {
|
|
seriesData: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
name: PropTypes.string.isRequired,
|
|
data: PropTypes.arrayOf(PropTypes.number).isRequired
|
|
})
|
|
),
|
|
categories: PropTypes.arrayOf(PropTypes.string),
|
|
colors: PropTypes.arrayOf(PropTypes.string),
|
|
title: PropTypes.string,
|
|
loading: PropTypes.bool
|
|
};
|
|
|
|
export default LineChart;
|