mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2025-01-21 15:41:24 +01:00
Implemented more of the layout for server page
- Sessions accordion table headers - PvP & Pve layout - Playerbase graph layout - Updated font awesome to 6.1.1
This commit is contained in:
Aurora Lahtela
parent
45baebfb01
commit
b942078485
@ -133,6 +133,7 @@ public enum HtmlLang implements Lang {
|
||||
LINK_BACK_NETWORK("html.label.networkPage", "Network page"),
|
||||
SIDE_PVP_PVE("html.label.pvpPve", "PvP & PvE"),
|
||||
LABEL_RETENTION("html.label.newPlayerRetention", "New Player Retention"),
|
||||
LABEL_RETENTION_GENERAL("html.label.playerRetention", "Player Retention"),
|
||||
DESCRIBE_RETENTION_PREDICTION("html.description.newPlayerRetention", "This value is a prediction based on previous players."),
|
||||
TITLE_SERVER_AS_NUMBERS("html.label.serverAsNumberse", "Server as Numbers"),
|
||||
TITLE_ONLINE_ACTIVITY_AS_NUMBERS("html.label.onlineActivityAsNumbers", "Online Activity as Numbers"),
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
"private": true,
|
||||
"proxy": "https://localhost:8804",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/react-fontawesome": "^0.1.16",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"@fortawesome/react-fontawesome": "^0.1.18",
|
||||
"@fullcalendar/bootstrap": "^5.10.1",
|
||||
"@fullcalendar/daygrid": "^5.10.1",
|
||||
"@fullcalendar/react": "^5.10.1",
|
||||
|
||||
@ -22,6 +22,8 @@ import ServerOverview from "./views/ServerOverview";
|
||||
import MainPageRedirect from "./components/navigation/MainPageRedirect";
|
||||
import ServerOnlineActivity from "./views/ServerOnlineActivity";
|
||||
import ServerSessions from "./views/ServerSessions";
|
||||
import ServerPvpPve from "./views/ServerPvpPve";
|
||||
import ServerPlayerbaseOverview from "./views/ServerPlayerbaseOverview";
|
||||
|
||||
const OverviewRedirect = () => {
|
||||
return (<Navigate to={"overview"} replace={true}/>)
|
||||
@ -67,8 +69,9 @@ function App() {
|
||||
<Route path="overview" element={<ServerOverview/>}/>
|
||||
<Route path="online-activity" element={<ServerOnlineActivity/>}/>
|
||||
<Route path="sessions" element={<ServerSessions/>}/>
|
||||
<Route path="pvppve" element={<></>}/>
|
||||
<Route path="playerbase" element={<></>}/>
|
||||
<Route path="pvppve" element={<ServerPvpPve/>}/>
|
||||
<Route path="playerbase" element={<ServerPlayerbaseOverview/>}/>
|
||||
<Route path="retention" element={<></>}/>
|
||||
<Route path="players" element={<></>}/>
|
||||
<Route path="geolocations" element={<></>}/>
|
||||
<Route path="performance" element={<></>}/>
|
||||
|
||||
@ -82,13 +82,18 @@ const SessionBody = ({i, session}) => {
|
||||
|
||||
const SessionAccordion = (
|
||||
{
|
||||
sessions
|
||||
sessions,
|
||||
isPlayer
|
||||
}
|
||||
) => {
|
||||
const {t} = useTranslation();
|
||||
|
||||
const firstColumn = isPlayer ? (<><Fa icon={faUser}/> {t('html.label.player')}</>)
|
||||
: (<><Fa icon={faServer}/> {t('html.label.server')}</>)
|
||||
|
||||
return (
|
||||
<Accordion headers={[
|
||||
<><Fa icon={faServer}/> {t('html.label.server')}</>,
|
||||
firstColumn,
|
||||
<><Fa icon={faClock}/> {t('html.label.sessionStart')}</>,
|
||||
<><Fa icon={faClock}/> {t('html.label.length')}</>,
|
||||
<><Fa icon={faMap}/> {t('html.label.mostPlayedWorld')}</>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {Card} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faLifeRing} from "@fortawesome/free-solid-svg-icons";
|
||||
import React from "react";
|
||||
import {faLifeRing} from "@fortawesome/free-regular-svg-icons";
|
||||
|
||||
const InsightsFor30DaysCard = ({children}) => {
|
||||
const {t} = useTranslation();
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {Card} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faCrosshairs} from "@fortawesome/free-solid-svg-icons";
|
||||
import KillsTable from "../../table/KillsTable";
|
||||
import React from "react";
|
||||
|
||||
const PvpKillsTableCard = ({player_kills}) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<h6 className="col-black">
|
||||
<Fa icon={faCrosshairs} className="col-red"/> {t('html.label.recentPvpKills')}
|
||||
</h6>
|
||||
</Card.Header>
|
||||
<KillsTable kills={player_kills}/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default PvpKillsTableCard;
|
||||
@ -6,7 +6,7 @@ import Scrollable from "../../Scrollable";
|
||||
import SessionAccordion from "../../accordion/SessionAccordion";
|
||||
import React from "react";
|
||||
|
||||
const RecentSessionsCard = ({sessions}) => {
|
||||
const RecentSessionsCard = ({sessions, isPlayer}) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<Card>
|
||||
@ -19,7 +19,7 @@ const RecentSessionsCard = ({sessions}) => {
|
||||
</h6>
|
||||
</Card.Header>
|
||||
<Scrollable>
|
||||
<SessionAccordion sessions={sessions}/>
|
||||
<SessionAccordion sessions={sessions} isPlayer={isPlayer}/>
|
||||
</Scrollable>
|
||||
</Card>
|
||||
)
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
import {Card} from "react-bootstrap-v5";
|
||||
import Datapoint from "../../Datapoint";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faLongArrowAltRight} from "@fortawesome/free-solid-svg-icons";
|
||||
import BigTrend from "../../trend/BigTrend";
|
||||
import React from "react";
|
||||
|
||||
const TrendCard = ({icon, color, name, previous, next, trend}) => {
|
||||
return <Card>
|
||||
<Card.Body>
|
||||
<Datapoint icon={icon} name={name} color={color}
|
||||
value={
|
||||
<>
|
||||
{previous} <Fa icon={faLongArrowAltRight}/> {next} <BigTrend trend={trend}/>
|
||||
</>
|
||||
}/>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
}
|
||||
|
||||
export default TrendCard;
|
||||
@ -3,7 +3,7 @@ import {Card} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faCampground} from "@fortawesome/free-solid-svg-icons";
|
||||
import React from "react";
|
||||
import PvpPveAsNumbersTable from "../../table/PvpPveAsNumbersTable";
|
||||
import PlayerPvpPveAsNumbersTable from "../../table/PlayerPvpPveAsNumbersTable";
|
||||
|
||||
const PvpPveAsNumbersCard = ({player}) => {
|
||||
const {t} = useTranslation();
|
||||
@ -14,7 +14,7 @@ const PvpPveAsNumbersCard = ({player}) => {
|
||||
<Fa icon={faCampground} className="col-red"/> {t('html.label.pvpPveAsNumbers')}
|
||||
</h6>
|
||||
</Card.Header>
|
||||
<PvpPveAsNumbersTable killData={player.kill_data}/>
|
||||
<PlayerPvpPveAsNumbersTable killData={player.kill_data}/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {useDataRequest} from "../../../hooks/dataFetchHook";
|
||||
import {fetchPlayerbaseDevelopmentGraph} from "../../../service/serverService";
|
||||
import {ErrorViewBody} from "../../../views/ErrorView";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {Card} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faUsers} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
const CurrentPlayerbaseCard = () => {
|
||||
const {t} = useTranslation();
|
||||
const {identifier} = useParams();
|
||||
|
||||
const {data, loadingError} = useDataRequest(fetchPlayerbaseDevelopmentGraph, [identifier]);
|
||||
|
||||
if (loadingError) return <ErrorViewBody error={loadingError}/>
|
||||
if (!data) return <></>;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<h6 className="col-black" style={{width: '100%'}}>
|
||||
<Fa icon={faUsers} className="col-amber"/> {t('html.label.currentPlayerbase')}
|
||||
</h6>
|
||||
</Card.Header>
|
||||
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default CurrentPlayerbaseCard;
|
||||
@ -0,0 +1,35 @@
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {useDataRequest} from "../../../hooks/dataFetchHook";
|
||||
import {fetchPlayersOnlineGraph} from "../../../service/serverService";
|
||||
import {ErrorViewCard} from "../../../views/ErrorView";
|
||||
import {Card} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faChartArea} from "@fortawesome/free-solid-svg-icons";
|
||||
import PlayersOnlineGraph from "../../graphs/PlayersOnlineGraph";
|
||||
import React from "react";
|
||||
|
||||
const OnlineActivityCard = () => {
|
||||
const {t} = useTranslation();
|
||||
const {identifier} = useParams();
|
||||
|
||||
const {data, loadingError} = useDataRequest(
|
||||
fetchPlayersOnlineGraph,
|
||||
[identifier])
|
||||
|
||||
if (!data) return <></>;
|
||||
if (loadingError) return <ErrorViewCard error={loadingError}/>
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<h6 className="col-black">
|
||||
<Fa className="col-blue" icon={faChartArea}/> {t('html.label.onlineActivity')}
|
||||
</h6>
|
||||
</Card.Header>
|
||||
<PlayersOnlineGraph data={data}/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default OnlineActivityCard;
|
||||
@ -0,0 +1,35 @@
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {useDataRequest} from "../../../hooks/dataFetchHook";
|
||||
import {fetchPlayerbaseDevelopmentGraph} from "../../../service/serverService";
|
||||
import {ErrorViewCard} from "../../../views/ErrorView";
|
||||
import {Card} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faChartLine} from "@fortawesome/free-solid-svg-icons";
|
||||
import PlayersOnlineGraph from "../../graphs/PlayersOnlineGraph";
|
||||
import React from "react";
|
||||
|
||||
const PlayerbaseDevelopmentCard = () => {
|
||||
const {t} = useTranslation();
|
||||
const {identifier} = useParams();
|
||||
|
||||
const {data, loadingError} = useDataRequest(
|
||||
fetchPlayerbaseDevelopmentGraph,
|
||||
[identifier])
|
||||
|
||||
if (!data) return <></>;
|
||||
if (loadingError) return <ErrorViewCard error={loadingError}/>
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<h6 className="col-black">
|
||||
<Fa className="col-amber" icon={faChartLine}/> {t('html.label.playerbaseDevelopment')}
|
||||
</h6>
|
||||
</Card.Header>
|
||||
<PlayersOnlineGraph data={data}/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default PlayerbaseDevelopmentCard;
|
||||
@ -0,0 +1,22 @@
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {Card} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faCampground} from "@fortawesome/free-solid-svg-icons";
|
||||
import React from "react";
|
||||
import ServerPvpPveAsNumbersTable from "../../table/ServerPvpPveAsNumbersTable";
|
||||
|
||||
const PvpPveAsNumbersCard = ({kill_data}) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<h6 className="col-black">
|
||||
<Fa icon={faCampground} className="col-red"/> {t('html.label.pvpPveAsNumbers')}
|
||||
</h6>
|
||||
</Card.Header>
|
||||
<ServerPvpPveAsNumbersTable killData={kill_data}/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default PvpPveAsNumbersCard;
|
||||
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import InsightsFor30DaysCard from "../common/InsightsFor30DaysCard";
|
||||
|
||||
const PvpPveInsightsCard = () => {
|
||||
return (
|
||||
<InsightsFor30DaysCard>
|
||||
TODO
|
||||
</InsightsFor30DaysCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default PvpPveInsightsCard;
|
||||
@ -15,7 +15,7 @@ const ServerRecentSessionsCard = () => {
|
||||
if (!data) return <></>;
|
||||
|
||||
return (
|
||||
<RecentSessionsCard sessions={data.sessions}/>
|
||||
<RecentSessionsCard sessions={data.sessions} isPlayer={true}/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,6 @@ const ServerWorldPieCard = () => {
|
||||
const {identifier} = useParams();
|
||||
|
||||
const {data, loadingError} = useDataRequest(fetchWorldPie, [identifier]);
|
||||
console.log(data);
|
||||
|
||||
if (loadingError) return <ErrorViewBody error={loadingError}/>
|
||||
if (!data) return <></>;
|
||||
|
||||
@ -30,7 +30,7 @@ const LineGraph = ({id, series}) => {
|
||||
},
|
||||
series: series
|
||||
})
|
||||
}, [series, graphTheming])
|
||||
}, [series, graphTheming, id, t])
|
||||
|
||||
return (
|
||||
<div className="chart-area" id={id}>
|
||||
|
||||
@ -3,7 +3,7 @@ import AsNumbersTable, {TableRow} from "./AsNumbersTable";
|
||||
import {faCrosshairs, faSkull} from "@fortawesome/free-solid-svg-icons";
|
||||
import React from "react";
|
||||
|
||||
const PvpPveAsNumbersTable = ({killData}) => {
|
||||
const PlayerPvpPveAsNumbersTable = ({killData}) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<AsNumbersTable
|
||||
@ -41,4 +41,4 @@ const PvpPveAsNumbersTable = ({killData}) => {
|
||||
)
|
||||
}
|
||||
|
||||
export default PvpPveAsNumbersTable;
|
||||
export default PlayerPvpPveAsNumbersTable;
|
||||
@ -0,0 +1,40 @@
|
||||
import {useTranslation} from "react-i18next";
|
||||
import AsNumbersTable, {TableRow} from "./AsNumbersTable";
|
||||
import {faCrosshairs, faSkull} from "@fortawesome/free-solid-svg-icons";
|
||||
import React from "react";
|
||||
|
||||
const ServerPvpPveAsNumbersTable = ({killData}) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<AsNumbersTable
|
||||
headers={[t('html.label.allTime'), t('html.label.last30days'), t('html.label.last7days')]}
|
||||
>
|
||||
<TableRow icon={faCrosshairs} color="red" text={t('html.label.averageKdr')}
|
||||
values={[killData.player_kdr_total,
|
||||
killData.player_kdr_30d,
|
||||
killData.player_kdr_7d]}/>
|
||||
<TableRow icon={faCrosshairs} color="red" text={t('html.label.playerKills')}
|
||||
values={[killData.player_kills_total,
|
||||
killData.player_kills_30d,
|
||||
killData.player_kills_7d]}/>
|
||||
<TableRow icon={faCrosshairs} color="green" text={t('html.label.averageMobKdr')}
|
||||
values={[killData.mob_kdr_total,
|
||||
killData.mob_kdr_30d,
|
||||
killData.mob_kdr_7d]}/>
|
||||
<TableRow icon={faCrosshairs} color="green" text={t('html.label.mobKills')}
|
||||
values={[killData.mob_kills_total,
|
||||
killData.mob_kills_30d,
|
||||
killData.mob_kills_7d]}/>
|
||||
<TableRow icon={faSkull} color="green" text={t('html.label.mobDeaths')}
|
||||
values={[killData.mob_deaths_total,
|
||||
killData.mob_deaths_30d,
|
||||
killData.mob_deaths_7d]}/>
|
||||
<TableRow icon={faSkull} color="black" text={t('html.label.deaths')}
|
||||
values={[killData.deaths_total,
|
||||
killData.deaths_30d,
|
||||
killData.deaths_7d]}/>
|
||||
</AsNumbersTable>
|
||||
)
|
||||
}
|
||||
|
||||
export default ServerPvpPveAsNumbersTable;
|
||||
@ -12,6 +12,12 @@ export const fetchOnlineActivityOverview = async (identifier) => {
|
||||
return doGetRequest(url);
|
||||
}
|
||||
|
||||
export const fetchPlayerbaseOverview = async (identifier) => {
|
||||
const timestamp = Date.now();
|
||||
const url = `/v1/playerbaseOverview?server=${identifier}×tamp=${timestamp}`;
|
||||
return doGetRequest(url);
|
||||
}
|
||||
|
||||
export const fetchSessions = async (identifier) => {
|
||||
const timestamp = Date.now();
|
||||
const url = `/v1/sessions?server=${identifier}×tamp=${timestamp}`;
|
||||
@ -24,6 +30,12 @@ export const fetchPlayersOnlineGraph = async (identifier) => {
|
||||
return doGetRequest(url);
|
||||
}
|
||||
|
||||
export const fetchPlayerbaseDevelopmentGraph = async (identifier) => {
|
||||
const timestamp = Date.now();
|
||||
const url = `/v1/graph?type=activity&server=${identifier}×tamp=${timestamp}`;
|
||||
return doGetRequest(url);
|
||||
}
|
||||
|
||||
export const fetchDayByDayGraph = async (identifier) => {
|
||||
const timestamp = Date.now();
|
||||
const url = `/v1/graph?type=uniqueAndNew&server=${identifier}×tamp=${timestamp}`;
|
||||
|
||||
@ -2,12 +2,13 @@ import React from "react";
|
||||
import {Card, Col, Row} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {faLifeRing} from "@fortawesome/free-regular-svg-icons";
|
||||
import {faCrosshairs, faKhanda, faSkull} from "@fortawesome/free-solid-svg-icons";
|
||||
import {faKhanda, faSkull} from "@fortawesome/free-solid-svg-icons";
|
||||
import Datapoint from "../components/Datapoint";
|
||||
import KillsTable from "../components/table/KillsTable";
|
||||
import {usePlayer} from "./PlayerPage";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import PvpPveAsNumbersCard from "../components/cards/player/PvpPveAsNumbersCard";
|
||||
import PvpKillsTableCard from "../components/cards/common/PvpKillsTableCard";
|
||||
|
||||
const InsightsCard = ({player}) => {
|
||||
const {t} = useTranslation();
|
||||
@ -30,20 +31,6 @@ const InsightsCard = ({player}) => {
|
||||
)
|
||||
}
|
||||
|
||||
const PvpKillsTableCard = ({player}) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<h6 className="col-black">
|
||||
<Fa icon={faCrosshairs} className="col-red"/> {t('html.label.recentPvpKills')}
|
||||
</h6>
|
||||
</Card.Header>
|
||||
<KillsTable kills={player.player_kills}/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const PvpDeathsTableCard = ({player}) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
@ -72,7 +59,7 @@ const PlayerPvpPve = () => {
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={6}>
|
||||
<PvpKillsTableCard player={player}/>
|
||||
<PvpKillsTableCard player_kills={player.player_kills}/>
|
||||
</Col>
|
||||
<Col lg={6}>
|
||||
<PvpDeathsTableCard player={player}/>
|
||||
|
||||
@ -4,7 +4,6 @@ import {Card, Col, Row} from "react-bootstrap-v5";
|
||||
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faBookOpen,
|
||||
faChartArea,
|
||||
faChartLine,
|
||||
faCrosshairs,
|
||||
faExchangeAlt,
|
||||
@ -17,39 +16,15 @@ import {
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import Datapoint from "../components/Datapoint";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import PlayersOnlineGraph from "../components/graphs/PlayersOnlineGraph";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {fetchPlayersOnlineGraph, fetchServerOverview} from "../service/serverService";
|
||||
import {fetchServerOverview} from "../service/serverService";
|
||||
import {faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons";
|
||||
import {TableRow} from "../components/table/AsNumbersTable";
|
||||
import ComparisonTable from "../components/table/ComparisonTable";
|
||||
import BigTrend from "../components/trend/BigTrend";
|
||||
import ErrorView, {ErrorViewCard} from "./ErrorView";
|
||||
import ErrorView from "./ErrorView";
|
||||
import {useDataRequest} from "../hooks/dataFetchHook";
|
||||
|
||||
|
||||
const OnlineActivityCard = () => {
|
||||
const {t} = useTranslation();
|
||||
const {identifier} = useParams();
|
||||
|
||||
const {data, loadingError} = useDataRequest(
|
||||
fetchPlayersOnlineGraph,
|
||||
[identifier])
|
||||
|
||||
if (!data) return <></>;
|
||||
if (loadingError) return <ErrorViewCard error={loadingError}/>
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card.Header>
|
||||
<h6 className="col-black">
|
||||
<Fa className="col-blue" icon={faChartArea}/> {t('html.label.onlineActivity')}
|
||||
</h6>
|
||||
</Card.Header>
|
||||
<PlayersOnlineGraph data={data}/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
import OnlineActivityCard from "../components/cards/server/OnlineActivityCard";
|
||||
|
||||
const Last7DaysCard = ({data}) => {
|
||||
const {t} = useTranslation();
|
||||
|
||||
@ -11,7 +11,9 @@ import {
|
||||
faGlobe,
|
||||
faInfoCircle,
|
||||
faSearch,
|
||||
faUsers
|
||||
faUserGroup,
|
||||
faUsers,
|
||||
faUsersViewfinder
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import {useAuth} from "../hooks/authenticationHook";
|
||||
import {NightModeCss} from "../hooks/themeHook";
|
||||
@ -60,7 +62,8 @@ const ServerPage = () => {
|
||||
icon: faChartLine,
|
||||
href: "playerbase"
|
||||
},
|
||||
{name: 'html.label.playerList', icon: faUsers, href: "players"},
|
||||
{name: 'html.label.playerRetention', icon: faUsersViewfinder, href: "retention"},
|
||||
{name: 'html.label.playerList', icon: faUserGroup, href: "players"},
|
||||
{name: 'html.label.geolocations', icon: faGlobe, href: "geolocations"},
|
||||
]
|
||||
},
|
||||
|
||||
41
Plan/react/dashboard/src/views/ServerPlayerbaseOverview.js
Normal file
41
Plan/react/dashboard/src/views/ServerPlayerbaseOverview.js
Normal file
@ -0,0 +1,41 @@
|
||||
import {Col, Row} from "react-bootstrap-v5";
|
||||
import React from "react";
|
||||
import PlayerbaseDevelopmentCard from "../components/cards/server/PlayerbaseDevelopmentCard";
|
||||
import CurrentPlayerbaseCard from "../components/cards/server/CurrentPlayerbaseCard";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {useDataRequest} from "../hooks/dataFetchHook";
|
||||
import {fetchPlayerbaseOverview} from "../service/serverService";
|
||||
import ErrorView from "./ErrorView";
|
||||
|
||||
const ServerPlayerbaseOverview = () => {
|
||||
const {identifier} = useParams();
|
||||
|
||||
const {data, loadingError} = useDataRequest(fetchPlayerbaseOverview, [identifier]);
|
||||
|
||||
if (!data) return <></>;
|
||||
if (loadingError) return <ErrorView error={loadingError}/>
|
||||
|
||||
return (
|
||||
<section className="server_playerbase">
|
||||
<Row>
|
||||
<Col lg={8}>
|
||||
<PlayerbaseDevelopmentCard/>
|
||||
</Col>
|
||||
<Col lg={4}>
|
||||
<CurrentPlayerbaseCard/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={8}>
|
||||
|
||||
</Col>
|
||||
<Col lg={4}>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</section>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ServerPlayerbaseOverview;
|
||||
24
Plan/react/dashboard/src/views/ServerPvpPve.js
Normal file
24
Plan/react/dashboard/src/views/ServerPvpPve.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import PvpPveAsNumbersCard from "../components/cards/server/PvpPveAsNumbersCard";
|
||||
import {Col, Row} from "react-bootstrap-v5";
|
||||
import PvpKillsTableCard from "../components/cards/common/PvpKillsTableCard";
|
||||
import PvpPveInsightsCard from "../components/cards/server/PvpPveInsightsCard";
|
||||
|
||||
const ServerPvpPve = () => {
|
||||
return (
|
||||
<section className="server_pvp_pve">
|
||||
<Row>
|
||||
<Col lg={8}>
|
||||
<PvpPveAsNumbersCard kill_data={{}}/>
|
||||
<PvpKillsTableCard player_kills={[]}/>
|
||||
</Col>
|
||||
<Col lg={4}>
|
||||
<PvpPveInsightsCard/>
|
||||
</Col>
|
||||
</Row>
|
||||
</section>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ServerPvpPve;
|
||||
@ -1017,13 +1017,20 @@
|
||||
core-js-pure "^3.20.2"
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
version "7.17.9"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
|
||||
integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.14.5":
|
||||
version "7.18.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.0.tgz#6d77142a19cb6088f0af662af1ada37a604d34ae"
|
||||
integrity sha512-YMQvx/6nKEaucl0MY56mwIG483xk8SDNdlUwb2Ts6FUpr7fm85DxEmsY18LXBNhcTz6tO6JwZV8w1W06v8UKeg==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/template@^7.16.7", "@babel/template@^7.3.3":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
|
||||
@ -1141,45 +1148,40 @@
|
||||
minimatch "^3.0.4"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@fortawesome/fontawesome-common-types@^0.2.36":
|
||||
version "0.2.36"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
|
||||
integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
|
||||
"@fortawesome/fontawesome-common-types@6.1.1":
|
||||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz#7dc996042d21fc1ae850e3173b5c67b0549f9105"
|
||||
integrity sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==
|
||||
|
||||
"@fortawesome/fontawesome-common-types@^0.3.0":
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz#949995a05c0d8801be7e0a594f775f1dbaa0d893"
|
||||
integrity sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==
|
||||
|
||||
"@fortawesome/fontawesome-svg-core@^1.2.36":
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz#343fac91fa87daa630d26420bfedfba560f85885"
|
||||
integrity sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==
|
||||
"@fortawesome/fontawesome-svg-core@^6.1.1":
|
||||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz#3424ec6182515951816be9b11665d67efdce5b5f"
|
||||
integrity sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.3.0"
|
||||
"@fortawesome/fontawesome-common-types" "6.1.1"
|
||||
|
||||
"@fortawesome/free-brands-svg-icons@^5.15.4":
|
||||
version "5.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733"
|
||||
integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==
|
||||
"@fortawesome/free-brands-svg-icons@^6.1.1":
|
||||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz#3580961d4f42bd51dc171842402f23a18a5480b1"
|
||||
integrity sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.36"
|
||||
"@fortawesome/fontawesome-common-types" "6.1.1"
|
||||
|
||||
"@fortawesome/free-regular-svg-icons@^5.15.4":
|
||||
version "5.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
|
||||
integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
|
||||
"@fortawesome/free-regular-svg-icons@^6.1.1":
|
||||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz#3f2f58262a839edf0643cbacee7a8a8230061c98"
|
||||
integrity sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.36"
|
||||
"@fortawesome/fontawesome-common-types" "6.1.1"
|
||||
|
||||
"@fortawesome/free-solid-svg-icons@^5.15.4":
|
||||
version "5.15.4"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
|
||||
integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
|
||||
"@fortawesome/free-solid-svg-icons@^6.1.1":
|
||||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz#3369e673f8fe8be2fba30b1ec274d47490a830a6"
|
||||
integrity sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==
|
||||
dependencies:
|
||||
"@fortawesome/fontawesome-common-types" "^0.2.36"
|
||||
"@fortawesome/fontawesome-common-types" "6.1.1"
|
||||
|
||||
"@fortawesome/react-fontawesome@^0.1.16":
|
||||
"@fortawesome/react-fontawesome@^0.1.18":
|
||||
version "0.1.18"
|
||||
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz#dae37f718a24e14d7a99a5496c873d69af3fbd73"
|
||||
integrity sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==
|
||||
@ -7283,9 +7285,9 @@ react-error-overlay@^6.0.11:
|
||||
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
|
||||
|
||||
react-i18next@^11.16.1:
|
||||
version "11.16.7"
|
||||
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.16.7.tgz#8d0680b7f4c8e43f59996336b7183ad576a28df7"
|
||||
integrity sha512-7yotILJLnKfvUfrl/nt9eK9vFpVFjZPLWAwBzWL6XppSZZEvlmlKk0GBGDCAPfLfs8oND7WAbry8wGzdoiW5Nw==
|
||||
version "11.16.9"
|
||||
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.16.9.tgz#890cdac0c49120e075d6c520b43dbad3f91bd2df"
|
||||
integrity sha512-euXxWvcEAvsY7ZVkwx9ztCq4butqtsGHEkpkuo0RMj8Ru09IF9o2KxCyN+zyv51Nr0aBh/elaTIiR6fMb8YfVg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.14.5"
|
||||
html-escaper "^2.0.2"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user