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.

Sign up for GitHub

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
Merged

[charts] Improve default tooltip content #12257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2142342
[core] Improve selector clarity
oliviertassinari Feb 28, 2024
79ea850
revert, we can't do this
oliviertassinari Apr 21, 2024
c95bd98
clean up
oliviertassinari Apr 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import Box from '@mui/system/Box';
import { styled } from '@mui/material/styles';
import { shouldForwardProp } from '@mui/system';
import { chartsTooltipClasses } from './chartsTooltipClasses';

export const ChartsTooltipPaper = styled('div', {
name: 'MuiChartsTooltip',
slot: 'Container',
})(({ theme }) => ({
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,
}));
Comment on lines +9 to 13
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.


Expand Down Expand Up @@ -41,15 +41,13 @@ export const ChartsTooltipCell = styled('td', {
})(({ theme }) => ({
verticalAlign: 'middle',
color: (theme.vars || theme).palette.text.secondary,

[`&.${chartsTooltipClasses.labelCell}`]: {
paddingLeft: theme.spacing(1),
},
[`&.${chartsTooltipClasses.valueCell}`]: {
paddingLeft: theme.spacing(4),
color: (theme.vars || theme).palette.text.primary,
},

'td:first-of-type&': {
paddingLeft: theme.spacing(2),
},
Expand All @@ -58,15 +56,16 @@ export const ChartsTooltipCell = styled('td', {
},
}));

// eslint-disable-next-line material-ui/no-styled-box
export const ChartsTooltipMark = styled(Box, {
export const ChartsTooltipMark = styled('div', {
name: 'MuiChartsTooltip',
Comment on lines -61 to +59
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.

slot: 'Mark',
})<{ ownerState: { color: string } }>(({ theme, ownerState }) => ({
shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'color',
})<{ color: string }>(({ theme, color }) => ({
width: theme.spacing(1),
height: theme.spacing(1),
borderRadius: '50%',
backgroundColor: ownerState.color,
boxShadow: theme.shadows[1],
backgroundColor: color,
borderColor: (theme.vars || theme).palette.background.paper,
border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
boxSizing: 'content-box',
Expand Down
5 changes: 1 addition & 4 deletions packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

@oliviertassinari oliviertassinari Apr 21, 2024 •
edited
Loading

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.

color={getColor(dataIndex) ?? color}
className={classes.mark}
/>
</ChartsTooltipCell>

<ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
{label ? <Typography>{label}</Typography> : null}
</ChartsTooltipCell>

<ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
<Typography>{formattedValue}</Typography>
</ChartsTooltipCell>
Expand Down
4 changes: 1 addition & 3 deletions packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,11 @@ function DefaultChartsItemTooltipContent<T extends ChartSeriesType = ChartSeries
<tbody>
<ChartsTooltipRow className={classes.row}>
<ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
<ChartsTooltipMark ownerState={{ color }} className={classes.mark} />
<ChartsTooltipMark color={color} className={classes.mark} />
Copy link
Member Author

@oliviertassinari oliviertassinari Apr 21, 2024 •
edited
Loading

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.

</ChartsTooltipCell>

<ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
{displayedLabel}
</ChartsTooltipCell>

<ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
{formattedValue}
</ChartsTooltipCell>
Expand Down
Loading