mirror of
https://github.com/umami-software/umami.git
synced 2026-02-11 08:07:12 +01:00
Remove tables result set from getRevenue. Fix min/max date for revenuechart
This commit is contained in:
parent
1b54ba3e6e
commit
bf99068bd7
3 changed files with 26 additions and 88 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 };
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue