feat: custom color mapping for uplot tooltip implemented

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -115,16 +115,21 @@ function StatusCodeBarCharts({
 	const navigateToExplorerPages = useNavigateToExplorerPages();
 	const { notifications } = useNotifications();
 
-	const { getCustomSeries } = useGetGraphCustomSeries({
-		isDarkMode,
-		drawStyle: 'bars',
-		colorMapping: {
+	const colorMapping = useMemo(
+		() => ({
 			'200-299': Color.BG_FOREST_500,
 			'300-399': Color.BG_AMBER_400,
 			'400-499': Color.BG_CHERRY_500,
 			'500-599': Color.BG_ROBIN_500,
 			Other: Color.BG_SIENNA_500,
-		},
+		}),
+		[],
+	);
+
+	const { getCustomSeries } = useGetGraphCustomSeries({
+		isDarkMode,
+		drawStyle: 'bars',
+		colorMapping,
 	});
 
 	const widget = useMemo<Widgets>(
@@ -188,6 +193,7 @@ function StatusCodeBarCharts({
 				onClickHandler: graphClickHandler,
 				customSeries: getCustomSeries,
 				onDragSelect,
+				colorMapping,
 			}),
 		[
 			minTime,
@@ -200,6 +206,7 @@ function StatusCodeBarCharts({
 			graphClickHandler,
 			getCustomSeries,
 			onDragSelect,
+			colorMapping,
 		],
 	);
 

frontend/src/lib/uPlotLib/getUplotChartOptions.ts

@@ -59,6 +59,7 @@ export interface GetUPlotChartOptions {
 	timezone?: string;
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
 	isLogScale?: boolean;
+	colorMapping?: Record<string, string>;
 }
 
 /** the function converts series A , series B , series C to
@@ -166,6 +167,7 @@ export const getUPlotChartOptions = ({
 	timezone,
 	customSeries,
 	isLogScale,
+	colorMapping,
 }: GetUPlotChartOptions): uPlot.Options => {
 	const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
 
@@ -229,10 +231,11 @@ export const getUPlotChartOptions = ({
 			tooltipPlugin({
 				apiResponse,
 				yAxisUnit,
-				stackBarChart,
 				isDarkMode,
-				customTooltipElement,
+				stackBarChart,
 				timezone,
+				colorMapping,
+				customTooltipElement,
 			}),
 			onClickPlugin({
 				onClick: onClickHandler,

frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts

@@ -48,6 +48,7 @@ const generateTooltipContent = (
 	isMergedSeries?: boolean,
 	stackBarChart?: boolean,
 	timezone?: string,
+	colorMapping?: Record<string, string>,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 ): HTMLElement => {
 	const container = document.createElement('div');
@@ -95,10 +96,12 @@ const generateTooltipContent = (
 					? ''
 					: getLabelName(metric, queryName || '', legend || '');
 
-				let color = generateColor(
-					label,
-					isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
-				);
+				let color =
+					colorMapping?.[label] ||
+					generateColor(
+						label,
+						isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
+					);
 
 				// in case of billing graph pick colors from the series options
 				if (isBillingUsageGraphs) {
@@ -230,6 +233,7 @@ type ToolTipPluginProps = {
 	isDarkMode: boolean;
 	customTooltipElement?: HTMLDivElement;
 	timezone?: string;
+	colorMapping?: Record<string, string>;
 };
 
 const tooltipPlugin = ({
@@ -242,6 +246,7 @@ const tooltipPlugin = ({
 	isDarkMode,
 	customTooltipElement,
 	timezone,
+	colorMapping,
 }: // eslint-disable-next-line sonarjs/cognitive-complexity
 ToolTipPluginProps): any => {
 	let over: HTMLElement;
@@ -309,6 +314,7 @@ ToolTipPluginProps): any => {
 							isMergedSeries,
 							stackBarChart,
 							timezone,
+							colorMapping,
 						);
 						if (customTooltipElement) {
 							content.appendChild(customTooltipElement);