From 6dbc11991bb291c5c77b945a7eda0cf44b1de9ac Mon Sep 17 00:00:00 2001
From: Palash <palashgdev@gmail.com>
Date: Tue, 28 Jun 2022 16:20:18 +0530
Subject: [PATCH] feat: service map color is updated according to the darkMode
 (#1324)

---
 frontend/src/modules/Servicemap/ServiceMap.tsx | 5 ++---
 frontend/src/modules/Servicemap/utils.ts       | 9 ++++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index ffbe2929ea..03256dde59 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -92,7 +92,7 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
 		fgRef && fgRef.current && fgRef.current.zoomToFit(100, 120);
 	};
 
-	const { nodes, links } = getGraphData(serviceMap);
+	const { nodes, links } = getGraphData(serviceMap, isDarkMode);
 	const graphData = { nodes, links };
 	return (
 		<Container>
@@ -109,7 +109,7 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
 				linkAutoColorBy={(d) => d.target}
 				linkDirectionalParticles="value"
 				linkDirectionalParticleSpeed={(d) => d.value}
-				nodeCanvasObject={(node, ctx, globalScale) => {
+				nodeCanvasObject={(node, ctx) => {
 					const label = transformLabel(node.id);
 					const { fontSize } = node;
 					ctx.font = `${fontSize}px Roboto`;
@@ -118,7 +118,6 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
 					ctx.fillStyle = node.color;
 					ctx.beginPath();
 					ctx.arc(node.x, node.y, width, 0, 2 * Math.PI, false);
-					ctx.fillStyle = isDarkMode ? '#3C8618' : '#D5F2BB';
 					ctx.fill();
 					ctx.textAlign = 'center';
 					ctx.textBaseline = 'middle';
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index 21b93952a8..6bec25f8a6 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -2,7 +2,6 @@
 //@ts-nocheck
 
 import { cloneDeep, find, maxBy, uniq, uniqBy } from 'lodash-es';
-
 import { graphDataType } from './ServiceMap';
 
 const MIN_WIDTH = 10;
@@ -18,7 +17,7 @@ export const getDimensions = (num, highest) => {
 	};
 };
 
-export const getGraphData = (serviceMap): graphDataType => {
+export const getGraphData = (serviceMap, isDarkMode): graphDataType => {
 	const { items, services } = serviceMap;
 	const highestCallCount = maxBy(items, (e) => e?.callCount)?.callCount;
 	const highestCallRate = maxBy(services, (e) => e?.callRate)?.callRate;
@@ -39,7 +38,7 @@ export const getGraphData = (serviceMap): graphDataType => {
 	const uniqNodes = uniq([...uniqParent, ...uniqChild]);
 	const nodes = uniqNodes.map((node, i) => {
 		const service = find(services, (service) => service.serviceName === node);
-		let color = '#88CEA5';
+		let color = isDarkMode ? '#7CA568' : '#D5F2BB';
 		if (!service) {
 			return {
 				id: node,
@@ -54,9 +53,9 @@ export const getGraphData = (serviceMap): graphDataType => {
 			};
 		}
 		if (service.errorRate > 0) {
-			color = '#F98989';
+			color = isDarkMode ? '#DB836E' : '#F98989';
 		} else if (service.fourXXRate > 0) {
-			color = '#F9DA7B';
+			color = isDarkMode ? '#C79931' : '#F9DA7B';
 		}
 		const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
 		return {