fix: listen price and volume format func changed

SamChangi · Aug 16, 2024 · f82b384 · f82b384
1 parent ecfb60e
commit f82b384
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 48 deletions.
diff --git a/src/feature/depth-chart/chart.ts b/src/feature/depth-chart/chart.ts
@@ -53,8 +53,8 @@ export class Chart extends EventEmitter {
   /** Arithmetic average of the best bid price and best offer price. */
   private _midPrice: number = 0;
 
-  private priceFormat: (price: number) => string;
-  private volumeFormat: (volume: number) => string;
+  priceFormat: (price: number) => string;
+  volumeFormat: (volume: number) => string;
 
   private _colors: Colors;
   private _dimensions: Dimensions;

diff --git a/src/feature/depth-chart/depth-chart.stories.tsx b/src/feature/depth-chart/depth-chart.stories.tsx
@@ -19,48 +19,48 @@ export default {
 
 const AAPL_data = {
   buy: [
-    { price: 132.79743, volume: 339 },
-    { price: 132.79742, volume: 713 },
-    { price: 132.79741, volume: 421 },
-    { price: 132.7974, volume: 853 },
-    { price: 132.79739, volume: 152 },
-    { price: 132.79738, volume: 243 },
-    { price: 132.79737, volume: 296 },
-    { price: 132.79736, volume: 123 },
-    { price: 132.79735, volume: 158 },
-    { price: 132.79734, volume: 238 },
-    { price: 132.79733, volume: 164 },
-    { price: 132.79732, volume: 273 },
-    { price: 132.79731, volume: 35 },
-    { price: 132.79729, volume: 30 },
-    { price: 132.79726, volume: 29 },
-    { price: 132.79722, volume: 484 },
-    { price: 132.79721, volume: 458 },
-    { price: 132.7972, volume: 244 },
-    { price: 132.79719, volume: 10 },
-    { price: 132.79698, volume: 124 },
+    { price: 132.79743, volume: 0 },
+    { price: 132.79742, volume: 0 },
+    { price: 132.79741, volume: 0 },
+    { price: 132.7974, volume: 0 },
+    { price: 132.79739, volume: 0 },
+    { price: 132.79738, volume: 0 },
+    { price: 132.79737, volume: 0 },
+    { price: 132.79736, volume: 0 },
+    { price: 132.79735, volume: 0 },
+    { price: 132.79734, volume: 0 },
+    { price: 132.79733, volume: 0 },
+    { price: 132.79732, volume: 0 },
+    { price: 132.79731, volume: 0 },
+    { price: 132.79729, volume: 0 },
+    { price: 132.79726, volume: 0 },
+    { price: 132.79722, volume: 0 },
+    { price: 132.79721, volume: 0 },
+    { price: 132.7972, volume: 0 },
+    { price: 132.79719, volume: 0 },
+    { price: 132.79698, volume: 0 },
   ],
   sell: [
-    { price: 132.79744, volume: 847 },
-    { price: 132.79745, volume: 2412 },
-    { price: 132.79746, volume: 635 },
-    { price: 132.79747, volume: 323 },
-    { price: 132.79748, volume: 828 },
-    { price: 132.79749, volume: 322 },
-    { price: 132.7975, volume: 268 },
-    { price: 132.79751, volume: 92 },
-    { price: 132.79752, volume: 249 },
-    { price: 132.79753, volume: 189 },
-    { price: 132.79754, volume: 179 },
-    { price: 132.79755, volume: 122 },
-    { price: 132.79756, volume: 28 },
-    { price: 132.7976, volume: 114 },
-    { price: 132.79764, volume: 27 },
-    { price: 132.79767, volume: 10 },
-    { price: 132.79772, volume: 31 },
-    { price: 132.79785, volume: 484 },
-    { price: 132.79786, volume: 364 },
-    { price: 132.79787, volume: 244 },
+    { price: 132.79744, volume: 0 },
+    { price: 132.79745, volume: 0 },
+    { price: 132.79746, volume: 0 },
+    { price: 132.79747, volume: 0 },
+    { price: 132.79748, volume: 0 },
+    { price: 132.79749, volume: 0 },
+    { price: 132.7975, volume: 0 },
+    { price: 132.79751, volume: 0 },
+    { price: 132.79752, volume: 0 },
+    { price: 132.79753, volume: 0 },
+    { price: 132.79754, volume: 0 },
+    { price: 132.79755, volume: 0 },
+    { price: 132.79756, volume: 0 },
+    { price: 132.7976, volume: 0 },
+    { price: 132.79764, volume: 0 },
+    { price: 132.79767, volume: 0 },
+    { price: 132.79772, volume: 0 },
+    { price: 132.79785, volume: 0 },
+    { price: 132.79786, volume: 0 },
+    { price: 132.79787, volume: 0 },
   ],
 };
 
@@ -449,15 +449,15 @@ FractionalVolume.args = {
   data: {
     buy: AAPL_data.buy.map((priceLevel) => ({
       price: priceLevel.price,
-      volume: priceLevel.volume / 1000000,
+      volume: priceLevel.volume / 100,
     })),
     sell: AAPL_data.sell.map((priceLevel) => ({
       price: priceLevel.price,
-      volume: priceLevel.volume / 1000000,
+      volume: priceLevel.volume / 100,
     })),
   },
   priceFormat: (price: number) => numberFormatter(5).format(price),
-  volumeFormat: (volume: number) => numberFormatter(5).format(volume),
+  volumeFormat: (volume: number) => numberFormatter(3).format(volume),
 };
 
 export const UnsortedPriceLevels = Template.bind({});

diff --git a/src/feature/depth-chart/depth-chart.tsx b/src/feature/depth-chart/depth-chart.tsx
@@ -85,7 +85,7 @@ export const DepthChart = forwardRef(
       notEnoughDataText = "No data",
       theme = "dark",
     }: DepthChartProps,
-    ref: React.Ref<DepthChartHandle>
+    ref: React.Ref<DepthChartHandle>,
   ) => {
     const contentsRef = useRef<HTMLCanvasElement>(null!);
     const uiRef = useRef<HTMLCanvasElement>(null!);
@@ -125,6 +125,13 @@ export const DepthChart = forwardRef(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    useEffect(() => {
+      if (chartRef.current) {
+        chartRef.current.priceFormat = priceFormat;
+        chartRef.current.volumeFormat = volumeFormat;
+      }
+    }, [priceFormat, volumeFormat]);
+
     // Update chart when dimensions or data change
     useEffect(() => {
       chartRef.current.resize(
@@ -133,7 +140,7 @@ export const DepthChart = forwardRef(
           : width,
         devicePixelContentBoxSizeBlockSize
           ? devicePixelContentBoxSizeBlockSize / window.devicePixelRatio
-          : height
+          : height,
       );
 
       chartRef.current.data = data;
@@ -186,7 +193,7 @@ export const DepthChart = forwardRef(
         </div>
       </div>
     );
-  }
+  },
 );
 
 DepthChart.displayName = "DepthChart";