refactor(dashboard): the chart component is now cleaned up and easier to extend

apps/dashboard/src/components/report-chart/map/chart.tsx

@@ -0,0 +1,42 @@
+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 { 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>
+  );
+}

apps/dashboard/src/components/report-chart/map/index.tsx

@@ -0,0 +1,55 @@
+import { api } from '@/trpc/client';
+
+import { AspectContainer } from '../aspect-container';
+import { ReportChartEmpty } from '../common/empty';
+import { ReportChartError } from '../common/error';
+import { ReportChartLoading } from '../common/loading';
+import { useReportChartContext } from '../context';
+import { Chart } from './chart';
+
+export function ReportMapChart() {
+  const { isLazyLoading, report } = useReportChartContext();
+
+  const res = api.chart.chart.useQuery(report, {
+    keepPreviousData: true,
+    staleTime: 1000 * 60 * 1,
+  });
+
+  if (isLazyLoading || res.isLoading || res.isFetching) {
+    return <Loading />;
+  }
+
+  if (res.isError) {
+    return <Error />;
+  }
+
+  if (res.data.series.length === 0) {
+    return <Empty />;
+  }
+
+  return <Chart data={res.data} />;
+}
+
+function Loading() {
+  return (
+    <AspectContainer>
+      <ReportChartLoading />
+    </AspectContainer>
+  );
+}
+
+function Error() {
+  return (
+    <AspectContainer>
+      <ReportChartError />
+    </AspectContainer>
+  );
+}
+
+function Empty() {
+  return (
+    <AspectContainer>
+      <ReportChartEmpty />
+    </AspectContainer>
+  );
+}