Use linear gradient for bar chart bg

benvinegar · Feb 8, 2024 · 8af3767 · 8af3767
1 parent ca533fb
commit 8af3767
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git 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
@@ -54,14 +54,23 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
     HTMLTableRowElement,
-    React.HTMLAttributes<HTMLTableRowElement>
+    React.HTMLAttributes<HTMLTableRowElement> & {
+        width?: number;
+    }
 >(({ className, ...props }, ref) => (
     <tr
         ref={ref}
         className={cn(
             "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}
     />
 ));