From 8af3767cab53a4f2cad0ea5a8136dd1ef742b151 Mon Sep 17 00:00:00 2001
From: Ben Vinegar <2153+benvinegar@users.noreply.github.com>
Date: Thu, 8 Feb 2024 00:18:50 -0500
Subject: [PATCH] Use linear gradient for bar chart bg

---
 app/components/TableCard.tsx | 19 +++++++------------
 app/components/ui/table.tsx  | 11 ++++++++++-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/components/TableCard.tsx b/app/components/TableCard.tsx
index 51bf9106..584db110 100644
--- a/app/components/TableCard.tsx
+++ b/app/components/TableCard.tsx
@@ -22,7 +22,7 @@ function calculateCountPercentages(countByProperty: CountByProperty) {
     return countByProperty.map((row) => {
         const count = parseInt(row[1]);
         const percentage = ((count / totalCount) * 100).toFixed(2);
-        return `${percentage}%`;
+        return percentage;
     });
 }
 export default function TableCard({
@@ -37,8 +37,6 @@ export default function TableCard({
             <Table>
                 <TableHeader>
                     <TableRow>
-                        {/* empty header required otherwise column for the bar chart wont render */}
-                        <th />
                         {(columnHeaders || []).map((header: string, index) => (
                             <TableHead
                                 key={header}
@@ -56,18 +54,15 @@ export default function TableCard({
                         <TableRow
                             key={item[0]}
                             className="relative group [&_td]:last:rounded-b-md"
+                            width={barChartPercentages[key]}
                         >
-                            {/* element _must_ be a `td` otherwise we get hydration errors */}
-                            <td
-                                className="bg-orange-200 absolute h-full after:content-[''] group-hover:opacity-50"
-                                style={{
-                                    width: barChartPercentages[key],
-                                }}
-                            />
-                            <TableCell className="font-medium relative">
+                            <TableCell
+                                className="font-medium relative w-3/4"
+                                width={barChartPercentages[key]}
+                            >
                                 {item[0]}
                             </TableCell>
-                            <TableCell className="text-right relative">
+                            <TableCell className="text-right relative w-1/4">
                                 {item[1]}
                             </TableCell>
                         </TableRow>
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
index a2566be7..5af67e7d 100644
--- a/app/components/ui/table.tsx
+++ b/app/components/ui/table.tsx
@@ -54,7 +54,9 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
     HTMLTableRowElement,
-    React.HTMLAttributes<HTMLTableRowElement>
+    React.HTMLAttributes<HTMLTableRowElement> & {
+        width?: number;
+    }
 >(({ className, ...props }, ref) => (
     <tr
         ref={ref}
@@ -62,6 +64,13 @@ const TableRow = React.forwardRef<
             "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
             className,
         )}
+        style={
+            props.width !== undefined
+                ? {
+                      background: `linear-gradient(90deg, #F7BA70 ${props.width}%, transparent ${props.width}%)`,
+                  }
+                : {}
+        }
         {...props}
     />
 ));