Merge pull request #925 from vegaprotocol/5157-axis-on-funding-rate-s…

…hould-indicate-percentage feat: add option to format y-axis tick in LineChart
vegaprotocol · Nov 23, 2023 · 7b2485d · 7b2485d
2 parents 3fd82a9 + 22f9f2c
commit 7b2485d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/src/feature/line-chart/chart.ts b/src/feature/line-chart/chart.ts
@@ -36,6 +36,7 @@ export class Chart extends EventEmitter {
 
   private _data: Data = { cols: [], rows: [] };
   private priceFormat: (price: number) => string;
+  private yAxisTickFormat: string | undefined;
   private xFormat: (x: number) => string;
   private _colors: Colors;
 
@@ -46,12 +47,14 @@ export class Chart extends EventEmitter {
     width: number;
     height: number;
     priceFormat: (price: number) => string;
+    yAxisTickFormat?: string;
     xFormat: (x: number) => string;
     colors: Colors;
   }) {
     super();
 
     this.priceFormat = options.priceFormat;
+    this.yAxisTickFormat = options.yAxisTickFormat;
     this.xFormat = options.xFormat;
     this._colors = options.colors;
 
@@ -144,7 +147,14 @@ export class Chart extends EventEmitter {
 
     this.ui.colors = this._colors;
 
-    this.ui.update(this._data, xr, this.xFormat, yr, this.priceFormat);
+    this.ui.update(
+      this._data,
+      xr,
+      this.xFormat,
+      yr,
+      this.priceFormat,
+      this.yAxisTickFormat,
+    );
   }
 
   private onZoomStart = (t: ZoomTransform) => {

diff --git a/src/feature/line-chart/line-chart.tsx b/src/feature/line-chart/line-chart.tsx
@@ -59,6 +59,11 @@ export type LineChartProps<A> = {
    */
   priceFormat?: (price: number) => string;
 
+  /**
+   * Specifier for y axis tick format
+   */
+  yAxisTickFormat?: string;
+
   /**
    * Light or dark theme.
    */
@@ -87,6 +92,7 @@ export const LineChart = <A,>({
   theme = "dark",
   tooltip,
   xFormat = defaultNumberFormat,
+  yAxisTickFormat,
 }: LineChartProps<A>) => {
   /**
    * Where to render chart contents, e.g. line series.
@@ -136,6 +142,7 @@ export const LineChart = <A,>({
       width: 300,
       height: 300,
       priceFormat,
+      yAxisTickFormat,
       xFormat,
       colors,
     });
@@ -199,7 +206,7 @@ export const LineChart = <A,>({
     return () => {
       chartRef.current.destroy();
     };
-  }, [annotations, data.cols, priceFormat, xFormat]);
+  }, [annotations, data.cols, priceFormat, xFormat, yAxisTickFormat]);
 
   // Update chart when dimensions or data change
   useEffect(() => {

diff --git a/src/feature/line-chart/ui.ts b/src/feature/line-chart/ui.ts
@@ -173,6 +173,7 @@ export class UI extends EventEmitter {
     xFormat: (x: number) => string,
     priceScale: ScaleLinear,
     priceFormat: (price: number) => string,
+    yAxisTickFormat?: string,
   ): void {
     this.data = data;
     this.xScale = xScale;
@@ -219,6 +220,7 @@ export class UI extends EventEmitter {
       height - resolution * AXIS_HEIGHT,
       resolution,
       this.colors,
+      yAxisTickFormat,
     );
 
     // TODO: Abstract the vertical axis separator functionality

diff --git a/src/ui/display-objects/vertical-axis.ts b/src/ui/display-objects/vertical-axis.ts
@@ -60,6 +60,7 @@ export class VerticalAxis extends Container {
     height: number,
     resolution: number = 1,
     colors: VerticalAxisColors,
+    tickFormatSpecifier?: string,
   ) {
     this.overlay.clear();
     this.overlay.beginFill(colors.backgroundSurface, 0.7);
@@ -75,7 +76,7 @@ export class VerticalAxis extends Container {
 
     const numTicks = height / resolution / 50;
     const ticks = scale.ticks(numTicks);
-    const tickFormat = scale.tickFormat(numTicks);
+    const tickFormat = scale.tickFormat(numTicks, tickFormatSpecifier);
 
     const enter = ticks.filter(
       (tick) => !this.nodeByKeyValue.has(tickFormat(tick)),