mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 20:52:09 +01:00
Kaj Kowalski
5317b2aa39
Improves the dashboard with additional metrics and visualizations to provide a more comprehensive overview of application usage and performance. Adds new charts, including: - Word cloud for category analysis - Geographic map for user distribution (simulated data) - Response time distribution chart Refactors existing components for improved clarity and reusability, including the introduction of a generic `MetricCard` component. Improves error handling and user feedback during data refresh and session loading. Adds recommended VSCode extensions for ESLint and Prettier.
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { MapContainer, TileLayer, CircleMarker, Tooltip } from "react-leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
import { getLocalizedCountryName } from "../lib/localization";
|
|
|
|
interface CountryData {
|
|
code: string;
|
|
count: number;
|
|
coordinates: [number, number];
|
|
}
|
|
|
|
interface MapProps {
|
|
countryData: CountryData[];
|
|
maxCount: number;
|
|
}
|
|
|
|
const Map = ({ countryData, maxCount }: MapProps) => {
|
|
return (
|
|
<MapContainer
|
|
center={[30, 0]}
|
|
zoom={2}
|
|
zoomControl={true}
|
|
scrollWheelZoom={false}
|
|
style={{ height: "100%", width: "100%", borderRadius: "0.5rem" }}
|
|
>
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
{countryData.map((country) => (
|
|
<CircleMarker
|
|
key={country.code}
|
|
center={country.coordinates}
|
|
radius={5 + (country.count / maxCount) * 20}
|
|
pathOptions={{
|
|
fillColor: "#3B82F6",
|
|
color: "#1E40AF",
|
|
weight: 1,
|
|
opacity: 0.8,
|
|
fillOpacity: 0.6,
|
|
}}
|
|
>
|
|
<Tooltip>
|
|
<div className="p-1">
|
|
<div className="font-medium">
|
|
{getLocalizedCountryName(country.code)}
|
|
</div>
|
|
<div className="text-sm">Sessions: {country.count}</div>
|
|
</div>
|
|
</Tooltip>
|
|
</CircleMarker>
|
|
))}
|
|
</MapContainer>
|
|
);
|
|
};
|
|
|
|
export default Map;
|