feature: restore gridlines to composed charts

note: we do not support spacing of grid lines, or minor gridlines

Author: Ben Lerner

src/arr/trove/charts.arr

@@ -511,8 +511,12 @@ show-minor-grid-lines-method = method(self, is-showing :: Boolean):
   self.constr()(self.obj.{show-minor-grid-lines: is-showing})
 end
 
+show-grid-lines-method = method(self, is-showing :: Boolean):
+  self.constr()(self.obj.{show-grid-lines: is-showing})
+end
+
 gridlines-color-method = method(self, color ::  I.Color):
-  self.constr()(self.obj.{gridlineColor: some(color)})
+  self.constr()(self.obj.{show-grid-lines: true, gridlineColor: some(color)})
 end
 
 minor-gridlines-color-method = method(self, color ::  I.Color):
@@ -1459,6 +1463,8 @@ type PlotChartWindowObject = {
   borderSize :: Number, 
   borderColor :: Option<I.Color>, 
   render :: ( -> IM.Image),
+  show-grid-lines :: Boolean,
+  show-minor-grid-lines :: Boolean,
   gridlineColor :: Option<I.Color>, 
   gridlineMinspacing :: Option<Number>, 
   minorGridlineColor :: Option<I.Color>, 
@@ -1476,6 +1482,7 @@ type PlotChartWindowObject = {
 default-plot-chart-window-object :: PlotChartWindowObject = default-chart-window-object.{
   x-axis: '',
   y-axis: '',
+  show-grid-lines: true,
   show-minor-grid-lines: false,
   x-min: none,
   x-max: none,
@@ -1722,11 +1729,12 @@ data ChartWindow:
     y-max: y-max-method,
   | plot-chart-window(obj :: PlotChartWindowObject) with:
     constr: {(): plot-chart-window},
-    show-minor-gridlines: show-minor-grid-lines-method,
+    show-gridlines: show-grid-lines-method,
     gridlines-color: gridlines-color-method, 
-    gridlines-minspacing: gridlines-min-spacing-method, 
-    minor-gridlines-color: minor-gridlines-color-method, 
-    minor-gridlines-minspacing: minor-gridlines-min-spacing-method, 
+    # gridlines-minspacing: gridlines-min-spacing-method, 
+    # show-minor-gridlines: show-minor-grid-lines-method,
+    # minor-gridlines-color: minor-gridlines-color-method, 
+    # minor-gridlines-minspacing: minor-gridlines-min-spacing-method, 
     x-axis: x-axis-method,
     y-axis: y-axis-method,
     x-min: x-min-method,

src/js/trove/charts-lib.js

@@ -174,14 +174,15 @@
       const hAxis = options.hAxis ??= {};
       const vAxis = options.vAxis ??= {};
 
-      const gridlineColor = getColorOrDefault(globalOptions['gridlineColor'], "#aaa");
+      const showGridlines = isTrue(globalOptions['show-grid-lines']);
+      const gridlineColor = getColorOrDefault(globalOptions['gridlineColor'], undefined);
 
-      const minorGridlineColor = getColorOrDefault(globalOptions['minorGridlineColor'], "#ddd");
+      const minorGridlineColor = getColorOrDefault(globalOptions['minorGridlineColor'], undefined);
 
       const minorGridlineMinspacing = toFixnum(globalOptions['minorGridlineMinspacing'])
 
-      hAxis.gridlines = {color: gridlineColor};
-      vAxis.gridlines = {color: gridlineColor};
+      hAxis.gridlines = {show: showGridlines, color: gridlineColor};
+      vAxis.gridlines = {show: showGridlines, color: gridlineColor};
 
       cases(RUNTIME.ffi.isOption, 'Option', globalOptions['gridlineMinspacing'], {
         none: function () {
@@ -2684,6 +2685,9 @@
       // NOTE: For the axes, we're going to want to put the bar lines at the zeros
       // of the domains, rather than the edges of the chart
       const axes = [
+        { orient: 'bottom', scale: `xscale`, zindex: 0,
+          grid: gridlines.hAxis.gridlines.show, gridColor: gridlines.hAxis.gridlines.color,
+          domain: false, tickOpacity: 0, labelOpacity: 0 },
         { orient: 'bottom', scale: `xscale`, zindex: 1, title: xAxisLabel,
           domain: false, tickOpacity: 0, labelOpacity: 0 },
         { orient: 'bottom', scale: `xscale`, zindex: 1, 
@@ -2692,6 +2696,9 @@
                     signal: `clamp(0, domain('yscale')[0], domain('yscale')[1])`,
                     offset: { signal: 'height', mult: -1 } }
         },
+        { orient: 'left', scale: `yscale`, zindex: 0,
+          grid: gridlines.vAxis.gridlines.show, gridColor: gridlines.vAxis.gridlines.color,
+          domain: false, tickOpacity: 0, labelOpacity: 0 },
         { orient: 'left', scale: `yscale`, zindex: 1, title: yAxisLabel,
           domain: false, tickOpacity: 0, labelOpacity: 0 },
         { orient: 'left', scale: `yscale`, zindex: 1,