Update events chart when filter selected. Closes #494

components/metrics/EventsChart.js

@@ -12,7 +12,9 @@ import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants';
 export default function EventsChart({ websiteId, className, token }) {
   const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
   const [timezone] = useTimezone();
-  const { query } = usePageQuery();
+  const {
+    query: { url, eventType },
+  } = usePageQuery();
   const shareToken = useShareToken();
 
   const { data, loading } = useFetch(
@@ -23,12 +25,13 @@ export default function EventsChart({ websiteId, className, token }) {
         end_at: +endDate,
         unit,
         tz: timezone,
-        url: query.url,
+        url,
+        event_type: eventType,
         token,
       },
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified],
+    [modified, eventType],
   );
 
   const datasets = useMemo(() => {

components/metrics/EventsTable.js

@@ -4,16 +4,18 @@ import MetricsTable from './MetricsTable';
 import Tag from 'components/common/Tag';
 import DropDown from 'components/common/DropDown';
 import { eventTypeFilter } from 'lib/filters';
+import usePageQuery from 'hooks/usePageQuery';
 import styles from './EventsTable.module.css';
 
 const EVENT_FILTER_DEFAULT = {
-  value: 'EVENT_FILTER_DEFAULT',
+  value: 'all',
   label: <FormattedMessage id="label.all-events" defaultMessage="All events" />,
 };
 
 export default function EventsTable({ websiteId, ...props }) {
   const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value);
   const [eventTypes, setEventTypes] = useState([]);
+  const { resolve, router } = usePageQuery();
 
   const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))];
 
@@ -22,11 +24,16 @@ export default function EventsTable({ websiteId, ...props }) {
     props.onDataLoad?.(data);
   }
 
+  function handleChange(value) {
+    router.replace(resolve({ eventType: value === 'all' ? undefined : value }));
+    setEventType(value);
+  }
+
   return (
     <>
       {eventTypes?.length > 1 && (
         <div className={styles.filter}>
-          <DropDown value={eventType} options={dropDownOptions} onChange={setEventType} />
+          <DropDown value={eventType} options={dropDownOptions} onChange={handleChange} />
         </div>
       )}
       <MetricsTable