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==}