add bar chart support and other fixes

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

@@ -0,0 +1,47 @@
+import { pick } from "ramda";
+import { createContext, memo, useContext, useMemo } from "react";
+
+type ChartContextType = {
+  editMode: boolean;
+};
+
+type ChartProviderProps = {
+  children: React.ReactNode;
+} & ChartContextType;
+
+const ChartContext = createContext<ChartContextType>({
+  editMode: false,
+});
+
+export function ChartProvider({ children, editMode }: ChartProviderProps) {
+  return (
+    <ChartContext.Provider
+      value={useMemo(
+        () => ({
+          editMode,
+        }),
+        [editMode],
+      )}
+    >
+      {children}
+    </ChartContext.Provider>
+  );
+}
+
+export function withChartProivder<ComponentProps>(WrappedComponent: React.FC<ComponentProps>) {
+  const WithChartProvider = (props: ComponentProps & ChartContextType) => {
+    return (
+      <ChartProvider {...props}>
+        <WrappedComponent {...props} />
+      </ChartProvider>
+    )
+  }
+
+  WithChartProvider.displayName = `WithChartProvider(${WrappedComponent.displayName ?? WrappedComponent.name ?? 'Component'})`
+
+  return memo(WithChartProvider)
+}
+
+export function useChartContext() {
+  return useContext(ChartContext);
+}

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

@@ -0,0 +1,191 @@
+import { ColorSquare } from "@/components/ColorSquare";
+import { type IChartData } from "@/types";
+import { type RouterOutputs } from "@/utils/api";
+import { getChartColor } from "@/utils/theme";
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  createColumnHelper,
+  getSortedRowModel,
+  type SortingState,
+} from "@tanstack/react-table";
+import { memo, useEffect, useMemo, useState } from "react";
+import { useElementSize } from "usehooks-ts";
+import { useChartContext } from "./ChartProvider";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@/utils/cn";
+
+const columnHelper =
+  createColumnHelper<RouterOutputs["chart"]["chart"]["series"][number]>();
+
+type ReportBarChartProps = {
+  data: IChartData;
+};
+
+export function ReportBarChart({ data }: ReportBarChartProps) {
+  const { editMode } = useChartContext();
+  const [ref, { width }] = useElementSize();
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const table = useReactTable({
+    data: useMemo(
+      () => (editMode ? data.series : data.series.slice(0, 20)),
+      [editMode, data],
+    ),
+    columns: useMemo(() => {
+      return [
+        columnHelper.accessor((row) => row.name, {
+          id: "label",
+          header: () => "Label",
+          cell(info) {
+            return (
+              <div className="flex items-center gap-2">
+                <ColorSquare>{info.row.original.event.id}</ColorSquare>
+                {info.getValue()}
+              </div>
+            );
+          },
+          footer: (info) => info.column.id,
+          size: width ? width * 0.3 : undefined,
+        }),
+        columnHelper.accessor((row) => row.totalCount, {
+          id: "totalCount",
+          cell: (info) => (
+            <div className="text-right font-medium">{info.getValue()}</div>
+          ),
+          header: () => "Count",
+          footer: (info) => info.column.id,
+          size: width ? width * 0.1 : undefined,
+          enableSorting: true,
+        }),
+        columnHelper.accessor((row) => row.totalCount, {
+          id: "graph",
+          cell: (info) => (
+            <div
+              className="shine h-4 rounded [.mini_&]:h-3"
+              style={{
+                width:
+                  (info.getValue() / info.row.original.meta.highest) * 100 +
+                  "%",
+                background: getChartColor(info.row.index),
+              }}
+            />
+          ),
+          header: () => "Graph",
+          footer: (info) => info.column.id,
+          size: width ? width * 0.6 : undefined,
+        }),
+      ];
+    }, [width]),
+    columnResizeMode: "onChange",
+    state: {
+      sorting,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    debugTable: true,
+    debugHeaders: true,
+    debugColumns: true,
+  });
+  return (
+    <div ref={ref}>
+      {editMode && (
+        <div className="mb-8 flex flex-wrap gap-4">
+          {data.events.map((event) => {
+            return (
+              <div className="border border-border p-4" key={event.id}>
+                <div className="flex items-center gap-2 text-lg font-medium">
+                  <ColorSquare>{event.id}</ColorSquare> {event.name}
+                </div>
+                <div className="mt-6 font-mono text-5xl font-light">
+                  {new Intl.NumberFormat("en-IN", {
+                    maximumSignificantDigits: 20,
+                  }).format(event.count)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <div className="overflow-x-auto">
+        <table
+          {...{
+            className: editMode ? '' : 'mini',
+            style: {
+              width: table.getTotalSize(),
+            },
+          }}
+        >
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    {...{
+                      colSpan: header.colSpan,
+                      style: {
+                        width: header.getSize(),
+                      },
+                    }}
+                  >
+                    <div
+                      {...{
+                        className: cn(
+                          "flex items-center gap-2",
+                          header.column.getCanSort() &&
+                            "cursor-pointer select-none",
+                        ),
+                        onClick: header.column.getToggleSortingHandler(),
+                      }}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                      {{
+                        asc: <ChevronUp className="ml-auto" size={14} />,
+                        desc: <ChevronDown className="ml-auto" size={14} />,
+                      }[header.column.getIsSorted() as string] ?? null}
+                    </div>
+                    <div
+                      {...(editMode
+                        ? {
+                            onMouseDown: header.getResizeHandler(),
+                            onTouchStart: header.getResizeHandler(),
+                            className: `resizer ${
+                              header.column.getIsResizing() ? "isResizing" : ""
+                            }`,
+                            style: {},
+                          }
+                        : {})}
+                    />
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    key={cell.id}
+                    {...{
+                      style: {
+                        width: cell.column.getSize(),
+                      },
+                    }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -1,4 +1,3 @@
-import { api } from "@/utils/api";
 import {
   CartesianGrid,
   Line,
@@ -7,114 +6,86 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { ReportLineChartTooltip } from "./ReportLineChartTooltop";
+import { ReportLineChartTooltip } from "./ReportLineChartTooltip";
 import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
-import { type IChartInput } from "@/types";
+import { type IChartData, type IInterval } from "@/types";
 import { getChartColor } from "@/utils/theme";
 import { ReportTable } from "./ReportTable";
 import { useEffect, useRef, useState } from "react";
 import { AutoSizer } from "@/components/AutoSizer";
+import { useChartContext } from "./ChartProvider";
 
-type ReportLineChartProps = IChartInput & {
-  showTable?: boolean;
+type ReportLineChartProps = {
+  data: IChartData;
+  interval: IInterval;
 };
 
-export function ReportLineChart({
-  interval,
-  startDate,
-  endDate,
-  events,
-  breakdowns,
-  showTable,
-  chartType,
-  name,
-}: ReportLineChartProps) {
+export function ReportLineChart({ interval, data }: ReportLineChartProps) {
+  const { editMode } = useChartContext();
   const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
-
-  const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
-
-  const chart = api.chart.chart.useQuery(
-    {
-      interval,
-      chartType,
-      startDate,
-      endDate,
-      events,
-      breakdowns,
-      name,
-    },
-    {
-      enabled: events.length > 0 && !hasEmptyFilters,
-    },
-  );
-
   const formatDate = useFormatDateInterval(interval);
 
   const ref = useRef(false);
   useEffect(() => {
-    if (!ref.current && chart.data) {
+    if (!ref.current && data) {
       const max = 20;
 
       setVisibleSeries(
-        chart.data?.series?.slice(0, max).map((serie) => serie.name) ?? [],
+        data?.series?.slice(0, max).map((serie) => serie.name) ?? [],
       );
       // ref.current = true;
     }
-  }, [chart.data]);
+  }, [data]);
 
   return (
     <>
-      {chart.isSuccess && chart.data?.series?.[0]?.data && (
-        <>
-          <AutoSizer disableHeight>
-            {({ width }) => (
-              <LineChart width={width} height={Math.min(width * 0.5, 400)}>
-                <YAxis dataKey={"count"} width={30} fontSize={12}></YAxis>
-                <Tooltip content={<ReportLineChartTooltip />} />
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis
-                 fontSize={12}
-                  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}
+      <AutoSizer disableHeight>
+        {({ width }) => (
+          <LineChart width={width} height={Math.min(width * 0.5, 400)}>
+            <YAxis dataKey={"count"} width={30} fontSize={12}></YAxis>
+            <Tooltip content={<ReportLineChartTooltip />} />
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis
+              fontSize={12}
+              dataKey="date"
+              tickFormatter={(m: string) => {
+                return formatDate(m);
+              }}
+              tickLine={false}
+              allowDuplicatedCategory={false}
             />
-          )}
-        </>
+            {data?.series
+              .filter((serie) => {
+                return visibleSeries.includes(serie.name);
+              })
+              .map((serie) => {
+                const realIndex = 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>
+      {editMode && (
+        <ReportTable
+          data={data}
+          visibleSeries={visibleSeries}
+          setVisibleSeries={setVisibleSeries}
+        />
       )}
     </>
   );

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

@@ -1,5 +1,6 @@
 import { useMappings } from "@/hooks/useMappings";
 import { type IToolTipProps } from "@/types";
+import { formatDate } from "@/utils/date";
 
 type ReportLineChartTooltipProps = IToolTipProps<{
   color: string;
@@ -29,9 +30,11 @@ export function ReportLineChartTooltip({
   const sorted = payload.slice(0).sort((a, b) => b.value - a.value);
   const visible = sorted.slice(0, limit);
   const hidden = sorted.slice(limit);
+  const first = visible[0]!;
 
   return (
     <div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
+      {formatDate(new Date(first.payload.date))}
       {visible.map((item) => {
         return (
           <div key={item.payload.label} className="flex gap-2">

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

@@ -1,15 +1,15 @@
 import * as React from "react";
-import { type RouterOutputs } from "@/utils/api";
 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";
 import { useMappings } from "@/hooks/useMappings";
+import { type IChartData } from "@/types";
 
 
 type ReportTableProps = {
-  data: RouterOutputs["chart"]["chart"];
+  data: IChartData;
   visibleSeries: string[];
   setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
 };

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

@@ -0,0 +1,64 @@
+import { api } from "@/utils/api";
+import { type IChartInput } from "@/types";
+import { ReportBarChart } from "./ReportBarChart";
+import { ReportLineChart } from "./ReportLineChart";
+import { withChartProivder } from "./ChartProvider";
+
+type ReportLineChartProps = IChartInput
+
+export const Chart = withChartProivder(({
+  interval,
+  startDate,
+  endDate,
+  events,
+  breakdowns,
+  chartType,
+  name,
+}: ReportLineChartProps) =>  {
+  const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
+  const chart = api.chart.chart.useQuery(
+    {
+      interval,
+      chartType,
+      startDate,
+      endDate,
+      events,
+      breakdowns,
+      name,
+    },
+    {
+      keepPreviousData: true,
+      enabled: events.length > 0 && !hasEmptyFilters,
+    },
+  );
+
+  const anyData = Boolean(chart.data?.series?.[0]?.data)
+
+  if(chart.isFetching && !anyData) {
+    return (<p>Loading...</p>)
+  }
+
+  if(chart.isError) {
+    return (<p>Error</p>)
+  }
+
+  if(!chart.isSuccess) {
+    return (<p>Loading...</p>)
+  }
+
+
+  if(!anyData) {
+    return (<p>No data</p>)
+  } 
+  
+  if(chartType === 'bar') {
+    return <ReportBarChart data={chart.data} />
+  }
+  
+  if(chartType === 'linear') {
+    return <ReportLineChart interval={interval} data={chart.data} />
+  }
+
+
+  return <p>Chart type &quot;{chartType}&quot; is not supported yet.</p>
+})