Show percentages in metrics bar.

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -3,7 +3,7 @@ import { useMessages, useSticky } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
-import { formatShortTime } from 'lib/format';
+import { formatShortTime, formatLongNumber } from 'lib/format';
 import WebsiteFilterButton from './WebsiteFilterButton';
 import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
 import styles from './WebsiteMetricsBar.module.css';
@@ -37,16 +37,19 @@ export function WebsiteMetricsBar({
           ...pageviews,
           label: formatMessage(labels.views),
           change: pageviews.value - pageviews.prev,
+          formatValue: formatLongNumber,
         },
         {
           ...visits,
           label: formatMessage(labels.visits),
           change: visits.value - visits.prev,
+          formatValue: formatLongNumber,
         },
         {
           ...visitors,
           label: formatMessage(labels.visitors),
           change: visitors.value - visitors.prev,
+          formatValue: formatLongNumber,
         },
         {
           label: formatMessage(labels.bounceRate),
@@ -55,7 +58,7 @@ export function WebsiteMetricsBar({
           change:
             (Math.min(visitors.value, bounces.value) / visitors.value) * 100 -
             (Math.min(visitors.prev, bounces.prev) / visitors.prev) * 100,
-          format: n => Number(n).toFixed(0) + '%',
+          formatValue: n => Number(n).toFixed(0) + '%',
           reverseColors: true,
         },
         {
@@ -63,7 +66,8 @@ export function WebsiteMetricsBar({
           value: totaltime.value / visits.value,
           prev: totaltime.prev / visits.prev,
           change: totaltime.value / visits.value - totaltime.prev / visits.prev,
-          format: n => `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
+          formatValue: n =>
+            `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
         },
       ]
     : [];
@@ -78,12 +82,12 @@ export function WebsiteMetricsBar({
       ref={ref}
       className={classNames(styles.container, {
         [styles.sticky]: sticky,
-        [styles.isSticky]: isSticky,
+        [styles.isSticky]: sticky && isSticky,
       })}
     >
       <div>
         <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
-          {metrics.map(({ label, value, prev, change, format, reverseColors }) => {
+          {metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
             return (
               <MetricCard
                 key={label}
@@ -91,7 +95,7 @@ export function WebsiteMetricsBar({
                 previousValue={prev}
                 label={label}
                 change={change}
-                format={format}
+                formatValue={formatValue}
                 reverseColors={reverseColors}
                 showChange={compareMode || showChange}
                 showPrevious={compareMode}

src/components/metrics/MetricCard.tsx

@@ -10,7 +10,7 @@ export interface MetricCardProps {
   change?: number;
   label?: string;
   reverseColors?: boolean;
-  format?: typeof formatNumber;
+  formatValue?: typeof formatNumber;
   showLabel?: boolean;
   showChange?: boolean;
   showPrevious?: boolean;
@@ -22,32 +22,35 @@ export const MetricCard = ({
   change = 0,
   label,
   reverseColors = false,
-  format = formatNumber,
+  formatValue = formatNumber,
   showLabel = true,
   showChange = false,
   showPrevious = false,
   className,
 }: MetricCardProps) => {
+  const diff = value - change;
+  const pct = ((value - diff) / diff) * 100;
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
-  const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
+  const changeProps = useSpring({ x: Number(pct) || 0, from: { x: 0 } });
-  const prevProps = useSpring({ x: Number(value - change) || 0, from: { x: 0 } });
+  const prevProps = useSpring({ x: Number(diff) || 0, from: { x: 0 } });
 
   return (
     <div className={classNames(styles.card, className, showPrevious && styles.compare)}>
       {showLabel && <div className={styles.label}>{label}</div>}
-      <animated.div className={styles.value} title={value.toString()}>
+      <animated.div className={styles.value} title={formatValue(value)}>
-        {props?.x?.to(x => format(x))}
+        {props?.x?.to(x => formatValue(x))}
       </animated.div>
       {showChange && (
         <ChangeLabel className={styles.change} value={change} reverseColors={reverseColors}>
-          <animated.span title={change.toString()}>
+          <animated.span title={formatValue(change)}>
-            {changeProps?.x?.to(x => format(Math.abs(x)))}
+            {changeProps?.x?.to(x => Math.abs(~~x))}
           </animated.span>
+          %
         </ChangeLabel>
       )}
       {showPrevious && (
-        <animated.div className={classNames(styles.value, styles.prev)} title={prevProps?.x as any}>
+        <animated.div className={classNames(styles.value, styles.prev)} title={formatValue(diff)}>
-          {prevProps?.x?.to(x => format(x))}
+          {prevProps?.x?.to(x => formatValue(x))}
         </animated.div>
       )}
     </div>

src/components/metrics/PageviewsChart.tsx

@@ -46,7 +46,7 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
           ? [
               {
                 type: 'line',
-                label: `${formatMessage(labels.visits)} (${formatMessage(labels.previous)})`,
+                label: `${formatMessage(labels.views)} (${formatMessage(labels.previous)})`,
                 data: data.compare.pageviews,
                 borderWidth: 2,
                 backgroundColor: '#8601B0',