From 09cffd5498f4b634447c56000d8bc0609e198063 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 18 May 2023 19:07:24 +0530
Subject: [PATCH] fix: analytics colors when segmented by cycle, module, dates,
 and assignees (#1072)

* fix: show unique colors when segmented

* chore: modify random color generator function

* chore: modify random color generator function
---
 .../custom-analytics/graph/index.tsx          |  2 --
 .../components/analytics/select/project.tsx   |  8 +++++--
 .../components/ui/custom-search-select.tsx    |  5 ++++-
 apps/app/components/ui/custom-select.tsx      |  1 +
 apps/app/helpers/analytics.helper.ts          | 20 ++++++++++-------
 apps/app/helpers/string.helper.ts             | 22 +++++++++++++++++++
 6 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index 6ae28f02b..057d76022 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -83,8 +83,6 @@ export const AnalyticsGraph: React.FC<Props> = ({
                   (a) => a.assignees__email === datum.value
                 )?.assignees__avatar;
 
-                console.log(avatar);
-
                 if (avatar && avatar !== "")
                   return (
                     <g transform={`translate(${datum.x},${datum.y})`}>
diff --git a/apps/app/components/analytics/select/project.tsx b/apps/app/components/analytics/select/project.tsx
index efee62ba6..0cc88aa3b 100644
--- a/apps/app/components/analytics/select/project.tsx
+++ b/apps/app/components/analytics/select/project.tsx
@@ -13,7 +13,12 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
   const options = projects?.map((project) => ({
     value: project.id,
     query: project.name + project.identifier,
-    content: <>{project.name}</>,
+    content: (
+      <div className="flex items-center gap-2">
+        <span className="text-brand-secondary text-[0.65rem]">{project.identifier}</span>
+        {project.name}
+      </div>
+    ),
   }));
 
   return (
@@ -30,7 +35,6 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
           : "All projects"
       }
       optionsClassName="min-w-full"
-      noChevron
       multiple
     />
   );
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index 5bf745a84..ebe1dfb45 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -1,8 +1,11 @@
 import React, { useState } from "react";
+
 // headless ui
 import { Combobox, Transition } from "@headlessui/react";
 // icons
-import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+
 type CustomSearchSelectProps = {
   value: any;
   onChange: any;
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index 10a43e461..86196a63e 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
diff --git a/apps/app/helpers/analytics.helper.ts b/apps/app/helpers/analytics.helper.ts
index 1caecde0d..f0c7864b5 100644
--- a/apps/app/helpers/analytics.helper.ts
+++ b/apps/app/helpers/analytics.helper.ts
@@ -1,7 +1,7 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
 // helpers
-import { capitalizeFirstLetter } from "helpers/string.helper";
+import { capitalizeFirstLetter, generateRandomColor } from "helpers/string.helper";
 // types
 import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse } from "types";
 // constants
@@ -65,7 +65,8 @@ export const generateBarColor = (
   params: IAnalyticsParams,
   type: "x_axis" | "segment"
 ): string => {
-  let color: string | undefined = "rgb(var(--color-accent))";
+  let color: string | undefined = generateRandomColor(value);
+  console.log(value);
 
   if (!analytics) return color;
 
@@ -74,19 +75,22 @@ export const generateBarColor = (
 
   if (params[type] === "state__group") color = STATE_GROUP_COLORS[value.toLowerCase()];
 
-  if (params[type] === "priority")
+  if (params[type] === "priority") {
+    const priority = value.toLowerCase();
+
     color =
-      value === "Urgent"
+      priority === "urgent"
         ? "#ef4444"
-        : value === "High"
+        : priority === "high"
         ? "#f97316"
-        : value === "Medium"
+        : priority === "medium"
         ? "#eab308"
-        : value === "Low"
+        : priority === "low"
         ? "#22c55e"
         : "#ced4da";
+  }
 
-  return color ?? "rgb(var(--color-accent))";
+  return color ?? generateRandomColor(value);
 };
 
 export const renderMonthAndYear = (date: string | number | null): string => {
diff --git a/apps/app/helpers/string.helper.ts b/apps/app/helpers/string.helper.ts
index ebb88f4df..1cdebf0bb 100644
--- a/apps/app/helpers/string.helper.ts
+++ b/apps/app/helpers/string.helper.ts
@@ -87,3 +87,25 @@ export const cosineSimilarity = (a: string, b: string) => {
 
   return dotProduct / Math.sqrt(magnitudeA * magnitudeB);
 };
+
+export const generateRandomColor = (string: string): string => {
+  if (!string) return "var(--color-accent)";
+
+  string = `${string}`;
+
+  const uniqueId = string.length.toString() + string; // Unique identifier based on string length
+  const combinedString = uniqueId + string;
+
+  const hash = Array.from(combinedString).reduce((acc, char) => {
+    const charCode = char.charCodeAt(0);
+    return (acc << 5) - acc + charCode;
+  }, 0);
+
+  const hue = hash % 360;
+  const saturation = 70; // Higher saturation for pastel colors
+  const lightness = 60; // Mid-range lightness for pastel colors
+
+  const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+
+  return randomColor;
+};