Filtering via FilterBar.

src/app/(main)/websites/[websiteId]/WebsiteChart.tsx

@@ -53,7 +53,7 @@ export function WebsiteChart({
         <PageviewsChart
           key={value}
           data={chartData}
-          minDate={value === 'all' ? undefined : startDate}
+          minDate={startDate}
           maxDate={endDate}
           unit={unit}
         />

src/components/common/FilterEditForm.tsx

@@ -1,6 +1,6 @@
 import { useState, Key } from 'react';
 import { Grid, Row, Column, Label, List, ListItem, Button, Heading } from '@umami/react-zen';
-import { useFilters, useMessages } from '@/components/hooks';
+import { useDateRange, useFilters, useMessages } from '@/components/hooks';
 import { FilterRecord } from '@/components/common/FilterRecord';
 import { Empty } from '@/components/common/Empty';
 
@@ -11,10 +11,13 @@ export interface FilterEditFormProps {
   onClose?: () => void;
 }
 
-export function FilterEditForm({ data = [], onChange, onClose }: FilterEditFormProps) {
+export function FilterEditForm({ websiteId, data = [], onChange, onClose }: FilterEditFormProps) {
   const { formatMessage, labels, messages } = useMessages();
   const [filters, setFilters] = useState(data);
   const { fields } = useFilters();
+  const {
+    dateRange: { startDate, endDate },
+  } = useDateRange(websiteId);
 
   const updateFilter = (name: string, props: { [key: string]: any }) => {
     setFilters(filters =>
@@ -66,6 +69,10 @@ export function FilterEditForm({ data = [], onChange, onClose }: FilterEditFormP
           return (
             <FilterRecord
               key={filter.name}
+              websiteId={websiteId}
+              type={filter.name}
+              startDate={startDate}
+              endDate={endDate}
               {...filter}
               onSelect={handleSelect}
               onRemove={handleRemove}

src/components/common/FilterRecord.tsx

@@ -1,8 +1,14 @@
-import { Grid, Column, TextField, Label, ListItem, Select, Icon, Button } from '@umami/react-zen';
-import { useFilters } from '@/components/hooks';
+import { useState } from 'react';
+import { Grid, Column, TextField, Label, Select, Icon, Button, ListItem } from '@umami/react-zen';
+import { useFilters, useFormat, useWebsiteValuesQuery } from '@/components/hooks';
 import { Close } from '@/components/icons';
+import { isSearchOperator } from '@/lib/params';
 
 export interface FilterRecordProps {
+  websiteId: string;
+  type: string;
+  startDate: Date;
+  endDate: Date;
   name: string;
   operator: string;
   value: string;
@@ -12,6 +18,10 @@ export interface FilterRecordProps {
 }
 
 export function FilterRecord({
+  websiteId,
+  type,
+  startDate,
+  endDate,
   name,
   operator,
   value,
@@ -20,16 +30,40 @@ export function FilterRecord({
   onChange,
 }: FilterRecordProps) {
   const { fields, operators } = useFilters();
+  const [selected, setSelected] = useState(value);
+  const [search, setSearch] = useState('');
+  const { formatValue } = useFormat();
+  const { data, isLoading } = useWebsiteValuesQuery({
+    websiteId,
+    type,
+    search,
+    startDate,
+    endDate,
+  });
+  const isSearch = isSearchOperator(operator);
+
+  const handleSearch = value => {
+    setSearch(value);
+  };
+
+  const handleSelectOperator = value => {
+    onSelect?.(name, value);
+  };
+
+  const handleSelectValue = value => {
+    setSelected(value);
+    onChange?.(name, value);
+  };
 
   return (
-    <>
+    <Column>
       <Label>{fields.find(f => f.name === name)?.label}</Label>
       <Grid columns="1fr auto" gap>
         <Grid columns="200px 1fr" gap>
           <Select
             items={operators.filter(({ type }) => type === 'string')}
             value={operator}
-            onSelectionChange={value => onSelect?.(name, value)}
+            onSelectionChange={handleSelectOperator}
           >
             {({ name, label }: any) => {
               return (
@@ -39,7 +73,28 @@ export function FilterRecord({
               );
             }}
           </Select>
-          <TextField value={value} onChange={e => onChange?.(name, e.target.value)} />
+          {isSearch && (
+            <TextField value={selected} defaultValue={selected} onChange={handleSelectValue} />
+          )}
+          {!isSearch && (
+            <Select
+              items={data}
+              value={selected}
+              onChange={handleSelectValue}
+              searchValue={search}
+              onSearch={handleSearch}
+              isLoading={isLoading}
+              allowSearch
+            >
+              {data?.map(({ value }) => {
+                return (
+                  <ListItem key={value} id={value}>
+                    {formatValue(value, type)}
+                  </ListItem>
+                );
+              })}
+            </Select>
+          )}
         </Grid>
         <Column justifyContent="flex-end">
           <Button variant="quiet" onPress={() => onRemove?.(name)}>
@@ -49,6 +104,6 @@ export function FilterRecord({
           </Button>
         </Column>
       </Grid>
-    </>
+    </Column>
   );
 }

src/components/hooks/queries/useLoginQuery.ts

@@ -3,10 +3,7 @@ import { useApi } from '../useApi';
 
 const selector = (state: { user: any }) => state.user;
 
-export function useLoginQuery(): {
-  user: any;
-  setUser: (data: any) => void;
-} {
+export function useLoginQuery() {
   const { post, useQuery } = useApi();
   const user = useApp(selector);
 

src/components/hooks/useDateRange.ts

@@ -27,11 +27,12 @@ export function useDateRange(websiteId?: string) {
 
           const startDate = new Date(mindate);
           const endDate = new Date(maxdate);
+          const unit = getMinimumUnit(startDate, endDate);
 
           dateRange = {
             startDate,
             endDate,
-            unit: getMinimumUnit(startDate, endDate),
+            unit,
             value,
           };
         } else {

src/components/input/DateFilter.tsx

@@ -9,17 +9,14 @@ export interface DateFilterProps {
   value: string;
   startDate: Date;
   endDate: Date;
-  offset?: number;
-  className?: string;
   onChange?: (value: string) => void;
   showAllTime?: boolean;
-  alignment?: 'start' | 'center' | 'end';
 }
 
 export function DateFilter({
+  value,
   startDate,
   endDate,
-  value,
   onChange,
   showAllTime = false,
 }: DateFilterProps) {

src/components/input/FilterBar.tsx

@@ -24,18 +24,19 @@ export function FilterBar() {
   }
 
   return (
-    <Row gap alignItems="center" justifyContent="space-between" paddingY="3">
-      <Row alignItems="center" gap="3" wrap="wrap">
+    <Row gap alignItems="center" justifyContent="space-between" padding backgroundColor="3">
+      <Row alignItems="center" gap="2" wrap="wrap">
         {Object.keys(filters).map(key => {
           const filter = filters[key];
           const { name, label, operator, value } = filter;
-          const paramValue = isSearchOperator(operator) ? value : formatValue(value, key);
+          const paramValue = isSearchOperator(operator) ? value : formatValue(value, name);
 
           return (
             <Row
               key={name}
               border
-              padding
+              padding="2"
+              color
               backgroundColor
               borderRadius
               alignItems="center"
@@ -61,7 +62,7 @@ export function FilterBar() {
         })}
       </Row>
       <TooltipTrigger delay={0}>
-        <Button variant="quiet" onPress={handleResetFilter}>
+        <Button variant="wrapper" onPress={handleResetFilter} style={{ alignSelf: 'flex-start' }}>
           <Icon>
             <Close />
           </Icon>

src/components/input/WebsiteDateFilter.tsx

@@ -78,7 +78,6 @@ export function WebsiteDateFilter({
         value={value}
         startDate={startDate}
         endDate={endDate}
-        offset={offset}
         onChange={handleChange}
         showAllTime={showAllTime}
       />

src/components/metrics/EventsChart.tsx

@@ -13,7 +13,7 @@ export interface EventsChartProps extends BarChartProps {
 
 export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
   const {
-    dateRange: { startDate, endDate, unit, value },
+    dateRange: { startDate, endDate, unit },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
   const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
@@ -59,7 +59,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
       {chartData && (
         <BarChart
           chartData={chartData}
-          minDate={value === 'all' ? undefined : startDate}
+          minDate={startDate}
           maxDate={endDate}
           unit={unit}
           stacked={true}