Convert realtime components to TS.

This commit is contained in:
Mike Cao 2023-12-09 00:35:54 -08:00
parent e67282d7d8
commit 8d31f43f0f
12 changed files with 75 additions and 51 deletions

View file

@ -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;

View file

@ -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) {