Updated change labels.

src/components/metrics/ChangeLabel.module.css

@@ -24,8 +24,3 @@
   color: var(--base700);
   background: var(--base100);
 }
-
-.new {
-  color: var(--blue900);
-  background: var(--blue100);
-}

src/components/metrics/ChangeLabel.tsx

@@ -6,12 +6,14 @@ import styles from './ChangeLabel.module.css';
 export function ChangeLabel({
   value,
   size,
+  title,
   reverseColors,
   className,
   children,
 }: {
   value: number;
   size?: 'xs' | 'sm' | 'md' | 'lg';
+  title?: string;
   reverseColors?: boolean;
   showPercentage?: boolean;
   className?: string;
@@ -19,20 +21,19 @@ export function ChangeLabel({
 }) {
   const positive = value * (reverseColors ? -1 : 1) >= 0;
   const negative = value * (reverseColors ? -1 : 1) < 0;
-  const isNew = isNaN(value);
+  const neutral = value === 0 || isNaN(value);
 
   return (
     <div
       className={classNames(styles.label, className, {
         [styles.positive]: positive,
         [styles.negative]: negative,
-        [styles.neutral]: value === 0,
-        [styles.new]: isNew,
+        [styles.neutral]: neutral,
       })}
-      title={value.toString()}
+      title={title}
     >
-      {!isNew && (
-        <Icon rotate={value === 0 ? 0 : positive || reverseColors ? -45 : 45} size={size}>
+      {!neutral && (
+        <Icon rotate={value === 0 ? 0 : positive || reverseColors ? -90 : 90} size={size}>
           <Icons.ArrowRight />
         </Icon>
       )}

src/components/metrics/MetricCard.tsx

@@ -37,19 +37,21 @@ export const MetricCard = ({
   return (
     <div className={classNames(styles.card, className, showPrevious && styles.compare)}>
       {showLabel && <div className={styles.label}>{label}</div>}
-      <animated.div className={styles.value} title={formatValue(value)}>
+      <animated.div className={styles.value} title={value.toString()}>
         {props?.x?.to(x => formatValue(x))}
       </animated.div>
       {showChange && (
-        <ChangeLabel className={styles.change} value={change} reverseColors={reverseColors}>
-          <animated.span title={formatValue(change)}>
-            {changeProps?.x?.to(x => Math.abs(~~x))}
-          </animated.span>
-          %
+        <ChangeLabel
+          className={styles.change}
+          value={change}
+          title={formatValue(change)}
+          reverseColors={reverseColors}
+        >
+          <animated.span>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</animated.span>
         </ChangeLabel>
       )}
       {showPrevious && (
-        <animated.div className={classNames(styles.value, styles.prev)} title={formatValue(diff)}>
+        <animated.div className={classNames(styles.value, styles.prev)} title={diff.toString()}>
           {prevProps?.x?.to(x => formatValue(x))}
         </animated.div>
       )}