Update field select forms. Created new hooks.

src/app/(main)/reports/[reportId]/FieldAddForm.module.css

@@ -1,38 +0,0 @@
-.menu {
-  width: 360px;
-  max-height: 300px;
-  overflow: auto;
-}
-
-.item {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  border-radius: var(--border-radius);
-}
-
-.item:hover {
-  background: var(--base75);
-}
-
-.type {
-  color: var(--font-color300);
-}
-
-.selected {
-  font-weight: bold;
-}
-
-.popup {
-  display: flex;
-}
-
-.filter {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.dropdown {
-  min-width: 60px;
-}

src/app/(main)/reports/[reportId]/FieldAddForm.tsx

@@ -4,8 +4,7 @@ import { REPORT_PARAMETERS } from 'lib/constants';
 import PopupForm from './PopupForm';
 import FieldSelectForm from './FieldSelectForm';
 import FieldAggregateForm from './FieldAggregateForm';
-import FieldFilterForm from './FieldFilterForm';
+import FieldFilterEditForm from './FieldFilterEditForm';
-import styles from './FieldAddForm.module.css';
 
 export function FieldAddForm({
   fields = [],
@@ -38,13 +37,13 @@ export function FieldAddForm({
   };
 
   return createPortal(
-    <PopupForm className={styles.popup}>
+    <PopupForm>
       {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
       {selected && group === REPORT_PARAMETERS.fields && (
         <FieldAggregateForm {...selected} onSelect={handleSave} />
       )}
       {selected && group === REPORT_PARAMETERS.filters && (
-        <FieldFilterForm {...selected} onSelect={handleSave} />
+        <FieldFilterEditForm {...selected} onChange={handleSave} />
       )}
     </PopupForm>,
     document.body,

src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css

@@ -2,7 +2,7 @@
   display: flex;
   max-width: 300px;
   max-height: 210px;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .popup > div {

src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx

@@ -10,54 +10,67 @@ import {
   Menu,
   Popup,
   PopupTrigger,
+  Loading,
 } from 'react-basics';
-import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
+import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks';
 import { safeDecodeURIComponent } from 'next-basics';
 import { OPERATORS } from 'lib/constants';
-import styles from './FieldFilterForm.module.css';
+import styles from './FieldFilterEditForm.module.css';
 
 export interface FieldFilterFormProps {
+  websiteId?: string;
   name: string;
   label?: string;
   type: string;
-  values?: any[];
+  defaultValue?: string;
-  onSelect?: (key: any) => void;
+  onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void;
   allowFilterSelect?: boolean;
+  isNew?: boolean;
 }
 
-export default function FieldFilterForm({
+export default function FieldFilterEditForm({
+  websiteId,
   name,
   label,
   type,
-  values,
+  defaultValue,
-  onSelect,
+  onChange,
   allowFilterSelect = true,
+  isNew,
 }: FieldFilterFormProps) {
   const { formatMessage, labels } = useMessages();
   const [filter, setFilter] = useState('eq');
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState(defaultValue ?? '');
   const { getFilters } = useFilters();
   const { formatValue } = useFormat();
   const { locale } = useLocale();
   const filters = getFilters(type);
+  const { data: values = [], isLoading } = useWebsiteValues(websiteId, name);
 
   const formattedValues = useMemo(() => {
+    if (!values) {
+      return {};
+    }
     const formatted = {};
     const format = (val: string) => {
       formatted[val] = formatValue(val, name);
       return formatted[val];
     };
-    if (values.length !== 1) {
+
+    if (values?.length !== 1) {
       const { compare } = new Intl.Collator(locale, { numeric: true });
       values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
     } else {
       format(values[0]);
     }
+
     return formatted;
   }, [formatValue, locale, name, values]);
 
   const filteredValues = useMemo(() => {
-    return value ? values.filter(n => n.includes(value)) : values;
+    return value
+      ? values.filter(n => formattedValues[n].toLowerCase().includes(value.toLowerCase()))
+      : values;
   }, [value, formattedValues]);
 
   const renderFilterValue = value => {
@@ -65,7 +78,7 @@ export default function FieldFilterForm({
   };
 
   const handleAdd = () => {
-    onSelect({ name, type, filter, value });
+    onChange({ name, type, filter, value });
   };
 
   const handleMenuSelect = value => {
@@ -74,7 +87,7 @@ export default function FieldFilterForm({
 
   const showMenu =
     [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) &&
-    !(filteredValues.length === 1 && filteredValues[0] === value);
+    !(filteredValues?.length === 1 && filteredValues[0] === formattedValues[value]);
 
   return (
     <Form>
@@ -97,25 +110,44 @@ export default function FieldFilterForm({
             <TextField
               className={styles.text}
               value={decodeURIComponent(value)}
+              placeholder={formatMessage(labels.enter)}
               onChange={e => setValue(e.target.value)}
             />
             {showMenu && (
-              <Popup className={styles.popup} alignment="end">
+              <Popup className={styles.popup} alignment="start">
-                {filteredValues.length > 0 && (
+                <ResultsMenu
-                  <Menu variant="popup" onSelect={handleMenuSelect}>
+                  values={filteredValues}
-                    {filteredValues.map(value => {
+                  type={name}
-                      return <Item key={value}>{safeDecodeURIComponent(value)}</Item>;
+                  isLoading={isLoading}
-                    })}
+                  onSelect={handleMenuSelect}
-                  </Menu>
+                />
-                )}
               </Popup>
             )}
           </PopupTrigger>
         </Flexbox>
         <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
-          {formatMessage(labels.add)}
+          {isNew ? formatMessage(labels.add) : formatMessage(labels.update)}
         </Button>
       </FormRow>
     </Form>
   );
 }
+
+const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
+  const { formatValue } = useFormat();
+  if (isLoading) {
+    return <Loading icon="dots" position="center" />;
+  }
+
+  if (!values?.length) {
+    return null;
+  }
+
+  return (
+    <Menu variant="popup" onSelect={onSelect}>
+      {values?.map(value => {
+        return <Item key={value}>{safeDecodeURIComponent(formatValue(value, type))}</Item>;
+      })}
+    </Menu>
+  );
+};

src/app/(main)/reports/[reportId]/FieldParameters.tsx

@@ -1,4 +1,4 @@
-import { useMessages } from 'components/hooks';
+import { useFields, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import { useContext } from 'react';
 import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
@@ -7,24 +7,12 @@ import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';
 import { ReportContext } from '../[reportId]/Report';
 
-export function InsightsFieldParameters() {
+export function FieldParameters() {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
   const { parameters } = report || {};
   const { fields } = parameters || {};
-
+  const { fields: fieldOptions } = useFields();
-  const fieldOptions = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
-    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
-    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'query', type: 'string', label: formatMessage(labels.query) },
-    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
-    { name: 'os', type: 'string', label: formatMessage(labels.os) },
-    { name: 'device', type: 'string', label: formatMessage(labels.device) },
-    { name: 'country', type: 'string', label: formatMessage(labels.country) },
-    { name: 'region', type: 'string', label: formatMessage(labels.region) },
-    { name: 'city', type: 'string', label: formatMessage(labels.city) },
-  ];
 
   const handleAdd = (value: { name: any }) => {
     if (!fields.find(({ name }) => name === value.name)) {
@@ -72,4 +60,4 @@ export function InsightsFieldParameters() {
   );
 }
 
-export default InsightsFieldParameters;
+export default FieldParameters;

src/app/(main)/reports/[reportId]/FilterParameters.module.css

@@ -34,3 +34,7 @@
   border-radius: 5px;
   white-space: nowrap;
 }
+
+.edit {
+  margin-top: 20px;
+}

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -0,0 +1,113 @@
+import { useContext } from 'react';
+import { safeDecodeURIComponent } from 'next-basics';
+import { useMessages, useFormat, useFilters, useFields } from 'components/hooks';
+import Icons from 'components/icons';
+import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
+import FilterSelectForm from '../[reportId]/FilterSelectForm';
+import ParameterList from '../[reportId]/ParameterList';
+import PopupForm from '../[reportId]/PopupForm';
+import { ReportContext } from './Report';
+import { OPERATORS } from 'lib/constants';
+import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm';
+import styles from './FilterParameters.module.css';
+
+export function FilterParameters() {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { filterLabels } = useFilters();
+  const { parameters } = report || {};
+  const { websiteId, filters } = parameters || {};
+  const { fields } = useFields();
+
+  const handleAdd = (value: { name: any }) => {
+    if (!filters.find(({ name }) => name === value.name)) {
+      updateReport({ parameters: { filters: filters.concat(value) } });
+    }
+  };
+
+  const handleRemove = (name: string) => {
+    updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
+  };
+
+  const handleChange = filter => {
+    updateReport({
+      parameters: {
+        filters: filters.map(f => {
+          if (filter.name === f.name) {
+            return filter;
+          }
+          return f;
+        }),
+      },
+    });
+  };
+
+  const AddButton = () => {
+    return (
+      <PopupTrigger>
+        <Button size="sm">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Button>
+        <Popup position="bottom" alignment="start">
+          <PopupForm>
+            <FilterSelectForm
+              websiteId={websiteId}
+              fields={fields.filter(({ name }) => !filters.find(f => f.name === name))}
+              onChange={handleAdd}
+            />
+          </PopupForm>
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
+      <ParameterList>
+        {filters.map(({ name, filter, value }: { name: string; filter: string; value: string }) => {
+          const label = fields.find(f => f.name === name)?.label;
+          const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any);
+          return (
+            <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
+              <FilterParameter
+                name={name}
+                label={label}
+                filter={filterLabels[filter]}
+                value={isEquals ? formatValue(value, name) : value}
+                onChange={handleChange}
+              />
+            </ParameterList.Item>
+          );
+        })}
+      </ParameterList>
+    </FormRow>
+  );
+}
+
+const FilterParameter = ({ name, label, filter, value, type = 'string', onChange }) => {
+  return (
+    <PopupTrigger>
+      <div className={styles.item}>
+        <div className={styles.label}>{label}</div>
+        <div className={styles.filter}>{filter}</div>
+        <div className={styles.value}>{safeDecodeURIComponent(value)}</div>
+      </div>
+      <Popup className={styles.edit} alignment="start">
+        <PopupForm>
+          <FieldFilterEditForm
+            name={name}
+            label={label}
+            type={type}
+            defaultValue={value}
+            onChange={onChange}
+          />
+        </PopupForm>
+      </Popup>
+    </PopupTrigger>
+  );
+};
+
+export default FilterParameters;

src/app/(main)/reports/[reportId]/FilterSelectForm.tsx

@@ -1,59 +1,37 @@
 import { useState } from 'react';
-import { Loading } from 'react-basics';
-import { subDays } from 'date-fns';
 import FieldSelectForm from './FieldSelectForm';
-import FieldFilterForm from './FieldFilterForm';
+import FieldFilterEditForm from './FieldFilterEditForm';
-import { useApi } from 'components/hooks';
-
-function useValues(websiteId: string, type: string) {
-  const now = Date.now();
-  const { get, useQuery } = useApi();
-  const { data, error, isLoading } = useQuery({
-    queryKey: ['websites:values', websiteId, type],
-    queryFn: () =>
-      get(`/websites/${websiteId}/values`, {
-        type,
-        startAt: +subDays(now, 90),
-        endAt: now,
-      }),
-    enabled: !!(websiteId && type),
-  });
-
-  return { data, error, isLoading };
-}
 
 export interface FilterSelectFormProps {
-  websiteId: string;
+  websiteId?: string;
   fields: any[];
-  onSelect?: (key: any) => void;
+  onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void;
   allowFilterSelect?: boolean;
 }
 
 export default function FilterSelectForm({
   websiteId,
   fields,
-  onSelect,
+  onChange,
   allowFilterSelect,
 }: FilterSelectFormProps) {
   const [field, setField] = useState<{ name: string; label: string; type: string }>();
-  const { data, isLoading } = useValues(websiteId, field?.name);
 
   if (!field) {
     return <FieldSelectForm fields={fields} onSelect={setField} showType={false} />;
   }
 
-  if (isLoading) {
+  const { name, label, type } = field;
-    return <Loading position="center" icon="dots" />;
-  }
 
   return (
-    <FieldFilterForm
+    <FieldFilterEditForm
-      name={field?.name}
+      websiteId={websiteId}
-      label={field?.label}
+      name={name}
-      type={field?.type}
+      label={label}
-      values={data}
+      type={type}
-      onSelect={onSelect}
+      onChange={onChange}
       allowFilterSelect={allowFilterSelect}
+      isNew={true}
     />
   );
 }

src/app/(main)/reports/[reportId]/ParameterList.tsx

@@ -20,9 +20,17 @@ export function ParameterList({ children }: ParameterListProps) {
   );
 }
 
-const Item = ({ children, onRemove }: { children?: ReactNode; onRemove?: () => void }) => {
+const Item = ({
+  children,
+  onClick,
+  onRemove,
+}: {
+  children?: ReactNode;
+  onClick?: () => void;
+  onRemove?: () => void;
+}) => {
   return (
-    <div className={styles.item}>
+    <div className={styles.item} onClick={onClick}>
       {children}
       <Icon onClick={onRemove}>
         <Icons.Close />

src/app/(main)/reports/event-data/EventDataParameters.tsx

@@ -60,10 +60,9 @@ export function EventDataParameters() {
     }
   };
 
-  const handleRemove = (group: string, index: number) => {
+  const handleRemove = (group: string) => {
     const data = [...parameterData[group]];
-    data.splice(index, 1);
+    updateReport({ parameters: { [group]: data.filter(({ name }) => name !== group) } });
-    updateReport({ parameters: { [group]: data } });
   };
 
   const AddButton = ({ group, onAdd }) => {
@@ -104,29 +103,28 @@ export function EventDataParameters() {
               label={label}
               action={<AddButton group={group} onAdd={handleAdd} />}
             >
-              <ParameterList
+              <ParameterList>
-                items={parameterData[group]}
+                {parameterData[group].map(({ name, value }) => {
-                onRemove={index => handleRemove(group, index)}
-              >
-                {({ name, value }) => {
                   return (
-                    <div className={styles.parameter}>
+                    <ParameterList.Item key={name} onRemove={() => handleRemove(group)}>
-                      {group === REPORT_PARAMETERS.fields && (
+                      <div className={styles.parameter}>
-                        <>
+                        {group === REPORT_PARAMETERS.fields && (
-                          <div>{name}</div>
+                          <>
-                          <div className={styles.op}>{value}</div>
+                            <div>{name}</div>
-                        </>
+                            <div className={styles.op}>{value}</div>
-                      )}
+                          </>
-                      {group === REPORT_PARAMETERS.filters && (
+                        )}
-                        <>
+                        {group === REPORT_PARAMETERS.filters && (
-                          <div>{name}</div>
+                          <>
-                          <div className={styles.op}>{value[0]}</div>
+                            <div>{name}</div>
-                          <div>{value[1]}</div>
+                            <div className={styles.op}>{value[0]}</div>
-                        </>
+                            <div>{value[1]}</div>
-                      )}
+                          </>
-                    </div>
+                        )}
+                      </div>
+                    </ParameterList.Item>
                   );
-                }}
+                })}
               </ParameterList>
             </FormRow>
           );

src/app/(main)/reports/funnel/FunnelParameters.tsx

@@ -38,11 +38,9 @@ export function FunnelParameters() {
     updateReport({ parameters: { urls: parameters.urls.concat(url) } });
   };
 
-  const handleRemoveUrl = (index: number, e: any) => {
+  const handleRemoveUrl = (url: string) => {
-    e.stopPropagation();
     const urls = [...parameters.urls];
-    urls.splice(index, 1);
+    updateReport({ parameters: { urls: urls.filter(n => n.url !== url) } });
-    updateReport({ parameters: { urls } });
   };
 
   const AddUrlButton = () => {
@@ -72,10 +70,11 @@ export function FunnelParameters() {
         </FormInput>
       </FormRow>
       <FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
-        <ParameterList
+        <ParameterList>
-          items={urls}
+          {urls.map(url => {
-          onRemove={(index: number, e: any) => handleRemoveUrl(index, e)}
+            return <ParameterList.Item key={url} onRemove={() => handleRemoveUrl(url)} />;
-        />
+          })}
+        </ParameterList>
       </FormRow>
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>

src/app/(main)/reports/insights/InsightsFilterParameters.tsx

@@ -1,88 +0,0 @@
-import { useMessages, useFormat, useFilters } from 'components/hooks';
-import Icons from 'components/icons';
-import { useContext } from 'react';
-import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
-import FilterSelectForm from '../[reportId]/FilterSelectForm';
-import ParameterList from '../[reportId]/ParameterList';
-import PopupForm from '../[reportId]/PopupForm';
-import { ReportContext } from '../[reportId]/Report';
-import styles from './InsightsFilterParameters.module.css';
-import { safeDecodeURIComponent } from 'next-basics';
-import { OPERATORS } from 'lib/constants';
-
-export function InsightsFilterParameters() {
-  const { report, updateReport } = useContext(ReportContext);
-  const { formatMessage, labels } = useMessages();
-  const { formatValue } = useFormat();
-  const { filterLabels } = useFilters();
-  const { parameters } = report || {};
-  const { websiteId, filters } = parameters || {};
-
-  const fieldOptions = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
-    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
-    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'query', type: 'string', label: formatMessage(labels.query) },
-    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
-    { name: 'os', type: 'string', label: formatMessage(labels.os) },
-    { name: 'device', type: 'string', label: formatMessage(labels.device) },
-    { name: 'country', type: 'string', label: formatMessage(labels.country) },
-    { name: 'region', type: 'string', label: formatMessage(labels.region) },
-    { name: 'city', type: 'string', label: formatMessage(labels.city) },
-  ];
-
-  const handleAdd = (value: { name: any }) => {
-    if (!filters.find(({ name }) => name === value.name)) {
-      updateReport({ parameters: { filters: filters.concat(value) } });
-    }
-  };
-
-  const handleRemove = (name: string) => {
-    updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
-  };
-
-  const AddButton = () => {
-    return (
-      <PopupTrigger>
-        <Button size="sm">
-          <Icon>
-            <Icons.Plus />
-          </Icon>
-        </Button>
-        <Popup position="bottom" alignment="start">
-          <PopupForm>
-            <FilterSelectForm
-              websiteId={websiteId}
-              fields={fieldOptions.filter(({ name }) => !filters.find(f => f.name === name))}
-              onSelect={handleAdd}
-            />
-          </PopupForm>
-        </Popup>
-      </PopupTrigger>
-    );
-  };
-
-  return (
-    <FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
-      <ParameterList>
-        {filters.map(({ name, filter, value }) => {
-          const label = fieldOptions.find(f => f.name === name)?.label;
-          const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter);
-          return (
-            <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
-              <div className={styles.item}>
-                <div className={styles.label}>{label}</div>
-                <div className={styles.filter}>{filterLabels[filter]}</div>
-                <div className={styles.value}>
-                  {safeDecodeURIComponent(isEquals ? formatValue(value, name) : value)}
-                </div>
-              </div>
-            </ParameterList.Item>
-          );
-        })}
-      </ParameterList>
-    </FormRow>
-  );
-}
-
-export default InsightsFilterParameters;

src/app/(main)/reports/insights/InsightsParameters.tsx

@@ -3,8 +3,8 @@ import { useContext } from 'react';
 import { Form, FormButtons, SubmitButton } from 'react-basics';
 import BaseParameters from '../[reportId]/BaseParameters';
 import { ReportContext } from '../[reportId]/Report';
-import InsightsFieldParameters from './InsightsFieldParameters';
+import FieldParameters from '../[reportId]/FieldParameters';
-import InsightsFilterParameters from './InsightsFilterParameters';
+import FilterParameters from '../[reportId]/FilterParameters';
 
 export function InsightsParameters() {
   const { report, runReport, isRunning } = useContext(ReportContext);
@@ -22,8 +22,8 @@ export function InsightsParameters() {
   return (
     <Form values={parameters} onSubmit={handleSubmit}>
       <BaseParameters allowWebsiteSelect={!id} />
-      {parametersSelected && <InsightsFieldParameters />}
+      {parametersSelected && <FieldParameters />}
-      {parametersSelected && <InsightsFilterParameters />}
+      {parametersSelected && <FilterParameters />}
       <FormButtons>
         <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}

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

@@ -1,7 +1,7 @@
 import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
 import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
 import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
-import { useMessages, useNavigation } from 'components/hooks';
+import { useFields, useMessages, useNavigation } from 'components/hooks';
 
 export function WebsiteFilterButton({
   websiteId,
@@ -12,17 +12,7 @@ export function WebsiteFilterButton({
 }) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl, router } = useNavigation();
-
+  const { fields } = useFields();
-  const fieldOptions = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
-    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
-    { name: 'os', type: 'string', label: formatMessage(labels.os) },
-    { name: 'device', type: 'string', label: formatMessage(labels.device) },
-    { name: 'country', type: 'string', label: formatMessage(labels.country) },
-    { name: 'region', type: 'string', label: formatMessage(labels.region) },
-    { name: 'city', type: 'string', label: formatMessage(labels.city) },
-  ];
 
   const handleAddFilter = ({ name, value }) => {
     router.push(renderUrl({ [name]: value }));
@@ -42,8 +32,8 @@ export function WebsiteFilterButton({
             <PopupForm>
               <FilterSelectForm
                 websiteId={websiteId}
-                items={fieldOptions}
+                fields={fields}
-                onSelect={value => {
+                onChange={value => {
                   handleAddFilter(value);
                   close();
                 }}

src/components/hooks/index.ts

@@ -16,10 +16,12 @@ export * from './queries/useWebsite';
 export * from './queries/useWebsites';
 export * from './queries/useWebsiteEvents';
 export * from './queries/useWebsiteMetrics';
+export * from './queries/useWebsiteValues';
 export * from './useCountryNames';
 export * from './useDateRange';
 export * from './useDocumentClick';
 export * from './useEscapeKey';
+export * from './useFields';
 export * from './useFilters';
 export * from './useForceUpdate';
 export * from './useFormat';

src/components/hooks/queries/useWebsiteValues.ts

@@ -0,0 +1,20 @@
+import { useApi } from 'components/hooks';
+import { subDays } from 'date-fns';
+
+export function useWebsiteValues(websiteId: string, type: string) {
+  const now = Date.now();
+  const { get, useQuery } = useApi();
+
+  return useQuery({
+    queryKey: ['websites:values', websiteId, type],
+    queryFn: () =>
+      get(`/websites/${websiteId}/values`, {
+        type,
+        startAt: +subDays(now, 90),
+        endAt: now,
+      }),
+    enabled: !!(websiteId && type),
+  });
+}
+
+export default useWebsiteValues;

src/components/hooks/useFields.ts

@@ -0,0 +1,22 @@
+import { useMessages } from './useMessages';
+
+export function useFields() {
+  const { formatMessage, labels } = useMessages();
+
+  const fields = [
+    { name: 'url', type: 'string', label: formatMessage(labels.url) },
+    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
+    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
+    { name: 'query', type: 'string', label: formatMessage(labels.query) },
+    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
+    { name: 'os', type: 'string', label: formatMessage(labels.os) },
+    { name: 'device', type: 'string', label: formatMessage(labels.device) },
+    { name: 'country', type: 'string', label: formatMessage(labels.country) },
+    { name: 'region', type: 'string', label: formatMessage(labels.region) },
+    { name: 'city', type: 'string', label: formatMessage(labels.city) },
+  ];
+
+  return { fields };
+}
+
+export default useFields;

src/components/messages.ts

@@ -148,6 +148,7 @@ export const labels = defineMessages({
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
   add: { id: 'label.add', defaultMessage: 'Add' },
+  update: { id: 'label.update', defaultMessage: 'Update' },
   window: { id: 'label.window', defaultMessage: 'Window' },
   runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
   field: { id: 'label.field', defaultMessage: 'Field' },