Events table.

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>