improve graphs and table

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

@@ -17,6 +17,17 @@ import {
 } from "@/types";
 import { getChartColor } from "@/utils/theme";
 import { ReportTable } from "./ReportTable";
+import { useEffect, useRef, useState } from "react";
+import { AutoSizer } from "@/components/AutoSizer";
+
+type ReportLineChartProps = {
+  interval: IInterval;
+  startDate: Date;
+  endDate: Date;
+  events: IChartEvent[];
+  breakdowns: IChartBreakdown[];
+  showTable?: boolean;
+};
 
 export function ReportLineChart({
   interval,
@@ -24,13 +35,9 @@ export function ReportLineChart({
   endDate,
   events,
   breakdowns,
-}: {
-  interval: IInterval;
-  startDate: Date;
-  endDate: Date;
-  events: IChartEvent[];
-  breakdowns: IChartBreakdown[];
-}) {
+  showTable,
+}: ReportLineChartProps) {
+  const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
   const chart = api.chartMeta.chart.useQuery(
     {
       interval,
@@ -47,42 +54,71 @@ export function ReportLineChart({
 
   const formatDate = useFormatDateInterval(interval);
 
-  return (
-    <>
+  const ref = useRef(false);
+  useEffect(() => {
+    if (!ref.current && chart.data) {
+      const max = 20;
+      
+      setVisibleSeries(
+        chart.data?.series?.slice(0, max).map((serie) => serie.name) ?? [],
+        );
+        // ref.current = true;
+      }
+    }, [chart.data]);
+    
+    return (
+      <>
       {chart.isSuccess && chart.data?.series?.[0]?.data && (
         <>
-        <LineChart width={800} height={400}>
-          <Legend />
-          <YAxis dataKey={"count"}></YAxis>
-          <Tooltip content={<ReportLineChartTooltip />} />
-          {/* <Tooltip /> */}
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis
-            dataKey="date"
-            tickFormatter={(m: Date) => {
-              return formatDate(m);
-            }}
-            tickLine={false}
-            allowDuplicatedCategory={false}
-          />
-          {chart.data?.series.slice(0, 5).map((serie, index) => {
-            const key = serie.name;
-            const strokeColor = getChartColor(index)
-            return (
-              <Line
-                type="monotone"
-                key={key}
-                isAnimationActive={false}
-                strokeWidth={2}
-                dataKey="count"
-                stroke={strokeColor}
-                data={serie.data}
-                name={serie.name}
-              />
-            );
-          })}
-        </LineChart>
-        <ReportTable data={chart.data} />
+          <AutoSizer disableHeight>
+            {({ width }) => (
+              <LineChart width={width} height={width * 0.5}>
+                {/* <Legend /> */}
+                <YAxis dataKey={"count"}></YAxis>
+                <Tooltip content={<ReportLineChartTooltip />} />
+                {/* <Tooltip /> */}
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis
+                  dataKey="date"
+                  tickFormatter={(m: Date) => {
+                    return formatDate(m);
+                  }}
+                  tickLine={false}
+                  allowDuplicatedCategory={false}
+                />
+                {chart.data?.series
+                  .filter((serie) => {
+                    return visibleSeries.includes(serie.name);
+                  })
+                  .map((serie) => {
+                    const realIndex = chart.data?.series.findIndex(
+                      (item) => item.name === serie.name,
+                    );
+                    const key = serie.name;
+                    const strokeColor = getChartColor(realIndex);
+                    return (
+                      <Line
+                        type="monotone"
+                        key={key}
+                        isAnimationActive={false}
+                        strokeWidth={2}
+                        dataKey="count"
+                        stroke={strokeColor}
+                        data={serie.data}
+                        name={serie.name}
+                      />
+                    );
+                  })}
+              </LineChart>
+            )}
+          </AutoSizer>
+          {showTable && (
+            <ReportTable
+              data={chart.data}
+              visibleSeries={visibleSeries}
+              setVisibleSeries={setVisibleSeries}
+            />
+          )}
         </>
       )}
     </>

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>
                 );