feat: testcase added

frontend/src/container/LogsExplorerChart/__tests__/frequencyGraphColor.test.ts

@@ -0,0 +1,34 @@
+import { Color } from '@signozhq/design-tokens';
+
+import { getColorsForSeverityLabels, isRedLike } from '../utils';
+
+describe('getColorsForSeverityLabels', () => {
+	it('should return slate for blank labels', () => {
+		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
+		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
+	});
+
+	it('should return correct colors for known severity variants', () => {
+		expect(getColorsForSeverityLabels('INFO', 0)).toBe(Color.BG_ROBIN_600);
+		expect(getColorsForSeverityLabels('ERROR', 0)).toBe(Color.BG_CHERRY_600);
+		expect(getColorsForSeverityLabels('WARN', 0)).toBe(Color.BG_AMBER_600);
+		expect(getColorsForSeverityLabels('DEBUG', 0)).toBe(Color.BG_AQUA_600);
+		expect(getColorsForSeverityLabels('TRACE', 0)).toBe(Color.BG_FOREST_600);
+		expect(getColorsForSeverityLabels('FATAL', 0)).toBe(Color.BG_SAKURA_600);
+	});
+
+	it('should return non-red colors for unrecognized labels at any index', () => {
+		for (let i = 0; i < 30; i++) {
+			const color = getColorsForSeverityLabels('4', i);
+			expect(isRedLike(color)).toBe(false);
+		}
+	});
+
+	it('should return non-red colors for numeric severity text', () => {
+		const numericLabels = ['1', '2', '4', '9', '13', '17', '21'];
+		numericLabels.forEach((label) => {
+			const color = getColorsForSeverityLabels(label, 0);
+			expect(isRedLike(color)).toBe(false);
+		});
+	});
+});

frontend/src/container/LogsExplorerChart/utils.ts

@@ -1,7 +1,16 @@
 import { Color } from '@signozhq/design-tokens';
-import { themeColors } from 'constants/theme';
 import { colors } from 'lib/getRandomColor';
 
+// Function to determine if a color is "red-like" based on its RGB values
+export function isRedLike(hex: string): boolean {
+	const r = parseInt(hex.slice(1, 3), 16);
+	const g = parseInt(hex.slice(3, 5), 16);
+	const b = parseInt(hex.slice(5, 7), 16);
+	return r > 180 && r > g * 1.4 && r > b * 1.4;
+}
+
+const SAFE_FALLBACK_COLORS = colors.filter((c) => !isRedLike(c));
+
 const SEVERITY_VARIANT_COLORS: Record<string, string> = {
 	TRACE: Color.BG_FOREST_600,
 	Trace: Color.BG_FOREST_500,
@@ -67,8 +76,13 @@ export function getColorsForSeverityLabels(
 	label: string,
 	index: number,
 ): string {
-	// Check if we have a direct mapping for this severity variant
-	const variantColor = SEVERITY_VARIANT_COLORS[label.trim()];
+	const trimmed = label.trim();
+
+	if (!trimmed) {
+		return Color.BG_SLATE_300;
+	}
+
+	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
 	if (variantColor) {
 		return variantColor;
 	}
@@ -103,5 +117,8 @@ export function getColorsForSeverityLabels(
 		return Color.BG_SAKURA_500;
 	}
 
-	return colors[index % colors.length] || themeColors.red;
+	return (
+		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
+		Color.BG_SLATE_400
+	);
 }