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[]) => {