web: add previous/compare values for all charts

apps/web/src/hooks/useMappings.ts

@@ -1,7 +1,7 @@
 import mappings from '@/mappings.json';
 
 export function useMappings() {
-  return (val: string) => {
+  return (val: string | null) => {
     return mappings.find((item) => item.id === val)?.name ?? val;
   };
 }

apps/web/src/hooks/useNumerFormatter.ts

@@ -0,0 +1,11 @@
+export function useNumber() {
+  const locale = 'en-gb';
+
+  return {
+    format: (value: number) => {
+      return new Intl.NumberFormat(locale, {
+        maximumSignificantDigits: 20,
+      }).format(value);
+    },
+  };
+}

apps/web/src/hooks/useRechartDataModel.ts

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
-import type { IChartData } from '@/app/_trpc/client';
-import { alphabetIds } from '@/utils/constants';
+import type { IChartData, IChartSerieDataItem } from '@/app/_trpc/client';
 import { getChartColor } from '@/utils/theme';
 
+export type IRechartPayloadItem = IChartSerieDataItem & { color: string };
+
 export function useRechartDataModel(data: IChartData) {
   return useMemo(() => {
     return (
@@ -15,11 +16,14 @@ export function useRechartDataModel(data: IChartData) {
               ...serie.data.reduce(
                 (acc2, item) => {
                   if (item.date === date) {
+                    if (item.previous) {
+                      acc2[`${idx}:prev:count`] = item.previous.count;
+                    }
                     acc2[`${idx}:count`] = item.count;
                     acc2[`${idx}:payload`] = {
                       ...item,
                       color: getChartColor(idx),
-                    };
+                    } satisfies IRechartPayloadItem;
                   }
                   return acc2;
                 },

apps/web/src/hooks/useVisibleSeries.ts

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import type { IChartData } from '@/app/_trpc/client';
 
 export function useVisibleSeries(data: IChartData, limit?: number | undefined) {
-  const max = limit ?? 20;
+  const max = limit ?? 5;
   const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
   const ref = useRef(false);
   useEffect(() => {