Added help modal for new player retention

Plan/react/dashboard/package.json

@@ -31,6 +31,7 @@
     "masonry-layout": "^4.2.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
+    "react-bootstrap-range-slider": "^3.0.8",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.0",
     "react-mcjsonchat": "^1.0.0",

Plan/react/dashboard/src/App.js

@@ -2,6 +2,7 @@ import './style/main.sass';
 import './style/sb-admin-2.css'
 import './style/style.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 React, {useCallback} from "react";

Plan/react/dashboard/src/components/graphs/Graph.js

@@ -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

Plan/react/dashboard/src/components/modal/HelpModal.js

@@ -5,6 +5,7 @@ import {useNavigation} from "../../hooks/navigationHook";
 import {useTranslation} from "react-i18next";
 import ActivityIndexHelp from "./help/ActivityIndexHelp";
 import {faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
+import NewPlayerRetentionHelp from "./help/NewPlayerRetentionHelp";
 
 const HelpModal = () => {
     const {t} = useTranslation();
@@ -15,6 +16,10 @@ const HelpModal = () => {
         "activity-index": {
             title: t('html.label.activityIndex'),
             body: <ActivityIndexHelp/>
+        },
+        "new-player-retention": {
+            title: t('html.label.newPlayerRetention'),
+            body: <NewPlayerRetentionHelp/>
         }
     }
 

Plan/react/dashboard/src/components/modal/help/NewPlayerRetentionHelp.js

@@ -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

Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js

@@ -1,15 +1,18 @@
 import {useTranslation} from "react-i18next";
 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 ComparisonTable from "./ComparisonTable";
 import SmallTrend from "../trend/SmallTrend";
 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 {useNavigation} from "../../hooks/navigationHook";
 
 const OnlineActivityAsNumbersTable = ({data}) => {
     const {t} = useTranslation();
+    const {setHelpModalTopic} = useNavigation();
+    const openHelp = useCallback(() => setHelpModalTopic('new-player-retention'), [setHelpModalTopic]);
     if (!data) return <CardLoader/>;
 
     return (
@@ -44,7 +47,10 @@ const OnlineActivityAsNumbersTable = ({data}) => {
                           data.new_players_7d_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={[
                           `(${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}`,

Plan/react/dashboard/yarn.lock

@@ -8181,6 +8181,14 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     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:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.7.2.tgz#100069ea7b4807cccbc5fef1e33bc90283262602"