From 8782a3dd8d6bd69d664b5e6e1f0a07db053c2ecd Mon Sep 17 00:00:00 2001
From: Work <work@unknown.home>
Date: Thu, 7 Jul 2022 10:18:17 +0100
Subject: [PATCH] added an optional css class to the x/y axes

---
 src/axis.js                  | 19 +++++++++++++++++++
 test/plots/aapl-bollinger.js |  6 +++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/axis.js b/src/axis.js
index bdef81300d..f779aa9332 100644
--- a/src/axis.js
+++ b/src/axis.js
@@ -18,6 +18,7 @@ export class AxisX {
     label,
     labelAnchor,
     labelOffset,
+    axisClass,
     line,
     tickRotate,
     ariaLabel,
@@ -34,6 +35,7 @@ export class AxisX {
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);
     this.labelOffset = number(labelOffset);
+    this.axisClass = boolean(axisClass);
     this.line = boolean(line);
     this.tickRotate = number(tickRotate);
     this.ariaLabel = string(ariaLabel);
@@ -64,6 +66,7 @@ export class AxisX {
       label,
       labelAnchor,
       labelOffset,
+      axisClass,
       line,
       name,
       tickRotate
@@ -72,6 +75,7 @@ export class AxisX {
     const offsetSign = axis === "top" ? -1 : 1;
     const ty = offsetSign * offset + (axis === "top" ? marginTop : height - marginBottom);
     return create("svg:g", context)
+        .call(applyCssClass, this, 'axis')
         .call(applyAria, this)
         .attr("transform", `translate(${offsetLeft},${ty})`)
         .call(createAxis(axis === "top" ? axisTop : axisBottom, x, this))
@@ -84,6 +88,7 @@ export class AxisX {
           : fy ? gridFacetX(index, fy, -ty)
           : gridX(offsetSign * (marginBottom + marginTop - height)))
         .call(!label ? () => {} : g => g.append("text")
+            .call(applyCssClass, this, 'axis-label')
             .attr("fill", "currentColor")
             .attr("transform", `translate(${
                 labelAnchor === "center" ? (width + marginLeft - marginRight) / 2
@@ -112,6 +117,7 @@ export class AxisY {
     label,
     labelAnchor,
     labelOffset,
+    axisClass,
     line,
     tickRotate,
     ariaLabel,
@@ -128,6 +134,7 @@ export class AxisY {
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);
     this.labelOffset = number(labelOffset);
+    this.axisClass = boolean(axisClass);
     this.line = boolean(line);
     this.tickRotate = number(tickRotate);
     this.ariaLabel = string(ariaLabel);
@@ -156,6 +163,7 @@ export class AxisY {
       label,
       labelAnchor,
       labelOffset,
+      axisClass,
       line,
       name,
       tickRotate
@@ -164,6 +172,7 @@ export class AxisY {
     const offsetSign = axis === "left" ? -1 : 1;
     const tx = offsetSign * offset + (axis === "right" ? width - marginRight : marginLeft);
     return create("svg:g", context)
+        .call(applyCssClass, this, "axis")
         .call(applyAria, this)
         .attr("transform", `translate(${tx},${offsetTop})`)
         .call(createAxis(axis === "right" ? axisRight : axisLeft, y, this))
@@ -176,6 +185,7 @@ export class AxisY {
           : fx ? gridFacetY(index, fx, -tx)
           : gridY(offsetSign * (marginLeft + marginRight - width)))
         .call(!label ? () => {} : g => g.append("text")
+            .call(applyCssClass, this, 'axis-label')
             .attr("fill", "currentColor")
             .attr("font-variant", fontVariant == null ? null : "normal")
             .attr("transform", `translate(${labelOffset * offsetSign},${
@@ -204,6 +214,15 @@ function applyAria(selection, {
   applyAttr(selection, "aria-description", ariaDescription);
 }
 
+function applyCssClass(selection, {
+  name,
+  axisClass,
+}, cssClass) {
+  if(axisClass === true) {
+    applyAttr(selection, "class", `${name}-${cssClass}`);
+  }
+}
+
 function gridX(y2) {
   return g => g.selectAll(".tick line")
     .clone(true)
diff --git a/test/plots/aapl-bollinger.js b/test/plots/aapl-bollinger.js
index ad5423a123..4dddcd9d6c 100644
--- a/test/plots/aapl-bollinger.js
+++ b/test/plots/aapl-bollinger.js
@@ -4,8 +4,12 @@ import * as d3 from "d3";
 export default async function() {
   const AAPL = await d3.csv("data/aapl.csv", d3.autoType);
   return Plot.plot({
+    x: {
+      axisClass: true
+    },
     y: {
-      grid: true
+      grid: true,
+      axisClass: true
     },
     marks: [
       Plot.areaY(AAPL, Plot.map({y1: bollinger(20, -2), y2: bollinger(20, 2)}, {x: "Date", y: "Close", fillOpacity: 0.2})),