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}>

src/components/metrics/ListTable.module.css

@@ -28,7 +28,6 @@
   font-weight: 600;
   text-align: center;
   width: 100px;
-  cursor: pointer;
 }
 
 .row {
@@ -71,7 +70,6 @@
   text-align: end;
   margin-inline-end: 10px;
   font-weight: 600;
-  cursor: pointer;
 }
 
 .percent {

src/components/metrics/MetricCard.js

@@ -17,7 +17,9 @@ export const MetricCard = ({
 
   return (
     <div className={classNames(styles.card, className)}>
-      <animated.div className={styles.value}>{props.x.to(x => format(x))}</animated.div>
+      <animated.div className={styles.value} title={props?.x}>
+        {props?.x?.to(x => format(x))}
+      </animated.div>
       <div className={styles.label}>
         {label}
         {~~change !== 0 && !hideComparison && (
@@ -27,8 +29,9 @@ export const MetricCard = ({
               [styles.negative]: change * (reverseColors ? -1 : 1) < 0,
               [styles.plusSign]: change > 0,
             })}
+            title={changeProps?.x}
           >
-            {changeProps.x.to(x => format(x))}
+            {changeProps?.x?.to(x => format(x))}
           </animated.span>
         )}
       </div>

src/components/metrics/MetricsBar.js

@@ -1,22 +1,13 @@
-import { useState } from 'react';
 import { Loading, cloneChildren } from 'react-basics';
 import ErrorMessage from 'components/common/ErrorMessage';
-import { formatLongNumber, formatNumber } from 'lib/format';
+import { formatLongNumber } from 'lib/format';
 import styles from './MetricsBar.module.css';
 
 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);
-  };
+  const formatFunc = n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`);
 
   return (
-    <div className={styles.bar} onClick={handleSetFormat}>
+    <div className={styles.bar}>
       {isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
       {!isLoading &&

src/components/metrics/PageviewsChart.js

@@ -13,13 +13,13 @@ export function PageviewsChart({ websiteId, data, unit, loading, ...props }) {
 
     return [
       {
-        label: formatMessage(labels.uniqueVisitors),
+        label: formatMessage(labels.visitors),
         data: data.sessions,
         borderWidth: 1,
         ...colors.chart.visitors,
       },
       {
-        label: formatMessage(labels.pageViews),
+        label: formatMessage(labels.views),
         data: data.pageviews,
         borderWidth: 1,
         ...colors.chart.views,