71 lines
2.7 KiB
JavaScript
71 lines
2.7 KiB
JavaScript
import {useTranslation} from "react-i18next";
|
|
import {Card, Col, Dropdown, Row} from "react-bootstrap";
|
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
import React, {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";
|
|
|
|
const ProjectionDropDown = ({projection, setProjection}) => {
|
|
const {t} = useTranslation();
|
|
|
|
const projectionOptions = Object.values(ProjectionOptions);
|
|
|
|
return (
|
|
<Dropdown className="float-end" style={{position: "absolute", right: "0.5rem"}}
|
|
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, i) => (
|
|
<Dropdown.Item key={i} onClick={() => setProjection(option)}>
|
|
{t(option)}
|
|
</Dropdown.Item>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
)
|
|
}
|
|
|
|
const GeolocationsCard = ({data}) => {
|
|
const {t} = useTranslation();
|
|
const [projection, setProjection] = useState(ProjectionOptions.MILLER);
|
|
|
|
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>
|
|
<Card.Header>
|
|
<h6 className="col-black">
|
|
<Fa icon={faGlobe} className="col-green"/> {t('html.label.geolocations')}
|
|
</h6>
|
|
<ProjectionDropDown projection={projection} setProjection={setProjection}/>
|
|
</Card.Header>
|
|
<Card.Body className="chart-area" style={{height: "100%"}}>
|
|
<Row>
|
|
<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}/>
|
|
</Col>
|
|
</Row>
|
|
</Card.Body>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default GeolocationsCard; |