diff --git a/README.md b/README.md index 1d3007b1..6939b374 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ As of today (2023-12-12) I have more then 1.2 million events in PSQL and perform ### GUI - [x] Fix tables on settings -- [ ] Rename event label +- [x] Rename event label - [ ] Real time data (mostly screen_views stats) - [ ] Active users (5min, 10min, 30min) - [x] Save report to a specific dashboard diff --git a/apps/web/package.json b/apps/web/package.json index 59065e3e..64e9f722 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -40,6 +40,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "cmdk": "^0.2.0", + "lodash.debounce": "^4.0.8", "lottie-react": "^2.4.0", "lucide-react": "^0.286.0", "mitt": "^3.0.1", diff --git a/apps/web/src/components/report/sidebar/ReportEvents.tsx b/apps/web/src/components/report/sidebar/ReportEvents.tsx index 87302819..ab3b6513 100644 --- a/apps/web/src/components/report/sidebar/ReportEvents.tsx +++ b/apps/web/src/components/report/sidebar/ReportEvents.tsx @@ -2,6 +2,8 @@ import { useState } from 'react'; import { ColorSquare } from '@/components/ColorSquare'; import { Dropdown } from '@/components/Dropdown'; import { Combobox } from '@/components/ui/combobox'; +import { Input } from '@/components/ui/input'; +import { useDebounceFn } from '@/hooks/useDebounceFn'; import { useOrganizationParams } from '@/hooks/useOrganizationParams'; import { useDispatch, useSelector } from '@/redux'; import type { IChartEvent } from '@/types'; @@ -25,6 +27,9 @@ export function ReportEvents() { value: item.name, label: item.name, })); + const dispatchChangeEvent = useDebounceFn((event: IChartEvent) => { + dispatch(changeEvent(event)); + }); const handleMore = (event: IChartEvent) => { const callback: ReportEventMoreProps['onClick'] = (action) => { @@ -64,6 +69,18 @@ export function ReportEvents() { items={eventsCombobox} placeholder="Select event" /> + { + dispatchChangeEvent({ + ...event, + displayName: e.target.value, + }); + }} + /> diff --git a/apps/web/src/hooks/useDebounceFn.ts b/apps/web/src/hooks/useDebounceFn.ts new file mode 100644 index 00000000..411ad548 --- /dev/null +++ b/apps/web/src/hooks/useDebounceFn.ts @@ -0,0 +1,14 @@ +import { useEffect } from 'react'; +import debounce from 'lodash.debounce'; + +export function useDebounceFn(fn: T, ms = 500): T { + const debouncedFn = debounce(fn, ms); + + useEffect(() => { + return () => { + debouncedFn.cancel(); + }; + }); + + return debouncedFn; +} diff --git a/apps/web/src/server/api/routers/chart.ts b/apps/web/src/server/api/routers/chart.ts index d4c87c70..dd21b83a 100644 --- a/apps/web/src/server/api/routers/chart.ts +++ b/apps/web/src/server/api/routers/chart.ts @@ -213,7 +213,7 @@ function propertyNameToSql(name: string) { } function getEventLegend(event: IChartEvent) { - return `${event.name} (${event.id})`; + return event.displayName ?? `${event.name} (${event.id})`; } function getDatesFromRange(range: IChartRange) { diff --git a/apps/web/src/server/api/routers/report.ts b/apps/web/src/server/api/routers/report.ts index 8a68c87f..5e381df2 100644 --- a/apps/web/src/server/api/routers/report.ts +++ b/apps/web/src/server/api/routers/report.ts @@ -35,8 +35,8 @@ function transformEvent( segment: event.segment ?? 'event', filters: (event.filters ?? []).map(transformFilter), id: event.id ?? alphabetIds[index]!, - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - name: event.name || 'Untitled', + name: event.name || 'unknown_event', + displayName: event.displayName, }; } diff --git a/apps/web/src/utils/validation.ts b/apps/web/src/utils/validation.ts index 0e5d3962..dd5564d2 100644 --- a/apps/web/src/utils/validation.ts +++ b/apps/web/src/utils/validation.ts @@ -10,6 +10,7 @@ function objectToZodEnums(obj: Record): [K, ...K[]] { export const zChartEvent = z.object({ id: z.string(), name: z.string(), + displayName: z.string().optional(), segment: z.enum(['event', 'user', 'user_average']), filters: z.array( z.object({ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fefaf122..32b77f5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -172,6 +172,9 @@ importers: cmdk: specifier: ^0.2.0 version: 0.2.0(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0) + lodash.debounce: + specifier: ^4.0.8 + version: 4.0.8 lottie-react: specifier: ^2.4.0 version: 2.4.0(react-dom@18.2.0)(react@18.2.0) @@ -4319,6 +4322,10 @@ packages: dependencies: p-locate: 5.0.0 + /lodash.debounce@4.0.8: + resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} + dev: false + /lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}