From 4e82d966ce18e01eeb126c7be6ced77143781728 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 11 Apr 2024 13:41:24 +0200 Subject: [PATCH 1/3] [charts] Export more utils --- packages/x-charts/src/PieChart/PiePlot.tsx | 17 ++++++++++---- .../src/PieChart/getPieCoordinates.ts | 17 ++++++++++++++ packages/x-charts/src/PieChart/index.tsx | 2 ++ packages/x-charts/src/hooks/index.ts | 2 ++ packages/x-charts/src/hooks/useSeries.ts | 23 +++++++++++++++++++ packages/x-charts/src/hooks/useSvgRef.ts | 17 ++++++++++++++ scripts/x-charts.exports.json | 3 +++ 7 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 packages/x-charts/src/PieChart/getPieCoordinates.ts create mode 100644 packages/x-charts/src/hooks/useSeries.ts create mode 100644 packages/x-charts/src/hooks/useSvgRef.ts diff --git a/packages/x-charts/src/PieChart/PiePlot.tsx b/packages/x-charts/src/PieChart/PiePlot.tsx index 9b05bc59ef496..5f86ea0513576 100644 --- a/packages/x-charts/src/PieChart/PiePlot.tsx +++ b/packages/x-charts/src/PieChart/PiePlot.tsx @@ -5,6 +5,7 @@ import { DrawingContext } from '../context/DrawingProvider'; import { PieArcPlot, PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from './PieArcPlot'; import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps, PieArcLabelPlot } from './PieArcLabelPlot'; import { getPercentageValue } from '../internals/utils'; +import { getPieCoordinates } from './getPieCoordinates'; export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {} @@ -41,7 +42,6 @@ function PiePlot(props: PiePlotProps) { if (seriesData === undefined) { return null; } - const availableRadius = Math.min(width, height) / 2; const { series, seriesOrder } = seriesData; @@ -61,13 +61,16 @@ function PiePlot(props: PiePlotProps) { highlightScope, } = series[seriesId]; + const { cx, cy, availableRadius } = getPieCoordinates( + { cx: cxParam, cy: cyParam }, + { width, height }, + ); + const outerRadius = getPercentageValue( outerRadiusParam ?? availableRadius, availableRadius, ); const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius); - const cx = getPercentageValue(cxParam ?? '50%', width); - const cy = getPercentageValue(cyParam ?? '50%', height); return ( , + drawing: Pick, +): { cx: number; cy: number; availableRadius: number } { + const { height, width } = drawing; + const { cx: cxParam, cy: cyParam } = series; + + const availableRadius = Math.min(width, height) / 2; + const cx = getPercentageValue(cxParam ?? '50%', width); + const cy = getPercentageValue(cyParam ?? '50%', height); + + return { cx, cy, availableRadius }; +} diff --git a/packages/x-charts/src/PieChart/index.tsx b/packages/x-charts/src/PieChart/index.tsx index fcf167a4a57f9..68d23ddbe2905 100644 --- a/packages/x-charts/src/PieChart/index.tsx +++ b/packages/x-charts/src/PieChart/index.tsx @@ -6,3 +6,5 @@ export * from './PieArcLabelPlot'; export * from './PieArc'; export * from './PieArcLabel'; + +export * from './getPieCoordinates'; diff --git a/packages/x-charts/src/hooks/index.ts b/packages/x-charts/src/hooks/index.ts index 36309a114c3b8..34c9bd82a4302 100644 --- a/packages/x-charts/src/hooks/index.ts +++ b/packages/x-charts/src/hooks/index.ts @@ -1,2 +1,4 @@ export * from './useDrawingArea'; export * from './useScale'; +export * from './useSvgRef'; +export { useSeries as unstable_useSeries } from './useSeries'; diff --git a/packages/x-charts/src/hooks/useSeries.ts b/packages/x-charts/src/hooks/useSeries.ts new file mode 100644 index 0000000000000..f876776efd702 --- /dev/null +++ b/packages/x-charts/src/hooks/useSeries.ts @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { SeriesContext } from '../context/SeriesContextProvider'; + +/** + * Get access to the internal state of series. + * Structured by type of series: + * { seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: [id1, ...] } } + * @returns FormattedSeries series + */ +export function useSeries() { + const series = React.useContext(SeriesContext); + + if (series === undefined) { + throw new Error( + [ + 'MUI X: Could not find the series ref context.', + 'It looks like you rendered your component outside of a ChartsContainer parent component.', + ].join('\n'), + ); + } + + return series; +} diff --git a/packages/x-charts/src/hooks/useSvgRef.ts b/packages/x-charts/src/hooks/useSvgRef.ts new file mode 100644 index 0000000000000..2682229850470 --- /dev/null +++ b/packages/x-charts/src/hooks/useSvgRef.ts @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { SvgContext } from '../context/DrawingProvider'; + +export function useSvgRef(): React.MutableRefObject { + const svgRef = React.useContext(SvgContext); + + if (svgRef === undefined) { + throw new Error( + [ + 'MUI X: Could not find the svg ref context.', + 'It looks like you rendered your component outside of a ChartsContainer parent component.', + ].join('\n'), + ); + } + + return svgRef as React.MutableRefObject; +} diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 9e48f1f550495..53006a9adf71c 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -149,6 +149,7 @@ { "name": "getMarkElementUtilityClass", "kind": "Function" }, { "name": "getPieArcLabelUtilityClass", "kind": "Function" }, { "name": "getPieArcUtilityClass", "kind": "Function" }, + { "name": "getPieCoordinates", "kind": "Function" }, { "name": "getReferenceLineUtilityClass", "kind": "Function" }, { "name": "getSeriesToDisplay", "kind": "Function" }, { "name": "getValueToPositionMapper", "kind": "Function" }, @@ -254,8 +255,10 @@ { "name": "StackableSeriesType", "kind": "TypeAlias" }, { "name": "StackOffsetType", "kind": "TypeAlias" }, { "name": "StackOrderType", "kind": "TypeAlias" }, + { "name": "unstable_useSeries", "kind": "Function" }, { "name": "useDrawingArea", "kind": "Function" }, { "name": "useGaugeState", "kind": "Function" }, + { "name": "useSvgRef", "kind": "Function" }, { "name": "useXScale", "kind": "Function" }, { "name": "useYScale", "kind": "Function" } ] From 7d322fd7517d2678c498d33b653ef3bb108fe8b2 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 11 Apr 2024 13:58:55 +0200 Subject: [PATCH 2/3] use hooks in our own code --- packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx | 4 ++-- packages/x-charts/src/ChartsLegend/ChartsLegend.tsx | 4 ++-- .../src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx | 6 +++--- packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 5 ++--- packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 4 ++-- packages/x-charts/src/Gauge/GaugeProvider.tsx | 4 ++-- packages/x-charts/src/LineChart/AnimatedArea.tsx | 5 +++-- packages/x-charts/src/LineChart/AnimatedLine.tsx | 6 ++++-- packages/x-charts/src/LineChart/MarkPlot.tsx | 4 ++-- .../x-charts/src/context/CartesianContextProvider.tsx | 4 ++-- packages/x-charts/src/hooks/index.ts | 1 + packages/x-charts/src/hooks/useAxisEvents.ts | 7 ++++--- packages/x-charts/src/hooks/useChartId.ts | 8 ++++++++ scripts/x-charts.exports.json | 1 + 14 files changed, 38 insertions(+), 25 deletions(-) create mode 100644 packages/x-charts/src/hooks/useChartId.ts diff --git a/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx b/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx index fc674f7038c0a..cce380818f1d1 100644 --- a/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx +++ b/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { DrawingContext } from '../context/DrawingProvider'; +import { useDrawingArea } from '../hooks/useDrawingArea'; export type ChartsClipPathProps = { id: string; @@ -14,7 +14,7 @@ export type ChartsClipPathProps = { */ function ChartsClipPath(props: ChartsClipPathProps) { const { id, offset: offsetProps } = props; - const { left, top, width, height } = React.useContext(DrawingContext); + const { left, top, width, height } = useDrawingArea(); const offset = { top: 0, right: 0, bottom: 0, left: 0, ...offsetProps }; return ( diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx index 291c13be609ed..854bf0db8935e 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx @@ -3,12 +3,12 @@ import PropTypes from 'prop-types'; import { useSlotProps } from '@mui/base/utils'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; -import { DrawingContext } from '../context/DrawingProvider'; import { AnchorPosition, Direction, getSeriesToDisplay } from './utils'; import { SeriesContext } from '../context/SeriesContextProvider'; import { ChartsLegendClasses, getLegendUtilityClass } from './chartsLegendClasses'; import { DefaultizedProps } from '../models/helpers'; import { DefaultChartsLegend, LegendRendererProps } from './DefaultChartsLegend'; +import { useDrawingArea } from '../hooks'; export interface ChartsLegendSlots { /** @@ -82,7 +82,7 @@ function ChartsLegend(inProps: ChartsLegendProps) { const theme = useTheme(); const classes = useUtilityClasses({ ...props, theme }); - const drawingArea = React.useContext(DrawingContext); + const drawingArea = useDrawingArea(); const series = React.useContext(SeriesContext); const seriesToDisplay = getSeriesToDisplay(series); diff --git a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx index 015229f635705..48f0fec8417dd 100644 --- a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx +++ b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx @@ -4,12 +4,12 @@ import { Delaunay } from 'd3-delaunay'; import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import { InteractionContext } from '../context/InteractionProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; -import { SvgContext, DrawingContext } from '../context/DrawingProvider'; import { SeriesContext } from '../context/SeriesContextProvider'; import { getValueToPositionMapper } from '../hooks/useScale'; import { getSVGPoint } from '../internals/utils'; import { ScatterItemIdentifier } from '../models'; import { SeriesId } from '../models/seriesType/common'; +import { useDrawingArea, useSvgRef } from '../hooks'; export type ChartsVoronoiHandlerProps = { /** @@ -29,8 +29,8 @@ type VoronoiSeries = { seriesId: SeriesId; startIndex: number; endIndex: number function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) { const { voronoiMaxRadius, onItemClick } = props; - const svgRef = React.useContext(SvgContext); - const { width, height, top, left } = React.useContext(DrawingContext); + const svgRef = useSvgRef(); + const { left, top, width, height } = useDrawingArea(); const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext); const { dispatch } = React.useContext(InteractionContext); diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 967e95415b9ab..987a8b85d1fd1 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -4,7 +4,6 @@ import { useSlotProps } from '@mui/base/utils'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; import { CartesianContext } from '../context/CartesianContextProvider'; -import { DrawingContext } from '../context/DrawingProvider'; import { useTicks, TickItemType } from '../hooks/useTicks'; import { AxisDefaultized, ChartsXAxisProps } from '../models/axis'; import { getAxisUtilityClass } from '../ChartsAxis/axisClasses'; @@ -12,6 +11,7 @@ import { AxisRoot } from '../internals/components/AxisSharedComponents'; import { ChartsText, ChartsTextProps } from '../ChartsText'; import { getMinXTranslation } from '../internals/geometry'; import { useMounted } from '../hooks/useMounted'; +import { useDrawingArea } from '../hooks/useDrawingArea'; import { getWordsByLines } from '../internals/getWordsByLines'; const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { @@ -130,8 +130,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const theme = useTheme(); const classes = useUtilityClasses({ ...defaultizedProps, theme }); - - const { left, top, width, height } = React.useContext(DrawingContext); + const { left, top, width, height } = useDrawingArea(); const tickSize = disableTicks ? 4 : tickSizeProp; diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index e74ad4ab9ccac..88c4177d63cea 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -4,8 +4,8 @@ import { useSlotProps } from '@mui/base/utils'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; import { CartesianContext } from '../context/CartesianContextProvider'; -import { DrawingContext } from '../context/DrawingProvider'; import { useTicks } from '../hooks/useTicks'; +import { useDrawingArea } from '../hooks/useDrawingArea'; import { ChartsYAxisProps } from '../models/axis'; import { AxisRoot } from '../internals/components/AxisSharedComponents'; import { ChartsText, ChartsTextProps } from '../ChartsText'; @@ -74,7 +74,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { const theme = useTheme(); const classes = useUtilityClasses({ ...defaultizedProps, theme }); - const { left, top, width, height } = React.useContext(DrawingContext); + const { left, top, width, height } = useDrawingArea(); const tickSize = disableTicks ? 4 : tickSizeProp; diff --git a/packages/x-charts/src/Gauge/GaugeProvider.tsx b/packages/x-charts/src/Gauge/GaugeProvider.tsx index d89f938906f06..a73efb81a4792 100644 --- a/packages/x-charts/src/Gauge/GaugeProvider.tsx +++ b/packages/x-charts/src/Gauge/GaugeProvider.tsx @@ -1,8 +1,8 @@ // @ignore - do not document. import * as React from 'react'; -import { DrawingContext } from '../context/DrawingProvider'; import { getPercentageValue } from '../internals/utils'; import { getArcRatios, getAvailableRadius } from './utils'; +import { useDrawingArea } from '../hooks/useDrawingArea'; interface CircularConfig { /** @@ -148,7 +148,7 @@ export function GaugeProvider(props: GaugeProviderProps) { children, } = props; - const { width, height, top, left } = React.useContext(DrawingContext); + const { left, top, width, height } = useDrawingArea(); const ratios = getArcRatios(startAngle, endAngle); diff --git a/packages/x-charts/src/LineChart/AnimatedArea.tsx b/packages/x-charts/src/LineChart/AnimatedArea.tsx index 1be817047a480..a8ef129952df7 100644 --- a/packages/x-charts/src/LineChart/AnimatedArea.tsx +++ b/packages/x-charts/src/LineChart/AnimatedArea.tsx @@ -4,9 +4,9 @@ import { styled } from '@mui/material/styles'; import { color as d3Color } from 'd3-color'; import { animated, useSpring } from '@react-spring/web'; import { useAnimatedPath } from '../internals/useAnimatedPath'; -import { DrawingContext } from '../context/DrawingProvider'; import { cleanId } from '../internals/utils'; import type { AreaElementOwnerState } from './AreaElement'; +import { useChartId, useDrawingArea } from '../hooks'; export const AreaElementPath = styled(animated.path, { name: 'MuiAreaElement', @@ -43,7 +43,8 @@ export interface AnimatedAreaProps extends React.ComponentPropsWithoutRef<'path' */ function AnimatedArea(props: AnimatedAreaProps) { const { d, skipAnimation, ownerState, ...other } = props; - const { left, top, right, bottom, width, height, chartId } = React.useContext(DrawingContext); + const { left, top, right, bottom, width, height } = useDrawingArea(); + const chartId = useChartId(); const path = useAnimatedPath(d!, skipAnimation); diff --git a/packages/x-charts/src/LineChart/AnimatedLine.tsx b/packages/x-charts/src/LineChart/AnimatedLine.tsx index 411e31142a76c..ab0817fce3ea8 100644 --- a/packages/x-charts/src/LineChart/AnimatedLine.tsx +++ b/packages/x-charts/src/LineChart/AnimatedLine.tsx @@ -4,9 +4,10 @@ import { animated, useSpring } from '@react-spring/web'; import { color as d3Color } from 'd3-color'; import { styled } from '@mui/material/styles'; import { useAnimatedPath } from '../internals/useAnimatedPath'; -import { DrawingContext } from '../context/DrawingProvider'; import { cleanId } from '../internals/utils'; import type { LineElementOwnerState } from './LineElement'; +import { useChartId } from '../hooks/useChartId'; +import { useDrawingArea } from '../hooks/useDrawingArea'; export const LineElementPath = styled(animated.path, { name: 'MuiLineElement', @@ -45,7 +46,8 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path' */ function AnimatedLine(props: AnimatedLineProps) { const { d, skipAnimation, ownerState, ...other } = props; - const { left, top, bottom, width, height, right, chartId } = React.useContext(DrawingContext); + const { left, top, bottom, width, height, right } = useDrawingArea(); + const chartId = useChartId(); const path = useAnimatedPath(d, skipAnimation); diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 59a78bbb4ab26..f63d3cd61f181 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -4,9 +4,9 @@ import { SeriesContext } from '../context/SeriesContextProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; import { MarkElement, MarkElementProps } from './MarkElement'; import { getValueToPositionMapper } from '../hooks/useScale'; +import { useChartId } from '../hooks/useChartId'; import { DEFAULT_X_AXIS_KEY } from '../constants'; import { LineItemIdentifier } from '../models/seriesType/line'; -import { DrawingContext } from '../context/DrawingProvider'; import { cleanId } from '../internals/utils'; export interface MarkPlotSlots { @@ -56,7 +56,7 @@ function MarkPlot(props: MarkPlotProps) { const seriesData = React.useContext(SeriesContext).line; const axisData = React.useContext(CartesianContext); - const { chartId } = React.useContext(DrawingContext); + const chartId = useChartId(); const Mark = slots?.mark ?? MarkElement; diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index 9a9cb62b88524..eea608751c354 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -14,7 +14,6 @@ import { } from '../LineChart/extremums'; import { AxisConfig, AxisDefaultized, isBandScaleConfig, isPointScaleConfig } from '../models/axis'; import { getScale } from '../internals/getScale'; -import { DrawingContext } from './DrawingProvider'; import { SeriesContext } from './SeriesContextProvider'; import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants'; import { @@ -26,6 +25,7 @@ import { } from '../models/seriesType/config'; import { MakeOptional } from '../models/helpers'; import { getTickNumber } from '../hooks/useTicks'; +import { useDrawingArea } from '../hooks/useDrawingArea'; import { SeriesId } from '../models/seriesType/common'; export type CartesianContextProviderProps = { @@ -97,7 +97,7 @@ if (process.env.NODE_ENV !== 'production') { function CartesianContextProvider(props: CartesianContextProviderProps) { const { xAxis: inXAxis, yAxis: inYAxis, dataset, children } = props; const formattedSeries = React.useContext(SeriesContext); - const drawingArea = React.useContext(DrawingContext); + const drawingArea = useDrawingArea(); const xAxis = React.useMemo( () => diff --git a/packages/x-charts/src/hooks/index.ts b/packages/x-charts/src/hooks/index.ts index 34c9bd82a4302..123ac2e70b90e 100644 --- a/packages/x-charts/src/hooks/index.ts +++ b/packages/x-charts/src/hooks/index.ts @@ -1,4 +1,5 @@ export * from './useDrawingArea'; +export * from './useChartId'; export * from './useScale'; export * from './useSvgRef'; export { useSeries as unstable_useSeries } from './useSeries'; diff --git a/packages/x-charts/src/hooks/useAxisEvents.ts b/packages/x-charts/src/hooks/useAxisEvents.ts index d31dc834ec7f6..5c9a6fe4c94cc 100644 --- a/packages/x-charts/src/hooks/useAxisEvents.ts +++ b/packages/x-charts/src/hooks/useAxisEvents.ts @@ -1,17 +1,18 @@ import * as React from 'react'; import { InteractionContext } from '../context/InteractionProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; -import { SvgContext, DrawingContext } from '../context/DrawingProvider'; import { isBandScale } from '../internals/isBandScale'; import { AxisDefaultized } from '../models/axis'; import { getSVGPoint } from '../internals/utils'; +import { useSvgRef } from './useSvgRef'; +import { useDrawingArea } from './useDrawingArea'; function getAsANumber(value: number | Date) { return value instanceof Date ? value.getTime() : value; } export const useAxisEvents = (disableAxisListener: boolean) => { - const svgRef = React.useContext(SvgContext); - const { width, height, top, left } = React.useContext(DrawingContext); + const svgRef = useSvgRef(); + const { left, top, width, height } = useDrawingArea(); const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext); const { dispatch } = React.useContext(InteractionContext); diff --git a/packages/x-charts/src/hooks/useChartId.ts b/packages/x-charts/src/hooks/useChartId.ts new file mode 100644 index 0000000000000..0107a8e8df583 --- /dev/null +++ b/packages/x-charts/src/hooks/useChartId.ts @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { DrawingContext } from '../context/DrawingProvider'; + +export function useChartId() { + const { chartId } = React.useContext(DrawingContext); + + return React.useMemo(() => chartId, [chartId]); +} diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 53006a9adf71c..165e4b3cdcad4 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -256,6 +256,7 @@ { "name": "StackOffsetType", "kind": "TypeAlias" }, { "name": "StackOrderType", "kind": "TypeAlias" }, { "name": "unstable_useSeries", "kind": "Function" }, + { "name": "useChartId", "kind": "Function" }, { "name": "useDrawingArea", "kind": "Function" }, { "name": "useGaugeState", "kind": "Function" }, { "name": "useSvgRef", "kind": "Function" }, From 6ddb4f118a23454f8108425cc6633e10345b1ba6 Mon Sep 17 00:00:00 2001 From: alexandre Date: Fri, 12 Apr 2024 16:16:10 +0200 Subject: [PATCH 3/3] add series specific hooks --- packages/x-charts/src/hooks/index.ts | 8 +++- packages/x-charts/src/hooks/useSeries.ts | 52 ++++++++++++++++++++++++ scripts/x-charts.exports.json | 4 ++ 3 files changed, 63 insertions(+), 1 deletion(-) diff --git a/packages/x-charts/src/hooks/index.ts b/packages/x-charts/src/hooks/index.ts index 123ac2e70b90e..c052b357e3799 100644 --- a/packages/x-charts/src/hooks/index.ts +++ b/packages/x-charts/src/hooks/index.ts @@ -2,4 +2,10 @@ export * from './useDrawingArea'; export * from './useChartId'; export * from './useScale'; export * from './useSvgRef'; -export { useSeries as unstable_useSeries } from './useSeries'; +export { + useSeries as unstable_useSeries, + usePieSeries as unstable_usePieSeries, + useLineSeries as unstable_useLineSeries, + useBarSeries as unstable_useBarSeries, + useScatterSeries as unstable_useScatterSeries, +} from './useSeries'; diff --git a/packages/x-charts/src/hooks/useSeries.ts b/packages/x-charts/src/hooks/useSeries.ts index f876776efd702..12817cb944eb0 100644 --- a/packages/x-charts/src/hooks/useSeries.ts +++ b/packages/x-charts/src/hooks/useSeries.ts @@ -21,3 +21,55 @@ export function useSeries() { return series; } + +/** + * Get access to the internal state of pie series. + * The returned object contains: + * - series: a mapping from ids to series attributes. + * - seriesOrder: the array of series ids. + * @returns { series: Record; seriesOrder: SeriesId[]; } | undefined pieSeries + */ +export function usePieSeries() { + const series = useSeries(); + + return React.useMemo(() => series.pie, [series.pie]); +} + +/** + * Get access to the internal state of line series. + * The returned object contains: + * - series: a mapping from ids to series attributes. + * - seriesOrder: the array of series ids. + * @returns { series: Record; seriesOrder: SeriesId[]; } | undefined lineSeries + */ +export function useLineSeries() { + const series = useSeries(); + + return React.useMemo(() => series.line, [series.line]); +} + +/** + * Get access to the internal state of bar series. + * The returned object contains: + * - series: a mapping from ids to series attributes. + * - seriesOrder: the array of series ids. + * @returns { series: Record; seriesOrder: SeriesId[]; } | undefined barSeries + */ +export function useBarSeries() { + const series = useSeries(); + + return React.useMemo(() => series.bar, [series.bar]); +} + +/** + * Get access to the internal state of scatter series. + * The returned object contains: + * - series: a mapping from ids to series attributes. + * - seriesOrder: the array of series ids. + * @returns { series: Record; seriesOrder: SeriesId[]; } | undefined scatterSeries + */ +export function useScatterSeries() { + const series = useSeries(); + + return React.useMemo(() => series.scatter, [series.scatter]); +} diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 165e4b3cdcad4..357e3413a04d6 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -255,6 +255,10 @@ { "name": "StackableSeriesType", "kind": "TypeAlias" }, { "name": "StackOffsetType", "kind": "TypeAlias" }, { "name": "StackOrderType", "kind": "TypeAlias" }, + { "name": "unstable_useBarSeries", "kind": "Function" }, + { "name": "unstable_useLineSeries", "kind": "Function" }, + { "name": "unstable_usePieSeries", "kind": "Function" }, + { "name": "unstable_useScatterSeries", "kind": "Function" }, { "name": "unstable_useSeries", "kind": "Function" }, { "name": "useChartId", "kind": "Function" }, { "name": "useDrawingArea", "kind": "Function" },