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}>
+        <div className={styles.metric}>{metric}</div>
-          {metric}
-        </div>
       </div>
       <div ref={ref} className={styles.body}>
         {data?.length === 0 && <Empty />}
@@ -68,15 +59,7 @@ export function ListTable({
   );
 }
 
-const AnimatedRow = ({
+const AnimatedRow = ({ label, value = 0, percent, animate, showPercentage = true }) => {
-  label,
-  value = 0,
-  percent,
-  animate,
-  format,
-  onClick,
-  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}>
+      <div className={styles.value}>
-        <animated.div className={styles.value}>{props.y?.to(format)}</animated.div>
+        <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 = n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`);
-
-  const formatFunc = format
-    ? n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`)
-    : formatNumber;
-
-  const handleSetFormat = () => {
-    setFormat(state => !state);
-  };
 
   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,

yarn.lock

@@ -8349,15 +8349,6 @@ slash@^4.0.0:
   resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-slice-ansi@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
-  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
-  dependencies:
-    ansi-styles "^4.0.0"
-    astral-regex "^2.0.0"
-    is-fullwidth-code-point "^3.0.0"
-
 slice-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
@@ -8482,7 +8473,7 @@ string-hash@^1.1.1:
   resolved "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz"
   integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
 
-string-width@^4.2.0, string-width@^4.2.3:
+string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8491,7 +8482,7 @@ string-width@^4.2.0, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.1:
+string-width@^5.0.0, string-width@^5.0.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
   integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==