fix: improve types for chart/reports

apps/api/src/controllers/export.controller.ts

@@ -13,7 +13,7 @@ import {
   getSettingsForProject,
 } from '@openpanel/db';
 import { ChartEngine } from '@openpanel/db';
-import { zChartEvent, zChartInputBase } from '@openpanel/validation';
+import { zChartEvent, zReport } from '@openpanel/validation';
 import { omit } from 'ramda';
 
 async function getProjectId(
@@ -139,7 +139,7 @@ export async function events(
   });
 }
 
-const chartSchemeFull = zChartInputBase
+const chartSchemeFull = zReport
   .pick({
     breakdowns: true,
     interval: true,

apps/api/src/utils/ai-tools.ts

@@ -9,7 +9,7 @@ import {
 } from '@openpanel/db';
 import { ChartEngine } from '@openpanel/db';
 import { getCache } from '@openpanel/redis';
-import { zChartInputAI } from '@openpanel/validation';
+import { zReportInput } from '@openpanel/validation';
 import { tool } from 'ai';
 import { z } from 'zod';
 
@@ -27,7 +27,10 @@ export function getReport({
     - ${chartTypes.metric}
     - ${chartTypes.bar}
 `,
-    parameters: zChartInputAI,
+    parameters: zReportInput.extend({
+      startDate: z.string().describe('The start date for the report'),
+      endDate: z.string().describe('The end date for the report'),
+    }),
     execute: async (report) => {
       return {
         type: 'report',
@@ -72,7 +75,10 @@ export function getConversionReport({
   return tool({
     description:
       'Generate a report (a chart) for conversions between two actions a unique user took.',
-    parameters: zChartInputAI,
+    parameters: zReportInput.extend({
+      startDate: z.string().describe('The start date for the report'),
+      endDate: z.string().describe('The end date for the report'),
+    }),
     execute: async (report) => {
       return {
         type: 'report',
@@ -94,7 +100,10 @@ export function getFunnelReport({
   return tool({
     description:
       'Generate a report (a chart) for funnel between two or more actions a unique user (session_id or profile_id) took.',
-    parameters: zChartInputAI,
+    parameters: zReportInput.extend({
+      startDate: z.string().describe('The start date for the report'),
+      endDate: z.string().describe('The end date for the report'),
+    }),
     execute: async (report) => {
       return {
         type: 'report',

apps/start/src/components/chat/chat-message.tsx

@@ -1,6 +1,7 @@
 import { Markdown } from '@/components/markdown';
 import { cn } from '@/utils/cn';
-import { zChartInputAI } from '@openpanel/validation';
+import { zReport } from '@openpanel/validation';
+import { z } from 'zod';
 import type { UIMessage } from 'ai';
 import { Loader2Icon, UserIcon } from 'lucide-react';
 import { Fragment, memo } from 'react';
@@ -77,7 +78,10 @@ export const ChatMessage = memo(
                 const { result } = p.toolInvocation;
 
                 if (result.type === 'report') {
-                  const report = zChartInputAI.safeParse(result.report);
+                  const report = zReport.extend({
+                    startDate: z.string(),
+                    endDate: z.string(),
+                  }).safeParse(result.report);
                   if (report.success) {
                     return (
                       <Fragment key={key}>

apps/start/src/components/chat/chat-report.tsx

@@ -1,6 +1,6 @@
 import { pushModal } from '@/modals';
 import type {
-  IChartInputAi,
+  IReport,
   IChartRange,
   IChartType,
   IInterval,
@@ -16,7 +16,7 @@ import { Button } from '../ui/button';
 export function ChatReport({
   lazy,
   ...props
-}: { report: IChartInputAi; lazy: boolean }) {
+}: { report: IReport & { startDate: string; endDate: string }; lazy: boolean }) {
   const [chartType, setChartType] = useState<IChartType>(
     props.report.chartType,
   );

apps/start/src/components/overview/overview-top-events.tsx

@@ -1,7 +1,7 @@
 import { useEventQueryFilters } from '@/hooks/use-event-query-filters';
 import { useMemo, useState } from 'react';
 
-import type { IChartInput } from '@openpanel/validation';
+import type { IReportInput } from '@openpanel/validation';
 
 import { useTRPC } from '@/integrations/trpc/react';
 import { useQuery } from '@tanstack/react-query';
@@ -74,7 +74,7 @@ export default function OverviewTopEvents({
     },
   });
 
-  const report: IChartInput = useMemo(
+  const report: IReportInput = useMemo(
     () => ({
       limit: 1000,
       projectId,
@@ -96,9 +96,7 @@ export default function OverviewTopEvents({
         },
       ],
       chartType: 'bar' as const,
-      lineType: 'monotone' as const,
       interval,
-      name: widget.title,
       range,
       previous,
       metric: 'sum' as const,

apps/start/src/components/overview/overview-top-geo.tsx

@@ -11,6 +11,7 @@ import { useQuery } from '@tanstack/react-query';
 import { ChevronRightIcon } from 'lucide-react';
 import { ReportChart } from '../report-chart';
 import { SerieIcon } from '../report-chart/common/serie-icon';
+import { ReportChartShortcut } from '../report-chart/shortcut';
 import { Widget, WidgetBody } from '../widget';
 import { OVERVIEW_COLUMNS_NAME } from './overview-constants';
 import OverviewDetailsButton from './overview-details-button';
@@ -210,8 +211,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
           <div className="title">Map</div>
         </WidgetHead>
         <WidgetBody>
-          <ReportChart
+          <ReportChartShortcut
-            report={{
+            {...{
               projectId,
               startDate,
               endDate,
@@ -234,7 +235,6 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
               interval: interval,
               range: range,
               previous: previous,
-              metric: 'sum',
             }}
           />
         </WidgetBody>

apps/start/src/components/profiles/profile-charts.tsx

@@ -2,7 +2,7 @@ import { ReportChart } from '@/components/report-chart';
 import { Widget, WidgetBody } from '@/components/widget';
 import { memo } from 'react';
 
-import type { IChartProps } from '@openpanel/validation';
+import type { IReport } from '@openpanel/validation';
 import { WidgetHead } from '../overview/overview-widget';
 
 type Props = {
@@ -12,7 +12,7 @@ type Props = {
 
 export const ProfileCharts = memo(
   ({ profileId, projectId }: Props) => {
-    const pageViewsChart: IChartProps = {
+    const pageViewsChart: IReport = {
       projectId,
       chartType: 'linear',
       series: [
@@ -46,7 +46,7 @@ export const ProfileCharts = memo(
       metric: 'sum',
     };
 
-    const eventsChart: IChartProps = {
+    const eventsChart: IReport = {
       projectId,
       chartType: 'linear',
       series: [

apps/start/src/components/report-chart/context.tsx

@@ -2,11 +2,7 @@ import isEqual from 'lodash.isequal';
 import type { LucideIcon } from 'lucide-react';
 import { createContext, useContext, useEffect, useState } from 'react';
 
-import type {
+import type { IChartSerie, IReportInput } from '@openpanel/validation';
-  IChartInput,
-  IChartProps,
-  IChartSerie,
-} from '@openpanel/validation';
 
 export type ReportChartContextType = {
   options: Partial<{
@@ -27,7 +23,7 @@ export type ReportChartContextType = {
       onClick: () => void;
     }[];
   }>;
-  report: IChartInput & { id?: string };
+  report: IReportInput & { id?: string };
   isLazyLoading: boolean;
   isEditMode: boolean;
   shareId?: string;
@@ -39,7 +35,7 @@ type ReportChartContextProviderProps = ReportChartContextType & {
 };
 
 export type ReportChartProps = Partial<ReportChartContextType> & {
-  report: IChartInput;
+  report: IReportInput & { id?: string };
   lazy?: boolean;
 };
 

apps/start/src/components/report-chart/funnel/chart.tsx

@@ -131,34 +131,36 @@ export function Tables({
       series: reportSeries,
       breakdowns: reportBreakdowns,
       previous,
-      funnelWindow,
+      options,
-      funnelGroup,
     },
   } = useReportChartContext();
 
+  const funnelOptions = options?.type === 'funnel' ? options : undefined;
+  const funnelWindow = funnelOptions?.funnelWindow;
+  const funnelGroup = funnelOptions?.funnelGroup;
+
   const handleInspectStep = (step: (typeof steps)[0], stepIndex: number) => {
     if (!projectId || !step.event.id) return;
 
     // For funnels, we need to pass the step index so the modal can query
     // users who completed at least that step in the funnel sequence
-    pushModal('ViewChartUsers', {
+      pushModal('ViewChartUsers', {
-      type: 'funnel',
+        type: 'funnel',
-      report: {
+        report: {
-        projectId,
+          projectId,
-        series: reportSeries,
+          series: reportSeries,
-        breakdowns: reportBreakdowns || [],
+          breakdowns: reportBreakdowns || [],
-        interval: interval || 'day',
+          interval: interval || 'day',
-        startDate,
+          startDate,
-        endDate,
+          endDate,
-        range,
+          range,
-        previous,
+          previous,
-        chartType: 'funnel',
+          chartType: 'funnel',
-        metric: 'sum',
+          metric: 'sum',
-        funnelWindow,
+          options: funnelOptions,
-        funnelGroup,
+        },
-      },
+        stepIndex, // Pass the step index for funnel queries
-      stepIndex, // Pass the step index for funnel queries
+      });
-    });
   };
   return (
     <div className={cn('col @container divide-y divide-border card')}>

apps/start/src/components/report-chart/funnel/index.tsx

@@ -3,7 +3,7 @@ import type { RouterOutputs } from '@/trpc/client';
 import { useQuery } from '@tanstack/react-query';
 
 import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
-import type { IChartInput } from '@openpanel/validation';
+import type { IReportInput } from '@openpanel/validation';
 
 import { AspectContainer } from '../aspect-container';
 import { ReportChartEmpty } from '../common/empty';
@@ -19,8 +19,7 @@ export function ReportFunnelChart() {
       series,
       range,
       projectId,
-      funnelWindow,
+      options,
-      funnelGroup,
       startDate,
       endDate,
       previous,
@@ -32,23 +31,22 @@ export function ReportFunnelChart() {
   } = useReportChartContext();
   const { range: overviewRange, startDate: overviewStartDate, endDate: overviewEndDate, interval: overviewInterval } = useOverviewOptions();
 
+  const funnelOptions = options?.type === 'funnel' ? options : undefined;
+
   const trpc = useTRPC();
-  const input: IChartInput = {
+  const input: IReportInput = {
     series,
     range: overviewRange ?? range,
     projectId,
     interval: overviewInterval ?? interval ?? 'day',
     chartType: 'funnel',
     breakdowns,
-    funnelWindow,
-    funnelGroup,
     previous,
     metric: 'sum',
     startDate: overviewStartDate ?? startDate,
     endDate: overviewEndDate ?? endDate,
     limit: 20,
-    shareId,
+    options: funnelOptions,
-    reportId: id,
   };
   const res = useQuery(
     trpc.chart.funnel.queryOptions(input, {

apps/start/src/components/report-chart/retention/index.tsx

@@ -17,20 +17,29 @@ export function ReportRetentionChart() {
       series,
       range,
       projectId,
+      options,
       startDate,
       endDate,
-      criteria,
       interval,
     },
     isLazyLoading,
     shareId,
   } = useReportChartContext();
-  const { range: overviewRange, startDate: overviewStartDate, endDate: overviewEndDate, interval: overviewInterval } = useOverviewOptions();
+  const {
+    range: overviewRange,
+    startDate: overviewStartDate,
+    endDate: overviewEndDate,
+    interval: overviewInterval,
+  } = useOverviewOptions();
   const eventSeries = series.filter((item) => item.type === 'event');
   const firstEvent = (eventSeries[0]?.filters?.[0]?.value ?? []).map(String);
   const secondEvent = (eventSeries[1]?.filters?.[0]?.value ?? []).map(String);
   const isEnabled =
     firstEvent.length > 0 && secondEvent.length > 0 && !isLazyLoading;
+
+  const retentionOptions = options?.type === 'retention' ? options : undefined;
+  const criteria = retentionOptions?.criteria ?? 'on_or_after';
+
   const trpc = useTRPC();
   const res = useQuery(
     trpc.chart.cohort.queryOptions(

apps/start/src/components/report-chart/sankey/index.tsx

@@ -1,7 +1,7 @@
 import { useTRPC } from '@/integrations/trpc/react';
 import { useQuery } from '@tanstack/react-query';
 
-import type { IChartInput } from '@openpanel/validation';
+import type { IReportInput } from '@openpanel/validation';
 
 import { AspectContainer } from '../aspect-container';
 import { ReportChartEmpty } from '../common/empty';
@@ -28,7 +28,7 @@ export function ReportSankeyChart() {
     return <Empty />;
   }
 
-  const input: IChartInput = {
+  const input: IReportInput = {
     series,
     range,
     projectId,

apps/start/src/components/report-chart/shortcut.tsx

@@ -26,7 +26,6 @@ export const ReportChartShortcut = ({
   return (
     <ReportChart
       report={{
-        name: 'Shortcut',
         projectId,
         range,
         breakdowns: breakdowns ?? [],

apps/start/src/components/report/report-item.tsx

@@ -172,15 +172,13 @@ export function ReportItem({
         )}
       >
         <ReportChart
-          report={
+          report={{
-            {
+            ...report,
-              ...report,
+            range: range ?? report.range,
-              range: range ?? report.range,
+            startDate: startDate ?? null,
-              startDate: startDate ?? null,
+            endDate: endDate ?? null,
-              endDate: endDate ?? null,
+            interval: interval ?? report.interval,
-              interval: interval ?? report.interval,
+          }}
-            } as any
-          }
         />
       </div>
     </div>
@@ -242,7 +240,6 @@ export function ReportItemReadOnly({
         )}
       >
         <ReportChart
-          type="inputs"
           report={{
             ...report,
             range: range ?? report.range,

apps/start/src/components/report/reportSlice.ts

@@ -12,29 +12,28 @@ import type {
   IChartBreakdown,
   IChartEventItem,
   IChartLineType,
-  IChartProps,
   IChartRange,
   IChartType,
   IInterval,
+  IReport,
   IReportOptions,
   UnionOmit,
   zCriteria,
 } from '@openpanel/validation';
 import type { z } from 'zod';
 
-type InitialState = IChartProps & {
+type InitialState = IReport & {
+  id?: string;
   dirty: boolean;
   ready: boolean;
   startDate: string | null;
   endDate: string | null;
-  options?: IReportOptions;
 };
 
 // First approach: define the initial state using that type
 const initialState: InitialState = {
   ready: false,
   dirty: false,
-  // TODO: remove this
   projectId: '',
   name: '',
   chartType: 'linear',
@@ -50,9 +49,6 @@ const initialState: InitialState = {
   unit: undefined,
   metric: 'sum',
   limit: 500,
-  criteria: 'on_or_after',
-  funnelGroup: undefined,
-  funnelWindow: undefined,
   options: undefined,
 };
 
@@ -75,7 +71,7 @@ export const reportSlice = createSlice({
         ready: true,
       };
     },
-    setReport(state, action: PayloadAction<IChartProps>) {
+    setReport(state, action: PayloadAction<IReport>) {
       return {
         ...state,
         ...action.payload,
@@ -265,7 +261,14 @@ export const reportSlice = createSlice({
 
     changeCriteria(state, action: PayloadAction<z.infer<typeof zCriteria>>) {
       state.dirty = true;
-      state.criteria = action.payload;
+      if (!state.options || state.options.type !== 'retention') {
+        state.options = {
+          type: 'retention',
+          criteria: action.payload,
+        };
+      } else {
+        state.options.criteria = action.payload;
+      }
     },
 
     changeUnit(state, action: PayloadAction<string | undefined>) {
@@ -275,12 +278,28 @@ export const reportSlice = createSlice({
 
     changeFunnelGroup(state, action: PayloadAction<string | undefined>) {
       state.dirty = true;
-      state.funnelGroup = action.payload || undefined;
+      if (!state.options || state.options.type !== 'funnel') {
+        state.options = {
+          type: 'funnel',
+          funnelGroup: action.payload,
+          funnelWindow: undefined,
+        };
+      } else {
+        state.options.funnelGroup = action.payload;
+      }
     },
 
     changeFunnelWindow(state, action: PayloadAction<number | undefined>) {
       state.dirty = true;
-      state.funnelWindow = action.payload || undefined;
+      if (!state.options || state.options.type !== 'funnel') {
+        state.options = {
+          type: 'funnel',
+          funnelGroup: undefined,
+          funnelWindow: action.payload,
+        };
+      } else {
+        state.options.funnelWindow = action.payload;
+      }
     },
     changeOptions(state, action: PayloadAction<IReportOptions | undefined>) {
       state.dirty = true;

apps/start/src/components/report/sidebar/ReportSeries.tsx

@@ -332,14 +332,13 @@ export function ReportSeries() {
                 }}
                 placeholder="Select event"
                 items={eventNames}
-                className="flex-1"
               />
               {showFormula && (
                 <Button
                   type="button"
                   variant="outline"
                   icon={PiIcon}
-                  className="flex-1 justify-start text-left"
+                  className="flex-1 justify-start text-left px-4"
                   onClick={() => {
                     dispatch(
                       addSerie({
@@ -349,7 +348,6 @@ export function ReportSeries() {
                       }),
                     );
                   }}
-                  className="px-4"
                 >
                   Add Formula
                   <PlusIcon className="size-4 ml-auto text-muted-foreground" />

apps/start/src/components/report/sidebar/ReportSettings.tsx

@@ -23,11 +23,15 @@ import {
 export function ReportSettings() {
   const chartType = useSelector((state) => state.report.chartType);
   const previous = useSelector((state) => state.report.previous);
-  const criteria = useSelector((state) => state.report.criteria);
   const unit = useSelector((state) => state.report.unit);
-  const funnelGroup = useSelector((state) => state.report.funnelGroup);
-  const funnelWindow = useSelector((state) => state.report.funnelWindow);
   const options = useSelector((state) => state.report.options);
+  
+  const retentionOptions = options?.type === 'retention' ? options : undefined;
+  const criteria = retentionOptions?.criteria ?? 'on_or_after';
+  
+  const funnelOptions = options?.type === 'funnel' ? options : undefined;
+  const funnelGroup = funnelOptions?.funnelGroup;
+  const funnelWindow = funnelOptions?.funnelWindow;
 
   const dispatch = useDispatch();
   const { projectId } = useAppParams();

apps/start/src/modals/overview-chart-details.tsx

@@ -1,12 +1,12 @@
 import { ReportChart } from '@/components/report-chart';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
-import type { IChartProps } from '@openpanel/validation';
+import type { IReport } from '@openpanel/validation';
 
 import { ModalContent, ModalHeader } from './Modal/Container';
 
 type Props = {
-  chart: IChartProps;
+  chart: IReport;
 };
 
 const OverviewChartDetails = (props: Props) => {

apps/start/src/modals/save-report.tsx

@@ -10,7 +10,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-import type { IChartProps } from '@openpanel/validation';
+import type { IReport } from '@openpanel/validation';
 
 import { Input } from '@/components/ui/input';
 import { useTRPC } from '@/integrations/trpc/react';
@@ -21,7 +21,7 @@ import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
 type SaveReportProps = {
-  report: IChartProps;
+  report: IReport;
   disableRedirect?: boolean;
 };
 

apps/start/src/modals/view-chart-users.tsx

@@ -13,7 +13,7 @@ import { useTRPC } from '@/integrations/trpc/react';
 import type { IChartData } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { getProfileName } from '@/utils/getters';
-import type { IChartInput } from '@openpanel/validation';
+import type { IReportInput } from '@openpanel/validation';
 import { useQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useEffect, useMemo, useState } from 'react';
@@ -152,7 +152,7 @@ function ProfileList({ profiles }: { profiles: any[] }) {
 // Chart-specific props and component
 interface ChartUsersViewProps {
   chartData: IChartData;
-  report: IChartInput;
+  report: IReportInput;
   date: string;
 }
 
@@ -279,7 +279,7 @@ function ChartUsersView({ chartData, report, date }: ChartUsersViewProps) {
 
 // Funnel-specific props and component
 interface FunnelUsersViewProps {
-  report: IChartInput;
+  report: IReportInput;
   stepIndex: number;
 }
 
@@ -297,8 +297,14 @@ function FunnelUsersView({ report, stepIndex }: FunnelUsersViewProps) {
         series: report.series,
         stepIndex: stepIndex,
         showDropoffs: showDropoffs,
-        funnelWindow: report.funnelWindow,
+        funnelWindow:
-        funnelGroup: report.funnelGroup,
+          report.options?.type === 'funnel'
+            ? report.options.funnelWindow
+            : undefined,
+        funnelGroup:
+          report.options?.type === 'funnel'
+            ? report.options.funnelGroup
+            : undefined,
         breakdowns: report.breakdowns,
       },
       {
@@ -371,12 +377,12 @@ type ViewChartUsersProps =
   | {
       type: 'chart';
       chartData: IChartData;
-      report: IChartInput;
+      report: IReportInput;
       date: string;
     }
   | {
       type: 'funnel';
-      report: IChartInput;
+      report: IReportInput;
       stepIndex: number;
     };
 

packages/db/code-migrations/9-migrate-options.ts

@@ -0,0 +1,88 @@
+import type { IReportOptions } from '@openpanel/validation';
+import { db } from '../index';
+import { printBoxMessage } from './helpers';
+
+export async function up() {
+  printBoxMessage('🔄 Migrating Legacy Fields to Options', []);
+
+  // Get all reports
+  const reports = await db.report.findMany({
+    select: {
+      id: true,
+      chartType: true,
+      funnelGroup: true,
+      funnelWindow: true,
+      criteria: true,
+      options: true,
+      name: true,
+    },
+  });
+
+  let migratedCount = 0;
+  let skippedCount = 0;
+
+  for (const report of reports) {
+    const currentOptions = report.options as IReportOptions | null | undefined;
+    
+    // Skip if options already exists and is valid
+    if (currentOptions && typeof currentOptions === 'object' && 'type' in currentOptions) {
+      skippedCount++;
+      continue;
+    }
+
+    let newOptions: IReportOptions | null = null;
+
+    // Migrate based on chart type
+    if (report.chartType === 'funnel') {
+      // Only create options if we have legacy fields to migrate
+      if (report.funnelGroup || report.funnelWindow !== null) {
+        newOptions = {
+          type: 'funnel',
+          funnelGroup: report.funnelGroup ?? undefined,
+          funnelWindow: report.funnelWindow ?? undefined,
+        };
+      }
+    } else if (report.chartType === 'retention') {
+      // Only create options if we have criteria to migrate
+      if (report.criteria) {
+        newOptions = {
+          type: 'retention',
+          criteria: report.criteria as 'on_or_after' | 'on' | undefined,
+        };
+      }
+    } else if (report.chartType === 'sankey') {
+      // Sankey should already have options, but if not, skip
+      skippedCount++;
+      continue;
+    }
+
+    // Only update if we have new options to set
+    if (newOptions) {
+      console.log(
+        `Migrating report ${report.name} (${report.id}) - chartType: ${report.chartType}`,
+      );
+      
+      await db.report.update({
+        where: { id: report.id },
+        data: {
+          options: newOptions,
+          // Set legacy fields to null after migration
+          funnelGroup: null,
+          funnelWindow: null,
+          criteria: report.chartType === 'retention' ? null : report.criteria,
+        },
+      });
+
+      migratedCount++;
+    } else {
+      skippedCount++;
+    }
+  }
+
+  printBoxMessage('✅ Migration Complete', [
+    `Migrated: ${migratedCount} reports`,
+    `Skipped: ${skippedCount} reports (already migrated or no legacy fields)`,
+  ]);
+}
+
+

packages/db/src/engine/fetch.ts

@@ -53,9 +53,6 @@ export async function fetch(plan: Plan): Promise<ConcreteSeries[]> {
       previous: plan.input.previous ?? false,
       limit: plan.input.limit,
       offset: plan.input.offset,
-      criteria: plan.input.criteria,
-      funnelGroup: plan.input.funnelGroup,
-      funnelWindow: plan.input.funnelWindow,
     };
 
     // Execute query

packages/db/src/engine/index.ts

@@ -4,7 +4,7 @@ import { alphabetIds } from '@openpanel/constants';
 import type {
   FinalChart,
   IChartEventItem,
-  IChartInput,
+  IReportInput,
 } from '@openpanel/validation';
 import { chQuery } from '../clickhouse/client';
 import {
@@ -26,7 +26,7 @@ import type { ConcreteSeries } from './types';
  * Chart Engine - Main entry point
  * Executes the pipeline: normalize -> plan -> fetch -> compute -> format
  */
-export async function executeChart(input: IChartInput): Promise<FinalChart> {
+export async function executeChart(input: IReportInput): Promise<FinalChart> {
   // Stage 1: Normalize input
   const normalized = await normalize(input);
 
@@ -83,7 +83,7 @@ export async function executeChart(input: IChartInput): Promise<FinalChart> {
  * Executes a simplified pipeline: normalize -> fetch aggregate -> format
  */
 export async function executeAggregateChart(
-  input: IChartInput,
+  input: IReportInput,
 ): Promise<FinalChart> {
   // Stage 1: Normalize input
   const normalized = await normalize(input);

packages/db/src/engine/normalize.ts

@@ -2,8 +2,8 @@ import { alphabetIds } from '@openpanel/constants';
 import type {
   IChartEvent,
   IChartEventItem,
-  IChartInput,
+  IReportInput,
-  IChartInputWithDates,
+  IReportInputWithDates,
 } from '@openpanel/validation';
 import { getChartStartEndDate } from '../services/chart.service';
 import { getSettingsForProject } from '../services/organization.service';
@@ -15,8 +15,8 @@ export type NormalizedInput = Awaited<ReturnType<typeof normalize>>;
  * Normalize a chart input into a clean structure with dates and normalized series
  */
 export async function normalize(
-  input: IChartInput,
+  input: IReportInput,
-): Promise<IChartInputWithDates & { series: SeriesDefinition[] }> {
+): Promise<IReportInputWithDates & { series: SeriesDefinition[] }> {
   const { timezone } = await getSettingsForProject(input.projectId);
   const { startDate, endDate } = getChartStartEndDate(
     {

packages/db/src/engine/types.ts

@@ -4,8 +4,8 @@ import type {
   IChartEventFilter,
   IChartEventItem,
   IChartFormula,
-  IChartInput,
+  IReportInput,
-  IChartInputWithDates,
+  IReportInputWithDates,
 } from '@openpanel/validation';
 
 /**
@@ -50,7 +50,7 @@ export type ConcreteSeries = {
 export type Plan = {
   concreteSeries: ConcreteSeries[];
   definitions: SeriesDefinition[];
-  input: IChartInputWithDates;
+  input: IReportInputWithDates;
   timezone: string;
 };
 

packages/db/src/services/chart.service.ts

@@ -3,7 +3,7 @@ import sqlstring from 'sqlstring';
 import { DateTime, stripLeadingAndTrailingSlashes } from '@openpanel/common';
 import type {
   IChartEventFilter,
-  IChartInput,
+  IReportInput,
   IChartRange,
   IGetChartDataInput,
 } from '@openpanel/validation';
@@ -973,7 +973,7 @@ export function getChartStartEndDate(
     startDate,
     endDate,
     range,
-  }: Pick<IChartInput, 'endDate' | 'startDate' | 'range'>,
+  }: Pick<IReportInput, 'endDate' | 'startDate' | 'range'>,
   timezone: string,
 ) {
   if (startDate && endDate) {

packages/db/src/services/conversion.service.ts

@@ -1,5 +1,5 @@
 import { NOT_SET_VALUE } from '@openpanel/constants';
-import type { IChartEvent, IChartInput } from '@openpanel/validation';
+import type { IChartEvent, IChartBreakdown, IReportInput } from '@openpanel/validation';
 import { omit } from 'ramda';
 import { TABLE_NAMES, ch } from '../clickhouse/client';
 import { clix } from '../clickhouse/query-builder';
@@ -16,21 +16,23 @@ export class ConversionService {
     projectId,
     startDate,
     endDate,
-    funnelGroup,
+    options,
-    funnelWindow = 24,
     series,
     breakdowns = [],
     limit,
     interval,
     timezone,
-  }: Omit<IChartInput, 'range' | 'previous' | 'metric' | 'chartType'> & {
+  }: Omit<IReportInput, 'range' | 'previous' | 'metric' | 'chartType'> & {
     timezone: string;
   }) {
+    const funnelOptions = options?.type === 'funnel' ? options : undefined;
+    const funnelGroup = funnelOptions?.funnelGroup;
+    const funnelWindow = funnelOptions?.funnelWindow ?? 24;
     const group = funnelGroup === 'profile_id' ? 'profile_id' : 'session_id';
     const breakdownColumns = breakdowns.map(
-      (b, index) => `${getSelectPropertyKey(b.name)} as b_${index}`,
+      (b: IChartBreakdown, index: number) => `${getSelectPropertyKey(b.name)} as b_${index}`,
     );
-    const breakdownGroupBy = breakdowns.map((b, index) => `b_${index}`);
+    const breakdownGroupBy = breakdowns.map((b: IChartBreakdown, index: number) => `b_${index}`);
 
     const events = onlyReportEvents(series);
 

packages/db/src/services/funnel.service.ts

@@ -2,7 +2,7 @@ import { ifNaN } from '@openpanel/common';
 import type {
   IChartEvent,
   IChartEventItem,
-  IChartInput,
+  IReportInput,
 } from '@openpanel/validation';
 import { last, reverse, uniq } from 'ramda';
 import sqlstring from 'sqlstring';
@@ -185,16 +185,19 @@ export class FunnelService {
     startDate,
     endDate,
     series,
-    funnelWindow = 24,
+    options,
-    funnelGroup,
     breakdowns = [],
     limit,
     timezone = 'UTC',
-  }: IChartInput & { timezone: string; events?: IChartEvent[] }) {
+  }: IReportInput & { timezone: string; events?: IChartEvent[] }) {
     if (!startDate || !endDate) {
       throw new Error('startDate and endDate are required');
     }
 
+    const funnelOptions = options?.type === 'funnel' ? options : undefined;
+    const funnelWindow = funnelOptions?.funnelWindow ?? 24;
+    const funnelGroup = funnelOptions?.funnelGroup;
+
     const eventSeries = onlyReportEvents(series);
 
     if (eventSeries.length === 0) {

packages/db/src/services/reports.service.ts

@@ -8,8 +8,8 @@ import type {
   IChartEventFilter,
   IChartEventItem,
   IChartLineType,
-  IChartProps,
   IChartRange,
+  IReport,
   IReportOptions,
 } from '@openpanel/validation';
 
@@ -65,23 +65,22 @@ export function transformReportEventItem(
 
 export function transformReport(
   report: DbReport & { layout?: ReportLayout | null },
-): IChartProps & {
+): IReport & {
   id: string;
   layout?: ReportLayout | null;
 } {
-  // Parse options from JSON field, fallback to legacy fields for backward compatibility
   const options = report.options as IReportOptions | null | undefined;
 
   return {
     id: report.id,
     projectId: report.projectId,
-    series:
+    name: report.name || 'Untitled',
-      (report.events as IChartEventItem[]).map(transformReportEventItem) ?? [],
-    breakdowns: report.breakdowns as IChartBreakdown[],
     chartType: report.chartType,
     lineType: (report.lineType as IChartLineType) ?? lineTypes.monotone,
     interval: report.interval,
-    name: report.name || 'Untitled',
+    series:
+      (report.events as IChartEventItem[]).map(transformReportEventItem) ?? [],
+    breakdowns: report.breakdowns as IChartBreakdown[],
     range:
       report.range in deprecated_timeRanges
         ? '30d'
@@ -90,15 +89,8 @@ export function transformReport(
     formula: report.formula ?? undefined,
     metric: report.metric ?? 'sum',
     unit: report.unit ?? undefined,
-    criteria: (report.criteria ?? 'on_or_after') as
-      | 'on_or_after'
-      | 'on'
-      | undefined,
     layout: report.layout ?? undefined,
     options: options ?? undefined,
-    // Depercated, just for frontend backward compatibility (will be removed)
-    funnelGroup: report.funnelGroup ?? undefined,
-    funnelWindow: report.funnelWindow ?? undefined,
   };
 }
 

packages/trpc/src/routers/chart.ts

@@ -27,7 +27,7 @@ import {
 } from '@openpanel/db';
 import {
   type IChartEvent,
-  zChartInput,
+  zReportInput,
   zChartSeries,
   zCriteria,
   zRange,
@@ -335,7 +335,7 @@ export const chartRouter = createTRPCRouter({
 
   funnel: publicProcedure
     .input(
-      zChartInput.and(
+      zReportInput.and(
         z.object({
           shareId: z.string().optional(),
           reportId: z.string().optional(),
@@ -417,7 +417,7 @@ export const chartRouter = createTRPCRouter({
 
   conversion: publicProcedure
     .input(
-      zChartInput.and(
+      zReportInput.and(
         z.object({
           shareId: z.string().optional(),
           reportId: z.string().optional(),
@@ -511,7 +511,7 @@ export const chartRouter = createTRPCRouter({
       };
     }),
 
-  sankey: protectedProcedure.input(zChartInput).query(async ({ input }) => {
+  sankey: protectedProcedure.input(zReportInput).query(async ({ input }) => {
     const { timezone } = await getSettingsForProject(input.projectId);
     const currentPeriod = getChartStartEndDate(input, timezone);
 
@@ -546,7 +546,7 @@ export const chartRouter = createTRPCRouter({
   chart: publicProcedure
     // .use(cacher)
     .input(
-      zChartInput.and(
+      zReportInput.and(
         z.object({
           shareId: z.string().optional(),
           reportId: z.string().optional(),
@@ -606,7 +606,7 @@ export const chartRouter = createTRPCRouter({
 
   aggregate: publicProcedure
     .input(
-      zChartInput.and(
+      zReportInput.and(
         z.object({
           shareId: z.string().optional(),
           reportId: z.string().optional(),
@@ -721,7 +721,8 @@ export const chartRouter = createTRPCRouter({
         }
 
         projectId = report.projectId;
-        criteria = report.criteria ?? criteria;
+        const retentionOptions = report.options?.type === 'retention' ? report.options : undefined;
+        criteria = retentionOptions?.criteria ?? criteria;
         dateRange = input.range ?? report.range;
         startDate = input.startDate ?? report.startDate;
         endDate = input.endDate ?? report.endDate;

packages/trpc/src/routers/report.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
 import { db, getReportById, getReportsByDashboardId } from '@openpanel/db';
-import { zReportInput } from '@openpanel/validation';
+import { zReport } from '@openpanel/validation';
 
 import { getProjectAccess } from '../access';
 import { TRPCAccessError } from '../errors';
@@ -21,7 +21,7 @@ export const reportRouter = createTRPCRouter({
   create: protectedProcedure
     .input(
       z.object({
-        report: zReportInput.omit({ projectId: true }),
+        report: zReport.omit({ projectId: true }),
         dashboardId: z.string(),
       }),
     )
@@ -55,10 +55,7 @@ export const reportRouter = createTRPCRouter({
           formula: report.formula,
           previous: report.previous ?? false,
           unit: report.unit,
-          criteria: report.criteria,
           metric: report.metric === 'count' ? 'sum' : report.metric,
-          funnelGroup: report.funnelGroup,
-          funnelWindow: report.funnelWindow,
           options: report.options,
         },
       });
@@ -67,7 +64,7 @@ export const reportRouter = createTRPCRouter({
     .input(
       z.object({
         reportId: z.string(),
-        report: zReportInput.omit({ projectId: true }),
+        report: zReport.omit({ projectId: true }),
       }),
     )
     .mutation(async ({ input: { report, reportId }, ctx }) => {
@@ -101,10 +98,7 @@ export const reportRouter = createTRPCRouter({
           formula: report.formula,
           previous: report.previous ?? false,
           unit: report.unit,
-          criteria: report.criteria,
           metric: report.metric === 'count' ? 'sum' : report.metric,
-          funnelGroup: report.funnelGroup,
-          funnelWindow: report.funnelWindow,
           options: report.options,
         },
       });
@@ -173,10 +167,7 @@ export const reportRouter = createTRPCRouter({
           formula: report.formula,
           previous: report.previous,
           unit: report.unit,
-          criteria: report.criteria,
           metric: report.metric,
-          funnelGroup: report.funnelGroup,
-          funnelWindow: report.funnelWindow,
           options: report.options,
         },
       });

packages/validation/src/index.ts

@@ -135,7 +135,9 @@ export const zReportOptions = z.discriminatedUnion('type', [
 export type IReportOptions = z.infer<typeof zReportOptions>;
 export type ISankeyOptions = z.infer<typeof zSankeyOptions>;
 
-export const zChartInputBase = z.object({
+// Base input schema - for API calls, engine, chart queries
+export const zReportInput = z.object({
+  projectId: z.string().describe('The ID of the project this chart belongs to'),
   chartType: zChartType
     .default('linear')
     .describe('What type of chart should be displayed'),
@@ -153,6 +155,18 @@ export const zChartInputBase = z.object({
   range: zRange
     .default('30d')
     .describe('The time range for which data should be displayed'),
+  startDate: z
+    .string()
+    .nullish()
+    .describe(
+      'Custom start date for the data range (overrides range if provided)',
+    ),
+  endDate: z
+    .string()
+    .nullish()
+    .describe(
+      'Custom end date for the data range (overrides range if provided)',
+    ),
   previous: z
     .boolean()
     .default(false)
@@ -166,19 +180,6 @@ export const zChartInputBase = z.object({
     .describe(
       'The aggregation method for the metric (e.g., sum, count, average)',
     ),
-  projectId: z.string().describe('The ID of the project this chart belongs to'),
-  startDate: z
-    .string()
-    .nullish()
-    .describe(
-      'Custom start date for the data range (overrides range if provided)',
-    ),
-  endDate: z
-    .string()
-    .nullish()
-    .describe(
-      'Custom end date for the data range (overrides range if provided)',
-    ),
   limit: z
     .number()
     .optional()
@@ -187,27 +188,12 @@ export const zChartInputBase = z.object({
     .number()
     .optional()
     .describe('Skip how many series should be returned'),
-  criteria: zCriteria
+  options: zReportOptions
     .optional()
-    .describe('Filtering criteria for retention chart (e.g., on_or_after, on)'),
+    .describe('Chart-specific options (funnel, retention, sankey)'),
-  funnelGroup: z
+  // Optional display fields
-    .string()
+  name: z.string().optional().describe('The user-defined name for the report'),
-    .optional()
+  lineType: zLineType.optional().describe('The visual style of the line in the chart'),
-    .describe(
-      'Group identifier for funnel analysis, e.g. "profile_id" or "session_id"',
-    ),
-  funnelWindow: z
-    .number()
-    .optional()
-    .describe('Time window in hours for funnel analysis'),
-  options: zReportOptions.optional(),
-});
-
-export const zChartInput = zChartInputBase;
-
-export const zReportInput = zChartInputBase.extend({
-  name: z.string().describe('The user-defined name for the report'),
-  lineType: zLineType.describe('The visual style of the line in the chart'),
   unit: z
     .string()
     .optional()
@@ -216,17 +202,14 @@ export const zReportInput = zChartInputBase.extend({
     ),
 });
 
-export const zChartInputAI = zReportInput
+// Complete report schema - for saved reports
-  .omit({
+export const zReport = zReportInput.extend({
-    startDate: true,
+  name: z.string().default('Untitled').describe('The user-defined name for the report'),
-    endDate: true,
+  lineType: zLineType.default('monotone').describe('The visual style of the line in the chart'),
-    lineType: true,
+});
-    unit: true,
+
-  })
+// Alias for backward compatibility
-  .extend({
+export const zChartInput = zReportInput;
-    startDate: z.string().describe('The start date for the report'),
-    endDate: z.string().describe('The end date for the report'),
-  });
 
 export const zInviteUser = z.object({
   email: z.string().email(),

packages/validation/src/types.validation.ts

@@ -10,25 +10,28 @@ import type {
   zChartEventItem,
   zChartEventSegment,
   zChartFormula,
-  zChartInput,
-  zChartInputAI,
   zChartSeries,
   zChartType,
   zCriteria,
   zLineType,
   zMetric,
   zRange,
+  zReport,
   zReportInput,
   zTimeInterval,
 } from './index';
 
-export type IChartInput = z.infer<typeof zChartInput>;
+// For saved reports - complete report with required display fields
-export type IChartInputAi = z.infer<typeof zChartInputAI>;
+export type IReport = z.infer<typeof zReport>;
-export type IChartProps = z.infer<typeof zReportInput> & {
+
-  name: string;
+// For API/engine use - flexible input
-  lineType: IChartLineType;
+export type IReportInput = z.infer<typeof zReportInput>;
-  unit?: string;
+
-};
+// With resolved dates (engine internal)
+export interface IReportInputWithDates extends IReportInput {
+  startDate: string;
+  endDate: string;
+}
 export type IChartEvent = z.infer<typeof zChartEvent>;
 export type IChartFormula = z.infer<typeof zChartFormula>;
 export type IChartEventItem = z.infer<typeof zChartEventItem>;
@@ -47,16 +50,12 @@ export type IChartType = z.infer<typeof zChartType>;
 export type IChartMetric = z.infer<typeof zMetric>;
 export type IChartLineType = z.infer<typeof zLineType>;
 export type IChartRange = z.infer<typeof zRange>;
-export interface IChartInputWithDates extends IChartInput {
-  startDate: string;
-  endDate: string;
-}
 export type IGetChartDataInput = {
   event: IChartEvent;
   projectId: string;
   startDate: string;
   endDate: string;
-} & Omit<IChartInput, 'series' | 'name' | 'startDate' | 'endDate' | 'range'>;
+} & Omit<IReportInput, 'series' | 'startDate' | 'endDate' | 'range'>;
 export type ICriteria = z.infer<typeof zCriteria>;
 
 export type PreviousValue =