web: added the base for the web project

2023-10-26 20:53:11 +02:00
parent 15e29edaa7
commit 8a87fff689
107 changed files with 3607 additions and 512 deletions
--- a/apps/web/src/components/report/ReportDateRange.tsx
+++ b/apps/web/src/components/report/ReportDateRange.tsx
@@ -13,11 +13,18 @@ export function ReportDateRange() {
      <RadioGroup>
        <RadioGroupItem
          onClick={() => {
-            dispatch(changeDateRanges(1));
+            dispatch(changeDateRanges('today'));
          }}
        >
          Today
        </RadioGroupItem>
+        <RadioGroupItem
+          onClick={() => {
+            dispatch(changeDateRanges(1));
+          }}
+        >
+          24 hours
+        </RadioGroupItem>
        <RadioGroupItem
          onClick={() => {
            dispatch(changeDateRanges(7));
--- a/apps/web/src/components/report/chart/ReportLineChart.tsx
+++ b/apps/web/src/components/report/chart/ReportLineChart.tsx
@@ -31,7 +31,9 @@ export function ReportLineChart({
 }: ReportLineChartProps) {
  const [visibleSeries, setVisibleSeries] = useState<string[]>([]);

-  const chart = api.chartMeta.chart.useQuery(
+  const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
+
+  const chart = api.chart.chart.useQuery(
    {
      interval,
      chartType,
@@ -42,7 +44,7 @@ export function ReportLineChart({
      name,
    },
    {
-      enabled: events.length > 0,
+      enabled: events.length > 0 && !hasEmptyFilters,
    },
  );

@@ -67,10 +69,11 @@ export function ReportLineChart({
          <AutoSizer disableHeight>
            {({ width }) => (
              <LineChart width={width} height={Math.min(width * 0.5, 400)}>
-                <YAxis dataKey={"count"}></YAxis>
+                <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);
--- a/apps/web/src/components/report/chart/ReportLineChartTooltop.tsx
+++ b/apps/web/src/components/report/chart/ReportLineChartTooltop.tsx
@@ -1,3 +1,4 @@
+import { useMappings } from "@/hooks/useMappings";
 import { type IToolTipProps } from "@/types";

 type ReportLineChartTooltipProps = IToolTipProps<{
@@ -8,13 +9,15 @@ type ReportLineChartTooltipProps = IToolTipProps<{
    count: number;
    label: string;
  };
-}>
+}>;

 export function ReportLineChartTooltip({
  active,
  payload,
 }: ReportLineChartTooltipProps) {
-  if (!active || !payload) {
+  const getLabel = useMappings();
+
+  if (!active || !payload) {
    return null;
  }

@@ -22,7 +25,6 @@ export function ReportLineChartTooltip({
    return null;
  }

-
  const limit = 3;
  const sorted = payload.slice(0).sort((a, b) => b.value - a.value);
  const visible = sorted.slice(0, limit);
@@ -39,7 +41,7 @@ export function ReportLineChartTooltip({
            ></div>
            <div className="flex flex-col">
              <div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
-                {item.payload.label}
+                {getLabel(item.payload.label)}
              </div>
              <div>{item.payload.count}</div>
            </div>
--- a/apps/web/src/components/report/chart/ReportTable.tsx
+++ b/apps/web/src/components/report/chart/ReportTable.tsx
@@ -5,9 +5,11 @@ 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";
+

 type ReportTableProps = {
-  data: RouterOutputs["chartMeta"]["chart"];
+  data: RouterOutputs["chart"]["chart"];
  visibleSeries: string[];
  setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
 };
@@ -19,6 +21,7 @@ export function ReportTable({
 }: ReportTableProps) {
  const interval = useSelector((state) => state.report.interval);
  const formatDate = useFormatDateInterval(interval);
+  const getLabel = useMappings()

  function handleChange(name: string, checked: boolean) {
    setVisibleSeries((prev) => {
@@ -34,7 +37,7 @@ export function ReportTable({
  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'
+  const total = 'bg-gray-50 text-emerald-600 font-medium border-r border-border'
  return (
    <div className="flex w-fit max-w-full rounded-md border border-border">
      {/* Labels */}
@@ -63,7 +66,7 @@ export function ReportTable({
                checked={checked}
              />
              <div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
-                {serie.name}
+                {getLabel(serie.name)}
              </div>
            </div>
          );
--- a/apps/web/src/components/report/reportSlice.ts
+++ b/apps/web/src/components/report/reportSlice.ts
@@ -11,7 +11,7 @@ type InitialState = IChartInput;

 // First approach: define the initial state using that type
 const initialState: InitialState = {
-  name: "",
+  name: "screen_view",
  chartType: "linear",
  startDate: getDaysOldDate(7),
  endDate: new Date(),
@@ -102,7 +102,18 @@ export const reportSlice = createSlice({
      state.endDate = action.payload;
    },

-    changeDateRanges: (state, action: PayloadAction<number>) => {
+    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)
+        state.interval = 'hour'
+        return state
+      }
+
+      state.startDate = getDaysOldDate(action.payload);
+      state.endDate = new Date();
+
      if (action.payload === 1) {
        state.interval = "hour";
      } else if (action.payload <= 30) {
@@ -110,8 +121,6 @@ export const reportSlice = createSlice({
      } else {
        state.interval = "month";
      }
-      state.startDate = getDaysOldDate(action.payload);
-      state.endDate = new Date();
    },
  },
 });
--- a/apps/web/src/components/report/sidebar/ReportBreakdownMore.tsx
+++ b/apps/web/src/components/report/sidebar/ReportBreakdownMore.tsx
@@ -34,7 +34,7 @@ export function ReportBreakdownMore({ onClick }: ReportBreakdownMoreProps) {
            <MoreHorizontal />
          </Button>
        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[200px]">
+        <DropdownMenuContent align="start" className="w-[200px]">
          <DropdownMenuGroup>
            <DropdownMenuItem className="text-red-600" onClick={() => onClick('remove')}>
              <Trash className="mr-2 h-4 w-4" />
--- a/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
+++ b/apps/web/src/components/report/sidebar/ReportBreakdowns.tsx
@@ -5,14 +5,15 @@ import { addBreakdown, changeBreakdown, removeBreakdown } from "../reportSlice";
 import { type ReportEventMoreProps } from "./ReportEventMore";
 import { type IChartBreakdown } from "@/types";
 import { ReportBreakdownMore } from "./ReportBreakdownMore";
+import { RenderDots } from "@/components/ui/RenderDots";

 export function ReportBreakdowns() {
  const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
  const dispatch = useDispatch();
-  const propertiesQuery = api.chartMeta.properties.useQuery();
+  const propertiesQuery = api.chart.properties.useQuery();
  const propertiesCombobox = (propertiesQuery.data ?? []).map((item) => ({
    value: item,
-    label: item,
+    label: item, // <RenderDots truncate>{item}</RenderDots>,
  }));

  const handleMore = (breakdown: IChartBreakdown) => {
--- a/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
@@ -1,10 +1,10 @@
 import { api } from "@/utils/api";
-import { type IChartEvent } from "@/types";
 import {
-  CreditCard,
-  SlidersHorizontal,
-  Trash,
-} from "lucide-react";
+  type IChartEvent,
+  type IChartEventFilterValue,
+  type IChartEventFilter,
+} from "@/types";
+import { CreditCard, SlidersHorizontal, Trash } from "lucide-react";
 import {
  CommandDialog,
  CommandEmpty,
@@ -18,8 +18,11 @@ import { type Dispatch } from "react";
 import { RenderDots } from "@/components/ui/RenderDots";
 import { useDispatch } from "@/redux";
 import { changeEvent } from "../reportSlice";
-import { Combobox } from "@/components/ui/combobox";
 import { Button } from "@/components/ui/button";
+import { ComboboxMulti } from "@/components/ui/combobox-multi";
+import { Dropdown } from "@/components/Dropdown";
+import { operators } from "@/utils/constants";
+import { useMappings } from "@/hooks/useMappings";

 type ReportEventFiltersProps = {
  event: IChartEvent;
@@ -33,7 +36,7 @@ export function ReportEventFilters({
  setIsCreating,
 }: ReportEventFiltersProps) {
  const dispatch = useDispatch();
-  const propertiesQuery = api.chartMeta.properties.useQuery(
+  const propertiesQuery = api.chart.properties.useQuery(
    {
      event: event.name,
    },
@@ -50,7 +53,7 @@ export function ReportEventFilters({
        })}

        <CommandDialog open={isCreating} onOpenChange={setIsCreating} modal>
-          <CommandInput placeholder="Type a command or search..." />
+          <CommandInput placeholder="Search properties" />
          <CommandList>
            <CommandEmpty>Such emptyness 🤨</CommandEmpty>
            <CommandGroup heading="Properties">
@@ -67,7 +70,8 @@ export function ReportEventFilters({
                          {
                            id: (event.filters.length + 1).toString(),
                            name: item,
-                            value: "",
+                            operator: "is",
+                            value: [],
                          },
                        ],
                      }),
@@ -93,8 +97,9 @@ type FilterProps = {
 };

 function Filter({ filter, event }: FilterProps) {
+  const getLabel = useMappings()
  const dispatch = useDispatch();
-  const potentialValues = api.chartMeta.values.useQuery({
+  const potentialValues = api.chart.values.useQuery({
    event: event.name,
    property: filter.name,
  });
@@ -102,7 +107,7 @@ function Filter({ filter, event }: FilterProps) {
  const valuesCombobox =
    potentialValues.data?.values?.map((item) => ({
      value: item,
-      label: item,
+      label: getLabel(item),
    })) ?? [];

  const removeFilter = () => {
@@ -114,7 +119,9 @@ function Filter({ filter, event }: FilterProps) {
    );
  };

-  const changeFilter = (value: string) => {
+  const changeFilterValue = (
+    value: IChartEventFilterValue | IChartEventFilterValue[],
+  ) => {
    dispatch(
      changeEvent({
        ...event,
@@ -122,7 +129,25 @@ function Filter({ filter, event }: FilterProps) {
          if (item.id === filter.id) {
            return {
              ...item,
-              value,
+              value: Array.isArray(value) ? value : [value],
+            };
+          }
+
+          return item;
+        }),
+      }),
+    );
+  };
+
+  const changeFilterOperator = (operator: IChartEventFilter["operator"]) => {
+    dispatch(
+      changeEvent({
+        ...event,
+        filters: event.filters.map((item) => {
+          if (item.id === filter.id) {
+            return {
+              ...item,
+              operator,
            };
          }

@@ -141,21 +166,54 @@ function Filter({ filter, event }: FilterProps) {
        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-emerald-600 text-xs font-medium text-white">
          <SlidersHorizontal size={10} />
        </div>
-        <RenderDots className="text-sm flex-1">{filter.name}</RenderDots>
+        <div className="flex flex-1 text-sm">
+        <RenderDots truncate>{filter.name}</RenderDots>
+        </div>
        <Button variant="ghost" size="sm" onClick={removeFilter}>
          <Trash size={16} />
        </Button>
      </div>
-      {/* <ComboboxMulti items={valuesCombobox} selected={[]} setSelected={(fn) => {
-        return fn(filter.value)
-        //
-      }} /> */}
-      <Combobox
+      <div className="flex gap-1">
+        <Dropdown
+          onChange={changeFilterOperator}
+          items={Object.entries(operators).map(([key, value]) => ({
+            value: key as IChartEventFilter["operator"],
+            label: value,
+          }))}
+          label="Segment"
+        >
+          <Button variant={"ghost"} className="whitespace-nowrap">
+            {operators[filter.operator]}
+          </Button>
+        </Dropdown>
+        <ComboboxMulti
+          placeholder="Select values"
+          items={valuesCombobox}
+          selected={filter.value.map((item) => ({
+            value: item?.toString() ?? "__filter_value_null__",
+            label: getLabel(item?.toString() ?? "__filter_value_null__"),
+          }))}
+          setSelected={(setFn) => {
+            if(typeof setFn === "function") {
+              const newValues = setFn(
+                filter.value.map((item) => ({
+                  value: item?.toString() ?? "__filter_value_null__",
+                  label: getLabel(item?.toString() ?? "__filter_value_null__"),
+                })),
+              );
+              changeFilterValue(newValues.map((item) => item.value));
+            } else {
+              changeFilterValue(setFn.map((item) => item.value));
+            }
+          }}
+        />
+      </div>
+      {/* <Combobox
        items={valuesCombobox}
        value={filter.value}
        placeholder="Select value"
        onChange={changeFilter}
-      />
+      /> */}
      {/* <Input
        value={filter.value}
        onChange={(e) => {
--- a/apps/web/src/components/report/sidebar/ReportEvents.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEvents.tsx
@@ -6,12 +6,14 @@ import { ReportEventFilters } from "./ReportEventFilters";
 import { useState } from "react";
 import { ReportEventMore, type ReportEventMoreProps } from "./ReportEventMore";
 import { type IChartEvent } from "@/types";
+import { Filter, GanttChart, Users } from "lucide-react";
+import { Dropdown } from "@/components/Dropdown";

 export function ReportEvents() {
  const [isCreating, setIsCreating] = useState(false);
  const selectedEvents = useSelector((state) => state.report.events);
  const dispatch = useDispatch();
-  const eventsQuery = api.chartMeta.events.useQuery();
+  const eventsQuery = api.chart.events.useQuery();
  const eventsCombobox = (eventsQuery.data ?? []).map((item) => ({
    value: item.name,
    label: item.name,
@@ -38,9 +40,11 @@ export function ReportEvents() {
      <div className="flex flex-col gap-4">
        {selectedEvents.map((event) => {
          return (
-            <div key={event.name} className="border rounded-lg">
-              <div className="flex gap-2 items-center p-2 px-4">
-                <div className="flex-shrink-0 bg-purple-500 w-5 h-5 rounded text-xs flex items-center justify-center text-white font-medium">{event.id}</div>
+            <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">
+                  {event.id}
+                </div>
                <Combobox
                  value={event.name}
                  onChange={(value) => {
@@ -57,10 +61,50 @@ export function ReportEvents() {
                />
                <ReportEventMore onClick={handleMore(event)} />
              </div>
-              <ReportEventFilters
-                {...{ isCreating, setIsCreating, event }}

-              />
+              {/* Segment and Filter buttons */}
+              <div className="flex gap-2 p-2 pt-0 text-sm">
+                <Dropdown
+                  onChange={(segment) => {
+                    dispatch(
+                      changeEvent({
+                        ...event,
+                        segment,
+                      }),
+                    );
+                  }}
+                  items={[
+                    {
+                      value: "event",
+                      label: "All events",
+                    },
+                    {
+                      value: "user",
+                      label: "Unique users",
+                    },
+                  ]}
+                  label="Segment"
+                >
+                  <button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs">
+                    {event.segment === "user" ? (
+                      <><Users size={12} /> Unique users</>
+                      ) : (
+                      <><GanttChart size={12} /> All events</>
+                    )}
+                  </button>
+                </Dropdown>
+                <button
+                  onClick={() => {
+                    handleMore(event)("createFilter");
+                  }}
+                  className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs"
+                >
+                  <Filter size={12} /> Filter
+                </button>
+              </div>
+
+              {/* Filters */}
+              <ReportEventFilters {...{ isCreating, setIsCreating, event }} />
            </div>
          );
        })}
@@ -71,6 +115,7 @@ export function ReportEvents() {
            dispatch(
              addEvent({
                name: value,
+                segment: "event",
                filters: [],
              }),
            );