add bar chart support and other fixes

2023-10-27 20:37:08 +02:00
parent d8c587ef90
commit ed7ed2ab24
26 changed files with 713 additions and 226 deletions
--- a/apps/web/src/components/report/ReportChartType.tsx
+++ b/apps/web/src/components/report/ReportChartType.tsx
@@ -0,0 +1,33 @@
+import { useDispatch, useSelector } from "@/redux";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+import {
+  changeChartType,
+  changeDateRanges,
+  changeInterval,
+} from "./reportSlice";
+import { Combobox } from "../ui/combobox";
+import { type IChartType } from "@/types";
+import { chartTypes } from "@/utils/constants";
+
+export function ReportChartType() {
+  const dispatch = useDispatch();
+  const type = useSelector((state) => state.report.chartType);
+
+  return (
+    <>
+      <div className="w-full max-w-[200px]">
+        <Combobox
+          placeholder="Chart type"
+          onChange={(value) => {
+            dispatch(changeChartType(value as IChartType));
+          }}
+          value={type}
+          items={Object.entries(chartTypes).map(([key, value]) => ({
+            label: value,
+            value: key,
+          }))}
+        />
+      </div>
+    </>
+  );
+}
--- a/apps/web/src/components/report/ReportDateRange.tsx
+++ b/apps/web/src/components/report/ReportDateRange.tsx
@@ -7,13 +7,14 @@ import { type IInterval } from "@/types";
 export function ReportDateRange() {
  const dispatch = useDispatch();
  const interval = useSelector((state) => state.report.interval);
-  
+  const chartType = useSelector((state) => state.report.chartType);
+
  return (
    <>
      <RadioGroup>
        <RadioGroupItem
          onClick={() => {
-            dispatch(changeDateRanges('today'));
+            dispatch(changeDateRanges("today"));
          }}
        >
          Today
@@ -68,29 +69,31 @@ export function ReportDateRange() {
          1 year
        </RadioGroupItem>
      </RadioGroup>
-      <div className="w-full max-w-[200px]">
-        <Combobox
-          placeholder="Interval"
-          onChange={(value) => {
-            dispatch(changeInterval(value as IInterval));
-          }}
-          value={interval}
-          items={[
-            {
-              label: "Hour",
-              value: "hour",
-            },
-            {
-              label: "Day",
-              value: "day",
-            },
-            {
-              label: "Month",
-              value: "month",
-            },
-          ]}
-        ></Combobox>
-      </div>
+      {chartType === "linear" && (
+        <div className="w-full max-w-[200px]">
+          <Combobox
+            placeholder="Interval"
+            onChange={(value) => {
+              dispatch(changeInterval(value as IInterval));
+            }}
+            value={interval}
+            items={[
+              {
+                label: "Hour",
+                value: "hour",
+              },
+              {
+                label: "Day",
+                value: "day",
+              },
+              {
+                label: "Month",
+                value: "month",
+              },
+            ]}
+          />
+        </div>
+      )}
    </>
  );
 }
--- a/apps/web/src/components/report/chart/ChartProvider.tsx
+++ b/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);
+}
--- a/apps/web/src/components/report/chart/ReportBarChart.tsx
+++ b/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>
+  );
+}
--- a/apps/web/src/components/report/chart/ReportLineChart.tsx
+++ b/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}
+        />
      )}
    </>
  );
--- a/apps/web/src/components/report/chart/ReportLineChartTooltip.tsx
+++ b/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">
--- a/apps/web/src/components/report/chart/ReportTable.tsx
+++ b/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[]>>;
 };
--- a/apps/web/src/components/report/chart/index.tsx
+++ b/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>
+})
--- a/apps/web/src/components/report/reportSlice.ts
+++ b/apps/web/src/components/report/reportSlice.ts
@@ -3,7 +3,9 @@ import {
  type IChartBreakdown,
  type IChartEvent,
  type IInterval,
+  type IChartType,
 } from "@/types";
+import { alphabetIds } from "@/utils/constants";
 import { getDaysOldDate } from "@/utils/date";
 import { type PayloadAction, createSlice } from "@reduxjs/toolkit";

@@ -13,15 +15,13 @@ type InitialState = IChartInput;
 const initialState: InitialState = {
  name: "screen_view",
  chartType: "linear",
-  startDate: getDaysOldDate(7),
-  endDate: new Date(),
+  startDate: getDaysOldDate(7).toISOString(),
+  endDate: new Date().toISOString(),
  interval: "day",
  breakdowns: [],
  events: [],
 };

-const IDS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"] as const;
-
 export const reportSlice = createSlice({
  name: "counter",
  initialState,
@@ -29,13 +29,13 @@ export const reportSlice = createSlice({
    reset() {
      return initialState
    },
-    setReport(state, action: PayloadAction<IChartInput>) {
-      return action.payload
+    setReport(state, action: PayloadAction<IChartInput>) {     
+      return action.payload      
    },
    // Events
    addEvent: (state, action: PayloadAction<Omit<IChartEvent, "id">>) => {
      state.events.push({
-        id: IDS[state.events.length]!,
+        id: alphabetIds[state.events.length]!,
        ...action.payload,
      });
    },
@@ -64,7 +64,7 @@ export const reportSlice = createSlice({
      action: PayloadAction<Omit<IChartBreakdown, "id">>,
    ) => {
      state.breakdowns.push({
-        id: IDS[state.breakdowns.length]!,
+        id: alphabetIds[state.breakdowns.length]!,
        ...action.payload,
      });
    },
@@ -91,28 +91,35 @@ export const reportSlice = createSlice({
    changeInterval: (state, action: PayloadAction<IInterval>) => {
      state.interval = action.payload;
    },
+    
+    // Chart type
+    changeChartType: (state, action: PayloadAction<IChartType>) => {
+      state.chartType = action.payload;
+    },

    // Date range
-    changeStartDate: (state, action: PayloadAction<Date>) => {
+    changeStartDate: (state, action: PayloadAction<string>) => {
      state.startDate = action.payload;
    },

    // Date range
-    changeEndDate: (state, action: PayloadAction<Date>) => {
+    changeEndDate: (state, action: PayloadAction<string>) => {
      state.endDate = action.payload;
    },

    changeDateRanges: (state, action: PayloadAction<number | 'today'>) => {
      if(action.payload === 'today') {
-        state.startDate = new Date();
-        state.endDate = new Date();
-        state.startDate.setHours(0,0,0,0)
+        const startDate = new Date()
+        startDate.setHours(0,0,0,0)
+
+        state.startDate = startDate.toISOString();
+        state.endDate = new Date().toISOString();
        state.interval = 'hour'
        return state
      }

-      state.startDate = getDaysOldDate(action.payload);
-      state.endDate = new Date();
+      state.startDate = getDaysOldDate(action.payload).toISOString();
+      state.endDate = new Date().toISOString()

      if (action.payload === 1) {
        state.interval = "hour";
@@ -137,6 +144,7 @@ export const {
  changeBreakdown,
  changeInterval,
  changeDateRanges,
+  changeChartType,
 } = reportSlice.actions;

 export default reportSlice.reducer;
--- a/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
+++ b/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
@@ -6,6 +6,7 @@ import { type ReportEventMoreProps } from "./ReportEventMore";
 import { type IChartBreakdown } from "@/types";
 import { ReportBreakdownMore } from "./ReportBreakdownMore";
 import { RenderDots } from "@/components/ui/RenderDots";
+import { ColorSquare } from "@/components/ColorSquare";

 export function ReportBreakdowns() {
  const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
@@ -36,9 +37,9 @@ export function ReportBreakdowns() {
          return (
            <div key={item.name} className="rounded-lg border">
              <div className="flex items-center gap-2 p-2 px-4">
-                <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-purple-500 text-xs font-medium text-white">
+                <ColorSquare>
                  {index}
-                </div>
+                </ColorSquare>
                <Combobox
                  value={item.name}
                  onChange={(value) => {
--- a/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
@@ -23,6 +23,7 @@ import { ComboboxMulti } from "@/components/ui/combobox-multi";
 import { Dropdown } from "@/components/Dropdown";
 import { operators } from "@/utils/constants";
 import { useMappings } from "@/hooks/useMappings";
+import { ColorSquare } from "@/components/ColorSquare";

 type ReportEventFiltersProps = {
  event: IChartEvent;
@@ -163,9 +164,9 @@ function Filter({ filter, event }: FilterProps) {
      className="px-4 py-2 shadow-[inset_6px_0_0] shadow-slate-200 first:border-t"
    >
      <div className="mb-2 flex items-center gap-2">
-        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-emerald-600 text-xs font-medium text-white">
+        <ColorSquare className="bg-emerald-500">
          <SlidersHorizontal size={10} />
-        </div>
+        </ColorSquare>
        <div className="flex flex-1 text-sm">
        <RenderDots truncate>{filter.name}</RenderDots>
        </div>
--- a/apps/web/src/components/report/sidebar/ReportEvents.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEvents.tsx
@@ -8,6 +8,7 @@ import { ReportEventMore, type ReportEventMoreProps } from "./ReportEventMore";
 import { type IChartEvent } from "@/types";
 import { Filter, GanttChart, Users } from "lucide-react";
 import { Dropdown } from "@/components/Dropdown";
+import { ColorSquare } from "@/components/ColorSquare";

 export function ReportEvents() {
  const [isCreating, setIsCreating] = useState(false);
@@ -42,9 +43,9 @@ export function ReportEvents() {
          return (
            <div key={event.name} className="rounded-lg border">
              <div className="flex items-center gap-2 p-2">
-                <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-purple-500 text-xs font-medium text-white">
+                <ColorSquare>
                  {event.id}
-                </div>
+                </ColorSquare>
                <Combobox
                  value={event.name}
                  onChange={(value) => {