From 9abb201d865fb6226b21b43723af4c17da977006 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 5 Jun 2024 15:09:33 -0700
Subject: [PATCH] Fixed change labels display.

---
 .../(main)/websites/[websiteId]/WebsiteMetricsBar.tsx |  2 +-
 src/components/metrics/ChangeLabel.tsx                | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
index b258a19f..246a54b8 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -62,7 +62,7 @@ export function WebsiteMetricsBar({
           change:
             (Math.min(visitors.value, bounces.value) / visitors.value) * 100 -
             (Math.min(visitors.prev, bounces.prev) / visitors.prev) * 100,
-          formatValue: n => Number(n).toFixed(0) + '%',
+          formatValue: n => Math.round(+n) + '%',
           reverseColors: true,
         },
         {
diff --git a/src/components/metrics/ChangeLabel.tsx b/src/components/metrics/ChangeLabel.tsx
index 14eb1a8b..7e7cb77b 100644
--- a/src/components/metrics/ChangeLabel.tsx
+++ b/src/components/metrics/ChangeLabel.tsx
@@ -19,21 +19,22 @@ export function ChangeLabel({
   className?: string;
   children?: ReactNode;
 }) {
-  const positive = value * (reverseColors ? -1 : 1) >= 0;
-  const negative = value * (reverseColors ? -1 : 1) < 0;
+  const positive = value >= 0;
+  const negative = value < 0;
   const neutral = value === 0 || isNaN(value);
+  const good = reverseColors ? negative : positive;
 
   return (
     <div
       className={classNames(styles.label, className, {
-        [styles.positive]: positive,
-        [styles.negative]: negative,
+        [styles.positive]: good,
+        [styles.negative]: !good,
         [styles.neutral]: neutral,
       })}
       title={title}
     >
       {!neutral && (
-        <Icon rotate={value === 0 ? 0 : positive || reverseColors ? -90 : 90} size={size}>
+        <Icon rotate={positive ? -90 : 90} size={size}>
           <Icons.ArrowRight />
         </Icon>
       )}