refactor area char to take an array of areas and data keys

Client/src/Components/Charts/AreaChart/index.jsx

@@ -11,6 +11,7 @@ import { createGradient } from "../Utils/gradientUtils";
 import PropTypes from "prop-types";
 import { useTheme } from "@mui/material";
 import { useId } from "react";
+import { Fragment } from "react";
 /**
  * CustomAreaChart component for rendering an area chart with optional gradient and custom ticks.
  *
@@ -92,7 +93,49 @@ const CustomAreaChart = ({
 }) => {
 	const theme = useTheme();
 	const uniqueId = useId();
-	const gradientId = `gradient-${uniqueId}`;
+
+	const AREA_COLORS = [
+		// Blues
+		"#3182bd", // Deep blue
+		"#6baed6", // Medium blue
+		"#9ecae1", // Light blue
+
+		// Greens
+		"#74c476", // Soft green
+		"#a1d99b", // Light green
+		"#c7e9c0", // Pale green
+
+		// Oranges
+		"#fdae6b", // Warm orange
+		"#fdd0a2", // Light orange
+		"#feedde", // Pale orange
+
+		// Purples
+		"#9467bd", // Lavender
+		"#a55194", // Deep magenta
+		"#c994c7", // Soft magenta
+
+		// Reds
+		"#ff9896", // Soft red
+		"#de2d26", // Deep red
+		"#fc9272", // Medium red
+
+		// Cyans/Teals
+		"#17becf", // Cyan
+		"#7fcdbb", // Teal
+		"#a1dab4", // Light teal
+
+		// Yellows
+		"#fec44f", // Mustard
+		"#fee391", // Light yellow
+		"#ffffd4", // Pale yellow
+
+		// Additional colors
+		"#e377c2", // Soft pink
+		"#bcbd22", // Olive
+		"#2ca02c", // Vibrant green
+	];
+
 	return (
 		<ResponsiveContainer
 			width="100%"
@@ -106,17 +149,11 @@ const CustomAreaChart = ({
 					{...(xTick && { tick: xTick })}
 				/>
 				<YAxis
-					{...(yDomain && { domain: yDomain })}
 					dataKey={yKey}
+					{...(yDomain && { domain: yDomain })}
 					{...(yTick && { tick: yTick })}
 				/>
-				{gradient === true &&
-					createGradient({
-						id: gradientId,
-						startColor: gradientStartColor,
-						endColor: gradientEndColor,
-						direction: gradientDirection,
-					})}
+
 				<CartesianGrid
 					stroke={theme.palette.border.light}
 					strokeWidth={1}
@@ -124,15 +161,29 @@ const CustomAreaChart = ({
 					fill="transparent"
 					vertical={false}
 				/>
-				{dataKeys.map((dataKey) => (
-					<Area
-						key={dataKey}
-						type="monotone"
-						dataKey={dataKey}
-						stroke={strokeColor}
-						fill={gradient === true ? `url(#${gradientId})` : fillColor}
-					/>
-				))}
+				{dataKeys.map((dataKey, index) => {
+					const gradientId = `gradient-${uniqueId}-${index}`;
+
+					return (
+						<Fragment key={dataKey}>
+							{gradient === true &&
+								createGradient({
+									id: gradientId,
+									startColor: gradientStartColor || AREA_COLORS[index],
+									endColor: gradientEndColor,
+									direction: gradientDirection,
+								})}
+							<Area
+								yKey={dataKey}
+								key={dataKey}
+								type="monotone"
+								dataKey={dataKey}
+								stroke={strokeColor || AREA_COLORS[index]}
+								fill={gradient === true ? `url(#${gradientId})` : fillColor}
+							/>
+						</Fragment>
+					);
+				})}
 				{customTooltip ? (
 					<Tooltip
 						cursor={{ stroke: theme.palette.border.light }}
@@ -154,7 +205,7 @@ CustomAreaChart.propTypes = {
 	yTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
 	xKey: PropTypes.string.isRequired,
 	xDomain: PropTypes.array,
-	yKey: PropTypes.string.isRequired,
+	yKey: PropTypes.string,
 	yDomain: PropTypes.array,
 	fillColor: PropTypes.string,
 	strokeColor: PropTypes.string,
@@ -162,7 +213,7 @@ CustomAreaChart.propTypes = {
 	gradientDirection: PropTypes.string,
 	gradientStartColor: PropTypes.string,
 	gradientEndColor: PropTypes.string,
-	customTooltip: PropTypes.func,
+	customTooltip: PropTypes.object,
 	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };