43 lines
1005 B
TypeScript
43 lines
1005 B
TypeScript
import { useVisibleSeries } from '@/hooks/useVisibleSeries';
|
|
import type { IChartData } from '@/trpc/client';
|
|
import { theme } from '@/utils/theme';
|
|
import { useMemo } from 'react';
|
|
import WorldMap from 'react-svg-worldmap';
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
|
|
import { useReportChartContext } from '../context';
|
|
|
|
interface Props {
|
|
data: IChartData;
|
|
}
|
|
|
|
export function Chart({ data }: Props) {
|
|
const {
|
|
report: { metric, unit },
|
|
} = useReportChartContext();
|
|
const { series } = useVisibleSeries(data, 100);
|
|
|
|
const mapData = useMemo(
|
|
() =>
|
|
series.map((s) => ({
|
|
country: s.names[0]?.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>
|
|
);
|
|
}
|