fix: better adapt tick width dimension with binned fields

(by sharing the code for tick's dimension axis with rectangle/bar)
vega · Nov 15, 2023 · 8624167 · 8624167
1 parent e71751e
commit 8624167
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 46 deletions.
diff --git a/src/compile/mark/encode/position-rect.ts b/src/compile/mark/encode/position-rect.ts
@@ -50,7 +50,9 @@ export function rectPosition(model: UnitModel, channel: 'x' | 'y' | 'theta' | 'r
 
   const offsetScaleChannel = getOffsetChannel(channel);
 
-  const isBarBand = mark === 'bar' && (channel === 'x' ? orient === 'vertical' : orient === 'horizontal');
+  const isBandChannel =
+    (mark === 'bar' && (channel === 'x' ? orient === 'vertical' : orient === 'horizontal')) ||
+    (mark === 'tick' && (channel === 'x' ? orient === 'horizontal' : orient === 'vertical'));
 
   // x, x2, and width -- we must specify two of these in all conditions
   if (
@@ -66,7 +68,7 @@ export function rectPosition(model: UnitModel, channel: 'x' | 'y' | 'theta' | 'r
       channel,
       model
     });
-  } else if (((isFieldOrDatumDef(channelDef) && hasDiscreteDomain(scaleType)) || isBarBand) && !channelDef2) {
+  } else if (((isFieldOrDatumDef(channelDef) && hasDiscreteDomain(scaleType)) || isBandChannel) && !channelDef2) {
     return positionAndSize(channelDef, channel, model);
   } else {
     return rangePosition(channel, model, {defaultPos: 'zeroOrMax', defaultPos2: 'zeroOrMin'});
@@ -136,7 +138,7 @@ function positionAndSize(
   channel: 'x' | 'y' | 'theta' | 'radius',
   model: UnitModel
 ) {
-  const {markDef, encoding, config, stack} = model;
+  const {mark, markDef, encoding, config, stack} = model;
   const orient = markDef.orient;
 
   const scaleName = model.scaleName(channel);
@@ -149,7 +151,11 @@ function positionAndSize(
   const offsetScale = model.getScaleComponent(getOffsetScaleChannel(channel));
 
   // use "size" channel for bars, if there is orient and the channel matches the right orientation
-  const useVlSizeChannel = (orient === 'horizontal' && channel === 'y') || (orient === 'vertical' && channel === 'x');
+  const useVlSizeChannel =
+    mark === 'tick'
+      ? // tick's orientation is opposite to other marks
+        (orient === 'vertical' && channel === 'y') || (orient === 'horizontal' && channel === 'x')
+      : (orient === 'horizontal' && channel === 'y') || (orient === 'vertical' && channel === 'x');
 
   // Use size encoding / mark property / config if it exists
   let sizeMixins;

diff --git a/src/compile/mark/tick.ts b/src/compile/mark/tick.ts
@@ -1,7 +1,3 @@
-import type {SignalRef} from 'vega';
-import {isNumber} from 'vega-util';
-import {getViewConfigDiscreteStep} from '../../config';
-import {isVgRangeStep} from '../../vega.schema';
 import {getMarkPropOrConfig, signalOrValueRef} from '../common';
 import {UnitModel} from '../unit';
 import {MarkCompiler} from './base';
@@ -14,10 +10,9 @@ export const tick: MarkCompiler = {
     const {config, markDef} = model;
     const orient = markDef.orient;
 
-    const vgSizeChannel = orient === 'horizontal' ? 'width' : 'height';
     const vgThicknessChannel = orient === 'horizontal' ? 'height' : 'width';
 
-    return {
+    const baseAndThickness = {
       ...encode.baseEncodeEntry(model, {
         align: 'ignore',
         baseline: 'ignore',
@@ -26,40 +21,22 @@ export const tick: MarkCompiler = {
         size: 'ignore',
         theta: 'ignore'
       }),
-
-      ...encode.pointPosition('x', model, {defaultPos: 'mid', vgChannel: 'xc'}),
-      ...encode.pointPosition('y', model, {defaultPos: 'mid', vgChannel: 'yc'}),
-
-      // size / thickness => width / height
-      ...encode.nonPosition('size', model, {
-        defaultValue: defaultSize(model),
-        vgChannel: vgSizeChannel
-      }),
       [vgThicknessChannel]: signalOrValueRef(getMarkPropOrConfig('thickness', markDef, config))
     };
-  }
-};
-
-function defaultSize(model: UnitModel): number | SignalRef {
-  const {config, markDef} = model;
-  const {orient} = markDef;
 
-  const vgSizeChannel = orient === 'horizontal' ? 'width' : 'height';
-  const scale = model.getScaleComponent(orient === 'horizontal' ? 'x' : 'y');
-
-  const markPropOrConfig =
-    getMarkPropOrConfig('size', markDef, config, {vgChannel: vgSizeChannel}) ?? config.tick.bandSize;
-
-  if (markPropOrConfig !== undefined) {
-    return markPropOrConfig;
-  } else {
-    const scaleRange = scale ? scale.get('range') : undefined;
-    if (scaleRange && isVgRangeStep(scaleRange) && isNumber(scaleRange.step)) {
-      return (scaleRange.step * 3) / 4;
+    if (orient === 'horizontal') {
+      return {
+        ...baseAndThickness,
+        ...encode.rectPosition(model, 'x'),
+        ...encode.pointPosition('y', model, {defaultPos: 'mid', vgChannel: 'yc'})
+      };
+    } else {
+      // vertical
+      return {
+        ...baseAndThickness,
+        ...encode.pointPosition('x', model, {defaultPos: 'mid', vgChannel: 'xc'}),
+        ...encode.rectPosition(model, 'y')
+      };
     }
-
-    const defaultViewStep = getViewConfigDiscreteStep(config.view, vgSizeChannel);
-
-    return (defaultViewStep * 3) / 4;
   }
-}
+};
diff --git a/src/mark.ts b/src/mark.ts
@@ -50,7 +50,7 @@ export function isPathMark(m: Mark | CompositeMark): m is 'line' | 'area' | 'tra
 }
 
 export function isRectBasedMark(m: Mark | CompositeMark): m is 'rect' | 'bar' | 'image' | 'arc' {
-  return ['rect', 'bar', 'image', 'arc' /* arc is rect/interval in polar coordinate */].includes(m);
+  return ['rect', 'bar', 'image', 'arc', 'tick' /* arc is rect/interval in polar coordinate */].includes(m);
 }
 
 export const PRIMITIVE_MARKS = new Set(keys(Mark));
@@ -427,7 +427,11 @@ const MARK_CONFIG_INDEX: Flag<keyof MarkConfigMixins<any>> = {
 
 export const MARK_CONFIGS = keys(MARK_CONFIG_INDEX);
 
-export interface RectConfig<ES extends ExprRef | SignalRef> extends RectBinSpacingMixins, MarkConfig<ES> {
+export type RectConfig<ES extends ExprRef | SignalRef> = RectBinSpacingMixins &
+  MarkConfig<ES> &
+  BandSizeConfigMixins<ES>;
+
+interface BandSizeConfigMixins<ES extends ExprRef | SignalRef> {
   /**
    * The default size of the bars on continuous scales.
    *
@@ -667,7 +671,10 @@ export const defaultRectConfig: RectConfig<SignalRef> = {
   timeUnitBandPosition: 0.5
 };
 
-export interface TickConfig<ES extends ExprRef | SignalRef> extends MarkConfig<ES>, TickThicknessMixins {
+export interface TickConfig<ES extends ExprRef | SignalRef>
+  extends MarkConfig<ES>,
+    TickThicknessMixins,
+    BandSizeConfigMixins<ES> {
   /**
    * The width of the ticks.
    *
@@ -678,7 +685,10 @@ export interface TickConfig<ES extends ExprRef | SignalRef> extends MarkConfig<E
 }
 
 export const defaultTickConfig: TickConfig<SignalRef> = {
-  thickness: 1
+  thickness: 1,
+  discreteBandSize: {band: 0.75},
+  timeUnitBandPosition: 0.5,
+  timeUnitBandSize: 0.75
 };
 
 export function getMarkType(m: string | GenericMarkDef<any>) {