From a4d8afe5160a1d89e6246704c9a0c22f4f591aa2 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 29 Mar 2024 16:56:19 -0700 Subject: [PATCH] Convert local time to timezone. --- src/components/charts/BarChart.tsx | 2 +- .../hooks/queries/useWebsiteEvents.ts | 19 ++++++++++++- .../hooks/queries/useWebsitePageviews.ts | 5 ++-- src/components/metrics/EventsChart.tsx | 28 +++---------------- .../analytics/pageviews/getPageviewStats.ts | 4 +-- yarn.lock | 25 ----------------- 6 files changed, 28 insertions(+), 55 deletions(-) diff --git a/src/components/charts/BarChart.tsx b/src/components/charts/BarChart.tsx index 5655d743..635bb10d 100644 --- a/src/components/charts/BarChart.tsx +++ b/src/components/charts/BarChart.tsx @@ -66,7 +66,7 @@ export function BarChart(props: BarChartProps) { }, }, }; - }, [colors]); + }, [colors, unit, stacked, renderXLabel, renderYLabel]); const handleTooltip = ({ tooltip }: { tooltip: any }) => { const { opacity } = tooltip; diff --git a/src/components/hooks/queries/useWebsiteEvents.ts b/src/components/hooks/queries/useWebsiteEvents.ts index de18a1f9..99281470 100644 --- a/src/components/hooks/queries/useWebsiteEvents.ts +++ b/src/components/hooks/queries/useWebsiteEvents.ts @@ -1,12 +1,29 @@ import useApi from './useApi'; import { UseQueryOptions } from '@tanstack/react-query'; +import { useDateRange, useNavigation, useTimezone } from 'components/hooks'; +import { zonedTimeToUtc } from 'date-fns-tz'; export function useWebsiteEvents( websiteId: string, - params?: { [key: string]: any }, options?: Omit, ) { const { get, useQuery } = useApi(); + const [dateRange] = useDateRange(websiteId); + const { startDate, endDate, unit, offset } = dateRange; + const { timezone } = useTimezone(); + const { + query: { url, event }, + } = useNavigation(); + + const params = { + startAt: +zonedTimeToUtc(startDate, timezone), + endAt: +zonedTimeToUtc(endDate, timezone), + unit, + offset, + timezone, + url, + event, + }; return useQuery({ queryKey: ['events', { ...params }], diff --git a/src/components/hooks/queries/useWebsitePageviews.ts b/src/components/hooks/queries/useWebsitePageviews.ts index 960c9584..2d6e3428 100644 --- a/src/components/hooks/queries/useWebsitePageviews.ts +++ b/src/components/hooks/queries/useWebsitePageviews.ts @@ -1,3 +1,4 @@ +import { zonedTimeToUtc } from 'date-fns-tz'; import { useApi, useDateRange, useNavigation, useTimezone } from 'components/hooks'; export function useWebsitePageviews(websiteId: string, options?: { [key: string]: string }) { @@ -10,8 +11,8 @@ export function useWebsitePageviews(websiteId: string, options?: { [key: string] } = useNavigation(); const params = { - startAt: +startDate, - endAt: +endDate, + startAt: +zonedTimeToUtc(startDate, timezone), + endAt: +zonedTimeToUtc(endDate, timezone), unit, timezone, url, diff --git a/src/components/metrics/EventsChart.tsx b/src/components/metrics/EventsChart.tsx index 9e98b6ce..eb2fb703 100644 --- a/src/components/metrics/EventsChart.tsx +++ b/src/components/metrics/EventsChart.tsx @@ -3,39 +3,19 @@ import { Loading } from 'react-basics'; import { colord } from 'colord'; import BarChart from 'components/charts/BarChart'; import { getDateArray } from 'lib/date'; -import { - useLocale, - useDateRange, - useTimezone, - useNavigation, - useWebsiteEvents, -} from 'components/hooks'; +import { useLocale, useDateRange, useWebsiteEvents } from 'components/hooks'; import { CHART_COLORS } from 'lib/constants'; import { renderDateLabels } from 'lib/charts'; export interface EventsChartProps { websiteId: string; className?: string; - token?: string; } -export function EventsChart({ websiteId, className, token }: EventsChartProps) { - const [{ startDate, endDate, unit, offset }] = useDateRange(websiteId); +export function EventsChart({ websiteId, className }: EventsChartProps) { + const [{ startDate, endDate, unit }] = useDateRange(websiteId); const { locale } = useLocale(); - const { timezone } = useTimezone(); - const { - query: { url, event }, - } = useNavigation(); - const { data, isLoading } = useWebsiteEvents(websiteId, { - startAt: +startDate, - endAt: +endDate, - unit, - timezone, - url, - event, - token, - offset, - }); + const { data, isLoading } = useWebsiteEvents(websiteId); const chartData = useMemo(() => { if (!data) return []; diff --git a/src/queries/analytics/pageviews/getPageviewStats.ts b/src/queries/analytics/pageviews/getPageviewStats.ts index b221e010..3f29c75f 100644 --- a/src/queries/analytics/pageviews/getPageviewStats.ts +++ b/src/queries/analytics/pageviews/getPageviewStats.ts @@ -66,8 +66,8 @@ async function clickhouseQuery( order by t `, params, - ).then(a => { - return Object.values(a).map(a => { + ).then(result => { + return Object.values(result).map(a => { return { x: a.x, y: Number(a.y) }; }); }); diff --git a/yarn.lock b/yarn.lock index e438a9b6..5b8ba33c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4265,11 +4265,6 @@ commander@2, commander@^2.20.0, commander@^2.20.3: resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== -commander@2.20.0: - version "2.20.0" - resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422" - integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ== - commander@8: version "8.3.0" resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" @@ -8103,13 +8098,6 @@ moize@^6.1.0: fast-equals "^3.0.1" micro-memoize "^4.1.2" -moment-timezone@0.5.26: - version "0.5.26" - resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.26.tgz#c0267ca09ae84631aa3dc33f65bedbe6e8e0d772" - integrity sha512-sFP4cgEKTCymBBKgoxZjYzlSovC20Y6J7y3nanDc5RoBIXKlZhoYwBoZGe3flwU6A372AcRwScH8KiwV6zjy1g== - dependencies: - moment ">= 2.9.0" - moment-timezone@^0.5.35: version "0.5.45" resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.45.tgz#cb685acd56bac10e69d93c536366eb65aa6bcf5c" @@ -8117,11 +8105,6 @@ moment-timezone@^0.5.35: dependencies: moment "^2.29.4" -"moment@>= 2.9.0": - version "2.29.4" - resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" - integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== - moment@^2.29.4: version "2.30.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae" @@ -10778,14 +10761,6 @@ through@^2.3.8: resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== -timezone-support@^2.0.2: - version "2.2.0" - resolved "https://registry.yarnpkg.com/timezone-support/-/timezone-support-2.2.0.tgz#b3146cb99bf188a92b5348591202e8e3aa013135" - integrity sha512-4TmVraC9vxQVLMGeV5OaC12QWbYMhzFWTyAcBO64UB53kbLRIuDdQlr/ZvmatdOv8z5pWw/uK0kZ1DBm4uoUhw== - dependencies: - commander "2.20.0" - moment-timezone "0.5.26" - tiny-glob@^0.2.9: version "0.2.9" resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"