41 lines
1004 B
TypeScript
41 lines
1004 B
TypeScript
import { useMemo } from 'react';
|
|
import { useVisibleSeries } from '@/hooks/useVisibleSeries';
|
|
import type { IChartData } from '@/trpc/client';
|
|
import { theme } from '@/utils/theme';
|
|
import WorldMap from 'react-svg-worldmap';
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
|
|
import { useChartContext } from './ChartProvider';
|
|
|
|
interface ReportMapChartProps {
|
|
data: IChartData;
|
|
}
|
|
|
|
export function ReportMapChart({ data }: ReportMapChartProps) {
|
|
const { metric, unit } = useChartContext();
|
|
const { series } = useVisibleSeries(data, 100);
|
|
|
|
const mapData = useMemo(
|
|
() =>
|
|
series.map((s) => ({
|
|
country: s.name.toLowerCase(),
|
|
value: s.metrics[metric],
|
|
})),
|
|
[series, metric]
|
|
);
|
|
|
|
return (
|
|
<AutoSizer disableHeight>
|
|
{({ width }) => (
|
|
<WorldMap
|
|
size={width}
|
|
data={mapData}
|
|
color={theme.colors['chart-0']}
|
|
borderColor={'#103A96'}
|
|
value-suffix={unit}
|
|
/>
|
|
)}
|
|
</AutoSizer>
|
|
);
|
|
}
|