-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[charts] Move interaction state in store (#15426)
Signed-off-by: Alexandre Fauquette <[email protected]> Co-authored-by: Jose C Quintas Jr <[email protected]>
- Loading branch information
1 parent
2d413f3
commit 0da596e
Showing
34 changed files
with
658 additions
and
333 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
6 changes: 6 additions & 0 deletions
6
packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.types.ts
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,6 @@ | ||
| export type ChartsAxisHighlightType = 'none' | 'line' | 'band'; | ||
|
|
||
| export type ChartsAxisHighlightProps = { | ||
| x?: ChartsAxisHighlightType; | ||
| y?: ChartsAxisHighlightType; | ||
| }; |
37 changes: 37 additions & 0 deletions
37
packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlightPath.ts
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,37 @@ | ||
| 'use client'; | ||
| import { styled } from '@mui/material/styles'; | ||
| import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types'; | ||
|
|
||
| export const ChartsAxisHighlightPath = styled('path', { | ||
| name: 'MuiChartsAxisHighlight', | ||
| slot: 'Root', | ||
| overridesResolver: (_, styles) => styles.root, | ||
| })<{ ownerState: { axisHighlight: ChartsAxisHighlightType } }>(({ theme }) => ({ | ||
| pointerEvents: 'none', | ||
| variants: [ | ||
| { | ||
| props: { | ||
| axisHighlight: 'band', | ||
| }, | ||
| style: { | ||
| fill: 'white', | ||
| fillOpacity: 0.1, | ||
| ...theme.applyStyles('light', { | ||
| fill: 'gray', | ||
| }), | ||
| }, | ||
| }, | ||
| { | ||
| props: { | ||
| axisHighlight: 'line', | ||
| }, | ||
| style: { | ||
| strokeDasharray: '5 2', | ||
| stroke: '#ffffff', | ||
| ...theme.applyStyles('light', { | ||
| stroke: '#000000', | ||
| }), | ||
| }, | ||
| }, | ||
| ], | ||
| })); |
69 changes: 69 additions & 0 deletions
69
packages/x-charts/src/ChartsAxisHighlight/ChartsXAxisHighlight.tsx
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,69 @@ | ||
| 'use client'; | ||
| import * as React from 'react'; | ||
| import { getValueToPositionMapper, useXScale } from '../hooks/useScale'; | ||
| import { isBandScale } from '../internals/isBandScale'; | ||
| import { useSelector } from '../internals/useSelector'; | ||
| import { useStore } from '../internals/useStore'; | ||
| import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors'; | ||
| import { useDrawingArea } from '../hooks'; | ||
| import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types'; | ||
| import { ChartsAxisHighlightClasses } from './chartsAxisHighlightClasses'; | ||
| import { ChartsAxisHighlightPath } from './ChartsAxisHighlightPath'; | ||
|
|
||
| /** | ||
| * @ignore - internal component. | ||
| */ | ||
| export default function ChartsXHighlight(props: { | ||
| type: ChartsAxisHighlightType; | ||
| classes: ChartsAxisHighlightClasses; | ||
| }) { | ||
| const { type, classes } = props; | ||
|
|
||
| const { top, height } = useDrawingArea(); | ||
|
|
||
| const xScale = useXScale(); | ||
|
|
||
| const store = useStore(); | ||
| const axisX = useSelector(store, selectorChartsInteractionXAxis); | ||
|
|
||
| const getXPosition = getValueToPositionMapper(xScale); | ||
|
|
||
| const isBandScaleX = type === 'band' && axisX !== null && isBandScale(xScale); | ||
|
|
||
| if (process.env.NODE_ENV !== 'production') { | ||
| const isError = isBandScaleX && xScale(axisX.value) === undefined; | ||
|
|
||
| if (isError) { | ||
| console.error( | ||
| [ | ||
| `MUI X: The position value provided for the axis is not valid for the current scale.`, | ||
| `This probably means something is wrong with the data passed to the chart.`, | ||
| `The ChartsAxisHighlight component will not be displayed.`, | ||
| ].join('\n'), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| {isBandScaleX && xScale(axisX.value) !== undefined && ( | ||
| <ChartsAxisHighlightPath | ||
| // @ts-expect-error, xScale value is checked in the statement above | ||
| d={`M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${ | ||
| top | ||
| } l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`} | ||
| className={classes.root} | ||
| ownerState={{ axisHighlight: 'band' }} | ||
| /> | ||
| )} | ||
|
|
||
| {type === 'line' && axisX !== null && ( | ||
| <ChartsAxisHighlightPath | ||
| d={`M ${getXPosition(axisX.value)} ${top} L ${getXPosition(axisX.value)} ${top + height}`} | ||
| className={classes.root} | ||
| ownerState={{ axisHighlight: 'line' }} | ||
| /> | ||
| )} | ||
| </React.Fragment> | ||
| ); | ||
| } |
71 changes: 71 additions & 0 deletions
71
packages/x-charts/src/ChartsAxisHighlight/ChartsYAxisHighlight.tsx
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,71 @@ | ||
| 'use client'; | ||
| import * as React from 'react'; | ||
| import { getValueToPositionMapper, useYScale } from '../hooks/useScale'; | ||
| import { isBandScale } from '../internals/isBandScale'; | ||
| import { useSelector } from '../internals/useSelector'; | ||
| import { useStore } from '../internals/useStore'; | ||
| import { selectorChartsInteractionYAxis } from '../context/InteractionSelectors'; | ||
| import { useDrawingArea } from '../hooks'; | ||
| import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types'; | ||
| import { ChartsAxisHighlightClasses } from './chartsAxisHighlightClasses'; | ||
| import { ChartsAxisHighlightPath } from './ChartsAxisHighlightPath'; | ||
|
|
||
| /** | ||
| * @ignore - internal component. | ||
| */ | ||
| export default function ChartsYHighlight(props: { | ||
| type: ChartsAxisHighlightType; | ||
| classes: ChartsAxisHighlightClasses; | ||
| }) { | ||
| const { type, classes } = props; | ||
|
|
||
| const { left, width } = useDrawingArea(); | ||
|
|
||
| const yScale = useYScale(); | ||
|
|
||
| const store = useStore(); | ||
| const axisY = useSelector(store, selectorChartsInteractionYAxis); | ||
|
|
||
| const getYPosition = getValueToPositionMapper(yScale); | ||
|
|
||
| const isBandScaleY = type === 'band' && axisY !== null && isBandScale(yScale); | ||
|
|
||
| if (process.env.NODE_ENV !== 'production') { | ||
| const isError = isBandScaleY && yScale(axisY.value) === undefined; | ||
|
|
||
| if (isError) { | ||
| console.error( | ||
| [ | ||
| `MUI X: The position value provided for the axis is not valid for the current scale.`, | ||
| `This probably means something is wrong with the data passed to the chart.`, | ||
| `The ChartsAxisHighlight component will not be displayed.`, | ||
| ].join('\n'), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| {isBandScaleY && yScale(axisY.value) !== undefined && ( | ||
| <ChartsAxisHighlightPath | ||
| d={`M ${left} ${ | ||
| // @ts-expect-error, yScale value is checked in the statement above | ||
| yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2 | ||
| } l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`} | ||
| className={classes.root} | ||
| ownerState={{ axisHighlight: 'band' }} | ||
| /> | ||
| )} | ||
|
|
||
| {type === 'line' && axisY !== null && ( | ||
| <ChartsAxisHighlightPath | ||
| d={`M ${left} ${getYPosition(axisY.value)} L ${left + width} ${getYPosition( | ||
| axisY.value, | ||
| )}`} | ||
| className={classes.root} | ||
| ownerState={{ axisHighlight: 'line' }} | ||
| /> | ||
| )} | ||
| </React.Fragment> | ||
| ); | ||
| } |
18 changes: 18 additions & 0 deletions
18
packages/x-charts/src/ChartsAxisHighlight/chartsAxisHighlightClasses.ts
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,18 @@ | ||
| import generateUtilityClass from '@mui/utils/generateUtilityClass'; | ||
| import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; | ||
|
|
||
| export interface ChartsAxisHighlightClasses { | ||
| /** Styles applied to the root element. */ | ||
| root: string; | ||
| } | ||
|
|
||
| export type ChartsAxisHighlightClassKey = keyof ChartsAxisHighlightClasses; | ||
|
|
||
| export function getAxisHighlightUtilityClass(slot: string) { | ||
| return generateUtilityClass('MuiChartsAxisHighlight', slot); | ||
| } | ||
|
|
||
| export const chartsAxisHighlightClasses: ChartsAxisHighlightClasses = generateUtilityClasses( | ||
| 'MuiChartsAxisHighlight', | ||
| ['root'], | ||
| ); |
Oops, something went wrong.