Skip to content

Commit e9d1d22

Browse files
AuroraLS3AuroraLS3
committed
Replace online activity as numbers with /v1/datapoint calls
1 parent f19db4d commit e9d1d22

7 files changed

Lines changed: 105 additions & 89 deletions

File tree

‎Plan/common/src/main/java/com/djrapitops/plan/delivery/export/ServerPageExporter.java‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,29 @@ public void exportJSON(Path toDirectory, ServerUUID serverUUID) throws IOExcepti
193193
datapointType + DatapointType.SESSION_COUNT + afterMillis + TimeUnit.DAYS.toMillis(7) + server,
194194
datapointType + DatapointType.PLAYER_KILLS + afterMillis + TimeUnit.DAYS.toMillis(7) + server,
195195
datapointType + DatapointType.MOB_KILLS + afterMillis + TimeUnit.DAYS.toMillis(7) + server,
196-
datapointType + DatapointType.DEATHS + afterMillis + TimeUnit.DAYS.toMillis(7) + server
196+
datapointType + DatapointType.DEATHS + afterMillis + TimeUnit.DAYS.toMillis(7) + server,
197+
// Online Activity overview
198+
datapointType + DatapointType.UNIQUE_PLAYERS_COUNT + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
199+
datapointType + DatapointType.UNIQUE_PLAYERS_COUNT + afterMillis + TimeUnit.DAYS.toMillis(30) + server,
200+
datapointType + DatapointType.UNIQUE_PLAYERS_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
201+
datapointType + DatapointType.UNIQUE_PLAYERS_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(30) + server,
202+
datapointType + DatapointType.NEW_PLAYERS + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
203+
datapointType + DatapointType.NEW_PLAYERS + afterMillis + TimeUnit.DAYS.toMillis(30) + server,
204+
datapointType + DatapointType.NEW_PLAYERS_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
205+
datapointType + DatapointType.NEW_PLAYERS_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(7) + server,
206+
datapointType + DatapointType.NEW_PLAYERS_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(30) + server,
207+
datapointType + DatapointType.NEW_PLAYER_RETENTION + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
208+
datapointType + DatapointType.NEW_PLAYER_RETENTION + afterMillis + TimeUnit.DAYS.toMillis(30) + server,
209+
datapointType + DatapointType.PLAYTIME + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
210+
datapointType + DatapointType.PLAYTIME + afterMillis + TimeUnit.DAYS.toMillis(7) + server,
211+
datapointType + DatapointType.PLAYTIME + afterMillis + TimeUnit.DAYS.toMillis(30) + server,
212+
datapointType + DatapointType.PLAYTIME_PER_DAY_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
213+
datapointType + DatapointType.PLAYTIME_PER_DAY_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(7) + server,
214+
datapointType + DatapointType.PLAYTIME_PER_DAY_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(30) + server,
215+
datapointType + DatapointType.SESSION_LENGTH_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
216+
datapointType + DatapointType.SESSION_LENGTH_AVERAGE + afterMillis + TimeUnit.DAYS.toMillis(30) + server,
217+
datapointType + DatapointType.SESSION_COUNT + afterMillis + TimeUnit.DAYS.toMillis(1) + server,
218+
datapointType + DatapointType.SESSION_COUNT + afterMillis + TimeUnit.DAYS.toMillis(30) + server
197219
);
198220
}
199221

‎Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
44
import {faBookOpen} from "@fortawesome/free-solid-svg-icons";
55
import React from "react";
66
import OnlineActivityAsNumbersTable from "../../../table/OnlineActivityAsNumbersTable";
7-
import {CardLoader} from "../../../navigation/Loader.tsx";
87

9-
const OnlineActivityAsNumbersCard = ({data}) => {
8+
const OnlineActivityAsNumbersCard = () => {
109
const {t} = useTranslation();
11-
if (!data) return <CardLoader/>;
1210

1311
return (
1412
<Card id={'online-activity-numbers'}>
@@ -17,7 +15,7 @@ const OnlineActivityAsNumbersCard = ({data}) => {
1715
<Fa icon={faBookOpen} className="col-players-unique"/> {t('html.label.onlineActivityAsNumbers')}
1816
</h6>
1917
</Card.Header>
20-
<OnlineActivityAsNumbersTable data={data}/>
18+
<OnlineActivityAsNumbersTable/>
2119
</Card>
2220
)
2321
}

‎Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const ServerWeekComparisonCard = () => {
2626
filter: {afterMillisAgo: MS_WEEK * 2, beforeMillisAgo: MS_WEEK}
2727
}, {
2828
key: 'next',
29-
filter: {afterMillisAgo: MS_WEEK}
29+
filter: {afterMillisAgo: MS_WEEK, beforeMillisAgo: 0}
3030
}]}
3131
rows={[{
3232
dataType: DatapointType.UNIQUE_PLAYERS_COUNT,

‎Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.jsx‎

Lines changed: 66 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,82 @@
11
import {useTranslation} from "react-i18next";
22
import {faUser, faUserCircle, faUserPlus, faUsers} from "@fortawesome/free-solid-svg-icons";
33
import React, {useCallback} from "react";
4-
import {TableRow} from "./TableRow";
5-
import ComparisonTable from "./ComparisonTable";
6-
import SmallTrend from "../trend/SmallTrend";
74
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
8-
import {faCalendarCheck, faClock, faEye, faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
9-
import {CardLoader} from "../navigation/Loader.tsx";
5+
import {faCalendarCheck, faClock, faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
106
import {useNavigation} from "../../hooks/navigationHook.tsx";
11-
import FormattedTime from "../text/FormattedTime.jsx";
12-
import {useTimeAmountFormatter} from "../../util/format/useTimeAmountFormatter.js";
7+
import {MS_24H, MS_MONTH, MS_WEEK} from "../../util/format/useDateFormatter.js";
8+
import {DatapointType} from "../../dataHooks/model/datapoint/Datapoint.ts";
9+
import {QueryDatapointTable} from "./QueryDatapointTable.tsx";
10+
import {useParams} from "react-router";
1311

14-
const OnlineActivityAsNumbersTable = ({data}) => {
12+
const OnlineActivityAsNumbersTable = () => {
1513
const {t} = useTranslation();
1614
const {setHelpModalTopic} = useNavigation();
17-
const {formatTime} = useTimeAmountFormatter();
15+
const {identifier} = useParams();
1816
const openHelp = useCallback(() => setHelpModalTopic('new-player-retention'), [setHelpModalTopic]);
19-
if (!data) return <CardLoader/>;
2017

2118
return (
22-
<ComparisonTable
23-
headers={[t('html.label.last30days'), t('html.label.last7days'), t('html.label.last24hours')]}
24-
comparisonHeader={t('html.text.comparing15days')}
25-
>
26-
<TableRow icon={faUsers} color="players-unique" text={t('html.label.uniquePlayers')}
27-
values={[
28-
<>{data.unique_players_30d}{' '}<SmallTrend trend={data.unique_players_30d_trend}/></>,
29-
data.unique_players_7d,
30-
data.unique_players_24h
31-
]}/>
32-
<TableRow icon={faUser} color="players-unique"
33-
text={t('html.label.uniquePlayers') + ' ' + t('html.label.perDay')}
34-
values={[
35-
<>{data.unique_players_30d_avg}{' '}<SmallTrend
36-
trend={data.unique_players_30d_avg_trend}/></>,
37-
data.unique_players_7d_avg,
38-
data.unique_players_24h_avg
39-
]}/>
40-
<TableRow icon={faUsers} color="players-new" text={t('html.label.newPlayers')}
41-
values={[
42-
<>{data.new_players_30d}{' '}<SmallTrend trend={data.new_players_30d_trend}/></>,
43-
data.new_players_7d,
44-
data.new_players_24h
45-
]}/>
46-
<TableRow icon={faUserPlus} color="players-new"
47-
text={t('html.label.newPlayers') + ' ' + t('html.label.perDay')}
48-
values={[
49-
<>{data.new_players_30d_avg}{' '}<SmallTrend trend={data.new_players_30d_avg_trend}/></>,
50-
data.new_players_7d_avg,
51-
data.new_players_24h_avg
52-
]}/>
53-
<TableRow icon={faUserCircle} color="retention-new-players"
54-
text={<>{t('html.label.newPlayerRetention')} <span>
19+
<QueryDatapointTable
20+
filter={{server: identifier}}
21+
columns={[{
22+
key: '30d',
23+
filter: {afterMillisAgo: MS_MONTH}
24+
}, {
25+
key: '7d',
26+
filter: {afterMillisAgo: MS_WEEK}
27+
}, {
28+
key: '1d',
29+
filter: {afterMillisAgo: MS_24H}
30+
}]}
31+
rows={[{
32+
dataType: DatapointType.UNIQUE_PLAYERS_COUNT,
33+
color: "players-unique",
34+
icon: faUsers,
35+
text: t('html.label.uniquePlayers')
36+
}, {
37+
dataType: DatapointType.UNIQUE_PLAYERS_AVERAGE,
38+
color: "players-unique",
39+
icon: faUser,
40+
text: t('html.label.uniquePlayers') + ' ' + t('html.label.perDay')
41+
}, {
42+
dataType: DatapointType.NEW_PLAYERS,
43+
color: "players-new",
44+
icon: faUsers,
45+
text: t('html.label.newPlayers')
46+
}, {
47+
dataType: DatapointType.NEW_PLAYERS_AVERAGE,
48+
color: "players-new",
49+
icon: faUserPlus,
50+
text: t('html.label.newPlayers') + ' ' + t('html.label.perDay')
51+
}, {
52+
dataType: DatapointType.NEW_PLAYER_RETENTION,
53+
color: "players-new",
54+
icon: faUserCircle,
55+
text: <>{t('html.label.newPlayerRetention')} <span>
5556
<button onClick={openHelp}><Fa className={"col-text"}
5657
icon={faQuestionCircle}/>
57-
</button></span></>}
58-
values={[
59-
`(${data.new_players_retention_30d}/${data.new_players_30d}) ${data.new_players_retention_30d_perc}`,
60-
`(${data.new_players_retention_7d}/${data.new_players_7d}) ${data.new_players_retention_7d_perc}`,
61-
<>{`(${data.new_players_retention_24h}/${data.new_players_24h}) ${data.new_players_retention_24h_perc}`}
62-
{' '}<span title={t('html.description.newPlayerRetention')}><Fa icon={faEye}/></span></>
63-
]}/>
64-
<TableRow icon={faClock} color="playtime"
65-
text={t('html.label.playtime')}
66-
values={[
67-
<>{<FormattedTime timeMs={data.playtime_30d}/>}{' '}<SmallTrend
68-
trend={data.playtime_30d_trend} format={formatTime}/></>,
69-
<FormattedTime timeMs={data.playtime_7d}/>,
70-
<FormattedTime timeMs={data.playtime_24h}/>
71-
]}/>
72-
<TableRow icon={faClock} color="playtime"
73-
text={t('html.label.averagePlaytime') + ' ' + t('html.label.perDay')}
74-
values={[
75-
<>{<FormattedTime timeMs={data.playtime_30d_avg}/>}{' '}<SmallTrend
76-
trend={data.playtime_30d_avg_trend} format={formatTime}/></>,
77-
<FormattedTime timeMs={data.playtime_7d_avg}/>,
78-
<FormattedTime timeMs={data.playtime_24h_avg}/>
79-
]}/>
80-
<TableRow icon={faClock} color="sessions"
81-
text={t('html.label.averageSessionLength')}
82-
values={[
83-
<>{<FormattedTime timeMs={data.session_length_30d_avg}/>}{' '}<SmallTrend
84-
trend={data.session_length_30d_trend} format={formatTime}/></>,
85-
<FormattedTime timeMs={data.session_length_7d_avg}/>,
86-
<FormattedTime timeMs={data.session_length_24h_avg}/>
87-
]}/>
88-
<TableRow icon={faCalendarCheck} color="sessions"
89-
text={t('html.label.sessions')}
90-
values={[
91-
<>{data.sessions_30d}{' '}<SmallTrend trend={data.sessions_30d_trend}/></>,
92-
data.sessions_7d,
93-
data.sessions_24h
94-
]}/>
95-
</ComparisonTable>
58+
</button></span></>
59+
}, {
60+
dataType: DatapointType.PLAYTIME,
61+
color: "playtime",
62+
icon: faClock,
63+
text: t('html.label.playtime')
64+
}, {
65+
dataType: DatapointType.PLAYTIME_PER_DAY_AVERAGE,
66+
color: "playtime",
67+
icon: faClock,
68+
text: t('html.label.averagePlaytime') + ' ' + t('html.label.perDay')
69+
}, {
70+
dataType: DatapointType.SESSION_LENGTH_AVERAGE,
71+
color: "sessions",
72+
icon: faClock,
73+
text: t('html.label.averageSessionLength')
74+
}, {
75+
dataType: DatapointType.SESSION_COUNT,
76+
color: "sessions",
77+
icon: faCalendarCheck,
78+
text: t('html.label.sessions')
79+
}]}/>
9680
)
9781
}
9882

‎Plan/react/dashboard/src/components/table/QueryDatapointTable.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {calculatePermission, QueryDatapointTrend, QueryDatapointValue} from "../
99
import FormattedDay from "../text/FormattedDay";
1010
import {useAuth} from "../../hooks/authenticationHook";
1111
import {useTranslation} from "react-i18next";
12+
import {MS_24H, MS_MONTH, MS_WEEK} from "../../util/format/useDateFormatter";
1213

1314
type Column = {
1415
filter: GenericFilter;
@@ -34,7 +35,14 @@ type Props = {
3435
}
3536

3637
const FilterHeader = ({filter}: Column) => {
38+
const {t} = useTranslation();
3739
if (filter.afterMillisAgo) {
40+
if (filter.beforeMillisAgo === undefined) {
41+
if (filter.afterMillisAgo === MS_MONTH) return <th>{t('html.label.last30days')}</th>;
42+
if (filter.afterMillisAgo === MS_WEEK) return <th>{t('html.label.last7days')}</th>;
43+
if (filter.afterMillisAgo === MS_24H) return <th>{t('html.label.last24hours')}</th>;
44+
}
45+
3846
return <th>
3947
<FormattedDay date={Date.now() - filter.afterMillisAgo}/> - <FormattedDay
4048
date={Date.now() - (filter.beforeMillisAgo || 0)}/>

‎Plan/react/dashboard/src/dataHooks/model/datapoint/Datapoint.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export type FormatType =
1919
export enum DatapointType {
2020
WORLD_PIE = 'WORLD_PIE',
2121
PLAYTIME = 'PLAYTIME',
22+
PLAYTIME_PER_DAY_AVERAGE = 'PLAYTIME_PER_DAY_AVERAGE',
2223
AFK_TIME = 'AFK_TIME',
2324
AFK_TIME_PERCENTAGE = 'AFK_TIME_PERCENTAGE',
2425
SERVER_OCCUPIED = 'SERVER_OCCUPIED',
@@ -28,6 +29,7 @@ export enum DatapointType {
2829
UNIQUE_PLAYERS_COUNT = "UNIQUE_PLAYERS_COUNT",
2930
UNIQUE_PLAYERS_AVERAGE = "UNIQUE_PLAYERS_AVERAGE",
3031
NEW_PLAYERS = "NEW_PLAYERS",
32+
NEW_PLAYERS_AVERAGE = "NEW_PLAYERS_AVERAGE",
3133
NEW_PLAYER_RETENTION = "NEW_PLAYER_RETENTION",
3234
REGULAR_PLAYERS = "REGULAR_PLAYERS",
3335
PLAYERS_ONLINE = "PLAYERS_ONLINE",
@@ -52,11 +54,13 @@ export const differingPermissions: Partial<Record<DatapointType, string>> = {
5254
export type DatapointTypeMap = {
5355
WORLD_PIE: WorldPie;
5456
PLAYTIME: number;
57+
PLAYTIME_PER_DAY_AVERAGE: number;
5558
AFK_TIME: number;
5659
AFK_TIME_PERCENTAGE: number;
5760
UNIQUE_PLAYERS_COUNT: number;
5861
UNIQUE_PLAYERS_AVERAGE: number;
5962
NEW_PLAYERS: number;
63+
NEW_PLAYERS_AVERAGE: number;
6064
NEW_PLAYER_RETENTION: number;
6165
REGULAR_PLAYERS: number;
6266
PLAYERS_ONLINE: number;

‎Plan/react/dashboard/src/views/server/OnlineActivity.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const OnlineActivity = () => {
3131
</ExtendableRow>}
3232
{seeOverview && <ExtendableRow id={'row-server-online-activity-overview-1'}>
3333
<Col lg={8}>
34-
<OnlineActivityAsNumbersCard data={data?.numbers}/>
34+
<OnlineActivityAsNumbersCard/>
3535
</Col>
3636
<Col lg={4}>
3737
<OnlineActivityInsightsCard data={data?.insights}/>

0 commit comments

Comments
 (0)