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

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})`}>

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
     />
   );

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;

apps/app/components/ui/custom-select.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons

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 => {

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;
+};