Fixed filter tags. Added clear all option.

components/messages.js

@@ -83,6 +83,7 @@ export const labels = defineMessages({
   filterRaw: { id: 'label.filter-raw', defaultMessage: 'Raw' },
   views: { id: 'label.views', defaultMessage: 'View' },
   none: { id: 'label.none', defaultMessage: 'None' },
+  clearAll: { id: 'label.clear-all', defaultMessage: 'Clear all' },
 });
 
 export const messages = defineMessages({

components/metrics/FilterTags.js

@@ -1,22 +1,29 @@
+import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { safeDecodeURI } from 'next-basics';
-import { Button, Icon, Icons } from 'react-basics';
+import { Button, Icon, Icons, Text } from 'react-basics';
+import { labels } from 'components/messages';
 import styles from './FilterTags.module.css';
 
 export default function FilterTags({ className, params, onClick }) {
+  const { formatMessage } = useIntl();
+
   if (Object.keys(params).filter(key => params[key]).length === 0) {
     return null;
   }
+
   return (
-    <div className={classNames(styles.filters, 'col-12', className)}>
+    <div className={classNames(styles.filters, className)}>
       {Object.keys(params).map(key => {
         if (!params[key]) {
           return null;
         }
         return (
           <div key={key} className={styles.tag}>
-            <Button onClick={() => onClick(key)} variant="action" iconRight>
-              {`${key}: ${safeDecodeURI(params[key])}`}
+            <Button onClick={() => onClick(key)} variant="primary" size="sm">
+              <Text>
+                <b>{`${key}`}</b> — {`${safeDecodeURI(params[key])}`}
+              </Text>
               <Icon>
                 <Icons.Close />
               </Icon>
@@ -24,6 +31,12 @@ export default function FilterTags({ className, params, onClick }) {
           </div>
         );
       })}
+      <Button size="sm" variant="quiet" onClick={() => onClick(null)}>
+        <Icon>
+          <Icons.Close />
+        </Icon>
+        <Text>{formatMessage(labels.clearAll)}</Text>
+      </Button>
     </div>
   );
 }

components/metrics/WebsiteChart.js

@@ -34,7 +34,7 @@ export default function WebsiteChart({
   const {
     router,
     resolve,
-    query: { url, referrer, os, browser, device, country },
+    query: { view, url, referrer, os, browser, device, country },
   } = usePageQuery();
   const { get, useQuery } = useApi();
 
@@ -67,8 +67,12 @@ export default function WebsiteChart({
   }, [data, startDate, endDate, unit]);
 
   function handleCloseFilter(param) {
+    if (param === null) {
+      router.push(`/websites/${websiteId}/?view=${view}`);
+    } else {
       router.push(resolve({ [param]: undefined }));
     }
+  }
 
   async function handleDateChange(value) {
     if (value === 'all') {
@@ -97,11 +101,11 @@ export default function WebsiteChart({
             </a>
           </Link>
         )}
+      </WebsiteHeader>
       <FilterTags
         params={{ url, referrer, os, browser, device, country }}
         onClick={handleCloseFilter}
       />
-      </WebsiteHeader>
       <StickyHeader stickyClassName={styles.sticky} enabled={stickyHeader}>
         <Row className={styles.header}>
           <Column xs={12} sm={12} md={12} defaultSize={10}>

components/pages/realtime/RealtimeDashboard.js

@@ -1,9 +1,9 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
+import { Row, Column } from 'react-basics';
 import { FormattedMessage } from 'react-intl';
 import { subMinutes, startOfMinute } from 'date-fns';
 import firstBy from 'thenby';
 import Page from 'components/layout/Page';
-import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
 import RealtimeChart from 'components/metrics/RealtimeChart';
 import RealtimeLog from 'components/metrics/RealtimeLog';
 import RealtimeHeader from 'components/metrics/RealtimeHeader';
@@ -129,29 +129,27 @@ export default function RealtimeDashboard() {
       <div className={styles.chart}>
         <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
       </div>
-      <GridLayout>
-        <GridRow>
-          <GridColumn xs={12} lg={4}>
+      <Row>
+        <Column xs={12} lg={4}>
           <RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
-          </GridColumn>
-          <GridColumn xs={12} lg={8}>
+        </Column>
+        <Column xs={12} lg={8}>
           <RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
-          </GridColumn>
-        </GridRow>
-        <GridRow>
-          <GridColumn xs={12} lg={4}>
+        </Column>
+      </Row>
+      <Row>
+        <Column xs={12} lg={4}>
           <DataTable
             title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
             metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
             data={countries}
             renderLabel={renderCountryName}
           />
-          </GridColumn>
-          <GridColumn xs={12} lg={8}>
+        </Column>
+        <Column xs={12} lg={8}>
           <WorldMap data={countries} />
-          </GridColumn>
-        </GridRow>
-      </GridLayout>
+        </Column>
+      </Row>
     </Page>
   );
 }