diff --git a/src/client/components/website/WebsiteVisitorMap/VisitorLarkMap.tsx b/src/client/components/website/WebsiteVisitorMap/VisitorLarkMap.tsx index aa035d9a..2ba2ff54 100644 --- a/src/client/components/website/WebsiteVisitorMap/VisitorLarkMap.tsx +++ b/src/client/components/website/WebsiteVisitorMap/VisitorLarkMap.tsx @@ -5,7 +5,7 @@ import { PointLayer, PointLayerProps, } from '@antv/larkmap'; -import React from 'react'; +import React, { useMemo } from 'react'; import { AppRouterOutput } from '../../../api/trpc'; import { useGlobalConfig } from '../../../hooks/useConfig'; import { useSettingsStore } from '../../../store/settings'; @@ -76,10 +76,18 @@ export const VisitorLarkMap: React.FC<{ parser: { type: 'json', x: 'longitude', y: 'latitude' }, }; + const size = useMemo(() => { + if (props.data.length > 5000) { + return 3; + } + + return 5; + }, [props.data.length]); + return ( - + ); }); diff --git a/src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx b/src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx index daf03de5..d2ad1c45 100644 --- a/src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx +++ b/src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { AppRouterOutput } from '../../../api/trpc'; import { MapContainer, CircleMarker, Popup, TileLayer } from 'react-leaflet'; import { mapCenter } from './utils'; @@ -7,11 +7,13 @@ import './VisitorLeafletMap.css'; import { useTranslation } from '@i18next-toolkit/react'; export const UserDataPoint: React.FC<{ + pointRadius?: number; longitude: number; latitude: number; count: number; }> = React.memo((props) => { const { t } = useTranslation(); + const pointRadius = props.pointRadius ?? 5; return ( = React.memo((props) => { + const pointRadius = useMemo(() => { + if (props.data.length > 20000) { + return 1; + } + + if (props.data.length > 5000) { + return 2; + } + + if (props.data.length > 1000) { + return 3; + } + + return 5; + }, [props.data.length]); + return ( {props.data.map((item) => ( - + ))} );