feat/update handover garden coloring (#700)

equinor · Nov 17, 2023 · e1fb669 · e1fb669
1 parent 2fe4475
commit e1fb669
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 44 deletions.
diff --git a/libs/handoverapp/src/lib/ui-garden/Item.tsx b/libs/handoverapp/src/lib/ui-garden/Item.tsx
@@ -37,7 +37,7 @@ const HandoverItem = (props: CustomItemView<HandoverPackage>) => {
   const size = getItemSize(data.volume, 100 || 0);
 
   const backgroundColor = useMemo(
-    () => createProgressGradient(data, data.commissioningPackageStatus),
+    () => createProgressGradient(data),
     [data, data.commissioningPackageStatus]
   );
   const textColor = getTextColor(data.commissioningPackageStatus);

diff --git a/libs/handoverapp/src/lib/utils-statuses/mcProgress.ts b/libs/handoverapp/src/lib/utils-statuses/mcProgress.ts
@@ -8,46 +8,28 @@ type McProgress = {
 };
 
 const mcProgressMap: McProgress[] = [
-  // OS
   {
-    color: () => '#d9eaf2',
-    accessor: (item) => item.mechanicalCompletionPkgsCount,
+    color: () => colorMap['RFO Accepted'],
+    accessor: (item) => item.mechanicalCompletionPkgsRfocSignedCount,
   },
-  // RFC Sent or Rejected
   {
-    color: (item) =>
-      item.isRfcRejected
-        ? colorMap[item.commissioningPackageStatus]
-        : colorMap['RFC Sent'],
-    accessor: (item) => item.mechanicalCompletionPkgsRfccShippedCount,
+    color: () => colorMap['RFO Sent'],
+    accessor: (item) => item.mechanicalCompletionPkgsRfocShippedCount,
   },
-  // TAC or RFC
   {
-    color: (item) => {
-      if (status.includes('TAC')) {
-        return colorMap[item.commissioningPackageStatus];
-      }
-      return item.isRfcRejected ? colorMap[item.commissioningPackageStatus] : '#7cb342';
-    },
+    color: () => colorMap['RFC Accepted'],
     accessor: (item) => item.mechanicalCompletionPkgsRfccSignedCount,
   },
-  // RFO Sent or Rejected
   {
-    color: (item) =>
-      item.isRfoRejected
-        ? colorMap[item.commissioningPackageStatus]
-        : colorMap['RFO Sent'],
-    accessor: (item) => item.mechanicalCompletionPkgsRfocShippedCount,
+    color: () => colorMap['RFC Sent'],
+    accessor: (item) => item.mechanicalCompletionPkgsRfccShippedCount,
   },
-  // Final color for RFO
   {
-    color: (item) =>
-      item.isRfoRejected ? colorMap[item.commissioningPackageStatus] : '#0035bc',
-    accessor: (item) => item.mechanicalCompletionPkgsRfocSignedCount,
+    color: () => '#d9eaf2',
+    accessor: (item) => item.mechanicalCompletionPkgsCount,
   },
 ];
 
-// Calculates the progress percentage for a given package
 const calculateProgressPercentage = (
   item: HandoverPackage,
   accessor: (item: HandoverPackage) => number
@@ -58,26 +40,16 @@ const calculateProgressPercentage = (
     : (count / item.mechanicalCompletionPkgsCount) * 100;
 };
 
-// Function to create a progress gradient based on the package status
 export const createProgressGradient = (
   item: HandoverPackage,
   status: PackageStatus = item.dynamicCommissioningStatus
 ): string => {
-  const baseColor = colorMap[status];
-  let gradientWidth = 0;
+  let gradientSegments: string[] = [];
 
   mcProgressMap.forEach((mcProgress) => {
     const width = calculateProgressPercentage(item, mcProgress.accessor);
-    if (width > 0) {
-      gradientWidth = Math.floor(width);
-    }
+    gradientSegments.push(`${mcProgress.color(item)} 0% ${width}%`);
   });
 
-  var color = item.commissioningPackageStatus == 'RFC Sent' ? '#A1CA74' : '#d9eaf2';
-
-  return gradientWidth === 100 || gradientWidth === 0
-    ? baseColor
-    : `linear-gradient(90deg, ${
-        colorMap[item.commissioningPackageStatus]
-      } ${gradientWidth}%, ${color} ${gradientWidth}%)`;
+  return `linear-gradient(90deg, ${gradientSegments.join(', ')})`;
 };
diff --git a/libs/shared/src/packages/mapping/src/lib/colorMap.ts b/libs/shared/src/packages/mapping/src/lib/colorMap.ts
@@ -4,7 +4,7 @@ import { PackageStatus } from '../../../types/src/lib/packageStatus';
 export const colorMap: Record<PackageStatus, string> = {
   'No status': '#d1d1d1',
   'RFC Partly sent': '#A1CA74',
-  'RFC Sent': '#7CB342',
+  'RFC Sent': '#A1CA74',
   'RFC Partly signed': '#7CB342',
   'RFC Accepted': '#7CB342',
   'RFC Rejected': '#FF3B3B',

diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/mc/columns.tsx b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/mc/columns.tsx
@@ -62,7 +62,10 @@ export const columns: ColDef<McBase>[] = [
         content={`${props.value}`}
         cellAttributeFn={() => ({
           style: {
-            backgroundColor: props.value ? colorMap[props.value] : 'transparent',
+            backgroundColor:
+              props.value && props.value != 'OS'
+                ? colorMap[('RFC ' + props.value) as PackageStatus]
+                : colorMap['OS'],
           },
         })}
       />
@@ -77,7 +80,12 @@ export const columns: ColDef<McBase>[] = [
       <StatusCell
         content={`${props.value}`}
         cellAttributeFn={() => ({
-          style: { backgroundColor: props.value ? colorMap[props.value] : 'transparent' },
+          style: {
+            backgroundColor:
+              props.value && props.value != 'OS'
+                ? colorMap[('RFO ' + props.value) as PackageStatus]
+                : colorMap['OS'],
+          },
         })}
       />
     ),