better handling dates in clickhouse

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,
     },