Upstream/Plan
1
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2025-03-13 15:20:14 +01:00
Code Issues Projects Releases Wiki Activity

Implemented rest of query result cards

Browse Source
This commit is contained in:
Aurora Lahtela 2022-11-20 20:35:57 +02:00
parent e7afb243f9
commit 838f362e30
4 changed files with 82 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
Plan/react/dashboard/src/components/cards/query/SessionsWithinViewCard.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import {Card} from "react-bootstrap-v5";
import CardHeader from "../CardHeader";
import {faCalendar, faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons";
import Datapoint from "../../Datapoint";
import {useTranslation} from "react-i18next";
const SessionsWithinViewCard = ({data}) => {
const {t} = useTranslation();
return (
<Card>
<CardHeader label={'html.query.title.sessionsWithinView'} color={'teal'} icon={faCalendar}/>
<Card.Body>
<Datapoint color={'teal'} icon={faCalendarCheck} name={t('html.label.sessions')}
value={data.total_sessions} bold/>
<Datapoint color={'teal'} icon={faCalendarCheck}
name={t('html.label.averageSessions') + ' ' + t('html.label.perPlayer')}
value={data.average_sessions} bold/>
<Datapoint color={'teal'} icon={faClock} name={t('html.label.averageSessionLength')}
value={data.average_session_length}/>
<hr/>
<Datapoint color={'green'} icon={faClock} name={t('html.label.playtime')}
value={data.total_playtime}/>
<Datapoint color={'green'} icon={faClock} name={t('html.label.activePlaytime')}
value={data.total_active_playtime}/>
<Datapoint color={'gray'} icon={faClock} name={t('html.label.afkTime')}
value={data.total_afk_playtime}/>
<hr/>
<Datapoint color={'green'} icon={faClock} name={t('html.label.averagePlaytime')}
value={data.average_playtime}/>
<Datapoint color={'green'} icon={faClock} name={t('html.label.averageActivePlaytime')}
value={data.average_active_playtime}/>
<Datapoint color={'gray'} icon={faClock} name={t('html.label.averageAfkTime')}
value={data.average_afk_playtime}/>
</Card.Body>
</Card>
)
};
export default SessionsWithinViewCard

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

@ -9,19 +9,13 @@ import {faUsers} from "@fortawesome/free-solid-svg-icons";
import {CardLoader} from "../../../navigation/Loader";
import GroupVisualizer from "../../../graphs/GroupVisualizer";
const CurrentPlayerbaseCard = ({identifier}) => {
export const CurrentPlayerbaseCardWithData = ({data, title}) => {
const {t} = useTranslation();
const {data, loadingError} = useDataRequest(fetchPlayerbaseDevelopmentGraph, [identifier]);
if (loadingError) return <ErrorViewCard error={loadingError}/>
if (!data) return <CardLoader/>;
return (
<Card>
<Card.Header>
<h6 className="col-black" style={{width: '100%'}}>
<Fa icon={faUsers} className="col-amber"/> {t('html.label.currentPlayerbase')}
<Fa icon={faUsers} className="col-amber"/> {t(title ? title : 'html.label.currentPlayerbase')}
</h6>
</Card.Header>
<GroupVisualizer groups={data.activity_pie_series} name={t('html.label.players')}/>
@ -29,4 +23,15 @@ const CurrentPlayerbaseCard = ({identifier}) => {
)
}
const CurrentPlayerbaseCard = ({identifier}) => {
const {data, loadingError} = useDataRequest(fetchPlayerbaseDevelopmentGraph, [identifier]);
if (loadingError) return <ErrorViewCard error={loadingError}/>
if (!data) return <CardLoader/>;
return (
<CurrentPlayerbaseCardWithData data={data}/>
)
}
export default CurrentPlayerbaseCard;

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

@ -9,9 +9,22 @@ import React from "react";
import PlayerbaseGraph from "../../../graphs/PlayerbaseGraph";
import {CardLoader} from "../../../navigation/Loader";
const PlayerbaseDevelopmentCard = ({identifier}) => {
export const PlayerbaseDevelopmentCardWithData = ({data, title}) => {
const {t} = useTranslation();
return (
<Card>
<Card.Header>
<h6 className="col-black">
<Fa className="col-amber"
icon={faChartLine}/> {t(title ? title : 'html.label.playerbaseDevelopment')}
</h6>
</Card.Header>
<PlayerbaseGraph data={data}/>
</Card>
)
}
const PlayerbaseDevelopmentCard = ({identifier}) => {
const {data, loadingError} = useDataRequest(
fetchPlayerbaseDevelopmentGraph,
[identifier])
@ -20,14 +33,7 @@ const PlayerbaseDevelopmentCard = ({identifier}) => {
if (!data) return <CardLoader/>;
return (
<Card>
<Card.Header>
<h6 className="col-black">
<Fa className="col-amber" icon={faChartLine}/> {t('html.label.playerbaseDevelopment')}
</h6>
</Card.Header>
<PlayerbaseGraph data={data}/>
</Card>
<PlayerbaseDevelopmentCardWithData data={data}/>
)
}

17
Plan/react/dashboard/src/views/query/QueryResultView.js
View File

@ -6,8 +6,14 @@ import {useQueryResultContext} from "../../hooks/queryResultContext";
import {useNavigate} from "react-router-dom";
import PlayerListCard from "../../components/cards/common/PlayerListCard";
import {fetchExistingResults} from "../../service/queryService";
import {PlayerbaseDevelopmentCardWithData} from "../../components/cards/server/graphs/PlayerbaseDevelopmentCard";
import {CurrentPlayerbaseCardWithData} from "../../components/cards/server/graphs/CurrentPlayerbaseCard";
import {useTranslation} from "react-i18next";
import GeolocationsCard from "../../components/cards/common/GeolocationsCard";
import SessionsWithinViewCard from "../../components/cards/query/SessionsWithinViewCard";
const QueryResultView = () => {
const {t} = useTranslation();
const navigate = useNavigate();
const {result, setResult} = useQueryResultContext();
@ -59,18 +65,21 @@ const QueryResultView = () => {
</Row>
<Row>
<Col lg={8}>
{/*<PlayerbaseDevelopmentCard/>*/}
<PlayerbaseDevelopmentCardWithData data={result.data.activity}
title={'html.query.title.activity'}/>
</Col>
<Col lg={4}>
{/*<CurrentPlayerbaseCard/>*/}
<CurrentPlayerbaseCardWithData data={result.data.activity}
title={t('html.query.title.activityOnDate')
.replace('<span id="activity-date"></span>', result.view.beforeDate)}/>
</Col>
</Row>
<Row>
<Col lg={3}>
{/*<SessionsWithinViewCard/>*/}
<SessionsWithinViewCard data={result.data.sessions}/>
</Col>
<Col lg={9}>
{/*<GeolocationsCard/>*/}
<GeolocationsCard data={result.data.geolocation}/>
</Col>
</Row>
</section>