improve graphs and table

apps/web/src/components/report/chart/ReportTable.tsx

@@ -4,48 +4,81 @@ import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
 import { useSelector } from "@/redux";
 import { Checkbox } from "@/components/ui/checkbox";
 import { getChartColor } from "@/utils/theme";
+import { cn } from "@/utils/cn";
+
+type ReportTableProps = {
+  data: RouterOutputs["chartMeta"]["chart"];
+  visibleSeries: string[];
+  setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
+};
 
 export function ReportTable({
   data,
-}: {
-  data: RouterOutputs["chartMeta"]["chart"];
-}) {
+  visibleSeries,
+  setVisibleSeries,
+}: ReportTableProps) {
   const interval = useSelector((state) => state.report.interval);
   const formatDate = useFormatDateInterval(interval);
 
+  function handleChange(name: string, checked: boolean) {
+    setVisibleSeries((prev) => {
+      if (checked) {
+        return [...prev, name];
+      } else {
+        return prev.filter((item) => item !== name);
+      }
+    });
+  }
+
+  const row = "flex border-b border-border last:border-b-0 flex-1";
+  const cell = "p-2 last:pr-8 last:w-[8rem]";
+  const value = "min-w-[6rem] text-right";
+  const header = "text-sm font-medium";
+  const total = 'bg-gray-50 text-emerald-600 font-bold border-r border-border'
   return (
-    <div className="flex min-w-0">
+    <div className="flex w-fit max-w-full rounded-md border border-border">
       {/* Labels */}
-      <div>
-        <div className="font-medium">Name</div>
+      <div className="border-r border-border">
+        <div className={cn(header, row, cell)}>Name</div>
         {data.series.map((serie, index) => {
-          const checked = index < 5;
+          const checked = visibleSeries.includes(serie.name);
+
           return (
             <div
               key={serie.name}
-              className="max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2"
+              className={cn("flex max-w-[200px] items-center gap-2", row, cell)}
             >
               <Checkbox
-                style={checked ? {
-                  background: getChartColor(index),
-                  borderColor: getChartColor(index),
-                } : undefined}
+                onCheckedChange={(checked) =>
+                  handleChange(serie.name, !!checked)
+                }
+                style={
+                  checked
+                    ? {
+                        background: getChartColor(index),
+                        borderColor: getChartColor(index),
+                      }
+                    : undefined
+                }
                 checked={checked}
               />
-              {serie.name}
+              <div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
+                {serie.name}
+              </div>
             </div>
           );
         })}
       </div>
 
       {/* ScrollView for all values */}
-      <div className="min-w-0 overflow-auto">
+      <div className="w-full overflow-auto">
         {/* Header */}
-        <div className="flex">
-          {data.series[0]?.data.map((serie, index) => (
+        <div className={cn("w-max", row)}>
+          <div className={cn(header, value, cell, total)}>Total</div>
+          {data.series[0]?.data.map((serie) => (
             <div
               key={serie.date.toString()}
-              className="min-w-[80px] text-right font-medium"
+              className={cn(header, value, cell)}
             >
               {formatDate(serie.date)}
             </div>
@@ -53,12 +86,13 @@ export function ReportTable({
         </div>
 
         {/* Values */}
-        {data.series.map((serie, index) => {
+        {data.series.map((serie) => {
           return (
-            <div className="flex" key={serie.name}>
+            <div className={cn("w-max", row)} key={serie.name}>
+              <div className={cn(header, value, cell, total)}>{serie.totalCount}</div>
               {serie.data.map((item) => {
                 return (
-                  <div key={item.date} className="min-w-[80px] text-right">
+                  <div key={item.date} className={cn(value, cell)}>
                     {item.count}
                   </div>
                 );