Added revenue screen.

src/components/charts/BarChart.tsx

@@ -28,8 +28,8 @@ export interface BarChartProps extends ChartProps {
   renderYLabel?: (label: string, index: number, values: any[]) => string;
   XAxisType?: string;
   YAxisType?: string;
-  minDate?: number | string;
-  maxDate?: number | string;
+  minDate?: Date;
+  maxDate?: Date;
   isAllTime?: boolean;
 }
 

src/components/charts/Chart.tsx

@@ -1,9 +1,8 @@
 import { useState, useRef, useEffect, useMemo } from 'react';
-import { Loading, Box, Column } from '@umami/react-zen';
+import { Loading, Box, Column, BoxProps } from '@umami/react-zen';
 import ChartJS, { LegendItem, ChartOptions } from 'chart.js/auto';
 import { Legend } from '@/components/metrics/Legend';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
-import type { BoxProps } from '@umami/react-zen/Box';
 
 export interface ChartProps extends BoxProps {
   type?: 'bar' | 'bubble' | 'doughnut' | 'pie' | 'line' | 'polarArea' | 'radar' | 'scatter';

src/components/hooks/index.ts

@@ -8,6 +8,7 @@ export * from './queries/useRealtimeQuery';
 export * from './queries/useReportQuery';
 export * from './queries/useReportsQuery';
 export * from './queries/useRetentionQuery';
+export * from './queries/useRevenueQuery';
 export * from './queries/useSessionActivityQuery';
 export * from './queries/useSessionDataQuery';
 export * from './queries/useSessionDataPropertiesQuery';

src/components/hooks/queries/useRevenueQuery.ts

@@ -0,0 +1,39 @@
+import { useApi } from '../useApi';
+import { useFilterParams } from '../useFilterParams';
+import { UseQueryOptions } from '@tanstack/react-query';
+
+interface RevenueData {
+  chart: any[];
+  country: any[];
+  total: {
+    sum: number;
+    count: number;
+    unique_count: number;
+  };
+  table: any[];
+}
+
+export function useRevenueQuery(
+  websiteId: string,
+  queryParams?: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
+  options?: Omit<
+    UseQueryOptions<RevenueData, Error, RevenueData, any[]> & { onDataLoad?: (data: any) => void },
+    'queryKey' | 'queryFn'
+  >,
+) {
+  const { get, useQuery } = useApi();
+  const filterParams = useFilterParams(websiteId);
+  const currency = 'USD';
+
+  return useQuery<RevenueData, Error, RevenueData, any[]>({
+    queryKey: ['revenue', websiteId, { ...filterParams, ...queryParams }],
+    queryFn: () =>
+      get(`/websites/${websiteId}/revenue`, {
+        currency,
+        ...filterParams,
+        ...queryParams,
+      }),
+    enabled: !!websiteId,
+    ...options,
+  });
+}

src/components/input/WebsiteDateFilter.tsx

@@ -19,13 +19,13 @@ export function WebsiteDateFilter({
   websiteId,
   showAllTime = true,
   showButtons = true,
-  showCompare = true,
+  allowCompare = true,
 }: {
   websiteId: string;
   compare?: string;
   showAllTime?: boolean;
   showButtons?: boolean;
-  showCompare?: boolean;
+  allowCompare?: boolean;
 }) {
   const { dateRange, saveDateRange } = useDateRange(websiteId);
   const { value, startDate, endDate, offset } = dateRange;
@@ -92,7 +92,7 @@ export function WebsiteDateFilter({
           </Select>
         </Row>
       )}
-      {!isAllTime && showCompare && (
+      {!isAllTime && allowCompare && (
         <TooltipTrigger delay={0}>
           <Button variant="quiet" onPress={handleCompare}>
             <Icon fillColor>{compare ? <Icons.Close /> : <Icons.Compare />}</Icon>