Event data updates.

components/metrics/MetricsBar.js

@@ -1,13 +1,27 @@
-import { Loading } from 'react-basics';
+import { useState } from 'react';
+import { Loading, cloneChildren } from 'react-basics';
 import ErrorMessage from 'components/common/ErrorMessage';
 import styles from './MetricsBar.module.css';
+import { formatLongNumber, formatNumber } from 'lib/format';
+
+export function MetricsBar({ children, isLoading, isFetched, error }) {
+  const [format, setFormat] = useState(true);
+
+  const formatFunc = format
+    ? n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`)
+    : formatNumber;
+
+  const handleSetFormat = () => {
+    setFormat(state => !state);
+  };
 
-export function MetricsBar({ children, onClick, isLoading, isFetched, error }) {
   return (
-    <div className={styles.bar} onClick={onClick}>
+    <div className={styles.bar} onClick={handleSetFormat}>
       {isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
-      {children}
+      {cloneChildren(children, child => {
+        return { format: child.props.format || formatFunc };
+      })}
     </div>
   );
 }