-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[charts] Add baseline
property to the LineChart
series
#14153
Conversation
Deploy preview: https://deploy-preview-14153--material-ui-x.netlify.app/ Updated pages: |
CodSpeed Performance ReportMerging #14153 will not alter performanceComparing Summary
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just one edge case. I think the second option will be better when used with the zoom feature you're currently working on
if (typeof baseline === 'number') { | ||
return yScale(baseline)!; | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Potential solution
-
When computing the extremum values, you replace when needed the base (
d[0]
) by the user defined baseline -
Instead of providing a number, user can provide
'top' | 'bottom'
. Then you just need to ignore thed[0]
by doing
- isArea && axis.scaleType !== 'log' ? ...
+ isArea && axis.scaleType !== 'log' && series[seriesId].baseline === undefined ? ...
and in the commented line return
- return yScale(baseline)!;
- return baseline==='top' ? yScale.range[0] : yScale.range[1];
mui-x/packages/x-charts/src/LineChart/extremums.ts
Lines 43 to 44 in 38184fe
const { area, stackedData } = series[seriesId]; | |
const isArea = area !== undefined; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It behaves a bit weirdly when baseline
changes the extremums.
This happens because the extremum getter value is then passed into the nice()
function, it can have unintended consequences, which means I would also have to check the baseline where that is calculated.
But we already have the axis min/max
values for that. So I believe we should use the min/max values when the axis extremums need to be changed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It behaves a bit weirdly when baseline changes the extremums.
TLTR: I don't think it's an issue
Technically speaking, we have two behavior to define:
- where does the area set the baseline
- should the basline impact the extremums.
Should the baseline impact the extremums
For stacked data, I can not think of a usecase where the answer would be no. Otherwise you would compare some area wherase the base one would have missing part.
For a single series, where the area is more aesthetic, seems it can be ignored. Here foe example the NASDAQ evolution during the day. Nobody care of the space between 0 and 16.500. Only the relative evolution matter. Otherwise you would see nothing.
Where does the area set the baseline
I only see two reasons to modify the default 0:
- aesthetic reasons. But in that case, only min/max makes sense
- There is a specific value to compare to. For example the average over time. But in that case, I don't see a reason to pick a value that is always on top or below the line
So basically the weird case you define should not exist
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, but those are just working as expected. The issue that appears when we have the baseline
affect the extremums is that the extremums will get niced
after. So if we have a non-round number like below, it will not work properly. Then this starts to get more complex and would clash with a feature that already exists yAxis.min/max
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
docs/data/charts/lines/lines.md
Outdated
:::info | ||
Keep in mind the baseline only affects the area visuals. If you want to change the axis minimum or maximum values, you should use the `min/max` property of the axis. | ||
::: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not exactly if the baseline means we will ignore 0
for extremum computation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't get what you mean here 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, I forgot a part of the sentence
If the baseline is defined with min/max, the 0 will be ignored for axis extremums
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, this is an effect of your change, I didn't intend it at first. We can keep to the other discussion and I will update it with the outcomes
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
This reverts commit 8d6aaa9.
baseline
property to the LineChart
series
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just one last comment about the impact on stacked line chart. Since you early return the y0
function, the behavior with stacked line could be wrong. Just warning users about that can do the job
docs/data/charts/lines/lines.md
Outdated
It is also possible to provide a `number` value to fix the baseline at the desired position. | ||
|
||
{{"demo": "AreaBaseline.js"}} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You could add a warning to say that the baseline
should not be used with stacked lines
Resolves #14145
This adds a
baseline
props to the line chart series. It only works on the area chart and defines the baseline the area starts from.baseline: 0
baseline: -10
baseline: 10