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

Author: franciscao633

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<any>('revenue', {
     websiteId,
-    startDate,
-    endDate,
+    minDate,
+    maxDate,
     currency,
   });
 
@@ -65,15 +63,15 @@ 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(),
           borderWidth: 1,
         };
       }),
     };
-  }, [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 (
     <Column gap>
       <Grid columns="280px" gap>
@@ -122,12 +122,12 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
             <Panel>
               <BarChart
                 chartData={chartData}
-                minDate={startDate}
-                maxDate={endDate}
+                minDate={minDate}
+                maxDate={maxDate}
                 unit={unit}
                 stacked={true}
                 currency={currency}
-                renderXLabel={renderDateLabels(unit, locale)}
+                renderXLabel={renderXLabel}
                 height="400px"
               />
             </Panel>

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 (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
-      <Revenue websiteId={websiteId} startDate={startDate} endDate={endDate} />
+      <Revenue websiteId={websiteId} minDate={startDate} maxDate={endDate} unit={unit} />
     </Column>
   );
 }

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