first working cli importer

apps/dashboard/src/components/overview/useOverviewOptions.ts

@@ -1,6 +1,5 @@
-import { useEffect } from 'react';
+import { differenceInCalendarMonths } from 'date-fns';
 import {
-  parseAsBoolean,
   parseAsInteger,
   parseAsString,
   parseAsStringEnum,
@@ -18,10 +17,6 @@ import { mapKeys } from '@openpanel/validation';
 const nuqsOptions = { history: 'push' } as const;
 
 export function useOverviewOptions() {
-  const [previous, setPrevious] = useQueryState(
-    'compare',
-    parseAsBoolean.withDefault(true).withOptions(nuqsOptions)
-  );
   const [startDate, setStartDate] = useQueryState(
     'start',
     parseAsString.withOptions(nuqsOptions)
@@ -47,8 +42,15 @@ export function useOverviewOptions() {
   );
 
   return {
-    previous,
-    setPrevious,
+    // Skip previous for ranges over 6 months (for performance reasons)
+    previous: !(
+      range === 'yearToDate' ||
+      range === 'lastYear' ||
+      (range === 'custom' &&
+        startDate &&
+        endDate &&
+        differenceInCalendarMonths(startDate, endDate) > 6)
+    ),
     range,
     setRange: (value: IChartRange | null) => {
       if (value !== 'custom') {

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

@@ -28,9 +28,14 @@ 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 dispatch = useDispatch();
   const { projectId } = useAppParams();
-  const eventNames = useEventNames(projectId);
+  const eventNames = useEventNames(projectId, {
+    startDate: input.startDate,
+    endDate: input.endDate,
+    range: input.range,
+  });
 
   const dispatchChangeEvent = useDebounceFn((event: IChartEvent) => {
     dispatch(changeEvent(event));
@@ -54,7 +59,7 @@ export function ReportEvents() {
       <div className="flex flex-col gap-4">
         {selectedEvents.map((event) => {
           return (
-            <div key={event.id} className="bg-def-100 rounded-lg border">
+            <div key={event.id} className="rounded-lg border bg-def-100">
               <div className="flex items-center gap-2 p-2">
                 <ColorSquare>{event.id}</ColorSquare>
                 <Combobox

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

@@ -5,7 +5,7 @@ import { DropdownMenuComposed } from '@/components/ui/dropdown-menu';
 import { RenderDots } from '@/components/ui/RenderDots';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useMappings } from '@/hooks/useMappings';
-import { useDispatch } from '@/redux';
+import { useDispatch, useSelector } from '@/redux';
 import { api } from '@/trpc/client';
 import { SlidersHorizontal, Trash } from 'lucide-react';
 
@@ -26,12 +26,16 @@ interface FilterProps {
 
 export function FilterItem({ filter, event }: FilterProps) {
   const { projectId } = useAppParams();
+  const { range, startDate, endDate } = useSelector((state) => state.report);
   const getLabel = useMappings();
   const dispatch = useDispatch();
   const potentialValues = api.chart.values.useQuery({
     event: event.name,
     property: filter.name,
     projectId,
+    range,
+    startDate,
+    endDate,
   });
 
   const valuesCombobox =
@@ -90,7 +94,7 @@ export function FilterItem({ filter, event }: FilterProps) {
   return (
     <div
       key={filter.name}
-      className="shadow-def-200 px-4 py-2 shadow-[inset_6px_0_0] first:border-t"
+      className="px-4 py-2 shadow-[inset_6px_0_0] shadow-def-200 first:border-t"
     >
       <div className="mb-2 flex items-center gap-2">
         <ColorSquare className="bg-emerald-500">

apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.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 { FilterIcon } from 'lucide-react';
 
@@ -14,12 +14,16 @@ interface FiltersComboboxProps {
 
 export function FiltersCombobox({ event }: FiltersComboboxProps) {
   const dispatch = useDispatch();
+  const { range, startDate, endDate } = useSelector((state) => state.report);
   const { projectId } = useAppParams();
 
   const query = api.chart.properties.useQuery(
     {
       event: event.name,
       projectId,
+      range,
+      startDate,
+      endDate,
     },
     {
       enabled: !!event.name,