better handling dates in clickhouse

apps/dashboard/src/app/(onboarding)/skip-onboarding.tsx

@@ -29,7 +29,7 @@ const SkipOnboarding = () => {
             text: 'Are you sure you want to skip onboarding? Since you do not have any projects, you will be logged out.',
             onConfirm() {
               auth.signOut();
-              router.replace(process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL);
+              router.replace(process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL!);
             },
           });
         }

apps/dashboard/src/app/providers.tsx

@@ -62,14 +62,14 @@ function AllProviders({ children }: { children: React.ReactNode }) {
       defaultTheme="light"
       disableTransitionOnChange
     >
-      {process.env.NEXT_PUBLIC_OP_CLIENT_ID && (
-        <OpenPanelComponent
-          clientId={process.env.NEXT_PUBLIC_OP_CLIENT_ID}
-          trackScreenViews
-          trackOutgoingLinks
-          trackAttributes
-        />
-      )}
+      <OpenPanelComponent
+        apiUrl="http://localhost:3333"
+        clientId={'75479ffd-645b-43d2-a33a-2111a6f5ee00'}
+        trackScreenViews
+        trackOutgoingLinks
+        trackAttributes
+      />
+
       <ReduxProvider store={storeRef.current}>
         <api.Provider client={trpcClient} queryClient={queryClient}>
           <QueryClientProvider client={queryClient}>

apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx

@@ -20,6 +20,8 @@ import type {
   IChartEventFilterValue,
 } from '@openpanel/validation';
 
+import { useOverviewOptions } from '../useOverviewOptions';
+
 export interface OverviewFiltersDrawerContentProps {
   projectId: string;
   nuqsOptions?: NuqsOptions;
@@ -33,10 +35,11 @@ export function OverviewFiltersDrawerContent({
   enableEventsFilter,
   mode,
 }: OverviewFiltersDrawerContentProps) {
+  const { interval, range } = useOverviewOptions();
   const [filters, setFilter] = useEventQueryFilters(nuqsOptions);
   const [event, setEvent] = useEventQueryNamesFilter(nuqsOptions);
-  const eventNames = useEventNames(projectId);
-  const eventProperties = useEventProperties(projectId);
+  const eventNames = useEventNames({ projectId, interval, range });
+  const eventProperties = useEventProperties({ projectId, interval, range });
   const profileProperties = useProfileProperties(projectId);
   const properties = mode === 'events' ? eventProperties : profileProperties;
 
@@ -113,11 +116,14 @@ export function FilterOptionEvent({
     operator: IChartEventFilterOperator
   ) => void;
 }) {
-  const values = useEventValues(
+  const { interval, range } = useOverviewOptions();
+  const values = useEventValues({
     projectId,
-    filter.name === 'path' ? 'screen_view' : 'session_start',
-    filter.name
-  );
+    event: filter.name === 'path' ? 'screen_view' : 'session_start',
+    property: filter.name,
+    interval,
+    range,
+  });
 
   return (
     <div className="flex items-center gap-2">

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

@@ -1,6 +1,6 @@
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
-import { useDispatch } from '@/redux';
+import { useDispatch, useSelector } from '@/redux';
 import { api } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { DatabaseIcon } from 'lucide-react';
@@ -18,11 +18,14 @@ export function EventPropertiesCombobox({
 }: EventPropertiesComboboxProps) {
   const dispatch = useDispatch();
   const { projectId } = useAppParams();
-
+  const range = useSelector((state) => state.report.range);
+  const interval = useSelector((state) => state.report.interval);
   const query = api.chart.properties.useQuery(
     {
       event: event.name,
       projectId,
+      range,
+      interval,
     },
     {
       enabled: !!event.name,

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

@@ -16,9 +16,14 @@ import type { ReportEventMoreProps } from './ReportEventMore';
 export function ReportBreakdowns() {
   const { projectId } = useAppParams();
   const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
+  const interval = useSelector((state) => state.report.interval);
+  const range = useSelector((state) => state.report.range);
+
   const dispatch = useDispatch();
   const propertiesQuery = api.chart.properties.useQuery({
     projectId,
+    range,
+    interval,
   });
   const propertiesCombobox = (propertiesQuery.data ?? []).map((item) => ({
     value: item,

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

@@ -29,13 +29,18 @@ import type { ReportEventMoreProps } from './ReportEventMore';
 export function ReportEvents() {
   const previous = useSelector((state) => state.report.previous);
   const selectedEvents = useSelector((state) => state.report.events);
-  const input = useSelector((state) => state.report);
+  const startDate = useSelector((state) => state.report.startDate);
+  const endDate = useSelector((state) => state.report.endDate);
+  const range = useSelector((state) => state.report.range);
+  const interval = useSelector((state) => state.report.interval);
   const dispatch = useDispatch();
   const { projectId } = useAppParams();
-  const eventNames = useEventNames(projectId, {
-    startDate: input.startDate,
-    endDate: input.endDate,
-    range: input.range,
+  const eventNames = useEventNames({
+    projectId,
+    startDate,
+    endDate,
+    range,
+    interval,
   });
 
   const dispatchChangeEvent = useDebounceFn((event: IChartEvent) => {

apps/dashboard/src/components/report/sidebar/filters/FilterItem.tsx

@@ -26,7 +26,9 @@ interface FilterProps {
 
 export function FilterItem({ filter, event }: FilterProps) {
   const { projectId } = useAppParams();
-  const { range, startDate, endDate } = useSelector((state) => state.report);
+  const { range, startDate, endDate, interval } = useSelector(
+    (state) => state.report
+  );
   const getLabel = useMappings();
   const dispatch = useDispatch();
   const potentialValues = api.chart.values.useQuery({
@@ -34,6 +36,7 @@ export function FilterItem({ filter, event }: FilterProps) {
     property: filter.name,
     projectId,
     range,
+    interval,
     startDate,
     endDate,
   });

apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx

@@ -15,7 +15,10 @@ interface FiltersComboboxProps {
 
 export function FiltersCombobox({ event }: FiltersComboboxProps) {
   const dispatch = useDispatch();
-  const { range, startDate, endDate } = useSelector((state) => state.report);
+  const interval = useSelector((state) => state.report.interval);
+  const range = useSelector((state) => state.report.range);
+  const startDate = useSelector((state) => state.report.startDate);
+  const endDate = useSelector((state) => state.report.endDate);
   const { projectId } = useAppParams();
 
   const query = api.chart.properties.useQuery(
@@ -23,6 +26,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
       event: event.name,
       projectId,
       range,
+      interval,
       startDate,
       endDate,
     },

apps/dashboard/src/hooks/useEventNames.ts

@@ -1,10 +1,8 @@
 import { api } from '@/trpc/client';
 
-export function useEventNames(projectId: string, options?: any) {
-  const query = api.chart.events.useQuery({
-    projectId: projectId,
-    ...(options ? options : {}),
-  });
-
+export function useEventNames(
+  params: Parameters<typeof api.chart.events.useQuery>[0]
+) {
+  const query = api.chart.events.useQuery(params);
   return query.data ?? [];
 }

apps/dashboard/src/hooks/useEventProperties.ts

@@ -1,10 +1,9 @@
 import { api } from '@/trpc/client';
 
-export function useEventProperties(projectId: string, event?: string) {
-  const query = api.chart.properties.useQuery({
-    projectId: projectId,
-    event,
-  });
+export function useEventProperties(
+  params: Parameters<typeof api.chart.properties.useQuery>[0]
+) {
+  const query = api.chart.properties.useQuery(params);
 
   return query.data ?? [];
 }

apps/dashboard/src/hooks/useEventValues.ts

@@ -1,15 +1,8 @@
 import { api } from '@/trpc/client';
 
 export function useEventValues(
-  projectId: string,
-  event: string,
-  property: string
+  params: Parameters<typeof api.chart.values.useQuery>[0]
 ) {
-  const query = api.chart.values.useQuery({
-    projectId: projectId,
-    event,
-    property,
-  });
-
+  const query = api.chart.values.useQuery(params);
   return query.data?.values ?? [];
 }