From 75e918db24cf4d0eb068600fc0ec2bd3ca7a1c7d Mon Sep 17 00:00:00 2001
From: Ben Vinegar <2153+benvinegar@users.noreply.github.com>
Date: Thu, 8 Feb 2024 00:27:02 -0500
Subject: [PATCH] Fix broken types in TableCard.tsx

---
 app/components/TableCard.tsx | 6 +++---
 app/components/ui/table.tsx  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/TableCard.tsx b/app/components/TableCard.tsx
index 584db110..f624923c 100644
--- a/app/components/TableCard.tsx
+++ b/app/components/TableCard.tsx
@@ -16,13 +16,13 @@ type CountByProperty = [string, string][];
 function calculateCountPercentages(countByProperty: CountByProperty) {
     const totalCount = countByProperty.reduce(
         (sum, row) => sum + parseInt(row[1]),
-        0
+        0,
     );
 
     return countByProperty.map((row) => {
         const count = parseInt(row[1]);
         const percentage = ((count / totalCount) * 100).toFixed(2);
-        return percentage;
+        return `${percentage}%`;
     });
 }
 export default function TableCard({
@@ -30,7 +30,7 @@ export default function TableCard({
     columnHeaders,
 }: InferProps<typeof TableCard.propTypes>) {
     const barChartPercentages = calculateCountPercentages(
-        countByProperty as CountByProperty
+        countByProperty as CountByProperty,
     );
     return (
         <Card>
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
index 5af67e7d..9dd2317e 100644
--- a/app/components/ui/table.tsx
+++ b/app/components/ui/table.tsx
@@ -55,7 +55,7 @@ TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef<
     HTMLTableRowElement,
     React.HTMLAttributes<HTMLTableRowElement> & {
-        width?: number;
+        width?: string;
     }
 >(({ className, ...props }, ref) => (
     <tr
@@ -67,7 +67,7 @@ const TableRow = React.forwardRef<
         style={
             props.width !== undefined
                 ? {
-                      background: `linear-gradient(90deg, #F7BA70 ${props.width}%, transparent ${props.width}%)`,
+                      background: `linear-gradient(90deg, #F7BA70 ${props.width}, transparent ${props.width})`,
                   }
                 : {}
         }