From bf99068bd7e9f110dc33d44363674be45a0970a2 Mon Sep 17 00:00:00 2001 From: Francis Cao Date: Tue, 30 Sep 2025 12:03:15 -0700 Subject: [PATCH] Remove tables result set from getRevenue. Fix min/max date for revenuechart --- .../[websiteId]/(reports)/revenue/Revenue.tsx | 44 ++++++------- .../(reports)/revenue/RevenuePage.tsx | 4 +- src/queries/sql/reports/getRevenue.ts | 66 +------------------ 3 files changed, 26 insertions(+), 88 deletions(-) diff --git a/src/app/(main)/websites/[websiteId]/(reports)/revenue/Revenue.tsx b/src/app/(main)/websites/[websiteId]/(reports)/revenue/Revenue.tsx index 420c94fe..4c870810 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/revenue/Revenue.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/revenue/Revenue.tsx @@ -1,39 +1,37 @@ -import { useState } from 'react'; -import { Grid, Row, Text } from '@umami/react-zen'; -import classNames from 'classnames'; -import { colord } from 'colord'; import { BarChart } from '@/components/charts/BarChart'; +import { LoadingPanel } from '@/components/common/LoadingPanel'; +import { Panel } from '@/components/common/Panel'; import { TypeIcon } from '@/components/common/TypeIcon'; import { useCountryNames, useLocale, useMessages, useResultQuery } from '@/components/hooks'; +import { CurrencySelect } from '@/components/input/CurrencySelect'; import { ListTable } from '@/components/metrics/ListTable'; import { MetricCard } from '@/components/metrics/MetricCard'; import { MetricsBar } from '@/components/metrics/MetricsBar'; import { renderDateLabels } from '@/lib/charts'; import { CHART_COLORS } from '@/lib/constants'; +import { generateTimeSeries } from '@/lib/date'; import { formatLongCurrency, formatLongNumber } from '@/lib/format'; -import { useCallback, useMemo } from 'react'; -import { Panel } from '@/components/common/Panel'; -import { Column } from '@umami/react-zen'; -import { LoadingPanel } from '@/components/common/LoadingPanel'; -import { getMinimumUnit } from '@/lib/date'; -import { CurrencySelect } from '@/components/input/CurrencySelect'; +import { Column, Grid, Row, Text } from '@umami/react-zen'; +import classNames from 'classnames'; +import { colord } from 'colord'; +import { useCallback, useMemo, useState } from 'react'; export interface RevenueProps { websiteId: string; - startDate: Date; - endDate: Date; + minDate: Date; + maxDate: Date; + unit: string; } -export function Revenue({ websiteId, startDate, endDate }: RevenueProps) { +export function Revenue({ websiteId, minDate, maxDate, unit }: RevenueProps) { const [currency, setCurrency] = useState('USD'); const { formatMessage, labels } = useMessages(); - const { locale } = useLocale(); + const { locale, dateLocale } = useLocale(); const { countryNames } = useCountryNames(locale); - const unit = getMinimumUnit(startDate, endDate); const { data, error, isLoading } = useResultQuery('revenue', { websiteId, - startDate, - endDate, + minDate, + maxDate, currency, }); @@ -65,7 +63,7 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) { const color = colord(CHART_COLORS[index % CHART_COLORS.length]); return { label: key, - data: map[key], + data: generateTimeSeries(map[key], minDate, maxDate, unit, dateLocale), lineTension: 0, backgroundColor: color.alpha(0.6).toRgbString(), borderColor: color.alpha(0.7).toRgbString(), @@ -73,7 +71,7 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) { }; }), }; - }, [data, startDate, endDate, unit]); + }, [data, minDate, maxDate, unit]); const metrics = useMemo(() => { if (!data) return []; @@ -104,6 +102,8 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) { ] as any; }, [data, locale]); + const renderXLabel = useCallback(renderDateLabels(unit, locale), [unit, locale]); + return ( @@ -122,12 +122,12 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) { diff --git a/src/app/(main)/websites/[websiteId]/(reports)/revenue/RevenuePage.tsx b/src/app/(main)/websites/[websiteId]/(reports)/revenue/RevenuePage.tsx index 19ac89db..0b46a2da 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/revenue/RevenuePage.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/revenue/RevenuePage.tsx @@ -6,13 +6,13 @@ import { useDateRange } from '@/components/hooks'; export function RevenuePage({ websiteId }: { websiteId: string }) { const { - dateRange: { startDate, endDate }, + dateRange: { startDate, endDate, unit }, } = useDateRange(websiteId); return ( - + ); } diff --git a/src/queries/sql/reports/getRevenue.ts b/src/queries/sql/reports/getRevenue.ts index 1a0e0332..1ec4a130 100644 --- a/src/queries/sql/reports/getRevenue.ts +++ b/src/queries/sql/reports/getRevenue.ts @@ -14,12 +14,6 @@ export interface RevenueResult { chart: { x: string; t: string; y: number }[]; country: { name: string; value: number }[]; total: { sum: number; count: number; average: number; unique_count: number }; - table: { - currency: string; - sum: number; - count: number; - unique_count: number; - }[]; } export async function getRevenue( @@ -121,32 +115,7 @@ async function relationalQuery( total.average = total.count > 0 ? total.sum / total.count : 0; - const table = await rawQuery( - ` - select - revenue.currency, - sum(revenue.revenue) as sum, - count(distinct revenue.event_id) as count, - count(distinct revenue.session_id) as unique_count - from revenue - join website_event - on website_event.website_id = revenue.website_id - and website_event.session_id = revenue.session_id - and website_event.event_id = revenue.event_id - and website_event.website_id = {{websiteId::uuid}} - and website_event.created_at between {{startDate}} and {{endDate}} - ${cohortQuery} - ${joinSessionQuery} - where revenue.website_id = {{websiteId::uuid}} - and revenue.created_at between {{startDate}} and {{endDate}} - ${filterQuery} - group by revenue.currency - order by sum desc - `, - queryParams, - ); - - return { chart, country, table, total }; + return { chart, country, total }; } async function clickhouseQuery( @@ -250,36 +219,5 @@ async function clickhouseQuery( total.average = total.count > 0 ? total.sum / total.count : 0; - const table = await rawQuery< - { - currency: string; - sum: number; - count: number; - unique_count: number; - }[] - >( - ` - select - website_revenue.currency, - sum(website_revenue.revenue) as sum, - uniqExact(website_revenue.event_id) as count, - uniqExact(website_revenue.session_id) as unique_count - from website_revenue - join website_event - on website_event.website_id = website_revenue.website_id - and website_event.session_id = website_revenue.session_id - and website_event.event_id = website_revenue.event_id - and website_event.website_id = {websiteId:UUID} - and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64} - ${cohortQuery} - where website_revenue.website_id = {websiteId:UUID} - and website_revenue.created_at between {startDate:DateTime64} and {endDate:DateTime64} - ${filterQuery} - group by website_revenue.currency - order by sum desc - `, - queryParams, - ); - - return { chart, country, table, total }; + return { chart, country, total }; }