update registry name

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "dfxfe-depth",
-  "version": "1.0.8",
+  "name": "exchange-depth",
+  "version": "1.0.0",
   "description": "A React component library for visualising historical and streaming financial market data",
   "main": "./dist/legacy.js",
   "module": "./dist/legacy.js",

src/feature/depth-chart/chart.ts

@@ -42,8 +42,6 @@ export class Chart extends EventEmitter {
   private initialSpan: number = 1;
   private maxPriceDifference: number = 0;
   private initialPriceDifference: number = 0;
-  private volumeScale: ScaleLinear<number, number> = scaleLinear();
-
   private _data: { buy: PriceLevel[]; sell: PriceLevel[] } = {
     buy: [],
     sell: [],
@@ -238,12 +236,24 @@ export class Chart extends EventEmitter {
       1.2 * (max(this.volumes.slice(indexExtent[0], indexExtent[1])) ?? 0),
     ];
 
-    const priceScale = scaleLinear().domain(priceExtent).range([0, this.width]);
-
-    this.volumeScale = scaleLinear()
+    const volumeScale = scaleLinear()
       .domain(volumeExtent)
       .range([this.height - resolution * AXIS_HEIGHT, 0]);
 
+    const numTicks = this.height / 50;
+    const ticks = volumeScale.ticks(numTicks).filter((tick) => tick !== 0);
+    const precision = getFloatNumber(ticks[ticks.length - 1]);
+    console.log("**precs**", precision);
+    const size = ticks[ticks.length - 1]?.toLocaleString("en-IN", {
+      maximumFractionDigits: precision,
+      minimumFractionDigits: precision,
+    }).length;
+    console.log("==size==", size);
+    // console.log('****', ('3,000.006').toLocaleString().length);
+    const priceScale = scaleLinear()
+      .domain(priceExtent)
+      .range([0, this.width - 16 * size]);
+
     // Add dummy data points at extreme points of price range
     // to ensure the chart looks symmetric
     if (cumulativeBuy.length > 0) {
@@ -266,12 +276,13 @@ export class Chart extends EventEmitter {
     this.chart.update(
       cumulativeBuy.map((point) => [
         priceScale(point[0]),
-        this.volumeScale(point[1]),
+        volumeScale(point[1]),
       ]),
       cumulativeSell.map((point) => [
         priceScale(point[0]),
-        this.volumeScale(point[1]),
+        volumeScale(point[1]),
       ]),
+      16 * size,
     );
 
     // TODO: Clean up this logic
@@ -300,15 +311,17 @@ export class Chart extends EventEmitter {
     this.axis.colors = this._colors;
 
     this.axis.update(
+      this.width - 16 * size,
+      this.height,
       this.prices.map((price) => priceScale(price)),
-      this.volumes.map((volume) => this.volumeScale(volume)),
+      this.volumes.map((volume) => volumeScale(volume)),
       midPrice,
       this.priceLabels,
       this.volumeLabels,
       this.priceFormat(midPrice),
       this._indicativePrice > 0 ? "Indicative price" : "Mid Market Price",
       priceScale,
-      this.volumeScale,
+      volumeScale,
     );
   }
 

src/feature/depth-chart/contents.ts

@@ -63,10 +63,27 @@ export class Contents {
   public render(): void {
     this.renderer.render(this.stage);
   }
+  private _clipPoints = (points: [number, number][], width: number) => {
+    const newPoints: [number, number][] = [];
+    points.forEach((point, index) => {
+      const [x, y] = point;
+      if (index === 0) {
+        newPoints.push(point);
+      } else if (x > width && points[index - 1][0] <= width) {
+        newPoints.push([width, y]);
+      } else if (points[index - 1][0] > width) {
+      } else {
+        newPoints.push(point);
+      }
+    });
+
+    return newPoints;
+  };
 
   public update(
     buyPoints: [number, number][],
     sellPoints: [number, number][],
+    offset: number,
   ): void {
     const resolution = this.renderer.resolution;
 
@@ -80,7 +97,7 @@ export class Contents {
     );
 
     this.sellCurve.update(
-      sellPoints,
+      this._clipPoints(sellPoints, this.renderer.view.width - offset),
       this.renderer.view.height,
       resolution,
       this.colors.sellFill,

src/feature/depth-chart/depth-chart.stories.tsx

@@ -457,7 +457,7 @@ FractionalVolume.args = {
     })),
   },
   priceFormat: (price: number) => numberFormatter(5).format(price),
-  volumeFormat: (volume: number) => numberFormatter(3).format(volume),
+  volumeFormat: (volume: number) => numberFormatter(5).format(volume),
 };
 
 export const UnsortedPriceLevels = Template.bind({});

src/feature/depth-chart/display-objects/vertical-axis.ts

@@ -63,13 +63,15 @@ export class VerticalAxis extends Container {
         fontSize: 12,
       });
 
-      text.x = width - resolution * 7;
+      // text.x = width - resolution * 7;
+      text.x = width + 10;
       text.y = scale(node);
-      text.anchor.set(1, 0.5);
+      text.anchor.set(0, 0.5);
 
-      tickMark.x = width - resolution * 7 + 10;
+      // tickMark.x = width - resolution * 7 + 10;
+      tickMark.x = width;
       tickMark.y = scale(node);
-      tickMark.anchor.set(1, 0.5);
+      tickMark.anchor.set(0, 0.5);
 
       text.updateText(); // TODO: Should not need to call this
 
@@ -84,10 +86,12 @@ export class VerticalAxis extends Container {
       const tm = this.tmByKeyValue.get(tickFormat(node) + "-")!;
 
       text.style.fill = colors.textSecondary;
-      text.x = width - resolution * 7;
+      // text.x = width - resolution * 7;
+      text.x = width + 10;
       text.y = scale(node);
 
-      tm.x = width - resolution * 7 + 10;
+      // tm.x = width - resolution * 7 + 10;
+      tm.x = width;
       tm.y = scale(node);
     }
 

src/feature/depth-chart/ui.ts

@@ -13,6 +13,7 @@ import EventEmitter from "eventemitter3";
 import { clamp } from "lodash";
 
 import { bisectCenter } from "../../util/math/array";
+import { getFloatNumber } from "../../util/math/array/cumsum";
 import { AXIS_HEIGHT } from "./depth-chart";
 import {
   HorizontalAxis,
@@ -353,6 +354,8 @@ export class UI extends EventEmitter {
   }
 
   public update(
+    width: number,
+    height: number,
     prices: number[],
     volumes: number[],
     midPrice: number,
@@ -372,8 +375,8 @@ export class UI extends EventEmitter {
     this.volumeScale = volumeScale;
 
     const resolution = this.renderer.resolution;
-    const height = this.renderer.view.height;
-    const width = this.renderer.view.width;
+    // const height = this.renderer.view.height;
+    // const width = this.renderer.view.width;
 
     // const numTicks = height / resolution / 50;
     // const ticks = volumeScale.ticks(numTicks).filter((tick) => tick !== 0);
@@ -456,7 +459,17 @@ export class UI extends EventEmitter {
       //   .filter((tick) => tick !== 0);
       // const length = ticks[ticks.length - 1]?.toLocaleString().length;
       // const width = this.renderer.view.width - 5 * length - 15; // y offset
-      const width = this.renderer.view.width;
+      const numTicks = this.renderer.view.height / resolution / 50;
+      const ticks = this.volumeScale
+        .ticks(numTicks)
+        .filter((tick) => tick !== 0);
+      const precision = getFloatNumber(ticks[ticks.length - 1]);
+      const size = ticks[ticks.length - 1]?.toLocaleString("en-IN", {
+        maximumFractionDigits: precision,
+        minimumFractionDigits: precision,
+      }).length;
+      console.log("====", size);
+      const width = this.renderer.view.width - 16 * size;
       const height = this.renderer.view.height;
 
       // In auction mode. Curves will in general overlap