Removed toggle formatting.

src/components/metrics/ListTable.js

@@ -1,10 +1,9 @@
-import { useState } from 'react';
 import useMeasure from 'react-use-measure';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
 import Empty from 'components/common/Empty';
-import { formatNumber, formatLongNumber } from 'lib/format';
+import { formatLongNumber } from 'lib/format';
 import useMessages from 'components/hooks/useMessages';
 import styles from './ListTable.module.css';
 
@@ -20,10 +19,6 @@ export function ListTable({
 }) {
   const { formatMessage, labels } = useMessages();
   const [ref, bounds] = useMeasure();
-  const [format, setFormat] = useState(true);
-  const formatFunc = format ? formatLongNumber : formatNumber;
-
-  const handleSetFormat = () => setFormat(state => !state);
 
   const getRow = row => {
     const { x: label, y: value, z: percent } = row;
@@ -35,8 +30,6 @@ export function ListTable({
         value={value}
         percent={percent}
         animate={animate && !virtualize}
-        format={formatFunc}
-        onClick={handleSetFormat}
         showPercentage={showPercentage}
       />
     );
@@ -50,9 +43,7 @@ export function ListTable({
     <div className={classNames(styles.table, className)}>
       <div className={styles.header}>
         <div className={styles.title}>{title}</div>
-        <div className={styles.metric} onClick={handleSetFormat}>
-          {metric}
-        </div>
+        <div className={styles.metric}>{metric}</div>
       </div>
       <div ref={ref} className={styles.body}>
         {data?.length === 0 && <Empty />}
@@ -68,15 +59,7 @@ export function ListTable({
   );
 }
 
-const AnimatedRow = ({
-  label,
-  value = 0,
-  percent,
-  animate,
-  format,
-  onClick,
-  showPercentage = true,
-}) => {
+const AnimatedRow = ({ label, value = 0, percent, animate, showPercentage = true }) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -87,8 +70,10 @@ const AnimatedRow = ({
   return (
     <div className={styles.row}>
       <div className={styles.label}>{label}</div>
-      <div className={styles.value} onClick={onClick}>
-        <animated.div className={styles.value}>{props.y?.to(format)}</animated.div>
+      <div className={styles.value}>
+        <animated.div className={styles.value} title={props?.y}>
+          {props.y?.to(formatLongNumber)}
+        </animated.div>
       </div>
       {showPercentage && (
         <div className={styles.percent}>