forked from twentyhq/twenty
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add dynamic dates for webhookGraphDataUsage (twentyhq#7720)
**Before:** Only last 5 days where displayed on Developers Settings Webhook Usage Graph. ![image](https://github.com/user-attachments/assets/7b7f2e6b-9637-489e-a7a7-5a3cb70525aa) **Now** Added component where you can select the time range where you want to view the webhook usage. To do better the styling and content depassing . <img width="652" alt="Screenshot 2024-10-15 at 16 56 45" src="https://github.com/user-attachments/assets/d06e7f4c-a689-49a0-8839-f015ce36bab9"> **In order to test** 1. Set ANALYTICS_ENABLED to true 2. Set TINYBIRD_TOKEN to your token from the workspace twenty_analytics_playground 3. Write your client tinybird token in SettingsDeveloppersWebhookDetail.tsx in line 93 4. Create a Webhook in twenty and set wich events it needs to track 5. Run twenty-worker in order to make the webhooks work. 6. Do your tasks in order to populate the data 7. Enter to settings> webhook>your webhook and the statistics section should be displayed. 8. Select the desired time range in the dropdown **To do list** - Tooltip is truncated when accessing values at the right end of the graph - DateTicks needs to follow a more clear standard - Update this PR with more representative images
- Loading branch information
Showing
28 changed files
with
631 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { createState } from 'twenty-ui'; | ||
|
||
export const isAnalyticsEnabledState = createState<boolean>({ | ||
key: 'isAnalyticsEnabled', | ||
defaultValue: false, | ||
}); |
11 changes: 11 additions & 0 deletions
11
packages/twenty-front/src/modules/localization/constants/DateFormatWithoutYear.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { DateFormat } from '@/localization/constants/DateFormat'; | ||
|
||
type DateFormatWithoutYear = { | ||
[K in keyof typeof DateFormat]: string; | ||
}; | ||
export const DATE_FORMAT_WITHOUT_YEAR: DateFormatWithoutYear = { | ||
SYSTEM: 'SYSTEM', | ||
MONTH_FIRST: 'MMM d', | ||
DAY_FIRST: 'd MMM', | ||
YEAR_FIRST: 'MMM d', | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
.../src/modules/localization/utils/__tests__/formatDateISOStringToDateTimeSimplified.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
import { detectDateFormat } from '@/localization/utils/detectDateFormat'; | ||
import { formatDateISOStringToDateTimeSimplified } from '@/localization/utils/formatDateISOStringToDateTimeSimplified'; | ||
import { formatInTimeZone } from 'date-fns-tz'; | ||
// Mock the imported modules | ||
jest.mock('@/localization/utils/detectDateFormat'); | ||
jest.mock('date-fns-tz'); | ||
|
||
describe('formatDateISOStringToDateTimeSimplified', () => { | ||
const mockDate = new Date('2023-08-15T10:30:00Z'); | ||
const mockTimeZone = 'America/New_York'; | ||
const mockTimeFormat = 'HH:mm'; | ||
|
||
beforeEach(() => { | ||
jest.resetAllMocks(); | ||
}); | ||
|
||
it('should format the date correctly when DATE_FORMAT is MONTH_FIRST', () => { | ||
detectDateFormat.mockReturnValue('MONTH_FIRST'); | ||
formatInTimeZone.mockReturnValue('Oct 15 · 06:30'); | ||
|
||
const result = formatDateISOStringToDateTimeSimplified( | ||
mockDate, | ||
mockTimeZone, | ||
mockTimeFormat, | ||
); | ||
|
||
expect(detectDateFormat).toHaveBeenCalled(); | ||
expect(formatInTimeZone).toHaveBeenCalledWith( | ||
mockDate, | ||
mockTimeZone, | ||
'MMM d · HH:mm', | ||
); | ||
expect(result).toBe('Oct 15 · 06:30'); | ||
}); | ||
|
||
it('should format the date correctly when DATE_FORMAT is DAY_FIRST', () => { | ||
detectDateFormat.mockReturnValue('DAY_FIRST'); | ||
formatInTimeZone.mockReturnValue('15 Oct · 06:30'); | ||
|
||
const result = formatDateISOStringToDateTimeSimplified( | ||
mockDate, | ||
mockTimeZone, | ||
mockTimeFormat, | ||
); | ||
|
||
expect(detectDateFormat).toHaveBeenCalled(); | ||
expect(formatInTimeZone).toHaveBeenCalledWith( | ||
mockDate, | ||
mockTimeZone, | ||
'd MMM · HH:mm', | ||
); | ||
expect(result).toBe('15 Oct · 06:30'); | ||
}); | ||
|
||
it('should use the provided time format', () => { | ||
detectDateFormat.mockReturnValue('MONTH_FIRST'); | ||
formatInTimeZone.mockReturnValue('Oct 15 · 6:30 AM'); | ||
|
||
const result = formatDateISOStringToDateTimeSimplified( | ||
mockDate, | ||
mockTimeZone, | ||
'h:mm aa', | ||
); | ||
|
||
expect(formatInTimeZone).toHaveBeenCalledWith( | ||
mockDate, | ||
mockTimeZone, | ||
'MMM d · h:mm aa', | ||
); | ||
expect(result).toBe('Oct 15 · 6:30 AM'); | ||
}); | ||
|
||
it('should handle different time zones', () => { | ||
detectDateFormat.mockReturnValue('MONTH_FIRST'); | ||
formatInTimeZone.mockReturnValue('Oct 16 · 02:30'); | ||
|
||
const result = formatDateISOStringToDateTimeSimplified( | ||
mockDate, | ||
'Asia/Tokyo', | ||
mockTimeFormat, | ||
); | ||
|
||
expect(formatInTimeZone).toHaveBeenCalledWith( | ||
mockDate, | ||
'Asia/Tokyo', | ||
'MMM d · HH:mm', | ||
); | ||
expect(result).toBe('Oct 16 · 02:30'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
packages/twenty-front/src/modules/localization/utils/detectTimeFormat.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,14 @@ | ||
import { TimeFormat } from '@/localization/constants/TimeFormat'; | ||
import { isDefined } from '~/utils/isDefined'; | ||
|
||
export const detectTimeFormat = () => { | ||
export const detectTimeFormat = (): keyof typeof TimeFormat => { | ||
const isHour12 = Intl.DateTimeFormat(navigator.language, { | ||
hour: 'numeric', | ||
}).resolvedOptions().hour12; | ||
|
||
if (isDefined(isHour12) && isHour12) { | ||
return TimeFormat.HOUR_12; | ||
return 'HOUR_12'; | ||
} | ||
|
||
return TimeFormat.HOUR_24; | ||
return 'HOUR_24'; | ||
}; |
18 changes: 18 additions & 0 deletions
18
...es/twenty-front/src/modules/localization/utils/formatDateISOStringToDateTimeSimplified.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { DATE_FORMAT_WITHOUT_YEAR } from '@/localization/constants/DateFormatWithoutYear'; | ||
import { TimeFormat } from '@/localization/constants/TimeFormat'; | ||
import { detectDateFormat } from '@/localization/utils/detectDateFormat'; | ||
import { formatInTimeZone } from 'date-fns-tz'; | ||
|
||
export const formatDateISOStringToDateTimeSimplified = ( | ||
date: Date, | ||
timeZone: string, | ||
timeFormat: TimeFormat, | ||
) => { | ||
const simplifiedDateFormat = DATE_FORMAT_WITHOUT_YEAR[detectDateFormat()]; | ||
|
||
return formatInTimeZone( | ||
date, | ||
timeZone, | ||
`${simplifiedDateFormat} · ${timeFormat}`, | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.