Merge branch 'dev' into bug/um-362-relational-funnels-query

components/input/RefreshButton.js

@@ -10,11 +10,7 @@ export function RefreshButton({ websiteId, isLoading }) {
 
   function handleClick() {
     if (!isLoading && dateRange) {
-      if (/^\d+/.test(dateRange.value)) {
-        setWebsiteDateRange(websiteId, dateRange.value);
-      } else {
-        setWebsiteDateRange(websiteId, dateRange);
-      }
+      setWebsiteDateRange(websiteId, dateRange);
     }
   }
 

components/input/WebsiteDateFilter.js

@@ -1,25 +1,13 @@
-import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import DateFilter from './DateFilter';
 import styles from './WebsiteDateFilter.module.css';
 
 export default function WebsiteDateFilter({ websiteId }) {
-  const { get } = useApi();
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { value, startDate, endDate } = dateRange;
 
   const handleChange = async value => {
-    if (value === 'all' && websiteId) {
-      const data = await get(`/websites/${websiteId}`);
-
-      if (data) {
-        const start = new Date(data.createdAt).getTime();
-        const end = Date.now();
-        setDateRange(`range:${start}:${end}`);
-      }
-    } else if (value !== 'all') {
-      setDateRange(value);
-    }
+    setDateRange(value);
   };
 
   return (

components/metrics/ActiveUsers.js

@@ -29,7 +29,7 @@ export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
   }
 
   return (
-    <StatusLight variant="success">
+    <StatusLight className={styles.container} variant="success">
       <div className={styles.text}>{formatMessage(messages.activeUsers, { x: count })}</div>
     </StatusLight>
   );

components/metrics/ActiveUsers.module.css

@@ -1,10 +1,14 @@
 .container {
   display: flex;
   align-items: center;
+  margin-left: 20px;
 }
 
 .text {
   display: flex;
+  white-space: nowrap;
+  font-size: var(--font-size-md);
+  font-weight: 400;
 }
 
 .value {

components/pages/event-data/EventDataTable.js

@@ -7,14 +7,6 @@ export function EventDataTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
-  function linkToView(row, cell) {
-    return (
-      <Link href={resolveUrl({ view: row.field, event: row.event })} shallow={true}>
-        {cell}
-      </Link>
-    );
-  }
-
   if (data.length === 0) {
     return <Empty />;
   }
@@ -22,10 +14,14 @@ export function EventDataTable({ data = [] }) {
   return (
     <GridTable data={data}>
       <GridColumn name="event" label={formatMessage(labels.event)}>
-        {row => linkToView(row, row.event)}
+        {row => (
+          <Link href={resolveUrl({ event: row.event })} shallow={true}>
+            {row.event}
+          </Link>
+        )}
       </GridColumn>
       <GridColumn name="field" label={formatMessage(labels.field)}>
-        {row => linkToView(row, row.field)}
+        {row => row.field}
       </GridColumn>
       <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
         {({ total }) => total.toLocaleString()}

components/pages/event-data/EventDataValueTable.js

@@ -5,14 +5,14 @@ import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
 import Empty from 'components/common/Empty';
 
-export function EventDataTable({ data = [], field, event }) {
+export function EventDataValueTable({ data = [], event }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
   const Title = () => {
     return (
       <>
-        <Link href={resolveUrl({ view: undefined })}>
+        <Link href={resolveUrl({ event: undefined })}>
           <Button>
             <Icon rotate={180}>
               <Icons.ArrowRight />
@@ -20,9 +20,7 @@ export function EventDataTable({ data = [], field, event }) {
             <Text>{formatMessage(labels.back)}</Text>
           </Button>
         </Link>
-        <Text>
-          {event} - {field}
-        </Text>
+        <Text>{event}</Text>
       </>
     );
   };
@@ -33,6 +31,7 @@ export function EventDataTable({ data = [], field, event }) {
       {data.length <= 0 && <Empty />}
       {data.length > 0 && (
         <GridTable data={data}>
+          <GridColumn name="field" label={formatMessage(labels.field)} />
           <GridColumn name="value" label={formatMessage(labels.value)} />
           <GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
             {({ total }) => total.toLocaleString()}
@@ -43,4 +42,4 @@ export function EventDataTable({ data = [], field, event }) {
   );
 }
 
-export default EventDataTable;
+export default EventDataValueTable;

components/pages/realtime/RealtimePage.js

@@ -94,7 +94,7 @@ export function RealtimePage({ websiteId }) {
       <WebsiteHeader websiteId={websiteId} />
       <RealtimeHeader websiteId={websiteId} data={currentData} />
       <div className={styles.chart}>
-        <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
+        <RealtimeChart data={realtimeData} unit="minute" />
       </div>
       <GridRow>
         <GridColumn xs={12} sm={12} md={12} lg={4} xl={4}>

components/pages/websites/WebsiteChart.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import PageviewsChart from 'components/metrics/PageviewsChart';
 import { useApi, useDateRange, useTimezone, usePageQuery } from 'hooks';
-import { getDateArray, getDateLength } from 'lib/date';
+import { getDateArray } from 'lib/date';
 
 export function WebsiteChart({ websiteId }) {
   const [dateRange] = useDateRange(websiteId);
@@ -43,17 +43,9 @@ export function WebsiteChart({ websiteId }) {
       };
     }
     return { pageviews: [], sessions: [] };
-  }, [data, startDate, endDate, unit, modified]);
+  }, [data, startDate, endDate, unit]);
 
-  return (
-    <PageviewsChart
-      websiteId={websiteId}
-      data={chartData}
-      unit={unit}
-      records={getDateLength(startDate, endDate, unit)}
-      loading={isLoading}
-    />
-  );
+  return <PageviewsChart websiteId={websiteId} data={chartData} unit={unit} loading={isLoading} />;
 }
 
 export default WebsiteChart;

components/pages/websites/WebsiteEventData.js

@@ -5,20 +5,18 @@ import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetric
 import { useDateRange, useApi, usePageQuery } from 'hooks';
 import styles from './WebsiteEventData.module.css';
 
-function useFields(websiteId, field, event) {
+function useData(websiteId, event) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
   const { data, error, isLoading } = useQuery(
-    ['event-data:fields', { websiteId, startDate, endDate, field }],
+    ['event-data:events', { websiteId, startDate, endDate, event }],
     () =>
-      get('/event-data/fields', {
+      get('/event-data/events', {
         websiteId,
         startAt: +startDate,
         endAt: +endDate,
-        field,
         event,
-        withEventNames: true,
       }),
     { enabled: !!(websiteId && startDate && endDate) },
   );
@@ -28,15 +26,15 @@ function useFields(websiteId, field, event) {
 
 export default function WebsiteEventData({ websiteId }) {
   const {
-    query: { view, event },
+    query: { event },
   } = usePageQuery();
-  const { data } = useFields(websiteId, view, event);
+  const { data } = useData(websiteId, event);
 
   return (
     <Flexbox className={styles.container} direction="column" gap={20}>
       <EventDataMetricsBar websiteId={websiteId} />
-      {!view && <EventDataTable data={data} />}
-      {view && <EventDataValueTable field={view} event={event} data={data} />}
+      {!event && <EventDataTable data={data} />}
+      {event && <EventDataValueTable event={event} data={data} />}
     </Flexbox>
   );
 }

components/pages/websites/WebsiteHeader.js

@@ -42,9 +42,9 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
       <Column className={styles.title} variant="two">
         <Favicon domain={domain} />
         <Text>{name}</Text>
+        <ActiveUsers websiteId={websiteId} />
       </Column>
       <Column className={styles.actions} variant="two">
-        <ActiveUsers websiteId={websiteId} />
         {showLinks && (
           <Flexbox alignItems="center">
             {links.map(({ label, icon, path }) => {