117 lines
4.9 KiB
JavaScript
117 lines
4.9 KiB
JavaScript
import {useTranslation} from "react-i18next";
|
|
import {Card, Col, Dropdown} from "react-bootstrap";
|
|
import {FontAwesomeIcon, FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
import React, {useCallback, useState} from "react";
|
|
import {faExclamationTriangle, faGlobe, faLayerGroup} from "@fortawesome/free-solid-svg-icons";
|
|
import GeolocationBarGraph from "../../graphs/GeolocationBarGraph";
|
|
import GeolocationWorldMap, {ProjectionOptions} from "../../graphs/GeolocationWorldMap";
|
|
import {CardLoader} from "../../navigation/Loader";
|
|
import ExtendableRow from "../../layout/extension/ExtendableRow";
|
|
import Highcharts from "highcharts/highstock";
|
|
import {postQuery} from "../../../service/queryService";
|
|
import {useMetadata} from "../../../hooks/metadataHook";
|
|
import QueryPlayerListModal from "../../modal/QueryPlayerListModal";
|
|
import {faHandPointer} from "@fortawesome/free-regular-svg-icons";
|
|
import CardHeader from "../CardHeader";
|
|
|
|
const ProjectionDropDown = ({projection, setProjection}) => {
|
|
const {t} = useTranslation();
|
|
|
|
const projectionOptions = Object.values(ProjectionOptions);
|
|
|
|
return (
|
|
<Dropdown className="float-end" style={{margin: "-0.5rem", marginLeft: 0}}
|
|
title={t('html.label.geoProjection.dropdown')}>
|
|
<Dropdown.Toggle variant=''>
|
|
<Fa icon={faLayerGroup}/> {t(projection)}
|
|
</Dropdown.Toggle>
|
|
|
|
<Dropdown.Menu>
|
|
<h6 className="dropdown-header">{t('html.label.geoProjection.dropdown')}</h6>
|
|
{projectionOptions.map(option => (
|
|
<Dropdown.Item key={option} onClick={() => setProjection(option)}>
|
|
{t(option)}
|
|
</Dropdown.Item>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
)
|
|
}
|
|
|
|
const GeolocationsCard = ({identifier, data}) => {
|
|
const {t} = useTranslation();
|
|
const {networkMetadata} = useMetadata();
|
|
const [projection, setProjection] = useState(ProjectionOptions.MILLER);
|
|
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [queryData, setQueryData] = useState(undefined);
|
|
const [country, setCountry] = useState(undefined);
|
|
|
|
const closeModal = useCallback(() => {
|
|
setModalOpen(false);
|
|
}, [setModalOpen]);
|
|
|
|
const onClickCountry = useCallback(async selectionInfo => {
|
|
const selectedCountry = selectionInfo?.point['iso-a3'];
|
|
if (!selectedCountry) return;
|
|
const end = Highcharts.dateFormat('%d/%m/%Y', Date.now());
|
|
const query = {
|
|
filters: [{
|
|
kind: "geolocations",
|
|
parameters: {
|
|
selected: `["${selectedCountry}"]`
|
|
}
|
|
}],
|
|
view: {
|
|
afterDate: "01/01/1970", afterTime: "00:00",
|
|
beforeDate: end, beforeTime: "00:00",
|
|
servers: networkMetadata?.servers.filter(server => server.serverUUID === identifier) || []
|
|
}
|
|
}
|
|
setQueryData(undefined);
|
|
setCountry(undefined);
|
|
setModalOpen(true);
|
|
const data = await postQuery(query);
|
|
const loaded = data?.data;
|
|
if (loaded) {
|
|
setQueryData(loaded);
|
|
setCountry(selectionInfo.point.name);
|
|
}
|
|
}, [setQueryData, setModalOpen, networkMetadata, identifier, setCountry]);
|
|
|
|
if (!data) return <CardLoader/>
|
|
|
|
if (!data?.geolocations_enabled) {
|
|
return (
|
|
<div className="alert alert-warning mb-0" id="geolocation-warning">
|
|
<Fa icon={faExclamationTriangle}/>{' '}{t('html.description.noGeolocations')}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card id={"geolocations"}>
|
|
<QueryPlayerListModal open={modalOpen} toggle={closeModal} queryData={queryData}
|
|
title={"View " + t('html.query.filter.generic.start') + t('html.query.filter.country.text') + ': ' + country}/>
|
|
<CardHeader icon={faGlobe} color={"green"} label={'html.label.geolocations'}>
|
|
<ProjectionDropDown projection={projection} setProjection={setProjection}/>
|
|
<p style={{margin: 0, fontWeight: "normal"}} className={"float-end"}>
|
|
<FontAwesomeIcon icon={faHandPointer}/> {t('html.text.click')}
|
|
</p>
|
|
</CardHeader>
|
|
<Card.Body className="chart-area" style={{height: "100%"}}>
|
|
<ExtendableRow id={'row-geolocations-graphs-card-0'}>
|
|
<Col md={3}>
|
|
<GeolocationBarGraph series={data.geolocation_bar_series} color={data.colors.bars}/>
|
|
</Col>
|
|
<Col md={9}>
|
|
<GeolocationWorldMap series={data.geolocation_series} colors={data.colors}
|
|
projection={projection} onClickCountry={onClickCountry}/>
|
|
</Col>
|
|
</ExtendableRow>
|
|
</Card.Body>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default GeolocationsCard; |