From 83163c17cd8663c3b52984d758b18c8478ac2027 Mon Sep 17 00:00:00 2001
From: Chintan Sudani <46838508+csudani7@users.noreply.github.com>
Date: Fri, 13 Jan 2023 13:50:11 +0530
Subject: [PATCH] fix: Added Extra color code to stop repeat same color (#2015)

---
 frontend/src/constants/theme.ts             | 38 +++++++++++++++++++++
 frontend/src/container/TraceDetail/utils.ts |  1 +
 frontend/src/lib/getRandomColor.ts          | 12 ++-----
 frontend/src/utils/getSpanTreeMetadata.ts   |  4 +--
 4 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/constants/theme.ts

diff --git a/frontend/src/constants/theme.ts b/frontend/src/constants/theme.ts
new file mode 100644
index 0000000000..96c4bb2983
--- /dev/null
+++ b/frontend/src/constants/theme.ts
@@ -0,0 +1,38 @@
+const themeColors = {
+	chartcolors: {
+		dodgerBlue: '#2F80ED',
+		mediumOrchid: '#BB6BD9',
+		seaBuckthorn: '#F2994A',
+		seaGreen: '#219653',
+		turquoiseBlue: '#56CCF2',
+		festivalOrange: '#F2C94C',
+		silver: '#BDBDBD',
+		outrageousOrange: '#FF6633',
+		roseBud: '#FFB399',
+		magentaPink: '#FF33FF',
+		canary: '#FFFF99',
+		deepSkyBlue: '#00B3E6',
+		goldTips: '#E6B333',
+		royalBlue: '#3366E6',
+		avocado: '#999966',
+		mintGreen: '#99FF99',
+		chestnut: '#B34D4D',
+		lima: '#80B300',
+		olive: '#809900',
+		beautyBush: '#E6B3B3',
+		danube: '#6680B3',
+		oliveDrab: '#66991A',
+		lavenderRose: '#FF99E6',
+		electricLime: '#CCFF1A',
+		radicalRed: '#FF1A66',
+		harleyOrange: '#E6331A',
+		turquoise: '#33FFCC',
+		gladeGreen: '#66994D',
+		hemlock: '#66664D',
+		vidaLoca: '#4D8000',
+		rust: '#B33300',
+	},
+	errorColor: '#d32f2f',
+};
+
+export { themeColors };
diff --git a/frontend/src/container/TraceDetail/utils.ts b/frontend/src/container/TraceDetail/utils.ts
index 5566f2d1fa..b017202e8d 100644
--- a/frontend/src/container/TraceDetail/utils.ts
+++ b/frontend/src/container/TraceDetail/utils.ts
@@ -112,6 +112,7 @@ export const getTreeLevelsCount = (tree: ITraceTree): number => {
 	return levels;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const formUrlParams = (params: Record<string, any>): string => {
 	let urlParams = '';
 	Object.entries(params).forEach(([key, value], index) => {
diff --git a/frontend/src/lib/getRandomColor.ts b/frontend/src/lib/getRandomColor.ts
index 64618cb314..fc85331af7 100644
--- a/frontend/src/lib/getRandomColor.ts
+++ b/frontend/src/lib/getRandomColor.ts
@@ -1,16 +1,8 @@
 import { Span } from 'types/api/trace/getTraceItem';
 
-export const colors = [
-	'#2F80ED',
-	'#BB6BD9',
-	'#F2994A',
-	'#219653',
-	'#56CCF2',
-	'#F2C94C',
-	'#BDBDBD',
-];
+import { themeColors } from '../constants/theme';
 
-export const errorColor = '#d32f2f';
+export const colors = Object.values(themeColors.chartcolors);
 
 export function getRandomNumber(min: number, max: number): number {
 	return Math.random() * (max - min) + min;
diff --git a/frontend/src/utils/getSpanTreeMetadata.ts b/frontend/src/utils/getSpanTreeMetadata.ts
index e9b6c194ca..631d15d551 100644
--- a/frontend/src/utils/getSpanTreeMetadata.ts
+++ b/frontend/src/utils/getSpanTreeMetadata.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { errorColor } from 'lib/getRandomColor';
+import { themeColors } from 'constants/theme';
 import { ITraceForest, ITraceTree } from 'types/api/trace/getTraceItem';
 /**
  * Traverses the Span Tree data and returns the relevant meta data.
@@ -27,7 +27,7 @@ export const getSpanTreeMetadata = (
 			globalEnd = Math.max(globalEnd, endTime);
 		}
 		if (treeNode.hasError) {
-			treeNode.serviceColour = errorColor;
+			treeNode.serviceColour = themeColors.errorColor;
 		} else treeNode.serviceColour = spanServiceColours[treeNode.serviceName];
 		treeNode.children.forEach((childNode) => {
 			traverse(childNode, level + 1);