feature(dashboard): add conversion rate graph

apps/dashboard/src/components/report/ReportChartType.tsx

@@ -9,6 +9,7 @@ import {
   LineChartIcon,
   type LucideIcon,
   PieChartIcon,
+  TrendingUpIcon,
   UsersIcon,
 } from 'lucide-react';
 
@@ -52,6 +53,7 @@ export function ReportChartType({ className }: ReportChartTypeProps) {
     metric: GaugeIcon,
     retention: UsersIcon,
     map: Globe2Icon,
+    conversion: TrendingUpIcon,
   };
 
   return (
@@ -76,10 +78,11 @@ export function ReportChartType({ className }: ReportChartTypeProps) {
               <DropdownMenuItem
                 key={item.value}
                 onClick={() => dispatch(changeChartType(item.value))}
+                className="group"
               >
                 {item.label}
                 <DropdownMenuShortcut>
-                  <Icon className="size-4" />
+                  <Icon className="size-4 group-hover:text-blue-500 group-hover:scale-125 transition-all group-hover:rotate-12" />
                 </DropdownMenuShortcut>
               </DropdownMenuItem>
             );

apps/dashboard/src/components/report/ReportInterval.tsx

@@ -22,7 +22,8 @@ export function ReportInterval({ className }: ReportIntervalProps) {
     chartType !== 'histogram' &&
     chartType !== 'area' &&
     chartType !== 'metric' &&
-    chartType !== 'retention'
+    chartType !== 'retention' &&
+    chartType !== 'conversion'
   ) {
     return null;
   }

apps/dashboard/src/components/report/ReportLineType.tsx

@@ -15,9 +15,12 @@ export function ReportLineType({ className }: ReportLineTypeProps) {
   const chartType = useSelector((state) => state.report.chartType);
   const type = useSelector((state) => state.report.lineType);
 
-  if (chartType !== 'linear' && chartType !== 'area') {
+  if (
+    chartType !== 'conversion' &&
+    chartType !== 'linear' &&
+    chartType !== 'area'
+  )
     return null;
-  }
 
   return (
     <Combobox

apps/dashboard/src/components/report/sidebar/ReportEvents.tsx

@@ -33,7 +33,8 @@ export function ReportEvents() {
   const showAddFilter = !['retention'].includes(chartType);
   const showDisplayNameInput = !['retention'].includes(chartType);
   const isAddEventDisabled =
-    chartType === 'retention' && selectedEvents.length >= 2;
+    (chartType === 'retention' || chartType === 'conversion') &&
+    selectedEvents.length >= 2;
   const dispatchChangeEvent = useDebounceFn((event: IChartEvent) => {
     dispatch(changeEvent(event));
   });

apps/dashboard/src/components/report/sidebar/ReportSidebar.tsx

@@ -9,7 +9,10 @@ import { ReportSettings } from './ReportSettings';
 
 export function ReportSidebar() {
   const { chartType } = useSelector((state) => state.report);
-  const showFormula = chartType !== 'funnel' && chartType !== 'retention';
+  const showFormula =
+    chartType !== 'conversion' &&
+    chartType !== 'funnel' &&
+    chartType !== 'retention';
   const showBreakdown = chartType !== 'retention';
   return (
     <>