fix: make 1D tick mark responsive to width/height (#9411)

## PR Description See fixed example + relevant unit tests --------- Co-authored-by: GitHub Actions Bot <[email protected]>
vega · Aug 28, 2024 · c0c7b6b · c0c7b6b
1 parent ef70cb8
commit c0c7b6b
Show file tree

Hide file tree

Showing 15 changed files with 129 additions and 15 deletions.
diff --git a/examples/compiled/bar_tooltip_aggregate.vg.json b/examples/compiled/bar_tooltip_aggregate.vg.json
@@ -41,7 +41,7 @@
           },
           "xc": {"signal": "width", "mult": 0.5},
           "yc": {"scale": "y", "field": "mean_data"},
-          "width": {"value": 15},
+          "width": {"signal": "(1 - 0.25) * width"},
           "height": {"value": 1}
         }
       }

diff --git a/examples/compiled/bar_tooltip_groupby.vg.json b/examples/compiled/bar_tooltip_groupby.vg.json
@@ -43,7 +43,7 @@
           },
           "xc": {"signal": "width", "mult": 0.5},
           "yc": {"scale": "y", "field": "mean_data"},
-          "width": {"value": 15},
+          "width": {"signal": "(1 - 0.25) * width"},
           "height": {"value": 1}
         }
       }

diff --git a/examples/compiled/boxplot_1D_horizontal_custom_mark.vg.json b/examples/compiled/boxplot_1D_horizontal_custom_mark.vg.json
@@ -213,7 +213,7 @@
           },
           "xc": {"scale": "x", "field": "lower_whisker_Body Mass (g)"},
           "yc": {"signal": "height", "mult": 0.5},
-          "height": {"value": 15},
+          "height": {"signal": "(1 - 0.25) * height"},
           "width": {"value": 1}
         }
       }
@@ -233,7 +233,7 @@
           },
           "xc": {"scale": "x", "field": "upper_whisker_Body Mass (g)"},
           "yc": {"signal": "height", "mult": 0.5},
-          "height": {"value": 15},
+          "height": {"signal": "(1 - 0.25) * height"},
           "width": {"value": 1}
         }
       }

diff --git a/examples/compiled/errorbar_2d_vertical_ticks.png b/examples/compiled/errorbar_2d_vertical_ticks.png
diff --git a/examples/compiled/errorbar_2d_vertical_ticks.svg b/examples/compiled/errorbar_2d_vertical_ticks.svg
diff --git a/examples/compiled/errorbar_2d_vertical_ticks.vg.json b/examples/compiled/errorbar_2d_vertical_ticks.vg.json
@@ -71,7 +71,7 @@
           },
           "xc": {"scale": "x", "field": "year_Year"},
           "yc": {"scale": "y", "field": "lower_Miles_per_Gallon"},
-          "width": {"value": 15},
+          "width": {"signal": "(1 - 0.25) * width"},
           "height": {"value": 1}
         }
       }
@@ -91,7 +91,7 @@
           },
           "xc": {"scale": "x", "field": "year_Year"},
           "yc": {"scale": "y", "field": "upper_Miles_per_Gallon"},
-          "width": {"value": 15},
+          "width": {"signal": "(1 - 0.25) * width"},
           "height": {"value": 1}
         }
       }

diff --git a/examples/compiled/facet_bullet.vg.json b/examples/compiled/facet_bullet.vg.json
@@ -439,7 +439,7 @@
               },
               "xc": {"scale": "child_x", "field": "markers\\.0"},
               "yc": {"signal": "child_height", "mult": 0.5},
-              "height": {"value": 15},
+              "height": {"signal": "(1 - 0.25) * child_height"},
               "width": {"value": 2}
             }
           }

diff --git a/examples/compiled/tick_dot.vg.json b/examples/compiled/tick_dot.vg.json
@@ -34,7 +34,7 @@
           },
           "xc": {"scale": "x", "field": "precipitation"},
           "yc": {"signal": "height", "mult": 0.5},
-          "height": {"value": 15},
+          "height": {"signal": "(1 - 0.25) * height"},
           "width": {"value": 1}
         }
       }

diff --git a/examples/compiled/tick_sort.vg.json b/examples/compiled/tick_sort.vg.json
@@ -34,7 +34,7 @@
           },
           "xc": {"scale": "x", "field": "Horsepower"},
           "yc": {"signal": "height", "mult": 0.5},
-          "height": {"value": 15},
+          "height": {"signal": "(1 - 0.25) * height"},
           "width": {"value": 1}
         }
       }

diff --git a/examples/compiled/tick_strip_1D_with_height.png b/examples/compiled/tick_strip_1D_with_height.png
diff --git a/examples/compiled/tick_strip_1D_with_height.svg b/examples/compiled/tick_strip_1D_with_height.svg
diff --git a/examples/compiled/tick_strip_1D_with_height.vg.json b/examples/compiled/tick_strip_1D_with_height.vg.json
@@ -0,0 +1,78 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "background": "white",
+  "padding": 5,
+  "width": 200,
+  "height": 200,
+  "style": "cell",
+  "data": [
+    {
+      "name": "source_0",
+      "url": "data/cars.json",
+      "format": {"type": "json"},
+      "transform": [
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"Horsepower\"]) && isFinite(+datum[\"Horsepower\"])"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "rect",
+      "style": ["tick"],
+      "from": {"data": "source_0"},
+      "encode": {
+        "update": {
+          "opacity": {"value": 0.7},
+          "fill": {"value": "#4c78a8"},
+          "ariaRoleDescription": {"value": "tick"},
+          "description": {
+            "signal": "\"Horsepower: \" + (format(datum[\"Horsepower\"], \"\"))"
+          },
+          "xc": {"scale": "x", "field": "Horsepower"},
+          "yc": {"signal": "height", "mult": 0.5},
+          "height": {"signal": "(1 - 0.25) * height"},
+          "width": {"value": 1}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "x",
+      "type": "linear",
+      "domain": {"data": "source_0", "field": "Horsepower"},
+      "range": [0, {"signal": "width"}],
+      "nice": true,
+      "zero": true
+    }
+  ],
+  "axes": [
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": true,
+      "tickCount": {"signal": "ceil(width/40)"},
+      "domain": false,
+      "labels": false,
+      "aria": false,
+      "maxExtent": 0,
+      "minExtent": 0,
+      "ticks": false,
+      "zindex": 0
+    },
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": false,
+      "title": "Horsepower",
+      "labelFlush": true,
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(width/40)"},
+      "zindex": 0
+    }
+  ]
+}
diff --git a/examples/specs/tick_strip_1D_with_height.vl.json b/examples/specs/tick_strip_1D_with_height.vl.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": {"url": "data/cars.json"},
+  "height": 200,
+  "mark": "tick",
+  "encoding": {
+    "x": {"field": "Horsepower", "type": "quantitative"}
+  }
+}
diff --git a/src/compile/mark/tick.ts b/src/compile/mark/tick.ts
@@ -1,5 +1,4 @@
 import {isNumber} from 'vega-util';
-import {getViewConfigDiscreteStep} from '../../config';
 import {isVgRangeStep, VgValueRef} from '../../vega.schema';
 import {exprFromSignalRefOrValue, getMarkPropOrConfig, signalOrValueRef} from '../common';
 import {UnitModel} from '../unit';
@@ -51,26 +50,25 @@ function defaultSize(model: UnitModel): VgValueRef {
 
   // Use offset scale if exists
   const scale = model.getScaleComponent(offsetScaleChannel) || model.getScaleComponent(positionChannel);
-  const scaleName = model.scaleName(offsetScaleChannel) || model.scaleName(positionChannel);
 
   const markPropOrConfig =
     getMarkPropOrConfig('size', markDef, config, {vgChannel: vgSizeChannel}) ?? config.tick.bandSize;
 
   if (markPropOrConfig !== undefined) {
     return signalOrValueRef(markPropOrConfig);
   } else if (scale?.get('type') === 'band') {
+    const scaleName = model.scaleName(offsetScaleChannel) || model.scaleName(positionChannel);
     return {scale: scaleName, band: 1};
   }
 
   const scaleRange = scale?.get('range');
   const {tickBandPaddingInner} = config.scale;
 
-  const step =
-    scaleRange && isVgRangeStep(scaleRange) ? scaleRange.step : getViewConfigDiscreteStep(config.view, vgSizeChannel);
+  const step = scaleRange && isVgRangeStep(scaleRange) ? scaleRange.step : model[vgSizeChannel];
 
   if (isNumber(step) && isNumber(tickBandPaddingInner)) {
     return {value: step * (1 - tickBandPaddingInner)};
   } else {
-    return {signal: `${exprFromSignalRefOrValue(tickBandPaddingInner)} * ${exprFromSignalRefOrValue(step)}`};
+    return {signal: `(1 - ${exprFromSignalRefOrValue(tickBandPaddingInner)}) * ${exprFromSignalRefOrValue(step)}`};
   }
 }
diff --git a/test/compile/mark/tick.test.ts b/test/compile/mark/tick.test.ts
@@ -206,4 +206,32 @@ describe('Mark: Tick', () => {
       expect(props.height).toEqual({field: 'Acceleration', scale: SIZE});
     });
   });
+
+  describe('vertical ticks without Y', () => {
+    const model = parseUnitModelWithScaleAndLayoutSize({
+      mark: 'tick',
+      encoding: {
+        x: {field: 'Horsepower', type: 'quantitative'}
+      },
+      data: {url: 'data/cars.json'}
+    });
+    const props = tick.encodeEntry(model);
+    it('sets mark height to (1-tickBandPaddingInner) * plot_height', () => {
+      expect(props.height).toEqual({signal: '(1 - 0.25) * height'});
+    });
+  });
+
+  describe('horizontal ticks without X', () => {
+    const model = parseUnitModelWithScaleAndLayoutSize({
+      mark: 'tick',
+      encoding: {
+        y: {field: 'Horsepower', type: 'quantitative'}
+      },
+      data: {url: 'data/cars.json'}
+    });
+    const props = tick.encodeEntry(model);
+    it('sets mark width to (1-tickBandPaddingInner) * plot_width', () => {
+      expect(props.width).toEqual({signal: '(1 - 0.25) * width'});
+    });
+  });
 });