upstream-rocketchat/apps/meteor/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx

import { ResponsiveLine } from '@nivo/line';
import { Box, FlexContainer, FlexItem, Skeleton, Tile } from '@rocket.chat/fuselage';
import colors from '@rocket.chat/fuselage-tokens/dist/colors.json';
import { addDays, startOfDay, differenceInDays, endOfDay, subDays, format } from 'date-fns';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';

import { useActiveUsers } from './useActiveUsers';
import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton';
import CounterSet from '../../../../components/dataView/CounterSet';
import { useFormatDate } from '../../../../hooks/useFormatDate';
import EngagementDashboardCardFilter from '../EngagementDashboardCardFilter';
import LegendSymbol from '../dataView/LegendSymbol';

export type ActiveUsersSectionProps = {
	timezone: 'utc' | 'local';
};

const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps) => {
	const utc = timezone === 'utc';
	const { data } = useActiveUsers({ utc });

	const [
		countDailyActiveUsers,
		diffDailyActiveUsers,
		countWeeklyActiveUsers,
		diffWeeklyActiveUsers,
		countMonthlyActiveUsers,
		diffMonthlyActiveUsers,
		dauValues = [],
		wauValues = [],
		mauValues = [],
	] = useMemo(() => {
		if (!data) {
			return [];
		}

		const startDate = new Date(data.start);
		const createPoint = (i: number): { x: Date; y: number } => ({
			x: startOfDay(addDays(startDate, i)),
			y: 0,
		});

		const daysCount = differenceInDays(new Date(data.end), startDate);
		const createPoints = (): { x: Date; y: number }[] => Array.from({ length: daysCount }, (_, i) => createPoint(i));

		const dauValuesLocal = createPoints();
		const prevDauValue = createPoint(-1);
		const wauValuesLocal = createPoints();
		const prevWauValue = createPoint(-1);
		const mauValuesLocal = createPoints();
		const prevMauValue = createPoint(-1);

		const usersListsMap = data.month.reduce<{ [x: number]: string[] }>((map, dayData) => {
			const d = utc
				? new Date(Date.UTC(dayData.year, dayData.month - 1, dayData.day))
				: new Date(dayData.year, dayData.month - 1, dayData.day);
			const date = utc ? new Date(Date.UTC(dayData.year, dayData.month - 1, dayData.day, 23, 59, 59, 999)) : endOfDay(d);
			const dateOffset = differenceInDays(date, startDate);
			if (dateOffset >= 0 && dauValuesLocal[dateOffset]) {
				map[dateOffset] = dayData.usersList;
				dauValuesLocal[dateOffset].y = dayData.users;
			}
			return map;
		}, {});

		const distributeValueOverPoints = (
			usersListsMap: { [x: number]: string[] },
			dateOffset: number,
			count: number,
			array: { x: Date; y: number }[],
		): void => {
			const usersSet = new Set();
			for (let k = dateOffset; count > 0; k--, count--) {
				if (usersListsMap[k]) {
					usersListsMap[k].map((userId) => usersSet.add(userId));
				}
			}

			array[dateOffset].y = usersSet.size;
		};

		for (let i = 0; i < dauValuesLocal.length; i++) {
			distributeValueOverPoints(usersListsMap, i, 7, wauValuesLocal);
			distributeValueOverPoints(usersListsMap, i, 30, mauValuesLocal);
		}
		prevWauValue.y = wauValuesLocal[dauValuesLocal.length - 2].y;
		prevMauValue.y = mauValuesLocal[dauValuesLocal.length - 2].y;
		prevDauValue.y = dauValuesLocal[dauValuesLocal.length - 2].y;

		return [
			dauValuesLocal[dauValuesLocal.length - 1].y,
			dauValuesLocal[dauValuesLocal.length - 1].y - prevDauValue.y,
			wauValuesLocal[wauValuesLocal.length - 1].y,
			wauValuesLocal[wauValuesLocal.length - 1].y - prevWauValue.y,
			mauValuesLocal[mauValuesLocal.length - 1].y,
			mauValuesLocal[mauValuesLocal.length - 1].y - prevMauValue.y,
			dauValuesLocal,
			wauValuesLocal,
			mauValuesLocal,
		];
	}, [data, utc]);

	const formatDate = useFormatDate();
	const { t } = useTranslation();

	return (
		<>
			<EngagementDashboardCardFilter>
				<DownloadDataButton
					attachmentName={`ActiveUsersSection_start_${data?.start}_end_${data?.end ? subDays(new Date(data.end), 1).toISOString() : ''}`}
					headers={['Date', 'DAU', 'WAU', 'MAU']}
					dataAvailable={!!data}
					dataExtractor={(): unknown[][] | undefined => {
						const values = [];

						for (let i = 0; i < 30; i++) {
							values.push([dauValues[i].x.toISOString(), dauValues[i].y, wauValues[i].y, mauValues[i].y]);
						}

						return values;
					}}
				/>
			</EngagementDashboardCardFilter>
			<CounterSet
				counters={[
					{
						count: countDailyActiveUsers ?? <Skeleton variant='rect' width='3ex' height='1em' />,
						variation: diffDailyActiveUsers ?? 0,
						description: (
							<>
								<LegendSymbol color={colors.b200} /> {t('Daily_Active_Users')}
							</>
						),
					},
					{
						count: countWeeklyActiveUsers ?? <Skeleton variant='rect' width='3ex' height='1em' />,
						variation: diffWeeklyActiveUsers ?? 0,
						description: (
							<>
								<LegendSymbol color={colors.b300} /> {t('Weekly_Active_Users')}
							</>
						),
					},
					{
						count: countMonthlyActiveUsers ?? <Skeleton variant='rect' width='3ex' height='1em' />,
						variation: diffMonthlyActiveUsers ?? 0,
						description: (
							<>
								<LegendSymbol color={colors.p500} /> {t('Monthly_Active_Users')}
							</>
						),
					},
				]}
			/>
			<FlexContainer>
				{data ? (
					<Box style={{ height: 240 }}>
						<FlexItem align='stretch' grow={1} shrink={0}>
							<Box style={{ position: 'relative' }}>
								<Box
									style={{
										position: 'absolute',
										width: '100%',
										height: '100%',
									}}
								>
									<ResponsiveLine
										data={[
											{
												id: 'dau',
												data: dauValues,
											},
											{
												id: 'wau',
												data: wauValues,
											},
											{
												id: 'mau',
												data: mauValues,
											},
										]}
										xScale={{
											type: 'time',
											format: 'native',
											precision: 'day',
										}}
										xFormat='time:%Y-%m-%d'
										yScale={{
											type: 'linear',
											stacked: true,
										}}
										enableGridX={false}
										enableGridY={false}
										enablePoints={false}
										useMesh
										enableArea
										areaOpacity={1}
										enableCrosshair
										crosshairType='bottom'
										margin={{
											// TODO: Get it from theme
											top: 0,
											bottom: 20,
											right: 0,
											left: 40,
										}}
										colors={[colors.b200, colors.b300, colors.b500]}
										axisLeft={{
											// TODO: Get it from theme
											tickSize: 0,
											tickPadding: 4,
											tickRotation: 0,
											tickValues: 3,
										}}
										axisBottom={{
											// TODO: Get it from theme
											tickSize: 0,
											tickPadding: 4,
											tickRotation: 0,
											tickValues: 'every 3 days',
											format: (date): string => format(new Date(date), 'dd/MM'),
										}}
										animate={true}
										motionConfig='stiff'
										theme={{
											// TODO: Get it from theme
											axis: {
												ticks: {
													text: {
														fill: '#9EA2A8',
														fontFamily:
															'Inter, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", Arial, sans-serif',
														fontSize: '10px',
														fontStyle: 'normal',
														fontWeight: 600,
														letterSpacing: '0.2px',
														lineHeight: '12px',
													},
												},
											},
											tooltip: {
												container: {
													backgroundColor: '#1F2329',
													boxShadow: '0px 0px 12px rgba(47, 52, 61, 0.12), 0px 0px 2px rgba(47, 52, 61, 0.08)',
													borderRadius: 2,
												},
											},
										}}
										enableSlices='x'
										sliceTooltip={({ slice: { points } }) => (
											<Tile elevation='2'>
												<Box>
													<Box>{formatDate(points[0].data.x)}</Box>
													{points.map(({ serieId, data: { y: activeUsers } }) => (
														<Box key={serieId} fontScale='p1m'>
															<Box>
																{(serieId === 'dau' && t('DAU_value', { value: activeUsers })) ||
																	(serieId === 'wau' && t('WAU_value', { value: activeUsers })) ||
																	(serieId === 'mau' && t('MAU_value', { value: activeUsers }))}
															</Box>
														</Box>
													))}
												</Box>
											</Tile>
										)}
									/>
								</Box>
							</Box>
						</FlexItem>
					</Box>
				) : (
					<Skeleton variant='rect' height={240} />
				)}
			</FlexContainer>
		</>
	);
};

export default ActiveUsersSection;