Events table.

components/metrics/EventsTable.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import styles from './EventsTable.module.css';
+
+export default function DevicesTable({
+  websiteId,
+  startDate,
+  endDate,
+  limit,
+  onExpand,
+  onDataLoad,
+}) {
+  return (
+    <MetricsTable
+      title="Events"
+      type="event"
+      metric="Actions"
+      websiteId={websiteId}
+      startDate={startDate}
+      endDate={endDate}
+      limit={limit}
+      renderLabel={({ w, x }) => (
+        <>
+          <span className={styles.type}>{w}</span>
+          {x}
+        </>
+      )}
+      onExpand={onExpand}
+      onDataLoad={onDataLoad}
+    />
+  );
+}

components/metrics/EventsTable.module.css

@@ -0,0 +1,7 @@
+.type {
+  font-size: var(--font-size-small);
+  padding: 2px 4px;
+  border: 1px solid var(--gray300);
+  border-radius: 4px;
+  margin-right: 10px;
+}

components/metrics/MetricsTable.js

@@ -21,9 +21,9 @@ export default function MetricsTable({
   filterOptions,
   limit,
   headerComponent,
+  renderLabel,
   onDataLoad = () => {},
   onExpand = () => {},
-  labelRenderer = e => e,
 }) {
   const [data, setData] = useState();
   const [format, setFormat] = useState(true);
@@ -43,37 +43,34 @@ export default function MetricsTable({
 
   async function loadData() {
     const data = await get(`/api/website/${websiteId}/rankings`, {
+      type,
       start_at: +startDate,
       end_at: +endDate,
-      type,
     });
 
     setData(data);
     onDataLoad(data);
   }
 
-  function handleSetFormat() {
-    setFormat(state => !state);
-  }
+  const handleSetFormat = () => setFormat(state => !state);
 
-  function getRow(x, y, z) {
+  const getRow = row => {
+    const { x: label, y: value, z: percent } = row;
     return (
       <AnimatedRow
-        key={x}
-        label={x}
-        value={y}
-        percent={z}
+        key={label}
+        label={renderLabel ? renderLabel(row) : label}
+        value={value}
+        percent={percent}
         animate={shouldAnimate}
         format={formatFunc}
         onClick={handleSetFormat}
-        labelRenderer={labelRenderer}
       />
     );
-  }
+  };
 
   const Row = ({ index, style }) => {
-    const { x, y, z } = rankings[index];
-    return <div style={style}>{getRow(x, y, z)}</div>;
+    return <div style={style}>{getRow(rankings[index])}</div>;
   };
 
   useEffect(() => {
@@ -96,13 +93,13 @@ export default function MetricsTable({
         </div>
       </div>
       <div className={styles.body}>
-        {limit ? (
-          rankings.map(({ x, y, z }) => getRow(x, y, z))
-        ) : (
-          <FixedSizeList height={600} itemCount={rankings.length} itemSize={30}>
-            {Row}
-          </FixedSizeList>
-        )}
+        {limit
+          ? rankings.map(row => getRow(row))
+          : data?.length > 0 && (
+              <FixedSizeList height={500} itemCount={rankings.length} itemSize={30}>
+                {Row}
+              </FixedSizeList>
+            )}
       </div>
       <div className={styles.footer}>
         {limit && data.length > limit && (
@@ -115,7 +112,7 @@ export default function MetricsTable({
   );
 }
 
-const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick, labelRenderer }) => {
+const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -125,7 +122,7 @@ const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick, labe
 
   return (
     <div className={styles.row}>
-      <div className={styles.label}>{labelRenderer(decodeURI(label))}</div>
+      <div className={styles.label}>{label}</div>
       <div className={styles.value} onClick={onClick}>
         <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
       </div>

components/metrics/PagesTable.js

@@ -25,6 +25,7 @@ export default function PagesTable({
       limit={limit}
       dataFilter={urlFilter}
       filterOptions={{ domain: websiteDomain, raw: filter === 'Raw' }}
+      renderLabel={({ x }) => decodeURI(x)}
       onExpand={onExpand}
     />
   );

components/metrics/ReferrersTable.js

@@ -13,13 +13,13 @@ export default function Referrers({
 }) {
   const [filter, setFilter] = useState('Combined');
 
-  const renderLink = url => {
+  const renderLink = ({ x: url }) => {
     return url.startsWith('http') ? (
       <a href={url} target="_blank" rel="noreferrer">
-        {url}
+        {decodeURI(url)}
       </a>
     ) : (
-      url
+      decodeURI(url)
     );
   };
 
@@ -40,7 +40,7 @@ export default function Referrers({
         raw: filter === 'Raw',
       }}
       onExpand={onExpand}
-      labelRenderer={renderLink}
+      renderLabel={renderLink}
     />
   );
 }