Conversation
✅ Heimdall Review Status
✅
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
✅
1/1
|
Denominator calculation
|
| /** | ||
| * Whether to animate gradient changes. | ||
| */ | ||
| animate?: boolean; |
There was a problem hiding this comment.
Moving this to base props
| ); | ||
| })} | ||
| </linearGradient> | ||
| </motion.linearGradient> |
There was a problem hiding this comment.
Support animations on gradient
| }, | ||
| { | ||
| price: '0.06', | ||
| price: '1173.74', |
There was a problem hiding this comment.
Fixing a random bug I've been seeing with price
| * Baseline value for the area. | ||
| * When set, overrides the default baseline. | ||
| */ | ||
| areaBaseline?: number; |
There was a problem hiding this comment.
Baseline on Areas were broken so having this at the axis level should solve it.
| ```jsx live | ||
| function PriceRange() { | ||
| const candles = btcCandles.slice(0, 180).reverse(); | ||
| const candles = [...btcCandles].reverse().slice(0, 180); |
There was a problem hiding this comment.
This was causing issues across the board since props would affect all other examples that use btcCandles.
| <Gradient | ||
| animate={shouldAnimate} | ||
| gradient={gradient} | ||
| transition={transitions?.update ?? transition} |
There was a problem hiding this comment.
We are now animating transitions
| * | ||
| * @default 0 for value axes, undefined for category axes | ||
| */ | ||
| baseline?: number; |
There was a problem hiding this comment.
This concept wouldn't be relevant for a polar chart.
| const chartSeries = useMemo(() => { | ||
| return series?.map( | ||
| (s): Series => ({ | ||
| id: s.id, |
There was a problem hiding this comment.
would it be simpler to just do {...s} here
There was a problem hiding this comment.
Good call, honestly not sure why we have this at all here... Will cleanup
There was a problem hiding this comment.
Oh wait we are removing values that are on AreaSeries but not on Series
Technically we could just drop this and pass all to CartesianChart under the hood but across the board we are taking LineSeries, BarSeries, and AreaSeries and only passing in the props that are present on Series. I think it could be a good practice so no misc props end up in a spot they shouldn't be.
What do you think?
3 participants
What changed? Why?
This PR adds "baseline" to chart axes
The concept of "baseline" is that this is the base value that the chart stems from. By default it is 0, meaning bars rendered on the screen will start at 0 and go up or down towards their actual value:
While this had been working before, setting a custom baseline was not working, now it is possible
This works by fixing all area and bar components towards the baseline, and stacking also is in this same manner.
Stacking logic works as such
This means that if we have a stack such as
series={[{ id: 'a', data: [4, -2, 3] }, { id: 'b', data: [5, 1, 2] }]}With a baseline of 0 we'd get [{ positive: 9, negative: 0 }, { positive: 1, negative: -2}, { positive: 7, negative: 0 }]
With a baseline of 3 we'd get [{ positive: 3, negative: 0 }, { positive: 0, negative: 7 }, { positive: 0, negative: 1 }] - keep in mind these values are from "3", so a negative of "7" really equals -4.
Root cause (required for bugfixes)
When we added stacking to all series we didn't factor in that eliminated the ability to use 'baseline' on Area and Bar. This removes that functionality from affected components and brings in a new centralized baseline property which can be customized on axes (on regular charts this is for the y axis for horizontal layout charts it is the x axis.
UI changes
Mobile
For web see above screenshots.
Testing
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false