Add dashboard filter.

src/components/messages.js

@@ -140,6 +140,7 @@ export const labels = defineMessages({
   description: { id: 'label.description', defaultMessage: 'Description' },
   untitled: { id: 'label.untitled', defaultMessage: 'Untitled' },
   type: { id: 'label.type', defaultMessage: 'Type' },
+  filter: { id: 'label.filter', defaultMessage: 'Filter' },
   filters: { id: 'label.filters', defaultMessage: 'Filters' },
   breakdown: { id: 'label.breakdown', defaultMessage: 'Breakdown' },
   true: { id: 'label.true', defaultMessage: 'True' },

src/components/pages/reports/FieldFilterForm.js

@@ -3,7 +3,14 @@ import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
 import { useMessages, useFilters, useFormat } from 'components/hooks';
 import styles from './FieldFilterForm.module.css';
 
-export default function FieldFilterForm({ name, label, type, values, onSelect }) {
+export default function FieldFilterForm({
+  name,
+  label,
+  type,
+  values,
+  onSelect,
+  includeOnlyEquals,
+}) {
   const { formatMessage, labels } = useMessages();
   const [filter, setFilter] = useState('eq');
   const [value, setValue] = useState();
@@ -27,17 +34,19 @@ export default function FieldFilterForm({ name, label, type, values, onSelect })
     <Form>
       <FormRow label={label} className={styles.filter}>
         <Flexbox gap={10}>
-          <Dropdown
+          {!includeOnlyEquals && (
-            className={styles.dropdown}
+            <Dropdown
-            items={filters}
+              className={styles.dropdown}
-            value={filter}
+              items={filters}
-            renderValue={renderFilterValue}
+              value={filter}
-            onChange={setFilter}
+              renderValue={renderFilterValue}
-          >
+              onChange={setFilter}
-            {({ value, label }) => {
+            >
-              return <Item key={value}>{label}</Item>;
+              {({ value, label }) => {
-            }}
+                return <Item key={value}>{label}</Item>;
-          </Dropdown>
+              }}
+            </Dropdown>
+          )}
           <Dropdown
             className={styles.dropdown}
             menuProps={{ className: styles.menu }}
@@ -45,6 +54,9 @@ export default function FieldFilterForm({ name, label, type, values, onSelect })
             value={value}
             renderValue={renderValue}
             onChange={setValue}
+            style={{
+              minWidth: '250px',
+            }}
           >
             {value => {
               return <Item key={value}>{formatValue(value, name)}</Item>;

src/components/pages/reports/FilterSelectForm.js

@@ -18,7 +18,7 @@ function useValues(websiteId, type) {
   return { data, error, isLoading };
 }
 
-export default function FilterSelectForm({ websiteId, items, onSelect }) {
+export default function FilterSelectForm({ websiteId, items, onSelect, includeOnlyEquals }) {
   const [field, setField] = useState();
   const { data, isLoading } = useValues(websiteId, field?.name);
 
@@ -37,6 +37,7 @@ export default function FilterSelectForm({ websiteId, items, onSelect }) {
       type={field?.type}
       values={data}
       onSelect={onSelect}
+      includeOnlyEquals={includeOnlyEquals}
     />
   );
 }

src/components/pages/websites/WebsiteMetricsBar.js

@@ -1,20 +1,25 @@
 import classNames from 'classnames';
-import { Row, Column } from 'react-basics';
+import { useApi, useDateRange, useMessages, usePageQuery, useSticky } from 'components/hooks';
-import { formatShortTime } from 'lib/format';
-import MetricCard from 'components/metrics/MetricCard';
 import RefreshButton from 'components/input/RefreshButton';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
+import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
-import { useApi, useDateRange, usePageQuery, useMessages, useSticky } from 'components/hooks';
+import FilterSelectForm from 'components/pages/reports/FilterSelectForm';
+import PopupForm from 'components/pages/reports/PopupForm';
+import { formatShortTime } from 'lib/format';
+import { Button, Column, Icon, Icons, Popup, PopupTrigger, Row, TooltipPopup } from 'react-basics';
 import styles from './WebsiteMetricsBar.module.css';
 
 export function WebsiteMetricsBar({ websiteId, sticky }) {
   const { formatMessage, labels } = useMessages();
+
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;
   const { ref, isSticky } = useSticky({ enabled: sticky });
   const {
+    resolveUrl,
+    router,
     query: { url, referrer, title, os, browser, device, country, region, city },
   } = usePageQuery();
 
@@ -39,6 +44,17 @@ export function WebsiteMetricsBar({ websiteId, sticky }) {
       }),
   );
 
+  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 { pageviews, uniques, bounces, totaltime } = data || {};
   const num = Math.min(data && uniques.value, data && bounces.value);
   const diffs = data && {
@@ -48,6 +64,42 @@ export function WebsiteMetricsBar({ websiteId, sticky }) {
     totaltime: totaltime.value - totaltime.change,
   };
 
+  const handleAddFilter = ({ name, value }) => {
+    router.push(resolveUrl({ [name]: value }));
+  };
+
+  const WebsiteFilterButton = () => {
+    return (
+      <PopupTrigger>
+        <TooltipPopup label={formatMessage(labels.addFilter)} position="top">
+          <Button>
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            {formatMessage(labels.filter)}
+          </Button>
+        </TooltipPopup>
+        <Popup position="bottom" alignment="start" className={styles.popup}>
+          {close => {
+            return (
+              <PopupForm onClose={close}>
+                <FilterSelectForm
+                  websiteId={websiteId}
+                  items={fieldOptions}
+                  onSelect={value => {
+                    handleAddFilter(value);
+                    close();
+                  }}
+                  includeOnlyEquals={true}
+                />
+              </PopupForm>
+            );
+          }}
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
   return (
     <Row
       ref={ref}
@@ -110,6 +162,7 @@ export function WebsiteMetricsBar({ websiteId, sticky }) {
       </Column>
       <Column defaultSize={12} xl={4}>
         <div className={styles.actions}>
+          <WebsiteFilterButton />
           <WebsiteDateFilter websiteId={websiteId} />
           <RefreshButton websiteId={websiteId} />
         </div>

src/pages/api/websites/[id]/index.ts

@@ -23,6 +23,7 @@ const schema = {
     id: yup.string().uuid().required(),
   }),
 };
+
 export default async (
   req: NextApiRequestQueryBody<WebsiteRequestQuery, WebsiteRequestBody>,
   res: NextApiResponse<Website>,