From f6ece8333b86af9b1d96f4ec398f0f9fa01d6a1d Mon Sep 17 00:00:00 2001 From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com> Date: Mon, 23 May 2022 19:46:01 +0300 Subject: [PATCH] Entered data for Online Activity Overview --- .../plan/settings/locale/lang/HtmlLang.java | 3 +- .../assets/plan/web/js/server-values.js | 6 +- .../dashboard/src/components/Datapoint.js | 5 +- .../insights/OnlineActivityInsightsCard.js | 31 ++++++- .../server/insights/PlayerbaseInsightsCard.js | 3 + .../tables/OnlineActivityAsNumbersCard.js | 6 +- .../server/tables/PlayerbaseTrendsCard.js | 2 +- .../server/tables/ServerWeekComparisonCard.js | 2 +- .../dashboard/src/components/layout/End.js | 7 ++ .../src/components/table/AsNumbersTable.js | 11 --- .../src/components/table/ComparisonTable.js | 20 +---- .../table/OnlineActivityAsNumbersTable.js | 80 +++++++++++++++++-- .../table/PlayerPvpPveAsNumbersTable.js | 3 +- .../table/ServerPvpPveAsNumbersTable.js | 3 +- .../src/components/table/TableRow.js | 12 +++ .../src/components/trend/ComparingLabel.js | 13 +++ .../src/components/trend/SmallTrend.js | 10 +-- Plan/react/dashboard/src/style/main.sass | 5 +- .../src/views/player/PlayerOverview.js | 3 +- .../src/views/server/OnlineActivity.js | 4 +- 20 files changed, 168 insertions(+), 61 deletions(-) create mode 100644 Plan/react/dashboard/src/components/layout/End.js create mode 100644 Plan/react/dashboard/src/components/table/TableRow.js create mode 100644 Plan/react/dashboard/src/components/trend/ComparingLabel.js diff --git a/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java b/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java index 2d40efe97..ff211644f 100644 --- a/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java +++ b/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java @@ -140,7 +140,8 @@ public enum HtmlLang implements Lang { COMPARING_15_DAYS("html.text.comparing15days", "Comparing 15 days"), TITLE_GRAPH_PUNCHCARD("html.label.punchcard30days", "Punchcard for 30 Days"), LABEL_ONLINE_FIRST_JOIN("html.label.onlineOnFirstJoin", "Players online on first join"), - LABEL_FIRST_SESSION_LENGTH("html.label.firstSessionLength", "First session length"), + LABEL_FIRST_SESSION_LENGTH_AVERAGE("html.label.firstSessionLength.average", "Average first session length"), + LABEL_FIRST_SESSION_LENGTH_MEDIAN("html.label.firstSessionLength.median", "Median first session length"), LABEL_LONE_JOINS("html.label.loneJoins", "Lone joins"), LABEL_LONE_NEW_JOINS("html.label.loneNewbieJoins", "Lone newbie joins"), LABEL_MOST_ACTIVE_GAMEMODE("html.label.mostActiveGamemode", "Most Active Gamemode"), diff --git a/Plan/common/src/main/resources/assets/plan/web/js/server-values.js b/Plan/common/src/main/resources/assets/plan/web/js/server-values.js index 8b36888ab..505105633 100644 --- a/Plan/common/src/main/resources/assets/plan/web/js/server-values.js +++ b/Plan/common/src/main/resources/assets/plan/web/js/server-values.js @@ -158,9 +158,9 @@ function loadOnlineActivityOverviewValues(json, error) { element.querySelector('#data_new_players_7d_avg').innerText = data.new_players_7d_avg; element.querySelector('#data_new_players_24h_avg').innerText = data.new_players_24h_avg; - element.querySelector('#data_new_players_retention_30d').innerText = '(' + data.new_players_retention_30d + '/' + data.new_players_30d + ') ' + data.new_players_retention_30d_perc; - element.querySelector('#data_new_players_retention_7d').innerText = '(' + data.new_players_retention_7d + '/' + data.new_players_7d + ') ' + data.new_players_retention_7d_perc; - element.querySelector('#data_new_players_retention_24h').innerHTML = '(' + data.new_players_retention_24h + '/' + data.new_players_24h + ') ' + data.new_players_retention_24h_perc + ' '; + element.querySelector('#data_new_players_retention_30d').innerText = `(${data.new_players_retention_30d}/${data.new_players_30d}) ${data.new_players_retention_30d_perc}`; + element.querySelector('#data_new_players_retention_7d').innerText = `(${data.new_players_retention_7d}/${data.new_players_7d}) ${data.new_players_retention_7d_perc}`; + element.querySelector('#data_new_players_retention_24h').innerHTML = `(${data.new_players_retention_24h}/${data.new_players_24h}) ${data.new_players_retention_24h_perc} `; element.querySelector('#data_playtime_30d').innerHTML = data.playtime_30d + smallTrend(data.playtime_30d_trend); element.querySelector('#data_playtime_7d').innerText = data.playtime_7d; diff --git a/Plan/react/dashboard/src/components/Datapoint.js b/Plan/react/dashboard/src/components/Datapoint.js index 6328fab74..f0695de90 100644 --- a/Plan/react/dashboard/src/components/Datapoint.js +++ b/Plan/react/dashboard/src/components/Datapoint.js @@ -1,9 +1,6 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import React from "react"; - -const End = ({children}) => ( - {children} -) +import End from "./layout/End"; const Datapoint = ({icon, color, name, value, valueLabel, bold, boldTitle, title, trend}) => { const displayedValue = bold ? {value} : value; diff --git a/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js index 684b3db0d..9995de5f1 100644 --- a/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js +++ b/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js @@ -1,10 +1,37 @@ import React from "react"; import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard"; +import {useTranslation} from "react-i18next"; +import Datapoint from "../../../Datapoint"; +import {faUserClock, faUserGroup} from "@fortawesome/free-solid-svg-icons"; +import SmallTrend from "../../../trend/SmallTrend"; +import {faCalendar, faCalendarPlus} from "@fortawesome/free-regular-svg-icons"; +import ComparingLabel from "../../../trend/ComparingLabel"; +import End from "../../../layout/End"; + +const OnlineActivityInsightsCard = ({data}) => { + const {t} = useTranslation(); + if (!data) return <> -const OnlineActivityInsightsCard = () => { return ( - TODO + }/> + }/> + }/> + }/> + }/> + + {t('html.text.comparing15days')} + ) } diff --git a/Plan/react/dashboard/src/components/cards/server/insights/PlayerbaseInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/PlayerbaseInsightsCard.js index b261bcee3..cf6aca49c 100644 --- a/Plan/react/dashboard/src/components/cards/server/insights/PlayerbaseInsightsCard.js +++ b/Plan/react/dashboard/src/components/cards/server/insights/PlayerbaseInsightsCard.js @@ -5,6 +5,8 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import Datapoint from "../../../Datapoint"; import {faLongArrowAltRight, faUser} from "@fortawesome/free-solid-svg-icons"; import SmallTrend from "../../../trend/SmallTrend"; +import End from "../../../layout/End"; +import ComparingLabel from "../../../trend/ComparingLabel"; const TwoPlayerChange = ({colorBefore, labelBefore, colorAfter, labelAfter}) => { return ( @@ -35,6 +37,7 @@ const PlayerbaseInsightsCard = ({data}) => { value={data.regular_to_inactive} trend={} /> + {t('html.text.comparing30daysAgo')} ) } diff --git a/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js b/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js index 31b5f8779..0b5ab1a72 100644 --- a/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js +++ b/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js @@ -5,8 +5,10 @@ import {faBookOpen} from "@fortawesome/free-solid-svg-icons"; import React from "react"; import OnlineActivityAsNumbersTable from "../../../table/OnlineActivityAsNumbersTable"; -const OnlineActivityAsNumbersCard = () => { +const OnlineActivityAsNumbersCard = ({data}) => { const {t} = useTranslation(); + if (!data) return <> + return ( @@ -14,7 +16,7 @@ const OnlineActivityAsNumbersCard = () => { {t('html.label.onlineActivityAsNumbers')} - + ) } diff --git a/Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.js b/Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.js index cd0095b9b..96186102c 100644 --- a/Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.js +++ b/Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.js @@ -3,10 +3,10 @@ import {Card} from "react-bootstrap-v5"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faExchangeAlt, faUsers} from "@fortawesome/free-solid-svg-icons"; import ComparisonTable from "../../../table/ComparisonTable"; -import {TableRow} from "../../../table/AsNumbersTable"; import BigTrend from "../../../trend/BigTrend"; import React from "react"; import {faClock} from "@fortawesome/free-regular-svg-icons"; +import {TableRow} from "../../../table/TableRow"; const PlayerbaseTrendsCard = ({data}) => { const {t} = useTranslation(); diff --git a/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js b/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js index 743978964..0fab9b3c1 100644 --- a/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js +++ b/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js @@ -3,10 +3,10 @@ import {Card} from "react-bootstrap-v5"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faCrosshairs, faExchangeAlt, faSkull, faUsers} from "@fortawesome/free-solid-svg-icons"; import ComparisonTable from "../../../table/ComparisonTable"; -import {TableRow} from "../../../table/AsNumbersTable"; import BigTrend from "../../../trend/BigTrend"; import {faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons"; import React from "react"; +import {TableRow} from "../../../table/TableRow"; const ServerWeekComparisonCard = ({data}) => { const {t} = useTranslation(); diff --git a/Plan/react/dashboard/src/components/layout/End.js b/Plan/react/dashboard/src/components/layout/End.js new file mode 100644 index 000000000..bc4ffa55a --- /dev/null +++ b/Plan/react/dashboard/src/components/layout/End.js @@ -0,0 +1,7 @@ +import React from "react"; + +const End = ({children}) => ( + {children} +) + +export default End; \ No newline at end of file diff --git a/Plan/react/dashboard/src/components/table/AsNumbersTable.js b/Plan/react/dashboard/src/components/table/AsNumbersTable.js index 7df590294..c227cdf2c 100644 --- a/Plan/react/dashboard/src/components/table/AsNumbersTable.js +++ b/Plan/react/dashboard/src/components/table/AsNumbersTable.js @@ -1,5 +1,4 @@ import React from "react"; -import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {useTheme} from "../../hooks/themeHook"; const AsNumbersTable = ({headers, children}) => { @@ -18,14 +17,4 @@ const AsNumbersTable = ({headers, children}) => { } -export const TableRow = ({icon, text, color, values, bold}) => { - const label = (<> {text}); - return ( - - {bold ? {label} : label} - {values.map((value, j) => {value})} - - ) -} - export default AsNumbersTable \ No newline at end of file diff --git a/Plan/react/dashboard/src/components/table/ComparisonTable.js b/Plan/react/dashboard/src/components/table/ComparisonTable.js index b3aebd70c..b24440c1f 100644 --- a/Plan/react/dashboard/src/components/table/ComparisonTable.js +++ b/Plan/react/dashboard/src/components/table/ComparisonTable.js @@ -1,21 +1,15 @@ import React from "react"; -import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; -import {faCaretDown, faCaretUp} from "@fortawesome/free-solid-svg-icons"; import {useTheme} from "../../hooks/themeHook"; +import ComparingLabel from "../trend/ComparingLabel"; const ComparisonTable = ({headers, children, comparisonHeader}) => { const {nightModeEnabled} = useTheme(); - const zeroWidthIcon = {width: "0.7rem"} - return {headers.map((header, i) => )} @@ -26,14 +20,4 @@ const ComparisonTable = ({headers, children, comparisonHeader}) => {
- - {' '}{comparisonHeader} + {comparisonHeader} {header}
} -export const TableRow = ({icon, text, color, values, bold}) => { - const label = (<> {text}); - return ( - - {bold ? {label} : label} - {values.map((value, j) => {value})} - - ) -} - export default ComparisonTable \ No newline at end of file diff --git a/Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js b/Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js index 995439c82..4aa3c9be7 100644 --- a/Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js +++ b/Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js @@ -1,17 +1,85 @@ import {useTranslation} from "react-i18next"; -import AsNumbersTable, {TableRow} from "./AsNumbersTable"; -import {faUsers} from "@fortawesome/free-solid-svg-icons"; +import {faUser, faUserCircle, faUserPlus, faUsers} from "@fortawesome/free-solid-svg-icons"; import React 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"; -const OnlineActivityAsNumbersTable = () => { +const OnlineActivityAsNumbersTable = ({data}) => { const {t} = useTranslation(); + if (!data) return <>; + return ( - - + values={[ + <>{data.unique_players_30d}{' '}, + data.unique_players_7d, + data.unique_players_24h + ]}/> + {data.unique_players_30d_avg}{' '}, + data.unique_players_7d_avg, + data.unique_players_24h_avg + ]}/> + {data.new_players_30d}{' '}, + data.new_players_7d, + data.new_players_24h + ]}/> + {data.new_players_30d_avg}{' '}, + data.new_players_7d_avg, + data.new_players_24h_avg + ]}/> + {`(${data.new_players_retention_24h}/${data.new_players_24h}) ${data.new_players_retention_24h_perc}`} + ]}/> + {data.playtime_30d}{' '}, + data.playtime_7d, + data.playtime_24h + ]}/> + {data.playtime_30d_avg}{' '}, + data.playtime_7d_avg, + data.playtime_24h_avg + ]}/> + {data.session_length_30d_avg}{' '}, + data.session_length_7d_avg, + data.session_length_24h_avg + ]}/> + {data.sessions_30d}{' '}, + data.sessions_7d, + data.sessions_24h + ]}/> + ) } diff --git a/Plan/react/dashboard/src/components/table/PlayerPvpPveAsNumbersTable.js b/Plan/react/dashboard/src/components/table/PlayerPvpPveAsNumbersTable.js index 36f971865..bed994e12 100644 --- a/Plan/react/dashboard/src/components/table/PlayerPvpPveAsNumbersTable.js +++ b/Plan/react/dashboard/src/components/table/PlayerPvpPveAsNumbersTable.js @@ -1,7 +1,8 @@ import {useTranslation} from "react-i18next"; -import AsNumbersTable, {TableRow} from "./AsNumbersTable"; +import AsNumbersTable from "./AsNumbersTable"; import {faCrosshairs, faSkull} from "@fortawesome/free-solid-svg-icons"; import React from "react"; +import {TableRow} from "./TableRow"; const PlayerPvpPveAsNumbersTable = ({killData}) => { const {t} = useTranslation(); diff --git a/Plan/react/dashboard/src/components/table/ServerPvpPveAsNumbersTable.js b/Plan/react/dashboard/src/components/table/ServerPvpPveAsNumbersTable.js index 717333452..49e4ac44e 100644 --- a/Plan/react/dashboard/src/components/table/ServerPvpPveAsNumbersTable.js +++ b/Plan/react/dashboard/src/components/table/ServerPvpPveAsNumbersTable.js @@ -1,7 +1,8 @@ import {useTranslation} from "react-i18next"; -import AsNumbersTable, {TableRow} from "./AsNumbersTable"; +import AsNumbersTable from "./AsNumbersTable"; import {faCrosshairs, faSkull} from "@fortawesome/free-solid-svg-icons"; import React from "react"; +import {TableRow} from "./TableRow"; const ServerPvpPveAsNumbersTable = ({killData}) => { const {t} = useTranslation(); diff --git a/Plan/react/dashboard/src/components/table/TableRow.js b/Plan/react/dashboard/src/components/table/TableRow.js new file mode 100644 index 000000000..8ee14e789 --- /dev/null +++ b/Plan/react/dashboard/src/components/table/TableRow.js @@ -0,0 +1,12 @@ +import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; +import React from "react"; + +export const TableRow = ({icon, text, color, values, bold}) => { + const label = (<> {text}); + return ( + + {bold ? {label} : label} + {values.map((value, j) => {value})} + + ) +} \ No newline at end of file diff --git a/Plan/react/dashboard/src/components/trend/ComparingLabel.js b/Plan/react/dashboard/src/components/trend/ComparingLabel.js new file mode 100644 index 000000000..57e5fe087 --- /dev/null +++ b/Plan/react/dashboard/src/components/trend/ComparingLabel.js @@ -0,0 +1,13 @@ +import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; +import {faCaretDown, faCaretUp} from "@fortawesome/free-solid-svg-icons"; +import React from "react"; + +const ComparingLabel = ({children}) => { + return (<> + + + {' '}{children} + ); +} + +export default ComparingLabel; \ No newline at end of file diff --git a/Plan/react/dashboard/src/components/trend/SmallTrend.js b/Plan/react/dashboard/src/components/trend/SmallTrend.js index 962e40c6c..a37f6b50d 100644 --- a/Plan/react/dashboard/src/components/trend/SmallTrend.js +++ b/Plan/react/dashboard/src/components/trend/SmallTrend.js @@ -2,11 +2,11 @@ import React from "react"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faCaretDown, faCaretRight, faCaretUp} from "@fortawesome/free-solid-svg-icons"; -const TrendUpGood = ({value}) => ; -const TrendUpBad = ({value}) => ; -const TrendDownBad = ({value}) => ; -const TrendDownGood = ({value}) => ; -const TrendSame = ({value}) => ; +const TrendUpGood = ({value}) => ; +const TrendUpBad = ({value}) => ; +const TrendDownBad = ({value}) => ; +const TrendDownGood = ({value}) => ; +const TrendSame = ({value}) => ; const SmallTrend = ({trend}) => { diff --git a/Plan/react/dashboard/src/style/main.sass b/Plan/react/dashboard/src/style/main.sass index 215106725..fff645191 100644 --- a/Plan/react/dashboard/src/style/main.sass +++ b/Plan/react/dashboard/src/style/main.sass @@ -4,8 +4,9 @@ p, span, td, .h3, a, button .svg-inline--fa, .fa, .far, .fas, .fab - text-align: center !important - width: 1.25em !important + &:not(.comparing):not(.trend) + text-align: center !important + width: 1.25em !important .card @extend .shadow diff --git a/Plan/react/dashboard/src/views/player/PlayerOverview.js b/Plan/react/dashboard/src/views/player/PlayerOverview.js index ef5d138a9..dbf912d9e 100644 --- a/Plan/react/dashboard/src/views/player/PlayerOverview.js +++ b/Plan/react/dashboard/src/views/player/PlayerOverview.js @@ -21,12 +21,13 @@ import {faSuperpowers} from "@fortawesome/free-brands-svg-icons"; import Scrollable from "../../components/Scrollable"; import PunchCard from "../../components/graphs/PunchCard"; import Datapoint from "../../components/Datapoint"; -import AsNumbersTable, {TableRow} from "../../components/table/AsNumbersTable"; +import AsNumbersTable from "../../components/table/AsNumbersTable"; import {useTheme} from "../../hooks/themeHook"; import {usePlayer} from "../layout/PlayerPage"; import {useMetadata} from "../../hooks/metadataHook"; import {useTranslation} from "react-i18next"; import NicknamesCard from "../../components/cards/player/NicknamesCard"; +import {TableRow} from "../../components/table/TableRow"; const PlayerOverviewCard = ({player}) => { const {t} = useTranslation(); diff --git a/Plan/react/dashboard/src/views/server/OnlineActivity.js b/Plan/react/dashboard/src/views/server/OnlineActivity.js index 71588efd6..d29d4c2a0 100644 --- a/Plan/react/dashboard/src/views/server/OnlineActivity.js +++ b/Plan/react/dashboard/src/views/server/OnlineActivity.js @@ -25,10 +25,10 @@ const OnlineActivity = () => { - + - +