Convert realtime components to TS.

src/components/hooks/useDateRange.ts

@@ -1,9 +1,10 @@
 import { getMinimumUnit, parseDateRange } from 'lib/date';
 import { setItem } from 'next-basics';
 import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
-import useLocale from './useLocale';
 import websiteStore, { setWebsiteDateRange } from 'store/websites';
 import appStore, { setDateRange } from 'store/app';
+import { DateRange } from 'lib/types';
+import useLocale from './useLocale';
 import useApi from './useApi';
 
 export function useDateRange(websiteId?: string) {
@@ -14,9 +15,9 @@ export function useDateRange(websiteId?: string) {
   const globalConfig = appStore(state => state.dateRange);
   const dateRange = parseDateRange(websiteConfig || globalConfig || defaultConfig, locale);
 
-  const saveDateRange = async value => {
+  const saveDateRange = async (value: DateRange | string) => {
     if (websiteId) {
-      let dateRange = value;
+      let dateRange: DateRange | string = value;
 
       if (typeof value === 'string') {
         if (value === 'all') {
@@ -37,14 +38,17 @@ export function useDateRange(websiteId?: string) {
         }
       }
 
-      setWebsiteDateRange(websiteId, dateRange);
+      setWebsiteDateRange(websiteId, dateRange as DateRange);
     } else {
       setItem(DATE_RANGE_CONFIG, value);
       setDateRange(value);
     }
   };
 
-  return [dateRange, saveDateRange];
+  return [dateRange, saveDateRange] as [
+    { startDate: Date; endDate: Date },
+    (value: string | DateRange) => void,
+  ];
 }
 
 export default useDateRange;

src/components/metrics/RealtimeChart.tsx

@@ -3,6 +3,7 @@ import { format, startOfMinute, subMinutes, isBefore } from 'date-fns';
 import PageviewsChart from './PageviewsChart';
 import { getDateArray } from 'lib/date';
 import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
+import { RealtimeData } from 'lib/types';
 
 function mapData(data: any[]) {
   let last = 0;
@@ -24,11 +25,9 @@ function mapData(data: any[]) {
 }
 
 export interface RealtimeChartProps {
-  data: {
-    pageviews: any[];
-    visitors: any[];
-  };
+  data: RealtimeData;
   unit: string;
+  className?: string;
 }
 
 export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {