feat: all line series with same labels should have same color in a dashboard (#4478)

frontend/src/lib/getChartData.ts

@@ -88,9 +88,11 @@ const getChartData = ({
 	const allLabels = modifiedData.map((e) => e.label);
 
 	const updatedDataSet = updatedSortedData.map((e, index) => {
+		const label = allLabels[index];
+
 		const datasetBaseConfig = {
 			index,
-			label: allLabels[index],
+			label,
 			borderColor: colors[index % colors.length] || 'red',
 			data: e.second,
 			borderWidth: 1.5,

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

@@ -1,11 +1,12 @@
 import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { themeColors } from 'constants/theme';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import getLabelName from 'lib/getLabelName';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
-import { colors } from '../../getRandomColor';
 import { placement } from '../placement';
+import { generateColor } from '../utils/generateColor';
 
 dayjs.extend(customParseFormat);
 
@@ -54,12 +55,14 @@ const generateTooltipContent = (
 				const value = data[index][idx];
 				const label = getLabelName(metric, queryName || '', legend || '');
 
+				const color = generateColor(label, themeColors.chartcolors);
+
 				if (Number.isFinite(value)) {
 					const tooltipValue = getToolTipValue(value, yAxisUnit);
 
 					const dataObj = {
 						show: item.show || false,
-						color: colors[(index - 1) % colors.length],
+						color,
 						label,
 						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 						// @ts-ignore

frontend/src/lib/uPlotLib/utils/generateColor.ts

@@ -0,0 +1,20 @@
+/* eslint-disable no-bitwise */
+export function hashFn(str: string): number {
+	let hash = 5381;
+	for (let i = 0; i < str.length; i++) {
+		hash = (hash * 33) ^ str.charCodeAt(i);
+	}
+
+	return hash >>> 0;
+}
+
+export function generateColor(
+	key: string,
+	colorMap: Record<string, string>,
+): string {
+	const hashValue = hashFn(key);
+	const keys = Object.keys(colorMap);
+	const colorIndex = hashValue % keys.length;
+	const selectedKey = keys[colorIndex];
+	return colorMap[selectedKey];
+}

frontend/src/lib/uPlotLib/utils/getSeriesData.ts

@@ -1,8 +1,9 @@
+import { themeColors } from 'constants/theme';
 import getLabelName from 'lib/getLabelName';
-import { colors } from 'lib/getRandomColor';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
+import { generateColor } from './generateColor';
 import getRenderer, { drawStyles, lineInterpolations } from './getRenderer';
 
 const paths = (
@@ -36,8 +37,6 @@ const getSeries = (
 	const newGraphVisibilityStates = graphsVisibilityStates?.slice(1);
 
 	for (let i = 0; i < seriesList?.length; i += 1) {
-		const color = colors[i % colors.length]; // Use modulo to loop through colors if there are more series than colors
-
 		const { metric = {}, queryName = '', legend = '' } = widgetMetaData[i] || {};
 
 		const label = getLabelName(
@@ -46,6 +45,8 @@ const getSeries = (
 			legend || '',
 		);
 
+		const color = generateColor(label, themeColors.chartcolors);
+
 		const pointSize = seriesList[i].values.length > 1 ? 5 : 10;
 		const showPoints = !(seriesList[i].values.length > 1);