Merge branch 'main' into wsun/eas-updates

Author: weitingsun

app/components/UI/AssetOverview/PriceChart/utils.test.ts

@@ -0,0 +1,117 @@
+import { distributeDataPoints } from './utils';
+
+describe('distributeDataPoints', () => {
+  it('returns all data points when there are exactly 100 points', () => {
+    const dataPoints = createDataPoints(100);
+
+    const result = distributeDataPoints(dataPoints);
+
+    expect(result).toEqual(dataPoints);
+    expect(result.length).toBe(100);
+  });
+
+  it('returns all data points when there are fewer than 100 points', () => {
+    const dataPoints = createDataPoints(50);
+
+    const result = distributeDataPoints(dataPoints);
+
+    expect(result).toEqual(dataPoints);
+    expect(result.length).toBe(50);
+  });
+
+  it('returns exactly 100 points when there are more than 100 points', () => {
+    const dataPoints = createDataPoints(200);
+
+    const result = distributeDataPoints(dataPoints);
+
+    expect(result.length).toBe(100);
+  });
+
+  it('includes the first and last data points', () => {
+    const dataPoints = createDataPoints(200);
+
+    const result = distributeDataPoints(dataPoints);
+
+    expect(result[0]).toEqual(dataPoints[0]);
+    expect(result[99]).toEqual(dataPoints[199]);
+  });
+
+  it('maintains chronological order of data points', () => {
+    const dataPoints = createDataPoints(500);
+
+    const result = distributeDataPoints(dataPoints);
+
+    for (let i = 1; i < result.length; i++) {
+      const prevTimestamp = parseInt(result[i - 1][0], 10);
+      const currTimestamp = parseInt(result[i][0], 10);
+      expect(currTimestamp).toBeGreaterThanOrEqual(prevTimestamp);
+    }
+  });
+
+  it('distributes points evenly across the dataset', () => {
+    const dataPoints = createDataPoints(200, Date.now(), 0);
+
+    const result = distributeDataPoints(dataPoints);
+
+    // Expected interval: (200 - 1) / 99 ≈ 2.01
+    // So we should get indices approximately: 0, 2, 4, 6, ..., 197, 199
+    expect(result[0][1]).toBe(0);
+    expect(result[1][1]).toBe(2);
+    expect(result[2][1]).toBe(4);
+    expect(result[98][1]).toBe(197);
+    expect(result[99][1]).toBe(199);
+  });
+
+  it('does not duplicate points', () => {
+    const dataPoints = createDataPoints(300, Date.now(), 0);
+
+    const result = distributeDataPoints(dataPoints);
+
+    // Check for duplicates by comparing timestamps
+    const timestamps = result.map((point) => point[0]);
+    const uniqueTimestamps = new Set(timestamps);
+    expect(uniqueTimestamps.size).toBe(result.length);
+  });
+
+  it('handles empty array', () => {
+    const dataPoints: [string, number][] = [];
+
+    const result = distributeDataPoints(dataPoints);
+
+    expect(result).toEqual([]);
+    expect(result.length).toBe(0);
+  });
+
+  it('ensures gaps between points are relatively uniform', () => {
+    const dataPoints = createDataPoints(500, Date.now(), 0);
+
+    const result = distributeDataPoints(dataPoints);
+
+    // Calculate the value differences between consecutive points
+    const gaps: number[] = [];
+    for (let i = 1; i < result.length; i++) {
+      gaps.push(result[i][1] - result[i - 1][1]);
+    }
+
+    // Expected interval: (500 - 1) / 99 ≈ 5.04
+    // All gaps should be either 5 or 6 due to rounding
+    const minGap = Math.min(...gaps);
+    const maxGap = Math.max(...gaps);
+    expect(maxGap - minGap).toBeLessThanOrEqual(1);
+  });
+});
+
+function createDataPoints(
+  length: number,
+  baseTime: number = Date.now(),
+  basePrice: number = 3000,
+): [string, number][] {
+  return Array.from({ length }, (_, i) => [
+    createTimestamp(baseTime, i),
+    basePrice + i,
+  ]);
+}
+
+function createTimestamp(baseTime: number, offsetMinutes: number): string {
+  return (baseTime + offsetMinutes * 60 * 1000).toString();
+}

app/components/UI/AssetOverview/PriceChart/utils.ts

@@ -3,24 +3,30 @@ import { TokenPrice } from 'app/components/hooks/useTokenHistoricalPrices';
 // this function is used to sample the data points to be displayed on the chart
 // it will return a maximum of 100 data points
 // if there are less than 100 data points, it will return all of them
-// if there are more than 100 data points, it will return 100 data points
+// if there are more than 100 data points, it will return 100 evenly distributed data points
 // the first and last data points will always be included
-// the data points in between will be sampled at an interval of (numDataPoints / 98)
+// the data points are distributed evenly across the dataset to ensure similar gaps between points
 
 // this is to ensure that the chart does not become unresponsive when there are too many data points
 export function distributeDataPoints(dataPoints: TokenPrice[]): TokenPrice[] {
   const numDataPoints = dataPoints.length;
-  const interval = Math.max(1, Math.floor(numDataPoints / 98));
-  const sampledDataPoints: [string, number][] = [];
-  sampledDataPoints.push(dataPoints[0]);
-  for (let i = interval; i < numDataPoints - 1; i += interval) {
-    if (sampledDataPoints.length === 98) break;
-    sampledDataPoints.push(dataPoints[i]);
+
+  if (numDataPoints <= 100) {
+    return dataPoints;
   }
-  sampledDataPoints.push(dataPoints[numDataPoints - 1]);
-  if (sampledDataPoints.length === 99) {
-    sampledDataPoints.push(dataPoints[numDataPoints - 2]);
+
+  // Calculate the exact interval to evenly distribute 100 points across the dataset
+  // We want indices: 0, interval, 2*interval, ..., numDataPoints-1
+  // So we need 99 intervals to get 100 points
+  const interval = (numDataPoints - 1) / 99;
+
+  const sampledDataPoints: [string, number][] = [];
+
+  for (let i = 0; i < 100; i++) {
+    const index = Math.round(i * interval);
+    sampledDataPoints.push(dataPoints[index]);
   }
+
   return sampledDataPoints;
 }