Add revenue.

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

@@ -29,6 +29,7 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
       boolean: true,
       booleanError: 'true',
       time: new Date(),
+      user: `user${Math.round(Math.random() * 10)}`,
       number: 1,
       number2: Math.random() * 100,
       time2: new Date().toISOString(),

src/app/(main)/reports/[reportId]/ReportPage.tsx

@@ -7,6 +7,7 @@ import InsightsReport from '../insights/InsightsReport';
 import JourneyReport from '../journey/JourneyReport';
 import RetentionReport from '../retention/RetentionReport';
 import UTMReport from '../utm/UTMReport';
+import RevenueReport from '../revenue/RevenueReport';
 
 const reports = {
   funnel: FunnelReport,
@@ -16,6 +17,7 @@ const reports = {
   utm: UTMReport,
   goals: GoalReport,
   journey: JourneyReport,
+  revenue: RevenueReport,
 };
 
 export default function ReportPage({ reportId }: { reportId: string }) {

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

@@ -51,6 +51,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       url: renderTeamUrl('/reports/journey'),
       icon: <Path />,
     },
+    {
+      title: formatMessage(labels.revenue),
+      description: formatMessage(labels.revenueDescription),
+      url: renderTeamUrl('/reports/revenue'),
+      icon: <Path />,
+    },
   ];
 
   return (

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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,51 @@
+import { useMessages } from 'components/hooks';
+import { useContext } from 'react';
+import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } 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 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)}>
+        <FormInput name="eventName" rules={{ required: formatMessage(labels.required) }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <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}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default RevenueParameters;

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

@@ -0,0 +1,10 @@
+.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

@@ -0,0 +1,27 @@
+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 Target from 'assets/target.svg';
+import { REPORT_TYPES } from 'lib/constants';
+
+const defaultParameters = {
+  type: REPORT_TYPES.revenue,
+  parameters: { Revenue: [] },
+};
+
+export default function RevenueReport({ reportId }: { reportId?: string }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Target />} />
+      <ReportMenu>
+        <RevenueParameters />
+      </ReportMenu>
+      <ReportBody>
+        <RevenueChart />
+      </ReportBody>
+    </Report>
+  );
+}

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

@@ -0,0 +1,6 @@
+'use client';
+import RevenueReport from './RevenueReport';
+
+export default function RevenueReportPage() {
+  return <RevenueReport />;
+}

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

@@ -0,0 +1,10 @@
+import RevenueReportPage from './RevenueReportPage';
+import { Metadata } from 'next';
+
+export default function () {
+  return <RevenueReportPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Revenue Report',
+};