Implemented rest of query result cards

Plan/react/dashboard/src/components/cards/query/SessionsWithinViewCard.js

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

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

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

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

@@ -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}/>
     )
 }
 

Plan/react/dashboard/src/views/query/QueryResultView.js

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