import { useState, useMemo, useEffect, type FC } from 'react' import classNames from 'classnames' import { startCase } from 'lodash' import { useQuery } from '@sourcegraph/http-client' import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry' import { EVENT_LOGGER } from '@sourcegraph/shared/src/telemetry/web/eventLogger' import { Card, LoadingSpinner, useMatchMedia, Text, LineChart, BarChart, type Series } from '@sourcegraph/wildcard' import type { UsersStatisticsResult, UsersStatisticsVariables } from '../../../graphql-operations' import { checkRequestAccessAllowed } from '../../../util/checkRequestAccessAllowed' import { AnalyticsPageTitle } from '../components/AnalyticsPageTitle' import { ChartContainer } from '../components/ChartContainer' import { HorizontalSelect } from '../components/HorizontalSelect' import { ToggleSelect } from '../components/ToggleSelect' import { ValueLegendList, type ValueLegendListProps } from '../components/ValueLegendList' import { useChartFilters } from '../useChartFilters' import { type StandardDatum, type FrequencyDatum, buildFrequencyDatum } from '../utils' import { USERS_STATISTICS } from './queries' import styles from './AnalyticsUsersPage.module.scss' interface Props extends TelemetryV2Props {} export const AnalyticsUsersPage: FC = ({ telemetryRecorder }) => { const { dateRange, aggregation, grouping } = useChartFilters({ name: 'Users', aggregation: 'uniqueUsers', telemetryRecorder, }) const { data, error, loading } = useQuery(USERS_STATISTICS, { variables: { dateRange: dateRange.value, grouping: grouping.value, }, }) useEffect(() => { EVENT_LOGGER.logPageView('AdminAnalyticsUsers') telemetryRecorder.recordEvent('admin.analytics.users', 'view') }, [telemetryRecorder]) const [uniqueOrPercentage, setUniqueOrPercentage] = useState<'unique' | 'percentage'>('unique') const [frequencies, legends] = useMemo(() => { if (!data) { return [] } const { users } = data.site.analytics let legends: ValueLegendListProps['items'] = [ { value: users.activity.summary.totalUniqueUsers, description: 'Active users', color: 'var(--purple)', tooltip: 'The number of users using the application in the selected timeframe including deleted users.', }, { value: data.users.totalCount, description: 'Registered Users', color: 'var(--body-color)', position: 'right', tooltip: 'The number of users who have created an account.', }, { value: data.site.productSubscription.license?.userCount ?? 0, description: 'User licenses', color: 'var(--body-color)', position: 'right', tooltip: 'The number of user licenses your current account is provisioned for.', }, ] const isRequestAccessAllowed = checkRequestAccessAllowed(window.context) if (isRequestAccessAllowed) { legends = [ ...legends.slice(0, 1), { value: data.pendingAccessRequests.totalCount, description: 'Pending requests', color: 'var(--cyan)', position: 'right', tooltip: 'The number of users who have requested access to your Sourcegraph instance.', }, ...legends.slice(1), ] } const frequencies: FrequencyDatum[] = buildFrequencyDatum(users.frequencies, uniqueOrPercentage, 30) return [frequencies, legends] }, [data, uniqueOrPercentage]) const activities = useMemo(() => { if (!data) { return [] } const { users } = data.site.analytics const activities: Series[] = [ { id: 'activity', name: aggregation.selected === 'count' ? 'Activities' : 'Active users', color: aggregation.selected === 'count' ? 'var(--cyan)' : 'var(--purple)', data: users.activity.nodes.map( node => ({ date: new Date(node.date), value: node[aggregation.selected], }), dateRange.value ), getXValue: ({ date }) => date, getYValue: ({ value }) => value, }, ] return activities }, [data, aggregation.selected, dateRange.value]) const isWideScreen = useMatchMedia('(min-width: 992px)', false) if (error) { throw error } if (loading) { return } const groupingLabel = startCase(grouping.value.toLowerCase()) return ( <> Users

{...dateRange} />

{legends && } {activities && (

{width => }

{...grouping} className="mr-4" /> {...aggregation} />

)}

{!!data?.site.analytics.users.monthlyActiveUsers && ( {width => ( datum.date} getDatumValue={datum => datum.count} getDatumColor={() => 'var(--bar-color)'} getDatumFadeColor={() => 'var(--bar-fade-color)'} /> )} )} {frequencies && ( {width => ( datum.label} getDatumValue={datum => datum.value} getDatumColor={() => 'var(--bar-color)'} getDatumFadeColor={() => 'var(--bar-fade-color)'} getDatumHoverValueLabel={datum => `${datum.value}${uniqueOrPercentage !== 'unique' ? '%' : ''}` } /> )} )}

{frequencies && ( className={styles.toggleSelect} selected={uniqueOrPercentage} onChange={setUniqueOrPercentage} items={[ { value: 'unique', label: 'Total', tooltip: 'The number of users who used the platform atleast n days.', }, { value: 'percentage', label: 'Percentage', tooltip: 'Percentage of users out of total active users who used the platform atleast n days.', }, ]} /> )}

All events are generated from entries in the event logs table and are updated every 24 hours. ) }