v1 revenue report for clickhouse

next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

src/app/(main)/console/TestConsole.tsx

@@ -48,6 +48,46 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
     });
   }
 
+  function handleRunRevenue() {
+    window['umami'].track(props => ({
+      ...props,
+      url: '/checkout-cart',
+      referrer: 'https://www.google.com',
+    }));
+    window['umami'].track('checkout-cart', {
+      revenue: parseFloat((Math.random() * 100000).toFixed(2)),
+      currency: 'USD',
+    });
+    window['umami'].track('affiliate-link', {
+      revenue: parseFloat((Math.random() * 100000).toFixed(2)),
+      currency: 'USD',
+    });
+    window['umami'].track('promotion-link', {
+      revenue: parseFloat((Math.random() * 100000).toFixed(2)),
+      currency: 'USD',
+    });
+    window['umami'].track('checkout-cart', {
+      revenue: parseFloat((Math.random() * 100000).toFixed(2)),
+      currency: 'EUR',
+    });
+    window['umami'].track('promotion-link', {
+      revenue: parseFloat((Math.random() * 100000).toFixed(2)),
+      currency: 'EUR',
+    });
+    window['umami'].track('affiliate-link', {
+      item1: {
+        productIdentity: 'ABC424',
+        revenue: parseFloat((Math.random() * 100000).toFixed(2)),
+        currency: 'MXN',
+      },
+      item2: {
+        productIdentity: 'ZYW684',
+        revenue: parseFloat((Math.random() * 100000).toFixed(2)),
+        currency: 'MXN',
+      },
+    });
+  }
+
   function handleRunIdentify() {
     window['umami'].identify({
       userId: 123,
@@ -127,10 +167,18 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
               >
                 Send event with data
               </Button>
+              <Button
+                id="generate-revenue-button"
+                data-umami-event="checkout-cart"
+                data-umami-event-revenue={(Math.random() * 100).toFixed(2).toString()}
+                variant="primary"
+              >
+                Generate revenue data
+              </Button>
               <Button
                 id="button-with-div-button"
                 data-umami-event="button-click"
-                data-umami-event-name="bob"
+                data-umami-event-name={'bob'}
                 data-umami-event-id="123"
                 variant="primary"
               >
@@ -155,6 +203,9 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
               <Button id="manual-button" variant="primary" onClick={handleRunIdentify}>
                 Run identify
               </Button>
+              <Button id="manual-button" variant="primary" onClick={handleRunRevenue}>
+                Revenue script
+              </Button>
             </div>
           </div>
           <WebsiteChart websiteId={website.id} />

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -1,4 +1,5 @@
 import Funnel from 'assets/funnel.svg';
+import Money from 'assets/money.svg';
 import Lightbulb from 'assets/lightbulb.svg';
 import Magnet from 'assets/magnet.svg';
 import Path from 'assets/path.svg';
@@ -51,12 +52,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       url: renderTeamUrl('/reports/journey'),
       icon: <Path />,
     },
-    // {
+    {
-    //   title: formatMessage(labels.revenue),
+      title: formatMessage(labels.revenue),
-    //   description: formatMessage(labels.revenueDescription),
+      description: formatMessage(labels.revenueDescription),
-    //   url: renderTeamUrl('/reports/revenue'),
+      url: renderTeamUrl('/reports/revenue'),
-    //   icon: <Money />,
+      icon: <Money />,
-    // },
+    },
   ];
 
   return (

src/app/(main)/reports/revenue/RevenueChart.tsx

@@ -1,98 +0,0 @@
-import BarChart, { BarChartProps } from 'components/charts/BarChart';
-import { useLocale, useMessages } from 'components/hooks';
-import MetricCard from 'components/metrics/MetricCard';
-import MetricsBar from 'components/metrics/MetricsBar';
-import { renderDateLabels } from 'lib/charts';
-import { formatLongNumber } from 'lib/format';
-import { useContext, useMemo } from 'react';
-import { ReportContext } from '../[reportId]/Report';
-
-export interface PageviewsChartProps extends BarChartProps {
-  isLoading?: boolean;
-}
-
-export function RevenueChart({ isLoading, ...props }: PageviewsChartProps) {
-  const { formatMessage, labels } = useMessages();
-  const { locale } = useLocale();
-  const { report } = useContext(ReportContext);
-  const { data, parameters } = report || {};
-
-  const chartData = useMemo(() => {
-    if (!data) {
-      return {};
-    }
-
-    return {
-      datasets: [
-        {
-          label: formatMessage(labels.average),
-          data: data?.chart.map(a => ({ x: a.time, y: a.avg })),
-          borderWidth: 2,
-          backgroundColor: '#8601B0',
-          borderColor: '#8601B0',
-          order: 1,
-        },
-        {
-          label: formatMessage(labels.total),
-          data: data?.chart.map(a => ({ x: a.time, y: a.sum })),
-          borderWidth: 2,
-          backgroundColor: '#f15bb5',
-          borderColor: '#f15bb5',
-          order: 2,
-        },
-      ],
-    };
-  }, [data, locale]);
-
-  const metricData = useMemo(() => {
-    if (!data) {
-      return [];
-    }
-
-    const { sum, avg, count, uniqueCount } = data.total;
-
-    return [
-      {
-        value: sum,
-        label: formatMessage(labels.total),
-        formatValue: formatLongNumber,
-      },
-      {
-        value: avg,
-        label: formatMessage(labels.average),
-        formatValue: formatLongNumber,
-      },
-      {
-        value: count,
-        label: formatMessage(labels.transactions),
-        formatValue: formatLongNumber,
-      },
-      {
-        value: uniqueCount,
-        label: formatMessage(labels.uniqueCustomers),
-        formatValue: formatLongNumber,
-      },
-    ] as any;
-  }, [data, locale]);
-
-  return (
-    <>
-      <MetricsBar isFetched={data}>
-        {metricData?.map(({ label, value, formatValue }) => {
-          return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
-        })}
-      </MetricsBar>
-      {data && (
-        <BarChart
-          {...props}
-          data={chartData}
-          unit={parameters?.dateRange.unit}
-          isLoading={isLoading}
-          renderXLabel={renderDateLabels(parameters?.dateRange.unit, locale)}
-        />
-      )}
-    </>
-  );
-}
-
-export default RevenueChart;

src/app/(main)/reports/revenue/RevenueParameters.tsx

@@ -1,46 +1,35 @@
 import { useMessages } from 'components/hooks';
 import { useContext } from 'react';
-import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from 'react-basics';
+import { Dropdown, Form, FormButtons, FormInput, FormRow, Item, SubmitButton } from 'react-basics';
 import BaseParameters from '../[reportId]/BaseParameters';
 import { ReportContext } from '../[reportId]/Report';
 
 export function RevenueParameters() {
   const { report, runReport, isRunning } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
-
   const { id, parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
-  const queryDisabled = !websiteId || !dateRange;
+  const queryEnabled = websiteId && dateRange;
 
   const handleSubmit = (data: any, e: any) => {
     e.stopPropagation();
     e.preventDefault();
 
-    if (!queryDisabled) {
     runReport(data);
-    }
   };
 
   return (
     <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
-      <FormRow label={formatMessage(labels.event)}>
+      <FormRow label={formatMessage(labels.currency)}>
-        <FormInput name="eventName" rules={{ required: formatMessage(labels.required) }}>
+        <FormInput name="currency" rules={{ required: formatMessage(labels.required) }}>
-          <TextField autoComplete="off" />
+          <Dropdown items={['USD', 'EUR', 'MXN']}>
-        </FormInput>
+            {item => <Item key={item}>{item}</Item>}
-      </FormRow>
+          </Dropdown>
-      <FormRow label={formatMessage(labels.revenueProperty)}>
-        <FormInput name="revenueProperty" rules={{ required: formatMessage(labels.required) }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormRow label={formatMessage(labels.userProperty)}>
-        <FormInput name="userProperty">
-          <TextField autoComplete="off" />
         </FormInput>
       </FormRow>
       <FormButtons>
-        <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+        <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}
         </SubmitButton>
       </FormButtons>

src/app/(main)/reports/revenue/RevenueReport.module.css

@@ -1,10 +0,0 @@
-.filters {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  border: 1px solid var(--base400);
-  border-radius: var(--border-radius);
-  line-height: 32px;
-  padding: 10px;
-  overflow: hidden;
-}

src/app/(main)/reports/revenue/RevenueReport.tsx

@@ -1,15 +1,15 @@
-import RevenueChart from './RevenueChart';
-import RevenueParameters from './RevenueParameters';
-import Report from '../[reportId]/Report';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[reportId]/ReportBody';
 import Money from 'assets/money.svg';
 import { REPORT_TYPES } from 'lib/constants';
+import Report from '../[reportId]/Report';
+import ReportBody from '../[reportId]/ReportBody';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+import RevenueParameters from './RevenueParameters';
+import RevenueView from './RevenueView';
 
 const defaultParameters = {
   type: REPORT_TYPES.revenue,
-  parameters: { Revenue: [] },
+  parameters: {},
 };
 
 export default function RevenueReport({ reportId }: { reportId?: string }) {
@@ -20,7 +20,7 @@ export default function RevenueReport({ reportId }: { reportId?: string }) {
         <RevenueParameters />
       </ReportMenu>
       <ReportBody>
-        <RevenueChart unit="day" />
+        <RevenueView />
       </ReportBody>
     </Report>
   );

src/app/(main)/reports/revenue/RevenueTable.tsx

@@ -0,0 +1,38 @@
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { useMessages } from 'components/hooks';
+import { useContext } from 'react';
+import { GridColumn, GridTable } from 'react-basics';
+import { ReportContext } from '../[reportId]/Report';
+import { formatLongCurrency } from 'lib/format';
+
+export function RevenueTable() {
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { data } = report || {};
+
+  if (!data) {
+    return <EmptyPlaceholder />;
+  }
+
+  return (
+    <GridTable data={data.table || []}>
+      <GridColumn name="currency" label={formatMessage(labels.currency)} alignment="end">
+        {row => row.currency}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.total)} width="300px" alignment="end">
+        {row => formatLongCurrency(row.sum, row.currency)}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.average)} alignment="end">
+        {row => formatLongCurrency(row.avg, row.currency)}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.transactions)} alignment="end">
+        {row => row.count}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.uniqueCustomers)} alignment="end">
+        {row => row.uniqueCount}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default RevenueTable;

src/app/(main)/reports/revenue/RevenueView.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: grid;
+  gap: 20px;
+  margin-bottom: 40px;
+}

src/app/(main)/reports/revenue/RevenueView.tsx

@@ -0,0 +1,140 @@
+import { colord } from 'colord';
+import BarChart from 'components/charts/BarChart';
+import PieChart from 'components/charts/PieChart';
+import { useLocale, useMessages } from 'components/hooks';
+import { GridRow } from 'components/layout/Grid';
+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 { formatLongCurrency, formatLongNumber } from 'lib/format';
+import { useContext, useMemo } from 'react';
+import { ReportContext } from '../[reportId]/Report';
+import RevenueTable from './RevenueTable';
+import styles from './RevenueView.module.css';
+
+export interface RevenueViewProps {
+  isLoading?: boolean;
+}
+
+export function RevenueView({ isLoading }: RevenueViewProps) {
+  const { formatMessage, labels } = useMessages();
+  const { locale } = useLocale();
+  const { report } = useContext(ReportContext);
+  const {
+    data,
+    parameters: { dateRange, currency },
+  } = report || {};
+  const showTable = data?.table.length > 1;
+
+  const chartData = useMemo(() => {
+    if (!data) return [];
+
+    const map = (data.chart as any[]).reduce((obj, { x, t, y }) => {
+      if (!obj[x]) {
+        obj[x] = [];
+      }
+
+      obj[x].push({ x: t, y });
+
+      return obj;
+    }, {});
+
+    return {
+      datasets: Object.keys(map).map((key, index) => {
+        const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
+        return {
+          label: key,
+          data: map[key],
+          lineTension: 0,
+          backgroundColor: color.alpha(0.6).toRgbString(),
+          borderColor: color.alpha(0.7).toRgbString(),
+          borderWidth: 1,
+        };
+      }),
+    };
+  }, [data]);
+
+  const countryData = useMemo(() => {
+    if (!data) return [];
+
+    const labels = data.country.map(({ name }) => name);
+    const datasets = [
+      {
+        data: data.country.map(({ value }) => value),
+        backgroundColor: CHART_COLORS,
+        borderWidth: 0,
+      },
+    ];
+
+    return { labels, datasets };
+  }, [data]);
+
+  const metricData = useMemo(() => {
+    if (!data) return [];
+
+    const { sum, avg, count, uniqueCount } = data.total;
+
+    return [
+      {
+        value: sum,
+        label: formatMessage(labels.total),
+        formatValue: n => formatLongCurrency(n, currency),
+      },
+      {
+        value: avg,
+        label: formatMessage(labels.average),
+        formatValue: n => formatLongCurrency(n, currency),
+      },
+      {
+        value: count,
+        label: formatMessage(labels.transactions),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: uniqueCount,
+        label: formatMessage(labels.uniqueCustomers),
+        formatValue: formatLongNumber,
+      },
+    ] as any;
+  }, [data, locale]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <MetricsBar isFetched={data}>
+          {metricData?.map(({ label, value, formatValue }) => {
+            return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
+          })}
+        </MetricsBar>
+        <BarChart
+          minDate={dateRange?.startDate}
+          maxDate={dateRange?.endDate}
+          data={chartData}
+          unit={dateRange?.unit}
+          stacked={true}
+          currency={currency}
+          renderXLabel={renderDateLabels(dateRange?.unit, locale)}
+          isLoading={isLoading}
+        />
+        {data && (
+          <GridRow columns="one-two">
+            <ListTable
+              metric={formatMessage(labels.country)}
+              data={data?.country.map(({ name, value }) => ({
+                x: name,
+                y: value,
+                z: (value / data?.total.sum) * 100,
+              }))}
+            />
+            <PieChart type="doughnut" data={countryData} />
+          </GridRow>
+        )}
+        {showTable && <RevenueTable />}
+      </div>
+    </>
+  );
+}
+
+export default RevenueView;

src/app/(main)/websites/[websiteId]/events/EventProperties.tsx

@@ -54,7 +54,7 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
         {propertyName && (
           <div className={styles.chart}>
             <div className={styles.title}>{propertyName}</div>
-            <PieChart key={propertyName} type="doughnut" data={chartData} />
+            <PieChart key={propertyName + eventName} type="doughnut" data={chartData} />
           </div>
         )}
       </div>

src/components/charts/BarChart.tsx

@@ -7,6 +7,7 @@ import { useMemo, useState } from 'react';
 export interface BarChartProps extends ChartProps {
   unit: string;
   stacked?: boolean;
+  currency?: string;
   renderXLabel?: (label: string, index: number, values: any[]) => string;
   renderYLabel?: (label: string, index: number, values: any[]) => string;
   XAxisType?: string;
@@ -27,6 +28,7 @@ export function BarChart(props: BarChartProps) {
     stacked = false,
     minDate,
     maxDate,
+    currency,
   } = props;
 
   const options: any = useMemo(() => {
@@ -76,7 +78,9 @@ export function BarChart(props: BarChartProps) {
   const handleTooltip = ({ tooltip }: { tooltip: any }) => {
     const { opacity } = tooltip;
 
-    setTooltip(opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} /> : null);
+    setTooltip(
+      opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} currency={currency} /> : null,
+    );
   };
 
   return (

src/components/charts/BarChartTooltip.tsx

@@ -1,7 +1,7 @@
-import { formatDate } from 'lib/date';
-import { Flexbox, StatusLight } from 'react-basics';
-import { formatLongNumber } from 'lib/format';
 import { useLocale } from 'components/hooks';
+import { formatDate } from 'lib/date';
+import { formatLongCurrency, formatLongNumber } from 'lib/format';
+import { Flexbox, StatusLight } from 'react-basics';
 
 const formats = {
   millisecond: 'T',
@@ -15,7 +15,7 @@ const formats = {
   year: 'yyyy',
 };
 
-export default function BarChartTooltip({ tooltip, unit }) {
+export default function BarChartTooltip({ tooltip, unit, currency }) {
   const { locale } = useLocale();
   const { labelColors, dataPoints } = tooltip;
 
@@ -26,7 +26,10 @@ export default function BarChartTooltip({ tooltip, unit }) {
       </div>
       <div>
         <StatusLight color={labelColors?.[0]?.backgroundColor}>
-          {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
+          {currency
+            ? formatLongCurrency(dataPoints[0].raw.y, currency)
+            : formatLongNumber(dataPoints[0].raw.y)}{' '}
+          {dataPoints[0].dataset.label}
         </StatusLight>
       </div>
     </Flexbox>

src/components/hooks/queries/useEventDataValues.ts

@@ -12,7 +12,7 @@ export function useEventDataValues(
   const params = useFilterParams(websiteId);
 
   return useQuery<any>({
-    queryKey: ['websites:event-data:values', { websiteId, propertyName, ...params }],
+    queryKey: ['websites:event-data:values', { websiteId, eventName, propertyName, ...params }],
     queryFn: () =>
       get(`/websites/${websiteId}/event-data/values`, { ...params, eventName, propertyName }),
     enabled: !!(websiteId && propertyName),

src/components/messages.ts

@@ -114,8 +114,6 @@ export const labels = defineMessages({
   none: { id: 'label.none', defaultMessage: 'None' },
   clearAll: { id: 'label.clear-all', defaultMessage: 'Clear all' },
   property: { id: 'label.property', defaultMessage: 'Property' },
-  revenueProperty: { id: 'label.revenue-property', defaultMessage: 'Revenue Property' },
-  userProperty: { id: 'label.user-property', defaultMessage: 'User Property' },
   today: { id: 'label.today', defaultMessage: 'Today' },
   lastHours: { id: 'label.last-hours', defaultMessage: 'Last {x} hours' },
   yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' },
@@ -162,8 +160,9 @@ export const labels = defineMessages({
   revenue: { id: 'label.revenue', defaultMessage: 'Revenue' },
   revenueDescription: {
     id: 'label.revenue-description',
-    defaultMessage: 'Look into your revenue across time.',
+    defaultMessage: 'Look into your revenue data and how users are spending.',
   },
+  currency: { id: 'label.currency', defaultMessage: 'Currency' },
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
   path: { id: 'label.path', defaultMessage: 'Path' },

src/lib/format.ts

@@ -47,6 +47,9 @@ export function formatNumber(n: string | number) {
 export function formatLongNumber(value: number) {
   const n = Number(value);
 
+  if (n >= 1000000000) {
+    return `${(n / 1000000).toFixed(1)}b`;
+  }
   if (n >= 1000000) {
     return `${(n / 1000000).toFixed(1)}m`;
   }
@@ -78,3 +81,26 @@ export function stringToColor(str: string) {
   }
   return color;
 }
+
+export function formatCurrency(value: number, currency: string, locale = 'en-US') {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currency,
+  }).format(value);
+}
+
+export function formatLongCurrency(value: number, currency: string, locale = 'en-US') {
+  const n = Number(value);
+
+  if (n >= 1000000000) {
+    return `${formatCurrency(n / 1000000000, currency, locale)}b`;
+  }
+  if (n >= 1000000) {
+    return `${formatCurrency(n / 1000000, currency, locale)}m`;
+  }
+  if (n >= 1000) {
+    return `${formatCurrency(n / 1000, currency, locale)}k`;
+  }
+
+  return formatCurrency(n / 1000, currency, locale);
+}

src/pages/api/reports/revenue.ts

@@ -7,34 +7,30 @@ import { methodNotAllowed, ok, unauthorized } from 'next-basics';
 import { getRevenue } from 'queries/analytics/reports/getRevenue';
 import * as yup from 'yup';
 
-export interface RetentionRequestBody {
+export interface RevenueRequestBody {
   websiteId: string;
-  dateRange: { startDate: string; endDate: string; unit?: string; timezone?: string };
+  currency: string;
-  eventName: string;
+  timezone: string;
-  revenueProperty: string;
+  dateRange: { startDate: string; endDate: string; unit?: string };
-  userProperty: string;
 }
 
 const schema = {
   POST: yup.object().shape({
     websiteId: yup.string().uuid().required(),
+    timezone: TimezoneTest,
     dateRange: yup
       .object()
       .shape({
         startDate: yup.date().required(),
         endDate: yup.date().required(),
         unit: UnitTypeTest,
-        timezone: TimezoneTest,
       })
       .required(),
-    eventName: yup.string().required(),
-    revenueProperty: yup.string().required(),
-    userProperty: yup.string(),
   }),
 };
 
 export default async (
-  req: NextApiRequestQueryBody<any, RetentionRequestBody>,
+  req: NextApiRequestQueryBody<any, RevenueRequestBody>,
   res: NextApiResponse,
 ) => {
   await useCors(req, res);
@@ -44,10 +40,9 @@ export default async (
   if (req.method === 'POST') {
     const {
       websiteId,
-      dateRange: { startDate, endDate, unit, timezone },
+      currency,
-      eventName,
+      timezone,
-      revenueProperty,
+      dateRange: { startDate, endDate, unit },
-      userProperty,
     } = req.body;
 
     if (!(await canViewWebsite(req.auth, websiteId))) {
@@ -59,9 +54,7 @@ export default async (
       endDate: new Date(endDate),
       unit,
       timezone,
-      eventName,
+      currency,
-      revenueProperty,
-      userProperty,
     });
 
     return ok(res, data);

src/queries/analytics/reports/getRevenue.ts

@@ -10,9 +10,7 @@ export async function getRevenue(
       endDate: Date;
       unit: string;
       timezone: string;
-      eventName: string;
+      currency: string;
-      revenueProperty: string;
-      userProperty: string;
     },
   ]
 ) {
@@ -29,23 +27,12 @@ async function relationalQuery(
     endDate: Date;
     unit: string;
     timezone: string;
-    eventName: string;
-    revenueProperty: string;
-    userProperty: string;
   },
 ): Promise<{
   chart: { time: string; sum: number; avg: number; count: number; uniqueCount: number }[];
   total: { sum: number; avg: number; count: number; uniqueCount: number };
 }> {
-  const {
+  const { startDate, endDate, timezone = 'UTC', unit = 'day' } = criteria;
-    startDate,
-    endDate,
-    eventName,
-    revenueProperty,
-    userProperty,
-    timezone = 'UTC',
-    unit = 'day',
-  } = criteria;
   const { getDateSQL, rawQuery } = prisma;
 
   const chartRes = await rawQuery(
@@ -63,7 +50,7 @@ async function relationalQuery(
       and data_key in ({{revenueProperty}} , {{userProperty}})
     group by 1
     `,
-    { websiteId, startDate, endDate, eventName, revenueProperty, userProperty },
+    { websiteId, startDate, endDate },
   );
 
   const totalRes = await rawQuery(
@@ -80,7 +67,7 @@ async function relationalQuery(
       and data_key in ({{revenueProperty}} , {{userProperty}})
     group by 1
     `,
-    { websiteId, startDate, endDate, eventName, revenueProperty, userProperty },
+    { websiteId, startDate, endDate },
   );
 
   return { chart: chartRes, total: totalRes };
@@ -91,59 +78,81 @@ async function clickhouseQuery(
   criteria: {
     startDate: Date;
     endDate: Date;
-    eventName: string;
-    revenueProperty: string;
-    userProperty: string;
     unit: string;
     timezone: string;
+    currency: string;
   },
 ): Promise<{
-  chart: { time: string; sum: number; avg: number; count: number; uniqueCount: number }[];
+  chart: { x: string; t: string; y: number }[];
+  country: { name: string; value: number }[];
   total: { sum: number; avg: number; count: number; uniqueCount: number };
-}> {
+  table: {
-  const {
+    currency: string;
-    startDate,
-    endDate,
-    eventName,
-    revenueProperty,
-    userProperty = '',
-    timezone = 'UTC',
-    unit = 'day',
-  } = criteria;
-  const { getDateStringSQL, getDateSQL, rawQuery } = clickhouse;
-
-  const chartRes = await rawQuery<{
-    time: string;
     sum: number;
     avg: number;
     count: number;
     uniqueCount: number;
-  }>(
+  }[];
+}> {
+  const { startDate, endDate, timezone = 'UTC', unit = 'day', currency } = criteria;
+  const { getDateSQL, rawQuery } = clickhouse;
+
+  const chartRes = await rawQuery<
+    {
+      x: string;
+      t: string;
+      y: number;
+    }[]
+  >(
     `
     select
-      ${getDateStringSQL('g.time', unit)} as time, 
+      event_name x,
-      g.sum as sum,
+      ${getDateSQL('created_at', unit, timezone)} t,
-      g.avg as avg,
+      sum(coalesce(toDecimal64(number_value, 2), toDecimal64(string_value, 2))) y
-      g.count as count,
-      g.uniqueCount as uniqueCount
-    from (
-      select 
-        ${getDateSQL('created_at', unit, timezone)} as time,
-        sumIf(number_value, data_key = {revenueProperty:String}) as sum,
-        avgIf(number_value, data_key = {revenueProperty:String}) as avg,
-        countIf(data_key = {revenueProperty:String}) as count,
-        uniqExactIf(string_value, data_key = {userProperty:String}) as uniqueCount
     from event_data
+    join (select event_id 
+          from event_data
+          where positionCaseInsensitive(data_key, 'currency') > 0
+            and string_value = {currency:String}) currency
+    on currency.event_id = event_data.event_id
     where website_id = {websiteId:UUID}
       and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-        and event_name = {eventName:String}
+      and positionCaseInsensitive(data_key, 'revenue') > 0
-        and data_key in ({revenueProperty:String}, {userProperty:String})
+    group by  x, t
-      group by time
+    order by t
-    ) as g
-    order by time
     `,
-    { websiteId, startDate, endDate, eventName, revenueProperty, userProperty },
+    { websiteId, startDate, endDate, unit, timezone, currency },
-  ).then(result => result?.[0]);
+  );
+
+  const countryRes = await rawQuery<
+    {
+      name: string;
+      value: number;
+    }[]
+  >(
+    `
+    select
+      s.country as name,
+      sum(coalesce(toDecimal64(number_value, 2), toDecimal64(string_value, 2))) as value
+    from event_data ed
+    join (select event_id
+          from event_data
+          where positionCaseInsensitive(data_key, 'currency') > 0
+            and string_value = {currency:String}) c
+    on c.event_id = ed.event_id
+    join (select distinct website_id, session_id, country
+          from website_event_stats_hourly
+          where website_id = {websiteId:UUID}) s
+    on ed.website_id = s.website_id
+        and ed.session_id = s.session_id
+   where ed.website_id = {websiteId:UUID}
+      and ed.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      and positionCaseInsensitive(ed.data_key, 'revenue') > 0
+    group by s.country
+
+    `,
+    { websiteId, startDate, endDate, currency },
+  );
 
   const totalRes = await rawQuery<{
     sum: number;
@@ -153,18 +162,52 @@ async function clickhouseQuery(
   }>(
     `
     select
-        sumIf(number_value, data_key = {revenueProperty:String}) as sum,
+      sum(coalesce(toDecimal64(number_value, 2), toDecimal64(string_value, 2))) as sum,
-        avgIf(number_value, data_key = {revenueProperty:String}) as avg,
+      avg(coalesce(toDecimal64(number_value, 2), toDecimal64(string_value, 2))) as avg,
-        countIf(data_key = {revenueProperty:String}) as count,
+      uniqExact(event_id) as count,
-        uniqExactIf(string_value, data_key = {userProperty:String}) as uniqueCount
+      uniqExact(session_id) as uniqueCount
     from event_data
+    join (select event_id 
+          from event_data
+          where positionCaseInsensitive(data_key, 'currency') > 0
+            and string_value = {currency:String}) currency
+    on currency.event_id = event_data.event_id
       where website_id = {websiteId:UUID}
         and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-        and event_name = {eventName:String}
+        and positionCaseInsensitive(data_key, 'revenue') > 0
-        and data_key in ({revenueProperty:String}, {userProperty:String})
     `,
-    { websiteId, startDate, endDate, eventName, revenueProperty, userProperty },
+    { websiteId, startDate, endDate, currency },
+  ).then(result => result?.[0]);
+
+  const tableRes = await rawQuery<
+    {
+      currency: string;
+      sum: number;
+      avg: number;
+      count: number;
+      uniqueCount: number;
+    }[]
+  >(
+    `
+    select
+      c.currency,
+      sum(coalesce(toDecimal64(ed.number_value, 2), toDecimal64(ed.string_value, 2))) as sum,
+      avg(coalesce(toDecimal64(ed.number_value, 2), toDecimal64(ed.string_value, 2))) as avg,
+      uniqExact(ed.event_id) as count,
+      uniqExact(ed.session_id) as uniqueCount
+    from event_data ed
+    join (select event_id, string_value as currency
+          from event_data
+          where positionCaseInsensitive(data_key, 'currency') > 0) c
+      ON c.event_id = ed.event_id
+    where website_id = {websiteId:UUID}
+      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      and positionCaseInsensitive(data_key, 'revenue') > 0
+    group by c.currency
+    order by sum desc;
+    `,
+    { websiteId, startDate, endDate, unit, timezone, currency },
   );
 
-  return { chart: chartRes, total: totalRes };
+  return { chart: chartRes, country: countryRes, total: totalRes, table: tableRes };
 }

src/queries/analytics/sessions/getWebsiteSessionsWeekly.ts

@@ -34,8 +34,8 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
 
 async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
   const { timezone = 'utc' } = filters;
-  const { rawQuery } = clickhouse;
+  const { rawQuery, parseFilters } = clickhouse;
-  const { startDate, endDate } = filters;
+  const { params } = await parseFilters(websiteId, filters);
 
   return rawQuery(
     `
@@ -48,7 +48,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
     group by time
     order by time
     `,
-    { websiteId, startDate, endDate },
+    params,
   ).then(formatResults);
 }