diff --git a/docs/data/charts/bars/BarAnimation.tsx b/docs/data/charts/bars/BarAnimation.tsx index 9bdd402a65e7..13694483bb7b 100644 --- a/docs/data/charts/bars/BarAnimation.tsx +++ b/docs/data/charts/bars/BarAnimation.tsx @@ -5,6 +5,7 @@ import Slider from '@mui/material/Slider'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { BarChart } from '@mui/x-charts/BarChart'; +import { HighlightScope } from '@mui/x-charts/context'; export default function BarAnimation() { const [seriesNb, setSeriesNb] = React.useState(2); @@ -67,10 +68,10 @@ export default function BarAnimation() { ); } -const highlightScope = { +const highlightScope: HighlightScope = { highlight: 'series', fade: 'global', -} as const; +}; const series = [ { diff --git a/docs/data/charts/highlighting/ControlledHighlight.js b/docs/data/charts/highlighting/ControlledHighlight.js index 6106b70cd9d8..e7b0a1fa951e 100644 --- a/docs/data/charts/highlighting/ControlledHighlight.js +++ b/docs/data/charts/highlighting/ControlledHighlight.js @@ -18,8 +18,8 @@ export default function ControlledHighlight() { seriesId: 'A', dataIndex: 0, }); - const [highlighted, setHighlighted] = React.useState('item'); - const [faded, setFaded] = React.useState('global'); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); const handleHighLightedSeries = (event, newHighLightedSeries) => { if (newHighLightedSeries !== null) { @@ -80,8 +80,8 @@ export default function ControlledHighlight() { series={barChartsProps.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} highlightedItem={highlightedItem} @@ -98,8 +98,8 @@ export default function ControlledHighlight() { setHighlighted(event.target.value)} + value={highlight} + onChange={(event) => setHighlight(event.target.value)} sx={{ minWidth: 150 }} > none @@ -109,8 +109,8 @@ export default function ControlledHighlight() { setFaded(event.target.value)} + value={fade} + onChange={(event) => setFade(event.target.value)} sx={{ minWidth: 150 }} > none diff --git a/docs/data/charts/highlighting/ControlledHighlight.tsx b/docs/data/charts/highlighting/ControlledHighlight.tsx index 4de4eb1b81ae..b29d70302bbc 100644 --- a/docs/data/charts/highlighting/ControlledHighlight.tsx +++ b/docs/data/charts/highlighting/ControlledHighlight.tsx @@ -19,8 +19,8 @@ export default function ControlledHighlight() { seriesId: 'A', dataIndex: 0, }); - const [highlighted, setHighlighted] = React.useState('item'); - const [faded, setFaded] = React.useState('global'); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); const handleHighLightedSeries = (event: any, newHighLightedSeries: string) => { if (newHighLightedSeries !== null) { @@ -81,8 +81,8 @@ export default function ControlledHighlight() { series={barChartsProps.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} highlightedItem={highlightedItem} @@ -99,8 +99,8 @@ export default function ControlledHighlight() { setHighlighted(event.target.value)} + value={highlight} + onChange={(event) => setHighlight(event.target.value)} sx={{ minWidth: 150 }} > none @@ -110,8 +110,8 @@ export default function ControlledHighlight() { setFaded(event.target.value)} + value={fade} + onChange={(event) => setFade(event.target.value)} sx={{ minWidth: 150 }} > none diff --git a/docs/data/charts/highlighting/ElementHighlights.js b/docs/data/charts/highlighting/ElementHighlights.js index 7379647649bd..fe1f78527ae4 100644 --- a/docs/data/charts/highlighting/ElementHighlights.js +++ b/docs/data/charts/highlighting/ElementHighlights.js @@ -88,8 +88,8 @@ const pieChartsParams = { export default function ElementHighlights() { const [chartType, setChartType] = React.useState('bar'); const [withArea, setWithArea] = React.useState(false); - const [highlighted, setHighlighted] = React.useState('item'); - const [faded, setFaded] = React.useState('global'); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); const handleChartType = (event, newChartType) => { if (newChartType !== null) { @@ -123,8 +123,8 @@ export default function ElementHighlights() { series={barChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} /> @@ -137,8 +137,8 @@ export default function ElementHighlights() { ...series, area: withArea, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} /> @@ -150,8 +150,8 @@ export default function ElementHighlights() { series={scatterChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} /> @@ -163,8 +163,8 @@ export default function ElementHighlights() { series={pieChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, }, }))} /> @@ -179,9 +179,9 @@ export default function ElementHighlights() { > setHighlighted(event.target.value)} + label="highlight" + value={highlight} + onChange={(event) => setHighlight(event.target.value)} sx={{ minWidth: 150 }} > none @@ -190,9 +190,9 @@ export default function ElementHighlights() { setFaded(event.target.value)} + label="fade" + value={fade} + onChange={(event) => setFade(event.target.value)} sx={{ minWidth: 150 }} > none diff --git a/docs/data/charts/highlighting/ElementHighlights.tsx b/docs/data/charts/highlighting/ElementHighlights.tsx index d576ed201c50..b961f5ccfd0c 100644 --- a/docs/data/charts/highlighting/ElementHighlights.tsx +++ b/docs/data/charts/highlighting/ElementHighlights.tsx @@ -89,8 +89,8 @@ const pieChartsParams = { export default function ElementHighlights() { const [chartType, setChartType] = React.useState('bar'); const [withArea, setWithArea] = React.useState(false); - const [highlighted, setHighlighted] = React.useState('item'); - const [faded, setFaded] = React.useState('global'); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); const handleChartType = (event: any, newChartType: string) => { if (newChartType !== null) { @@ -124,8 +124,8 @@ export default function ElementHighlights() { series={barChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} /> @@ -138,8 +138,8 @@ export default function ElementHighlights() { ...series, area: withArea, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} /> @@ -151,8 +151,8 @@ export default function ElementHighlights() { series={scatterChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} /> @@ -164,8 +164,8 @@ export default function ElementHighlights() { series={pieChartsParams.series.map((series) => ({ ...series, highlightScope: { - highlighted, - faded, + highlight, + fade, } as HighlightScope, }))} /> @@ -180,9 +180,9 @@ export default function ElementHighlights() { > setHighlighted(event.target.value)} + label="highlight" + value={highlight} + onChange={(event) => setHighlight(event.target.value)} sx={{ minWidth: 150 }} > none @@ -191,9 +191,9 @@ export default function ElementHighlights() { setFaded(event.target.value)} + label="fade" + value={fade} + onChange={(event) => setFade(event.target.value)} sx={{ minWidth: 150 }} > none diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx index 6919b17363ed..99c7eda9f856 100644 --- a/packages/x-charts/src/PieChart/PieArc.tsx +++ b/packages/x-charts/src/PieChart/PieArc.tsx @@ -9,7 +9,6 @@ import { styled } from '@mui/material/styles'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; import { PieItemId } from '../models'; -import { HighlightScope } from '../context'; export interface PieArcClasses { /** Styles applied to the root element. */ @@ -64,10 +63,6 @@ export type PieArcProps = Omit, 'ref' | 'id'> & PieArcOwnerState & { cornerRadius: SpringValue; endAngle: SpringValue; - /** - * @deprecated Use the `isFaded` or `isHighlighted` props instead. - */ - highlightScope?: Partial; innerRadius: SpringValue; onClick?: (event: React.MouseEvent) => void; outerRadius: SpringValue; @@ -90,7 +85,6 @@ function PieArc(props: PieArcProps) { outerRadius, paddingAngle, startAngle, - highlightScope, ...other } = props; @@ -137,15 +131,6 @@ PieArc.propTypes = { // ---------------------------------------------------------------------- classes: PropTypes.object, dataIndex: PropTypes.number.isRequired, - /** - * @deprecated Use the `isFaded` or `isHighlighted` props instead. - */ - highlightScope: PropTypes.shape({ - fade: PropTypes.oneOf(['global', 'none', 'series']), - faded: PropTypes.oneOf(['global', 'none', 'series']), - highlight: PropTypes.oneOf(['item', 'none', 'series']), - highlighted: PropTypes.oneOf(['item', 'none', 'series']), - }), id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, isFaded: PropTypes.bool.isRequired, isHighlighted: PropTypes.bool.isRequired, diff --git a/packages/x-charts/src/PieChart/PieArcPlot.tsx b/packages/x-charts/src/PieChart/PieArcPlot.tsx index 13e233d5b642..c2c7279a9ef9 100644 --- a/packages/x-charts/src/PieChart/PieArcPlot.tsx +++ b/packages/x-charts/src/PieChart/PieArcPlot.tsx @@ -15,7 +15,6 @@ import { ValueWithHighlight, useTransformData, } from './dataTransform/useTransformData'; -import { useHighlighted } from '../context'; export interface PieArcPlotSlots { pieArc?: React.JSXElementConstructor; @@ -95,7 +94,6 @@ function PieArcPlot(props: PieArcPlotProps) { ...defaultTransitionConfig, immediate: skipAnimation, }); - const { highlightScope } = useHighlighted(); if (data.length === 0) { return null; @@ -133,7 +131,6 @@ function PieArcPlot(props: PieArcPlotProps) { id={id} color={item.color} dataIndex={index} - highlightScope={highlightScope} isFaded={item.isFaded} isHighlighted={item.isHighlighted} onClick={ diff --git a/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts b/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts index 335b8ba59223..f89055efd50b 100644 --- a/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts +++ b/packages/x-charts/src/context/HighlightedProvider/HighlightedContext.ts @@ -34,10 +34,6 @@ export type HighlightOptions = 'none' | 'item' | 'series'; export type FadeOptions = 'none' | 'series' | 'global'; export type HighlightScope = { - /** - * @deprecated Use `highlight` instead. - */ - highlighted?: HighlightOptions; /** * The scope of highlighted elements. * - 'none': no highlight. @@ -46,10 +42,6 @@ export type HighlightScope = { * @default 'none' */ highlight?: HighlightOptions; - /** - * @deprecated Use `fade` instead. - */ - faded?: FadeOptions; /** * The scope of faded elements. * - 'none': no fading. diff --git a/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx b/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx index 23a99d9b3e39..a5e097e067f6 100644 --- a/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx +++ b/packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx @@ -29,15 +29,6 @@ export type HighlightedProviderProps = { onHighlightChange?: (highlightedItem: HighlightItemData | null) => void; }; -const mergeDeprecatedOptions = (options?: Partial): HighlightScope => { - const { highlighted, faded, ...other } = options ?? {}; - return { - highlight: highlighted, - fade: faded, - ...other, - }; -}; - function HighlightedProvider({ children, highlightedItem: highlightedItemProps, @@ -58,7 +49,7 @@ function HighlightedProvider({ const seriesData = series[seriesType as ChartSeriesType]; Object.keys(seriesData?.series ?? {}).forEach((seriesId) => { const seriesItem = seriesData?.series[seriesId]; - map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope)); + map.set(seriesId, seriesItem?.highlightScope); }); }); return map;