Merge pull request #919 from vegaprotocol/feat/grid-colors-zero-axis

feat: amend grid color, display 0 label on vertical axis
vegaprotocol · Oct 24, 2023 · 61a1bb1 · 61a1bb1
2 parents dac7015 + f84b3ee
commit 61a1bb1
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 13 deletions.
diff --git a/src/feature/area-chart/contents.ts b/src/feature/area-chart/contents.ts
@@ -17,6 +17,7 @@ type ContentsColors = Pick<
   | "accent5"
   | "accent6"
   | "backgroundSurface"
+  | "emphasis100"
   | "positiveFill"
   | "positiveStroke"
   | "negativeFill"
@@ -50,8 +51,8 @@ export class Contents {
 
     this.colors = options.colors;
 
-    this.horizontalGrid = new HorizontalGrid();
-    this.verticalgrid = new VerticalGrid();
+    this.horizontalGrid = new HorizontalGrid(this.colors.emphasis100);
+    this.verticalgrid = new VerticalGrid(this.colors.emphasis100);
     this.series = range(0, 5).map(() => new AreaCurve());
 
     this.stage.addChild(this.horizontalGrid);

diff --git a/src/feature/line-chart/contents.ts b/src/feature/line-chart/contents.ts
@@ -14,6 +14,7 @@ type ContentsColors = Pick<
   | "accent4"
   | "accent5"
   | "accent6"
+  | "emphasis100"
   | "backgroundSurface"
   | "positiveFill"
   | "positiveStroke"
@@ -48,8 +49,8 @@ export class Contents {
 
     this.colors = options.colors;
 
-    this.horizontalGrid = new HorizontalGrid();
-    this.verticalgrid = new VerticalGrid();
+    this.horizontalGrid = new HorizontalGrid(this.colors.emphasis100);
+    this.verticalgrid = new VerticalGrid(this.colors.emphasis100);
     this.series = range(0, 5).map(() => new LineCurve());
 
     this.stage.addChild(this.horizontalGrid);

diff --git a/src/feature/price-chart/contents.ts b/src/feature/price-chart/contents.ts
@@ -14,6 +14,7 @@ type ContentsColors = Pick<
   | "accent5"
   | "accent6"
   | "backgroundSurface"
+  | "emphasis100"
   | "positiveFill"
   | "positiveStroke"
   | "negativeFill"
@@ -47,8 +48,8 @@ export class Contents {
 
     this.colors = options.colors;
 
-    this.horizontalGrid = new HorizontalGrid();
-    this.verticalgrid = new VerticalGrid();
+    this.horizontalGrid = new HorizontalGrid(this.colors.emphasis100);
+    this.verticalgrid = new VerticalGrid(this.colors.emphasis100);
     this.priceCurve = new Area(options.colors);
 
     this.stage.addChild(this.horizontalGrid);

diff --git a/src/ui/display-objects/horizontal-grid.ts b/src/ui/display-objects/horizontal-grid.ts
@@ -10,9 +10,11 @@ export class HorizontalGrid extends Container {
    * Cache ticks
    */
   private nodeByKeyValue = new Map<number, Graphics>();
+  private color: number;
 
-  constructor() {
+  constructor(color = 0x3d3d3d) {
     super();
+    this.color = color;
   }
 
   public update(
@@ -56,7 +58,7 @@ export class HorizontalGrid extends Container {
       line.clear();
       line.lineStyle({
         width: 1,
-        color: 0x3d3d3d,
+        color: this.color,
         lineDash: [],
       });
       line.moveTo(0.5, 0);
@@ -76,7 +78,7 @@ export class HorizontalGrid extends Container {
       line.clear();
       line.lineStyle({
         width: 1,
-        color: 0x3d3d3d,
+        color: this.color,
         lineDash: [],
       });
       line.moveTo(0.5, 0);

diff --git a/src/ui/display-objects/vertical-axis.ts b/src/ui/display-objects/vertical-axis.ts
@@ -74,7 +74,7 @@ export class VerticalAxis extends Container {
     this.overlay.endFill();
 
     const numTicks = height / resolution / 50;
-    const ticks = scale.ticks(numTicks).filter((tick) => tick !== 0);
+    const ticks = scale.ticks(numTicks);
     const tickFormat = scale.tickFormat(numTicks);
 
     const enter = ticks.filter(

diff --git a/src/ui/display-objects/vertical-grid.ts b/src/ui/display-objects/vertical-grid.ts
@@ -10,8 +10,11 @@ export class VerticalGrid extends Container {
    */
   private nodeByKeyValue = new Map<string, Graphics>();
 
-  constructor() {
+  private color: number;
+
+  constructor(color = 0x3d3d3d) {
     super();
+    this.color = color;
   }
 
   public update(
@@ -42,7 +45,7 @@ export class VerticalGrid extends Container {
       line.clear();
       line.lineStyle({
         width: 1,
-        color: 0x3d3d3d,
+        color: this.color,
         lineDash: [],
       });
       line.moveTo(0, 0.5);
@@ -61,7 +64,7 @@ export class VerticalGrid extends Container {
 
       line.lineStyle({
         width: 1,
-        color: 0x3d3d3d,
+        color: this.color,
         lineDash: [],
       });