Merge pull request #81 from l3montree-dev/fix-63

fixes #63
l3montree-dev · Oct 29, 2024 · 070f20c · 070f20c
2 parents c57a536 + 28f5d9f
commit 070f20c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/src/components/overview/RiskDistributionDiagram.tsx b/src/components/overview/RiskDistributionDiagram.tsx
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/chart";
 import { RiskDistribution } from "@/types/api/api";
 import { uniq } from "lodash";
+import { generateColor } from "@/utils/view";
 
 //  { range: "0-2", scanner1: 186, scanner2: 80 },
 const combineRanges = (data: RiskDistribution[]) => {
@@ -57,7 +58,7 @@ export function RiskDistributionDiagram({
       ...acc,
       [el.id]: {
         label: el.label,
-        color: `hsl(var(--chart-${i + 1}))`,
+        color: generateColor(el.label),
       },
     }),
     {} as any,

diff --git a/src/components/overview/RiskHistoryDiagram.tsx b/src/components/overview/RiskHistoryDiagram.tsx
@@ -12,6 +12,7 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import { RiskHistory } from "@/types/api/api";
+import { generateColor } from "@/utils/view";
 import { useMemo } from "react";
 import {
   Area,
@@ -69,7 +70,7 @@ export function RiskHistoryChart({
                 ...acc,
                 [d.label]: {
                   label: d.label,
-                  color: "hsl(var(--chart-" + i + "))",
+                  color: generateColor(d.label),
                 },
               }),
               {},
@@ -117,12 +118,12 @@ export function RiskHistoryChart({
                   >
                     <stop
                       offset="5%"
-                      stopColor={"hsl(var(--chart-" + (i + 1) + "))"}
+                      stopColor={generateColor(d.label)}
                       stopOpacity={0.8}
                     />
                     <stop
                       offset="95%"
-                      stopColor={"hsl(var(--chart-" + (i + 1) + "))"}
+                      stopColor={generateColor(d.label)}
                       stopOpacity={0.1}
                     />
                   </linearGradient>
@@ -133,7 +134,7 @@ export function RiskHistoryChart({
                   key={d.label}
                   dataKey={d.label}
                   type="monotone"
-                  stroke={"hsl(var(--chart-" + (i + 1) + "))"}
+                  stroke={generateColor(d.label)}
                   strokeWidth={2}
                   fill={"url(#fill-" + (i + 1) + ")"}
                   fillOpacity={0.4}

diff --git a/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/index.tsx b/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/index.tsx
@@ -151,7 +151,7 @@ const Index: FunctionComponent<Props> = ({
           />
         </div>
         <RiskHistoryChart
-          data={[{ label: "Total Risk", history: riskHistory }]}
+          data={[{ label: asset.name, history: riskHistory }]}
         />
         {/* <div className="grid grid-cols-3 gap-4">
           <div className="col-span-2"></div>

diff --git a/src/utils/view.ts b/src/utils/view.ts
@@ -62,3 +62,20 @@ export const findUser = (
     avatarUrl: user?.avatarUrl,
   };
 };
+
+// A simple hash function to convert the project ID to a consistent integer
+export const hashCode = (str: string) => {
+  return Array.from(str).reduce((acc, char) => {
+    return char.charCodeAt(0) + ((acc << 5) - acc);
+  }, 0);
+};
+
+// Generate HSL color
+export const generateColor = (str: string) => {
+  const hash = hashCode(str);
+  const hue = Math.abs(hash) % 360; // Keeping hue between 0 and 359
+  const saturation = 60 + (hash % 40); // Randomize saturation between 60-100%
+  const lightness = 50; // Keep lightness consistent for a harmonious look
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+};