fix: make 1D tick mark responsive to width/height

vega · Aug 27, 2024 · 0216dbd · 0216dbd
1 parent 07184dd
commit 0216dbd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
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'});
+    });
+  });
 });