forked from mui/mui-x
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5d86576
commit 7120da2
Showing
16 changed files
with
210 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
'use client'; | ||
import * as React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { useTheme } from '@mui/material/styles'; | ||
import { warnOnce } from '@mui/x-internals/warning'; | ||
import { animated, useSpring } from '@react-spring/web'; | ||
import { InteractionContext } from '../context/InteractionProvider'; | ||
import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; | ||
import { useItemHighlighted } from '../context'; | ||
import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses'; | ||
|
||
export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & | ||
Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & { | ||
/** | ||
* The shape of the marker. | ||
*/ | ||
shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'; | ||
/** | ||
* If `true`, animations are skipped. | ||
* @default false | ||
*/ | ||
skipAnimation?: boolean; | ||
/** | ||
* The index to the element in the series' data array. | ||
*/ | ||
dataIndex: number; | ||
}; | ||
|
||
/** | ||
* The line mark element that only render circle for performance improvement. | ||
* | ||
* Demos: | ||
* | ||
* - [Lines](https://mui.com/x/react-charts/lines/) | ||
* - [Line demonstration](https://mui.com/x/react-charts/line-demo/) | ||
* | ||
* API: | ||
* | ||
* - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/) | ||
*/ | ||
function CircleMarkElement(props: CircleMarkElementProps) { | ||
const { | ||
x, | ||
y, | ||
id, | ||
classes: innerClasses, | ||
color, | ||
dataIndex, | ||
onClick, | ||
skipAnimation, | ||
shape, | ||
...other | ||
} = props; | ||
|
||
if (shape !== 'circle') { | ||
warnOnce( | ||
[ | ||
`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, | ||
'Only "circle" are supported with `experimentalRendering`.', | ||
].join('\n'), | ||
'error', | ||
); | ||
} | ||
const theme = useTheme(); | ||
const getInteractionItemProps = useInteractionItemProps(); | ||
const { isFaded, isHighlighted } = useItemHighlighted({ | ||
seriesId: id, | ||
}); | ||
const { axis } = React.useContext(InteractionContext); | ||
|
||
const position = useSpring({ to: { x, y }, immediate: skipAnimation }); | ||
const ownerState = { | ||
id, | ||
classes: innerClasses, | ||
isHighlighted: axis.x?.index === dataIndex || isHighlighted, | ||
isFaded, | ||
color, | ||
}; | ||
const classes = useUtilityClasses(ownerState); | ||
|
||
return ( | ||
<animated.circle | ||
{...other} | ||
cx={position.x} | ||
cy={position.y} | ||
r={5} | ||
fill={(theme.vars || theme).palette.background.paper} | ||
stroke={color} | ||
strokeWidth={2} | ||
className={classes.root} | ||
onClick={onClick} | ||
cursor={onClick ? 'pointer' : 'unset'} | ||
{...getInteractionItemProps({ type: 'line', seriesId: id, dataIndex })} | ||
/> | ||
); | ||
} | ||
|
||
CircleMarkElement.propTypes = { | ||
// ----------------------------- Warning -------------------------------- | ||
// | These PropTypes are generated from the TypeScript type definitions | | ||
// | To update them edit the TypeScript types and run "pnpm proptypes" | | ||
// ---------------------------------------------------------------------- | ||
classes: PropTypes.object, | ||
/** | ||
* The index to the element in the series' data array. | ||
*/ | ||
dataIndex: PropTypes.number.isRequired, | ||
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, | ||
/** | ||
* The shape of the marker. | ||
*/ | ||
shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']) | ||
.isRequired, | ||
/** | ||
* If `true`, animations are skipped. | ||
* @default false | ||
*/ | ||
skipAnimation: PropTypes.bool, | ||
} as any; | ||
|
||
export { CircleMarkElement }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import composeClasses from '@mui/utils/composeClasses'; | ||
import generateUtilityClass from '@mui/utils/generateUtilityClass'; | ||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; | ||
import { SeriesId } from '../models/seriesType/common'; | ||
|
||
export interface MarkElementClasses { | ||
/** Styles applied to the root element. */ | ||
root: string; | ||
/** Styles applied to the root element when highlighted. */ | ||
highlighted: string; | ||
/** Styles applied to the root element when faded. */ | ||
faded: string; | ||
} | ||
|
||
export type MarkElementClassKey = keyof MarkElementClasses; | ||
|
||
export interface MarkElementOwnerState { | ||
id: SeriesId; | ||
color: string; | ||
isFaded: boolean; | ||
isHighlighted: boolean; | ||
classes?: Partial<MarkElementClasses>; | ||
} | ||
|
||
export function getMarkElementUtilityClass(slot: string) { | ||
return generateUtilityClass('MuiMarkElement', slot); | ||
} | ||
|
||
export const markElementClasses: MarkElementClasses = generateUtilityClasses('MuiMarkElement', [ | ||
'root', | ||
'highlighted', | ||
'faded', | ||
]); | ||
|
||
export const useUtilityClasses = (ownerState: MarkElementOwnerState) => { | ||
const { classes, id, isFaded, isHighlighted } = ownerState; | ||
const slots = { | ||
root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded'], | ||
}; | ||
|
||
return composeClasses(slots, getMarkElementUtilityClass, classes); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -32,6 +32,7 @@ describe('LineChart', () => { | |
]} | ||
width={500} | ||
height={300} | ||
experimentalMarkRendering | ||
/>, | ||
); | ||
|
||
|