fix: make tick support relative band size (so it works better with binned fields) #9176
Conversation
(by sharing the code for tick's dimension axis with rectangle/bar) Also convert `RectBinSpacingMixins` into `BandSizeConfigMixins`
src/compile/mark/tick.ts
Outdated
There was a problem hiding this comment.
This file has the core change to use positionRect with tick instead.
| @@ -77,7 +77,7 @@ function defaultType( | |||
| } | |||
|
|
|||
| if (isXorY(channel) || isXorYOffset(channel)) { | |||
| if (util.contains(['rect', 'bar', 'image', 'rule'], mark.type)) { | |||
| if (util.contains(['rect', 'bar', 'image', 'tick', 'rule'], mark.type)) { | |||
There was a problem hiding this comment.
Need to make tick use band scale by default, just like bar/rect, to leverage the same set of logic.
| @@ -284,17 +284,6 @@ export interface MarkConfig<ES extends ExprRef | SignalRef> | |||
| outerRadius?: number | ES; | |||
| } | |||
|
|
|||
| export interface RectBinSpacingMixins { | |||
There was a problem hiding this comment.
This is blended with BandSizeConfigMixins below
kanitw
changed the title
| line: ['point'], | ||
| tick: ['bandSize', 'thickness'] | ||
| tick: ['bandSize', 'thickness', ...VL_ONLY_BAND_SIZE_CONFIG_MIXINS_PROPS] |
There was a problem hiding this comment.
FYI, we need to add this, so we don't output these properties in the output Vega config.
| export interface TickConfig<ES extends ExprRef | SignalRef> | ||
| extends MarkConfig<ES>, | ||
| TickThicknessMixins, | ||
| BandSizeConfigMixins<ES> { |
There was a problem hiding this comment.
Tick now has BandSizeConfigMixins, because we're making tick more adaptable to band + support relative band size, by using rectPosition.
… 0.5}) for bars and ticks
| @@ -678,7 +690,10 @@ export interface TickConfig<ES extends ExprRef | SignalRef> extends MarkConfig<E | |||
| } | |||
|
|
|||
| export const defaultTickConfig: TickConfig<SignalRef> = { | |||
| thickness: 1 | |||
| thickness: 1, | |||
| discreteBandSize: {band: 0.75}, | |||
There was a problem hiding this comment.
0.75 here are mainly to match 3/4 multiplier in the old code:
There was a problem hiding this comment.
The two screenshots look the same to me.
| "name": "height", | ||
| "update": "bandspace(domain('y').length, 1, 0.5) * y_step" | ||
| } | ||
| {"name": "height", "update": "bandspace(domain('y').length, 0, 0) * y_step"} |
There was a problem hiding this comment.
This diff is coming from switching scale types.
Please review and merge #9178 first (since it will fix one of the bad screenshot diffs).
(After merging, #9178 into this PR, we also fixed 2aeffca.)
Context: Bar/Rect marks use
encode.rectPosition, which has sophisticated logic to determine x+width, or y+height.However, tick previously only use
encode.pointPositionto determine X & Y andencode.nonPositionand localizeddefaultSizeto determine width or height depending on orientation.With this PR, we make tick's width dynamic to the bin too.
Also, this is a prerequisite to make tick support relative band width
This PR replaces local
defaultSizecalculate to make bar share the rules for its dimension axis with bar/rect and thus allow ticks to better adapt to binned fields.cc: @richardliu-db