Remove tables result set from getRevenue. Fix min/max date for revenuechart

This commit is contained in:
Francis Cao 2025-09-30 12:03:15 -07:00
parent 1b54ba3e6e
commit bf99068bd7
3 changed files with 26 additions and 88 deletions

View file

@ -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 { BarChart } from '@/components/charts/BarChart';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Panel } from '@/components/common/Panel';
import { TypeIcon } from '@/components/common/TypeIcon'; import { TypeIcon } from '@/components/common/TypeIcon';
import { useCountryNames, useLocale, useMessages, useResultQuery } from '@/components/hooks'; import { useCountryNames, useLocale, useMessages, useResultQuery } from '@/components/hooks';
import { CurrencySelect } from '@/components/input/CurrencySelect';
import { ListTable } from '@/components/metrics/ListTable'; import { ListTable } from '@/components/metrics/ListTable';
import { MetricCard } from '@/components/metrics/MetricCard'; import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar'; import { MetricsBar } from '@/components/metrics/MetricsBar';
import { renderDateLabels } from '@/lib/charts'; import { renderDateLabels } from '@/lib/charts';
import { CHART_COLORS } from '@/lib/constants'; import { CHART_COLORS } from '@/lib/constants';
import { generateTimeSeries } from '@/lib/date';
import { formatLongCurrency, formatLongNumber } from '@/lib/format'; import { formatLongCurrency, formatLongNumber } from '@/lib/format';
import { useCallback, useMemo } from 'react'; import { Column, Grid, Row, Text } from '@umami/react-zen';
import { Panel } from '@/components/common/Panel'; import classNames from 'classnames';
import { Column } from '@umami/react-zen'; import { colord } from 'colord';
import { LoadingPanel } from '@/components/common/LoadingPanel'; import { useCallback, useMemo, useState } from 'react';
import { getMinimumUnit } from '@/lib/date';
import { CurrencySelect } from '@/components/input/CurrencySelect';
export interface RevenueProps { export interface RevenueProps {
websiteId: string; websiteId: string;
startDate: Date; minDate: Date;
endDate: 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 [currency, setCurrency] = useState('USD');
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { locale } = useLocale(); const { locale, dateLocale } = useLocale();
const { countryNames } = useCountryNames(locale); const { countryNames } = useCountryNames(locale);
const unit = getMinimumUnit(startDate, endDate);
const { data, error, isLoading } = useResultQuery<any>('revenue', { const { data, error, isLoading } = useResultQuery<any>('revenue', {
websiteId, websiteId,
startDate, minDate,
endDate, maxDate,
currency, currency,
}); });
@ -65,7 +63,7 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
const color = colord(CHART_COLORS[index % CHART_COLORS.length]); const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
return { return {
label: key, label: key,
data: map[key], data: generateTimeSeries(map[key], minDate, maxDate, unit, dateLocale),
lineTension: 0, lineTension: 0,
backgroundColor: color.alpha(0.6).toRgbString(), backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).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(() => { const metrics = useMemo(() => {
if (!data) return []; if (!data) return [];
@ -104,6 +102,8 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
] as any; ] as any;
}, [data, locale]); }, [data, locale]);
const renderXLabel = useCallback(renderDateLabels(unit, locale), [unit, locale]);
return ( return (
<Column gap> <Column gap>
<Grid columns="280px" gap> <Grid columns="280px" gap>
@ -122,12 +122,12 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
<Panel> <Panel>
<BarChart <BarChart
chartData={chartData} chartData={chartData}
minDate={startDate} minDate={minDate}
maxDate={endDate} maxDate={maxDate}
unit={unit} unit={unit}
stacked={true} stacked={true}
currency={currency} currency={currency}
renderXLabel={renderDateLabels(unit, locale)} renderXLabel={renderXLabel}
height="400px" height="400px"
/> />
</Panel> </Panel>

View file

@ -6,13 +6,13 @@ import { useDateRange } from '@/components/hooks';
export function RevenuePage({ websiteId }: { websiteId: string }) { export function RevenuePage({ websiteId }: { websiteId: string }) {
const { const {
dateRange: { startDate, endDate }, dateRange: { startDate, endDate, unit },
} = useDateRange(websiteId); } = useDateRange(websiteId);
return ( return (
<Column gap> <Column gap>
<WebsiteControls websiteId={websiteId} /> <WebsiteControls websiteId={websiteId} />
<Revenue websiteId={websiteId} startDate={startDate} endDate={endDate} /> <Revenue websiteId={websiteId} minDate={startDate} maxDate={endDate} unit={unit} />
</Column> </Column>
); );
} }

View file

@ -14,12 +14,6 @@ export interface RevenueResult {
chart: { x: string; t: string; y: number }[]; chart: { x: string; t: string; y: number }[];
country: { name: string; value: number }[]; country: { name: string; value: number }[];
total: { sum: number; count: number; average: number; unique_count: 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( export async function getRevenue(
@ -121,32 +115,7 @@ async function relationalQuery(
total.average = total.count > 0 ? total.sum / total.count : 0; total.average = total.count > 0 ? total.sum / total.count : 0;
const table = await rawQuery( return { chart, country, total };
`
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 };
} }
async function clickhouseQuery( async function clickhouseQuery(
@ -250,36 +219,5 @@ async function clickhouseQuery(
total.average = total.count > 0 ? total.sum / total.count : 0; total.average = total.count > 0 ? total.sum / total.count : 0;
const table = await rawQuery< return { chart, country, total };
{
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 };
} }