diff --git a/src/compile/mark/encode/position-rect.ts b/src/compile/mark/encode/position-rect.ts index b2229b1433b..634696f7173 100644 --- 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 index c24fb48f4a6..2e03bca738f 100644 --- 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 index 77bcd40dc5e..e3780de8e4f 100644 --- 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> = { export const MARK_CONFIGS = keys(MARK_CONFIG_INDEX); -export interface RectConfig extends RectBinSpacingMixins, MarkConfig { +export type RectConfig = RectBinSpacingMixins & + MarkConfig & + BandSizeConfigMixins; + +interface BandSizeConfigMixins { /** * The default size of the bars on continuous scales. * @@ -667,7 +671,10 @@ export const defaultRectConfig: RectConfig = { timeUnitBandPosition: 0.5 }; -export interface TickConfig extends MarkConfig, TickThicknessMixins { +export interface TickConfig + extends MarkConfig, + TickThicknessMixins, + BandSizeConfigMixins { /** * The width of the ticks. * @@ -678,7 +685,10 @@ export interface TickConfig extends MarkConfig = { - thickness: 1 + thickness: 1, + discreteBandSize: {band: 0.75}, + timeUnitBandPosition: 0.5, + timeUnitBandSize: 0.75 }; export function getMarkType(m: string | GenericMarkDef) {