mirror/Plan
2
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2024-12-27 05:58:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implemented Network PlayerBase overview in React

Browse Source
This commit is contained in:
Aurora Lahtela 2022-09-11 09:42:03 +03:00
parent cb7749d778
commit 3d64e36159
7 changed files with 54 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Plan/react/dashboard/src/App.js
View File

@ -40,6 +40,7 @@ const NetworkServers = React.lazy(() => import("./views/network/NetworkServers")
const NetworkSessions = React.lazy(() => import("./views/network/NetworkSessions"));
const NetworkJoinAddresses = React.lazy(() => import("./views/network/NetworkJoinAddresses"));
const NetworkGeolocations = React.lazy(() => import("./views/network/NetworkGeolocations"));
const NetworkPlayerbaseOverview = React.lazy(() => import("./views/network/NetworkPlayerbaseOverview"));
const PlayersPage = React.lazy(() => import("./views/layout/PlayersPage"));
const AllPlayers = React.lazy(() => import("./views/players/AllPlayers"));
@ -123,6 +124,7 @@ function App() {
<Route path="overview" element={<Lazy><NetworkOverview/></Lazy>}/>
<Route path="serversOverview" element={<Lazy><NetworkServers/></Lazy>}/>
<Route path="sessions" element={<Lazy><NetworkSessions/></Lazy>}/>
<Route path="playerbase" element={<Lazy><NetworkPlayerbaseOverview/></Lazy>}/>
<Route path="join-addresses" element={<Lazy><NetworkJoinAddresses/></Lazy>}/>
<Route path="players" element={<Lazy><AllPlayers/></Lazy>}/>
<Route path="geolocations" element={<Lazy><NetworkGeolocations/></Lazy>}/>

4
Plan/react/dashboard/src/components/cards/server/graphs/CurrentPlayerbaseCard.js
View File

@ -1,5 +1,4 @@
import React from "react";
import {useParams} from "react-router-dom";
import {useDataRequest} from "../../../../hooks/dataFetchHook";
import {fetchPlayerbaseDevelopmentGraph} from "../../../../service/serverService";
import {ErrorViewCard} from "../../../../views/ErrorView";
@ -10,9 +9,8 @@ import {faUsers} from "@fortawesome/free-solid-svg-icons";
import {CardLoader} from "../../../navigation/Loader";
import GroupVisualizer from "../../../graphs/GroupVisualizer";
const CurrentPlayerbaseCard = () => {
const CurrentPlayerbaseCard = ({identifier}) => {
const {t} = useTranslation();
const {identifier} = useParams();
const {data, loadingError} = useDataRequest(fetchPlayerbaseDevelopmentGraph, [identifier]);

4
Plan/react/dashboard/src/components/cards/server/graphs/PlayerbaseDevelopmentCard.js
View File

@ -1,5 +1,4 @@
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";
@ -10,9 +9,8 @@ import React from "react";
import PlayerbaseGraph from "../../../graphs/PlayerbaseGraph";
import {CardLoader} from "../../../navigation/Loader";
const PlayerbaseDevelopmentCard = () => {
const PlayerbaseDevelopmentCard = ({identifier}) => {
const {t} = useTranslation();
const {identifier} = useParams();
const {data, loadingError} = useDataRequest(
fetchPlayerbaseDevelopmentGraph,

5
Plan/react/dashboard/src/service/networkService.js
View File

@ -20,6 +20,11 @@ export const fetchNetworkSessionsOverview = async (timestamp) => {
return doGetRequest(url);
}
export const fetchNetworkPlayerbaseOverview = async (timestamp) => {
const url = `/v1/network/playerbaseOverview?timestamp=${timestamp}`;
return doGetRequest(url);
}
export const fetchNetworkPingTable = async (timestamp) => {
const url = `/v1/network/pingTable?timestamp=${timestamp}`;
return doGetRequest(url);

2
Plan/react/dashboard/src/views/network/NetworkGeolocations.js
View File

@ -9,7 +9,7 @@ const NetworkGeolocations = () => {
const {data: pingData, loadingError: pingLoadingError} = useDataRequest(fetchNetworkPingTable, []);
return (
<Geolocations className={"server_geolocations"}
<Geolocations className={"network_geolocations"}
geolocationData={data} geolocationError={loadingError}
pingData={pingData} pingError={pingLoadingError}
/>

42
Plan/react/dashboard/src/views/network/NetworkPlayerbaseOverview.js Normal file
View File

@ -0,0 +1,42 @@
import {Col, Row} from "react-bootstrap-v5";
import React from "react";
import PlayerbaseDevelopmentCard from "../../components/cards/server/graphs/PlayerbaseDevelopmentCard";
import CurrentPlayerbaseCard from "../../components/cards/server/graphs/CurrentPlayerbaseCard";
import {useDataRequest} from "../../hooks/dataFetchHook";
import {ErrorViewCard} from "../ErrorView";
import PlayerbaseTrendsCard from "../../components/cards/server/tables/PlayerbaseTrendsCard";
import PlayerbaseInsightsCard from "../../components/cards/server/insights/PlayerbaseInsightsCard";
import LoadIn from "../../components/animation/LoadIn";
import {fetchNetworkPlayerbaseOverview} from "../../service/networkService";
const NetworkPlayerbaseOverview = () => {
const {data, loadingError} = useDataRequest(fetchNetworkPlayerbaseOverview, []);
return (
<LoadIn>
<section className="network_playerbase">
<Row>
<Col lg={8}>
<PlayerbaseDevelopmentCard identifier={undefined}/>
</Col>
<Col lg={4}>
<CurrentPlayerbaseCard identifier={undefined}/>
</Col>
</Row>
<Row>
{loadingError && <ErrorViewCard error={loadingError}/>}
{!loadingError && <>
<Col lg={8}>
<PlayerbaseTrendsCard data={data?.trends}/>
</Col>
<Col lg={4}>
<PlayerbaseInsightsCard data={data?.insights}/>
</Col>
</>}
</Row>
</section>
</LoadIn>
)
}
export default NetworkPlayerbaseOverview;

4
Plan/react/dashboard/src/views/server/PlayerbaseOverview.js
View File

@ -20,10 +20,10 @@ const PlayerbaseOverview = () => {
<section className="server_playerbase">
<Row>
<Col lg={8}>
<PlayerbaseDevelopmentCard/>
<PlayerbaseDevelopmentCard identifier={identifier}/>
</Col>
<Col lg={4}>
<CurrentPlayerbaseCard/>
<CurrentPlayerbaseCard identifier={identifier}/>
</Col>
</Row>
<Row>