From fd69f6078c99183d2eda01fb4a02f1403141f33f Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 12 Mar 2024 13:58:13 +0000
Subject: [PATCH] fix(trading): incorrect top gaining and top losing order
 (#5974)

---
 .../use-market-selector-list.ts                |  6 +++++-
 .../src/components/sparkline/sparkline.tsx     | 16 +++++++++++++++-
 libs/utils/src/lib/price-change.ts             | 18 ++++++++----------
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/apps/trading/components/market-selector/use-market-selector-list.ts b/apps/trading/components/market-selector/use-market-selector-list.ts
index ea6a5f8c0..82f28db48 100644
--- a/apps/trading/components/market-selector/use-market-selector-list.ts
+++ b/apps/trading/components/market-selector/use-market-selector-list.ts
@@ -63,7 +63,11 @@ export const useMarketSelectorList = ({
         [
           (m) => {
             if (!m.candles?.length) return 0;
-            return Number(priceChangePercentage(m.candles.map((c) => c.close)));
+            return Number(
+              priceChangePercentage(
+                m.candles.filter((c) => c.close !== '').map((c) => c.close)
+              )
+            );
           },
         ],
         [dir]
diff --git a/libs/ui-toolkit/src/components/sparkline/sparkline.tsx b/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
index 7839bce68..4208ff68c 100644
--- a/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
+++ b/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
@@ -31,12 +31,26 @@ export interface SparklineProps {
 }
 
 export const SparklineView = ({
-  data,
+  data: rawData,
   width = 60,
   height = 15,
   points = 24,
   className,
 }: SparklineProps) => {
+  // Value can come in as 0, due to candle.close being empty string ''
+  // Instead of skewing the sparkline with 0 values, we map over and set any
+  // 0 values to the last non 0 value resulting in a better sparkline
+  let lastClose = 0;
+  const data = rawData.map((val) => {
+    if (val === 0) {
+      return lastClose;
+    } else {
+      lastClose = val;
+    }
+
+    return val;
+  });
+
   // Get the extent for our y value
   const [min, max] = extent(data, (d) => d);
 
diff --git a/libs/utils/src/lib/price-change.ts b/libs/utils/src/lib/price-change.ts
index 82dbfc551..d26122e28 100644
--- a/libs/utils/src/lib/price-change.ts
+++ b/libs/utils/src/lib/price-change.ts
@@ -1,18 +1,16 @@
 import BigNumber from 'bignumber.js';
 
 export const priceChangePercentage = (candles: string[]) => {
-  const change = priceChange(candles);
-  if (change && candles && candles.length > 0) {
-    const yesterdayLastPrice = candles[0] && BigInt(candles[0]);
-    if (yesterdayLastPrice) {
-      return new BigNumber(change.toString())
-        .dividedBy(new BigNumber(yesterdayLastPrice.toString()))
-        .multipliedBy(100)
-        .toNumber();
-    }
+  if (!candles.length) {
     return 0;
   }
-  return 0;
+
+  const change = priceChange(candles);
+
+  return new BigNumber(change.toString())
+    .dividedBy(new BigNumber(candles[0]))
+    .multipliedBy(100)
+    .toNumber();
 };
 
 export const priceChange = (candles: string[]) => {