131 lines
2.7 KiB
JavaScript
131 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import ReactApexChart from "react-apexcharts";
|
|
import PropTypes from "prop-types";
|
|
|
|
const HorizontalBarChart = ({
|
|
seriesData = [],
|
|
categories = [],
|
|
colors = [
|
|
"#1E90FF", // Dodger Blue - Primary
|
|
"#00BFFF", // Deep Sky Blue - Info
|
|
"#9370DB", // Medium Purple - Success (replacing Lime Green)
|
|
"#6A0DAD", // Amethyst Purple - On Route (replacing Forest Green)
|
|
"#A9A9A9", // Dark Gray - Neutral
|
|
"#6A5ACD", // Slate Blue - Secondary
|
|
"#FFA500", // Orange - Warning
|
|
"#FF4500", // Orange Red - Danger
|
|
"#20B2AA", // Light Sea Green - Late
|
|
"#708090", // Slate Gray - Muted
|
|
],
|
|
|
|
|
|
}) => {
|
|
// Guard clause for invalid or incomplete data
|
|
const hasValidData =
|
|
Array.isArray(seriesData) &&
|
|
seriesData.length > 0 &&
|
|
Array.isArray(categories) &&
|
|
categories.length === seriesData.length;
|
|
|
|
if (!hasValidData) {
|
|
return <div className="text-center text-gray-500">No data to display</div>;
|
|
}
|
|
|
|
const chartOptions = {
|
|
|
|
chart: {
|
|
type: "bar",
|
|
height: 380,
|
|
toolbar: {
|
|
show: false, // This removes the menu
|
|
},
|
|
},
|
|
grid: {
|
|
show: false
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
barHeight: "80%",
|
|
distributed: true,
|
|
horizontal: true,
|
|
dataLabels: {
|
|
position: "center",
|
|
},
|
|
},
|
|
},
|
|
colors,
|
|
dataLabels: {
|
|
enabled: true,
|
|
textAnchor: "start",
|
|
style: {
|
|
colors: ["#000"], // Switch to black for better visibility
|
|
},
|
|
formatter: function (val, opt) {
|
|
return `${opt.w.globals.labels[opt.dataPointIndex]}: ${val}`;
|
|
},
|
|
offsetX: 10, // Push label slightly to the right
|
|
dropShadow: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
|
|
stroke: {
|
|
width: 1,
|
|
colors: ["#fff"],
|
|
},
|
|
xaxis: {
|
|
categories,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
},
|
|
tooltip: {
|
|
theme: "dark",
|
|
x: {
|
|
show: false,
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: () => "",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<ReactApexChart
|
|
options={chartOptions}
|
|
series={[{ data: seriesData }]}
|
|
type="bar"
|
|
height={380}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
HorizontalBarChart.propTypes = {
|
|
seriesData: PropTypes.arrayOf(PropTypes.number),
|
|
categories: PropTypes.arrayOf(PropTypes.string),
|
|
colors: PropTypes.arrayOf(PropTypes.string),
|
|
};
|
|
|
|
export default HorizontalBarChart;
|