Skip to content
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] Improve default tooltip content #12257

Merged
merged 3 commits into from Apr 23, 2024

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Feb 28, 2024

A few opportunities I saw looking randomly at the code.

@oliviertassinari oliviertassinari added core Infrastructure work going on behind the scenes component: charts This is the name of the generic UI component, not the React module! labels Feb 28, 2024
@mui-bot
Copy link

mui-bot commented Feb 28, 2024

Deploy preview: https://deploy-preview-12257--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against c95bd98

Copy link
Member

@LukasTy LukasTy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The current change introduces a regression. 🙈

packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts Outdated Show resolved Hide resolved
packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts Outdated Show resolved Hide resolved
packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts Outdated Show resolved Hide resolved
packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts Outdated Show resolved Hide resolved
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 21, 2024

This comment was marked as resolved.

@oliviertassinari oliviertassinari changed the base branch from next to master April 21, 2024 19:42
<ChartsTooltipMark ownerState={{ color }} className={classes.mark} />
<ChartsTooltipMark color={color} className={classes.mark} />
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about ownerState here.

@@ -50,16 +50,13 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) {
<ChartsTooltipRow key={id} className={classes.row}>
<ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
<ChartsTooltipMark
ownerState={{ color: getColor(dataIndex) ?? color }}
boxShadow={1}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't feel like the UI should be different based on the type of tooltip. It also makes the code simpler.

Comment on lines +9 to 13
boxShadow: theme.shadows[1],
backgroundColor: (theme.vars || theme).palette.background.paper,
color: (theme.vars || theme).palette.text.primary,
transition: theme.transitions.create('box-shadow'),
border: `1px solid ${(theme.vars || theme).palette.divider}`,
borderRadius: theme.shape.borderRadius,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Get it closer to how https://mui.com/material-ui/react-paper/ feels.

Comment on lines -61 to +59
// eslint-disable-next-line material-ui/no-styled-box
export const ChartsTooltipMark = styled(Box, {
export const ChartsTooltipMark = styled('div', {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid expensive work, div is much faster than Box.

@oliviertassinari oliviertassinari removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 21, 2024
@alexfauquette alexfauquette changed the title [core] Improve selector clarity [charts] Improve default tooltip content Apr 23, 2024
@alexfauquette alexfauquette merged commit 06ba75a into mui:master Apr 23, 2024
18 checks passed
@oliviertassinari oliviertassinari deleted the selectors-clarity branch April 23, 2024 09:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: charts This is the name of the generic UI component, not the React module! core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants