mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2024-09-30 15:37:50 +02:00
Added help modal for new player retention
This commit is contained in:
parent
9d8a851b14
commit
d27af20774
@ -31,6 +31,7 @@
|
|||||||
"masonry-layout": "^4.2.2",
|
"masonry-layout": "^4.2.2",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-bootstrap": "^2.7.2",
|
"react-bootstrap": "^2.7.2",
|
||||||
|
"react-bootstrap-range-slider": "^3.0.8",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-i18next": "^12.2.0",
|
"react-i18next": "^12.2.0",
|
||||||
"react-mcjsonchat": "^1.0.0",
|
"react-mcjsonchat": "^1.0.0",
|
||||||
|
@ -2,6 +2,7 @@ import './style/main.sass';
|
|||||||
import './style/sb-admin-2.css'
|
import './style/sb-admin-2.css'
|
||||||
import './style/style.css';
|
import './style/style.css';
|
||||||
import './style/mobile.css';
|
import './style/mobile.css';
|
||||||
|
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
|
||||||
|
|
||||||
import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
|
import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
|
||||||
import React, {useCallback} from "react";
|
import React, {useCallback} from "react";
|
||||||
|
38
Plan/react/dashboard/src/components/graphs/Graph.js
Normal file
38
Plan/react/dashboard/src/components/graphs/Graph.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import {useTheme} from "../../hooks/themeHook";
|
||||||
|
import React, {useEffect} from "react";
|
||||||
|
import Highcharts from "highcharts/highstock";
|
||||||
|
import HighchartsMore from "highcharts/highcharts-more";
|
||||||
|
import Dumbbell from "highcharts/modules/dumbbell";
|
||||||
|
import NoDataDisplay from "highcharts/modules/no-data-to-display"
|
||||||
|
import Accessibility from "highcharts/modules/accessibility"
|
||||||
|
import {useTranslation} from "react-i18next";
|
||||||
|
|
||||||
|
const Graph = ({
|
||||||
|
id,
|
||||||
|
options,
|
||||||
|
tall,
|
||||||
|
}) => {
|
||||||
|
const {t} = useTranslation()
|
||||||
|
const {graphTheming, nightModeEnabled} = useTheme();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
NoDataDisplay(Highcharts);
|
||||||
|
Accessibility(Highcharts);
|
||||||
|
HighchartsMore(Highcharts);
|
||||||
|
Dumbbell(Highcharts);
|
||||||
|
Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
|
||||||
|
Highcharts.setOptions(graphTheming);
|
||||||
|
Highcharts.chart(id, options);
|
||||||
|
}, [options, id, t,
|
||||||
|
graphTheming, nightModeEnabled]);
|
||||||
|
|
||||||
|
const style = tall ? {height: "450px"} : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="chart-area" style={style} id={id}>
|
||||||
|
<span className="loader"/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Graph
|
@ -5,6 +5,7 @@ import {useNavigation} from "../../hooks/navigationHook";
|
|||||||
import {useTranslation} from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import ActivityIndexHelp from "./help/ActivityIndexHelp";
|
import ActivityIndexHelp from "./help/ActivityIndexHelp";
|
||||||
import {faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
|
import {faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
|
||||||
|
import NewPlayerRetentionHelp from "./help/NewPlayerRetentionHelp";
|
||||||
|
|
||||||
const HelpModal = () => {
|
const HelpModal = () => {
|
||||||
const {t} = useTranslation();
|
const {t} = useTranslation();
|
||||||
@ -15,6 +16,10 @@ const HelpModal = () => {
|
|||||||
"activity-index": {
|
"activity-index": {
|
||||||
title: t('html.label.activityIndex'),
|
title: t('html.label.activityIndex'),
|
||||||
body: <ActivityIndexHelp/>
|
body: <ActivityIndexHelp/>
|
||||||
|
},
|
||||||
|
"new-player-retention": {
|
||||||
|
title: t('html.label.newPlayerRetention'),
|
||||||
|
body: <NewPlayerRetentionHelp/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -0,0 +1,113 @@
|
|||||||
|
import React, {useCallback, useEffect, useMemo, useState} from 'react';
|
||||||
|
import {useTranslation} from "react-i18next";
|
||||||
|
import Graph from "../../graphs/Graph";
|
||||||
|
import RangeSlider from "react-bootstrap-range-slider";
|
||||||
|
|
||||||
|
const NewPlayerRetentionHelp = () => {
|
||||||
|
const {t} = useTranslation();
|
||||||
|
const clockNow = new Date().getTime() % (24 * 60 * 60 * 1000);
|
||||||
|
const start = clockNow;
|
||||||
|
const retentionStart = clockNow + 12 * 60 * 60 * 1000
|
||||||
|
const end = clockNow + 24 * 60 * 60 * 1000;
|
||||||
|
|
||||||
|
const [session1Time, setSession1Time] = useState(clockNow + 1243000);
|
||||||
|
const [session2Time, setSession2Time] = useState(clockNow + (24 * 60 * 60 * 1000) * (7 / 8));
|
||||||
|
const [result, setResult] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setResult(
|
||||||
|
start <= session1Time && end >= session1Time &&
|
||||||
|
retentionStart <= session2Time && end >= session2Time
|
||||||
|
);
|
||||||
|
}, [session1Time, session2Time, setResult, end, retentionStart, start])
|
||||||
|
|
||||||
|
const graphOptions = useMemo(() => {
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
type: 'dumbbell',
|
||||||
|
inverted: true
|
||||||
|
},
|
||||||
|
title: {text: ''},
|
||||||
|
legend: {
|
||||||
|
enabled: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
labels: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
dateTimeLabelFormats: {
|
||||||
|
// https://www.php.net/manual/en/function.strftime.php
|
||||||
|
hour: '%H:00',
|
||||||
|
day: '%H:00'
|
||||||
|
},
|
||||||
|
plotLines: [{
|
||||||
|
label: {text: t('html.label.registered')},
|
||||||
|
color: '#8BC34A',
|
||||||
|
value: session1Time,
|
||||||
|
width: 2
|
||||||
|
}, {
|
||||||
|
label: {text: t('html.label.session')},
|
||||||
|
color: '#009688',
|
||||||
|
value: session2Time,
|
||||||
|
width: 2
|
||||||
|
}],
|
||||||
|
title: {text: t('html.label.last24hours')}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: t('html.query.filter.registeredBetween.text'),
|
||||||
|
animation: false,
|
||||||
|
color: '#8BC34A',
|
||||||
|
data: [{
|
||||||
|
name: t('html.query.filter.registeredBetween.text'),
|
||||||
|
low: start,
|
||||||
|
high: end
|
||||||
|
}],
|
||||||
|
}, {
|
||||||
|
name: t('html.query.filter.playedBetween.text'),
|
||||||
|
animation: false,
|
||||||
|
color: '#009688',
|
||||||
|
data: [{
|
||||||
|
name: t('html.query.filter.playedBetween.text'),
|
||||||
|
low: retentionStart,
|
||||||
|
high: end
|
||||||
|
}],
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}, [start, end, retentionStart, session1Time, session2Time, t]);
|
||||||
|
|
||||||
|
const updateSession1Time = useCallback(event => setSession1Time(event.target.value), [setSession1Time]);
|
||||||
|
const updateSession2Time = useCallback(event => setSession2Time(event.target.value), [setSession2Time]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>New player retention is calculated based on session data. If a registered player has played within latter
|
||||||
|
half of the timespan, they are considered retained.</p>
|
||||||
|
<Graph id={"new-player-retention-help"} options={graphOptions}/>
|
||||||
|
<hr/>
|
||||||
|
<p>{t('html.label.help.testPrompt')}</p>
|
||||||
|
<label>{t('html.label.firstSession')}</label>
|
||||||
|
<RangeSlider
|
||||||
|
value={session1Time}
|
||||||
|
onChange={updateSession1Time}
|
||||||
|
min={start}
|
||||||
|
max={end}
|
||||||
|
tooltip={'off'}/>
|
||||||
|
<label>{t('html.label.session') + ' 2'}</label>
|
||||||
|
<RangeSlider
|
||||||
|
value={session2Time}
|
||||||
|
onChange={updateSession2Time}
|
||||||
|
min={session1Time}
|
||||||
|
max={end}
|
||||||
|
tooltip={'off'}/>
|
||||||
|
<p>{t('html.label.help.testResult')}: <b>{result ? t('plugin.generic.yes') : t('plugin.generic.no')}</b></p>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NewPlayerRetentionHelp
|
@ -1,15 +1,18 @@
|
|||||||
import {useTranslation} from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import {faUser, faUserCircle, faUserPlus, faUsers} from "@fortawesome/free-solid-svg-icons";
|
import {faUser, faUserCircle, faUserPlus, faUsers} from "@fortawesome/free-solid-svg-icons";
|
||||||
import React from "react";
|
import React, {useCallback} from "react";
|
||||||
import {TableRow} from "./TableRow";
|
import {TableRow} from "./TableRow";
|
||||||
import ComparisonTable from "./ComparisonTable";
|
import ComparisonTable from "./ComparisonTable";
|
||||||
import SmallTrend from "../trend/SmallTrend";
|
import SmallTrend from "../trend/SmallTrend";
|
||||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||||
import {faCalendarCheck, faClock, faEye} from "@fortawesome/free-regular-svg-icons";
|
import {faCalendarCheck, faClock, faEye, faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
|
||||||
import {CardLoader} from "../navigation/Loader";
|
import {CardLoader} from "../navigation/Loader";
|
||||||
|
import {useNavigation} from "../../hooks/navigationHook";
|
||||||
|
|
||||||
const OnlineActivityAsNumbersTable = ({data}) => {
|
const OnlineActivityAsNumbersTable = ({data}) => {
|
||||||
const {t} = useTranslation();
|
const {t} = useTranslation();
|
||||||
|
const {setHelpModalTopic} = useNavigation();
|
||||||
|
const openHelp = useCallback(() => setHelpModalTopic('new-player-retention'), [setHelpModalTopic]);
|
||||||
if (!data) return <CardLoader/>;
|
if (!data) return <CardLoader/>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -44,7 +47,10 @@ const OnlineActivityAsNumbersTable = ({data}) => {
|
|||||||
data.new_players_7d_avg,
|
data.new_players_7d_avg,
|
||||||
data.new_players_24h_avg
|
data.new_players_24h_avg
|
||||||
]}/>
|
]}/>
|
||||||
<TableRow icon={faUserCircle} color="light-green" text={t('html.label.newPlayerRetention')}
|
<TableRow icon={faUserCircle} color="light-green" text={<>{t('html.label.newPlayerRetention')} <span>
|
||||||
|
<button onClick={openHelp}><Fa className={"col-black"}
|
||||||
|
icon={faQuestionCircle}/>
|
||||||
|
</button></span></>}
|
||||||
values={[
|
values={[
|
||||||
`(${data.new_players_retention_30d}/${data.new_players_30d}) ${data.new_players_retention_30d_perc}`,
|
`(${data.new_players_retention_30d}/${data.new_players_30d}) ${data.new_players_retention_30d_perc}`,
|
||||||
`(${data.new_players_retention_7d}/${data.new_players_7d}) ${data.new_players_retention_7d_perc}`,
|
`(${data.new_players_retention_7d}/${data.new_players_7d}) ${data.new_players_retention_7d_perc}`,
|
||||||
|
@ -8181,6 +8181,14 @@ react-app-polyfill@^3.0.0:
|
|||||||
regenerator-runtime "^0.13.9"
|
regenerator-runtime "^0.13.9"
|
||||||
whatwg-fetch "^3.6.2"
|
whatwg-fetch "^3.6.2"
|
||||||
|
|
||||||
|
react-bootstrap-range-slider@^3.0.8:
|
||||||
|
version "3.0.8"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-bootstrap-range-slider/-/react-bootstrap-range-slider-3.0.8.tgz#5efc36314dc02195914b3dbdaed00da41af83682"
|
||||||
|
integrity sha512-FpDd1J1BW23jNN3fXmpy5nNDJ3PwMZ2/0dNse9RORwQ/z2rmpMQp/g6iNRpW6SjQkLKyGeNHyctK6dP+3zUXQA==
|
||||||
|
dependencies:
|
||||||
|
classnames "^2.3.1"
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
|
||||||
react-bootstrap@^2.7.2:
|
react-bootstrap@^2.7.2:
|
||||||
version "2.7.2"
|
version "2.7.2"
|
||||||
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.7.2.tgz#100069ea7b4807cccbc5fef1e33bc90283262602"
|
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.7.2.tgz#100069ea7b4807cccbc5fef1e33bc90283262602"
|
||||||
|
Loading…
Reference in New Issue
Block a user