diff --git a/.changeset/tender-lizards-shop.md b/.changeset/tender-lizards-shop.md new file mode 100644 index 00000000000..d0155ba0534 --- /dev/null +++ b/.changeset/tender-lizards-shop.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": patch +--- + +Added missing labels to "Users by time of the day" card at Engagement Dashboard page diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx index 7f7b11d013f..007e75f9547 100644 --- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx +++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx @@ -62,7 +62,21 @@ const UsersByTimeOfTheDaySection = ({ timezone }: UsersByTimeOfTheDaySectionProp return [dates, values]; }, [data, isLoading, utc]); - const tooltip = useCallback(({ cell }): ReactElement => {t('Value_users', { value: cell.data.y })}, [t]); + const tooltip = useCallback( + ({ cell }): ReactElement => { + return ( + + {moment(cell.data.x).format('ddd')}{' '} + {moment() + .set({ hour: parseInt(cell.serieId, 10), minute: 0, second: 0 }) + .format('LT')} +
+ {t('Value_users', { value: cell.data.y })} +
+ ); + }, + [t], + ); return ( <> @@ -124,14 +138,14 @@ const UsersByTimeOfTheDaySection = ({ timezone }: UsersByTimeOfTheDaySectionProp axisBottom={{ // TODO: Get it from theme tickSize: 0, - tickPadding: 4, + tickPadding: 8, tickRotation: 0, - format: (isoString): string => (dates?.length === 7 ? moment(isoString).format('dddd') : ''), + format: (isoString): string => (dates?.length === 8 ? moment(isoString).format('ddd') : ''), }} axisLeft={{ // TODO: Get it from theme tickSize: 0, - tickPadding: 4, + tickPadding: 8, tickRotation: 0, format: (hour): string => moment()