Update table components.

components/metrics/BrowsersTable.js

@@ -3,15 +3,15 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import { browserFilter } from 'lib/filters';
 
-export default function BrowsersTable({ websiteId, token, limit }) {
+export default function BrowsersTable({ websiteId, token, ...props }) {
   return (
     <MetricsTable
+      {...props}
       title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
       type="browser"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       token={token}
-      limit={limit}
       dataFilter={browserFilter}
     />
   );

components/metrics/CountriesTable.js

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
 
-export default function CountriesTable({ websiteId, token, limit, onDataLoad = () => {} }) {
+export default function CountriesTable({ websiteId, token, onDataLoad, ...props }) {
   const [locale] = useLocale();
   const countryNames = useCountryNames(locale);
 
@@ -15,13 +15,13 @@ export default function CountriesTable({ websiteId, token, limit, onDataLoad = (
 
   return (
     <MetricsTable
+      {...props}
       title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
       type="country"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       token={token}
-      limit={limit}
+      onDataLoad={data => onDataLoad?.(percentFilter(data))}
-      onDataLoad={data => onDataLoad(percentFilter(data))}
       renderLabel={renderLabel}
     />
   );

components/metrics/DataTable.js

@@ -11,10 +11,10 @@ export default function DataTable({
   title,
   metric,
   className,
-  limit,
   renderLabel,
   height = 400,
   animate = true,
+  virtualize = false,
 }) {
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
@@ -30,7 +30,7 @@ export default function DataTable({
         label={renderLabel ? renderLabel(row) : label}
         value={value}
         percent={percent}
-        animate={animate}
+        animate={animate && !virtualize}
         format={formatFunc}
         onClick={handleSetFormat}
       />
@@ -51,13 +51,13 @@ export default function DataTable({
       </div>
       <div className={styles.body}>
         {data?.length === 0 && <NoData />}
-        {limit
+        {virtualize && data.length > 0 ? (
-          ? data.map(row => getRow(row))
+          <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
-          : data.length > 0 && (
+            {Row}
-              <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
+          </FixedSizeList>
-                {Row}
+        ) : (
-              </FixedSizeList>
+          data.map(row => getRow(row))
-            )}
+        )}
       </div>
     </div>
   );

components/metrics/DevicesTable.js

@@ -4,15 +4,15 @@ import { deviceFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
 import { getDeviceMessage } from 'components/messages';
 
-export default function DevicesTable({ websiteId, token, limit }) {
+export default function DevicesTable({ websiteId, token, ...props }) {
   return (
     <MetricsTable
+      {...props}
       title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
       type="device"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       token={token}
-      limit={limit}
       dataFilter={deviceFilter}
       renderLabel={({ x }) => getDeviceMessage(x)}
     />

components/metrics/EventsTable.js

@@ -3,17 +3,16 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import Tag from 'components/common/Tag';
 
-export default function EventsTable({ websiteId, token, limit, onDataLoad }) {
+export default function EventsTable({ websiteId, token, ...props }) {
   return (
     <MetricsTable
+      {...props}
       title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
       type="event"
       metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
       websiteId={websiteId}
       token={token}
-      limit={limit}
       renderLabel={({ x }) => <Label value={x} />}
-      onDataLoad={onDataLoad}
     />
   );
 }

components/metrics/MetricsTable.js

@@ -24,9 +24,11 @@ export default function MetricsTable({
   dataFilter,
   filterOptions,
   limit,
+  virtualize,
   renderLabel,
   height,
-  onDataLoad = () => {},
+  onDataLoad,
+  ...props
 }) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;
@@ -70,14 +72,14 @@ export default function MetricsTable({
       {error && <ErrorMessage />}
       {data && !error && (
         <DataTable
+          {...props}
           title={title}
           data={filteredData}
           metric={metric}
           className={className}
           renderLabel={renderLabel}
-          limit={limit}
           height={height}
-          animate={limit > 0}
+          virtualize={virtualize}
         />
       )}
       <div className={styles.footer}>

components/metrics/PagesTable.js

@@ -10,7 +10,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import MetricsTable from './MetricsTable';
 import styles from './PagesTable.module.css';
 
-export default function PagesTable({ websiteId, token, websiteDomain, limit, showFilters }) {
+export default function PagesTable({ websiteId, token, websiteDomain, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const {
     resolve,
@@ -49,10 +49,10 @@ export default function PagesTable({ websiteId, token, websiteDomain, limit, sho
         metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
         websiteId={websiteId}
         token={token}
-        limit={limit}
         dataFilter={urlFilter}
         filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
         renderLabel={renderLink}
+        {...props}
       />
     </>
   );

components/metrics/ReferrersTable.js

@@ -6,7 +6,7 @@ import ButtonGroup from 'components/common/ButtonGroup';
 import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
 import ButtonLayout from '../layout/ButtonLayout';
 
-export default function ReferrersTable({ websiteId, websiteDomain, token, limit, showFilters }) {
+export default function ReferrersTable({ websiteId, websiteDomain, token, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
 
   const buttons = [
@@ -35,13 +35,13 @@ export default function ReferrersTable({ websiteId, websiteDomain, token, limit,
     <>
       {showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
       <MetricsTable
+        {...props}
         title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
         type="referrer"
         metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
         websiteId={websiteId}
         websiteDomain={websiteDomain}
         token={token}
-        limit={limit}
         dataFilter={refFilter}
         filterOptions={{
           domain: websiteDomain,

components/pages/RealtimeDashboard.js

@@ -1,19 +1,19 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { subMinutes, startOfMinute } from 'date-fns';
 import firstBy from 'thenby';
-import { percentFilter } from 'lib/filters';
 import Page from 'components/layout/Page';
 import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
-import RealtimeChart from '../metrics/RealtimeChart';
+import RealtimeChart from 'components/metrics/RealtimeChart';
-import RealtimeLog from '../metrics/RealtimeLog';
+import RealtimeLog from 'components/metrics/RealtimeLog';
-import styles from './RealtimeDashboard.module.css';
+import RealtimeHeader from 'components/metrics/RealtimeHeader';
-import RealtimeHeader from '../metrics/RealtimeHeader';
+import WorldMap from 'components/common/WorldMap';
+import DataTable from 'components/metrics/DataTable';
 import useFetch from 'hooks/useFetch';
-import WorldMap from '../common/WorldMap';
-import DataTable from '../metrics/DataTable';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
-import { FormattedMessage } from 'react-intl';
+import { percentFilter } from 'lib/filters';
+import styles from './RealtimeDashboard.module.css';
 
 const REALTIME_RANGE = 30;
 const REALTIME_INTERVAL = 3000;
@@ -162,7 +162,6 @@ export default function RealtimeDashboard() {
               metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
               data={referrers}
               height={400}
-              animate={false}
             />
           </GridColumn>
           <GridColumn xs={12} lg={8}>
@@ -177,7 +176,6 @@ export default function RealtimeDashboard() {
               data={countries}
               renderLabel={renderCountryName}
               height={500}
-              animate={false}
             />
           </GridColumn>
           <GridColumn xs={12} lg={8}>

components/pages/WebsiteDetails.js

@@ -164,14 +164,14 @@ export default function WebsiteDetails({ websiteId, token }) {
           </GridRow>
         </GridLayout>
       )}
-      {view && (
+      {view && chartLoaded && (
         <MenuLayout
           className={styles.view}
           menuClassName={styles.menu}
           contentClassName={styles.content}
           menu={menuOptions}
         >
-          <DetailsComponent {...tableProps} height={500} limit={false} showFilters={true} />
+          <DetailsComponent {...tableProps} height={500} limit={false} showFilters virtualize />
         </MenuLayout>
       )}
     </Page>

pages/api/website/[id]/metrics.js

@@ -55,7 +55,7 @@ export default async (req, res) => {
         getColumn(type),
         getTable(type),
         {
-          domain,
+          domain: type !== 'event' && domain,
           url: type !== 'url' && url,
         },
       );