Skip to content

Commit 37b8a0d

Browse files
KenanYusufKenanYusuf
authored
Merge branch 'master' into no-columns-overlay
2 parents 6144c8d + 5dec3fc commit 37b8a0d

28 files changed

+428
-258
lines changed

‎docs/data/charts/components/SeriesDemo.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ function ExtremaLabels() {
1717

1818
return (
1919
<React.Fragment>
20-
{lineSeries.seriesOrder.map((seriesId) => (
21-
<SingleSeriesExtremaLabels series={lineSeries.series[seriesId]} />
20+
{lineSeries.map((series) => (
21+
<SingleSeriesExtremaLabels series={series} />
2222
))}
2323
</React.Fragment>
2424
);

‎docs/data/charts/components/SeriesDemo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ function ExtremaLabels() {
1818

1919
return (
2020
<React.Fragment>
21-
{lineSeries.seriesOrder.map((seriesId) => (
22-
<SingleSeriesExtremaLabels series={lineSeries.series[seriesId]} />
21+
{lineSeries.map((series) => (
22+
<SingleSeriesExtremaLabels series={series} />
2323
))}
2424
</React.Fragment>
2525
);

‎docs/data/charts/scatter/CustomScatter.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ const series = [
2525
];
2626

2727
function LinkPoints({ seriesId, close }) {
28-
const scatter = useScatterSeries();
28+
const scatter = useScatterSeries(seriesId);
2929
const xScale = useXScale();
3030
const yScale = useYScale();
3131

32-
if (!scatter || !scatter.series[seriesId]) {
32+
if (!scatter) {
3333
return null;
3434
}
35-
const { color, data } = scatter.series[seriesId];
35+
const { color, data } = scatter;
3636

3737
if (!data) {
3838
return null;

‎docs/data/charts/scatter/CustomScatter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ const series = [
2323
];
2424

2525
function LinkPoints({ seriesId, close }: { seriesId: string; close?: boolean }) {
26-
const scatter = useScatterSeries();
26+
const scatter = useScatterSeries(seriesId);
2727
const xScale = useXScale();
2828
const yScale = useYScale();
2929

30-
if (!scatter || !scatter.series[seriesId]) {
30+
if (!scatter) {
3131
return null;
3232
}
33-
const { color, data } = scatter.series[seriesId];
33+
const { color, data } = scatter;
3434

3535
if (!data) {
3636
return null;

‎packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
5-
import { useHeatmapSeries } from '../hooks/useHeatmapSeries';
5+
import { useHeatmapSeriesContext } from '../hooks/useHeatmapSeries';
66
import { HeatmapItem, HeatmapItemProps } from './HeatmapItem';
77

88
export interface HeatmapPlotProps extends Pick<HeatmapItemProps, 'slots' | 'slotProps'> {}
@@ -11,7 +11,7 @@ function HeatmapPlot(props: HeatmapPlotProps) {
1111
const xScale = useXScale<'band'>();
1212
const yScale = useYScale<'band'>();
1313
const colorScale = useZColorScale()!;
14-
const series = useHeatmapSeries();
14+
const series = useHeatmapSeriesContext();
1515

1616
const xDomain = xScale.domain();
1717
const yDomain = yScale.domain();

‎packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from '@mui/x-charts/ChartsTooltip';
1717
import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
1818
import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals';
19-
import { useHeatmapSeries } from '../hooks/useHeatmapSeries';
19+
import { useHeatmapSeriesContext } from '../hooks/useHeatmapSeries';
2020

2121
export interface HeatmapTooltipProps
2222
extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {}
@@ -44,7 +44,7 @@ function DefaultHeatmapTooltipContent(props: Pick<HeatmapTooltipProps, 'classes'
4444

4545
const xAxis = useXAxis();
4646
const yAxis = useYAxis();
47-
const heatmapSeries = useHeatmapSeries();
47+
const heatmapSeries = useHeatmapSeriesContext();
4848

4949
const tooltipData = useItemTooltip<'heatmap'>();
5050

‎packages/x-charts-pro/src/hooks/useHeatmapSeries.test.tsx

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,72 @@
11
import { renderHook } from '@mui/internal-test-utils';
22
import { expect } from 'chai';
33
import * as React from 'react';
4-
import { useHeatmapSeries } from './useHeatmapSeries';
4+
import { useHeatmapSeries, useHeatmapSeriesContext } from './useHeatmapSeries';
55
import { Heatmap } from '../Heatmap';
66
import { HeatmapSeriesType } from '../models';
77

8-
describe('useHeatmapSeries', () => {
9-
const mockSeries: HeatmapSeriesType[] = [
10-
{
11-
type: 'heatmap',
12-
id: '1',
13-
data: [
14-
[0, 0, 10],
15-
[0, 1, 20],
16-
[0, 2, 40],
17-
],
18-
},
19-
{
20-
type: 'heatmap',
21-
id: '2',
22-
data: [
23-
[3, 2, 20],
24-
[3, 3, 70],
25-
[3, 4, 90],
26-
],
27-
},
28-
];
8+
const mockSeries: HeatmapSeriesType[] = [
9+
{
10+
type: 'heatmap',
11+
id: '1',
12+
data: [
13+
[0, 0, 10],
14+
[0, 1, 20],
15+
[0, 2, 40],
16+
],
17+
},
18+
{
19+
type: 'heatmap',
20+
id: '2',
21+
data: [
22+
[3, 2, 20],
23+
[3, 3, 70],
24+
[3, 4, 90],
25+
],
26+
},
27+
];
2928

30-
const defaultProps = {
31-
series: mockSeries,
32-
height: 400,
33-
width: 400,
34-
xAxis: [{ data: [1, 2, 3, 4] }],
35-
yAxis: [{ data: ['A', 'B', 'C', 'D', 'E'] }],
36-
};
29+
const defaultProps = {
30+
series: mockSeries,
31+
height: 400,
32+
width: 400,
33+
xAxis: [{ data: [1, 2, 3, 4] }],
34+
yAxis: [{ data: ['A', 'B', 'C', 'D', 'E'] }],
35+
};
3736

38-
const options: any = {
39-
wrapper: ({ children }: { children: React.ReactElement }) => {
40-
return <Heatmap {...defaultProps}>{children}</Heatmap>;
41-
},
42-
};
37+
const options: any = {
38+
wrapper: ({ children }: { children: React.ReactElement }) => {
39+
return <Heatmap {...defaultProps}>{children}</Heatmap>;
40+
},
41+
};
4342

43+
describe('useHeatmapSeriesContext', () => {
4444
it('should return all heatmap series when no seriesIds are provided', () => {
45-
const { result } = renderHook(() => useHeatmapSeries(), options);
45+
const { result } = renderHook(() => useHeatmapSeriesContext(), options);
4646
expect(result.current?.seriesOrder).to.deep.equal(['1', '2']);
4747
expect(Object.keys(result.current?.series ?? {})).to.deep.equal(['1', '2']);
4848
});
49+
});
4950

51+
// eslint-disable-next-line mocha/max-top-level-suites
52+
describe('useHeatmapSeries', () => {
5053
it('should return the specific heatmap series when a single seriesId is provided', () => {
5154
const { result } = renderHook(() => useHeatmapSeries('1'), options);
5255
expect(result.current?.id).to.deep.equal(mockSeries[0].id);
5356
});
5457

58+
it('should return all heatmap series when no seriesId is provided', () => {
59+
const { result } = renderHook(() => useHeatmapSeries(), options);
60+
expect(result.current?.map((v) => v?.id)).to.deep.equal([mockSeries[0].id, mockSeries[1].id]);
61+
});
62+
5563
it('should return the specific heatmap series when multiple seriesIds are provided', () => {
5664
const { result } = renderHook(() => useHeatmapSeries(['2', '1']), options);
5765
expect(result.current?.map((v) => v?.id)).to.deep.equal([mockSeries[1].id, mockSeries[0].id]);
5866
});
5967

6068
it('should return undefined series when invalid seriesIds are provided', () => {
6169
const { result } = renderHook(() => useHeatmapSeries(['1', '3']), options);
62-
expect(result.current?.map((v) => v?.id)).to.deep.equal([mockSeries[0].id, undefined]);
70+
expect(result.current?.map((v) => v?.id)).to.deep.equal([mockSeries[0].id]);
6371
});
6472
});

‎packages/x-charts-pro/src/hooks/useHeatmapSeries.ts

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,51 @@
11
'use client';
22
import {
3+
createAllSeriesSelectorOfType,
34
createSeriesSelectorsOfType,
45
ProcessedSeries,
56
SeriesId,
67
ChartSeriesDefaultized,
78
} from '@mui/x-charts/internals';
89

9-
const selectorSeries = createSeriesSelectorsOfType('heatmap');
10+
const useSelectorSeries = createSeriesSelectorsOfType('heatmap');
11+
const useSelectorSeriesContext = createAllSeriesSelectorOfType('heatmap');
12+
13+
export type UseHeatmapSeriesReturnValue = ChartSeriesDefaultized<'heatmap'>;
14+
export type UseHeatmapSeriesContextReturnValue = ProcessedSeries['heatmap'];
1015

1116
/**
1217
* Get access to the internal state of heatmap series.
13-
* The returned object contains:
14-
* - series: a mapping from ids to series attributes.
15-
* - seriesOrder: the array of series ids.
16-
* @returns {{ series: Record<SeriesId, DefaultizedHeatmapSeriesType>; seriesOrder: SeriesId[]; } | undefined} heatmapSeries
18+
*
19+
* @param {SeriesId} seriesId The id of the series to get.
20+
* @returns {UseHeatmapSeriesReturnValue} the heatmap series
1721
*/
18-
export function useHeatmapSeries(): ProcessedSeries['heatmap'];
22+
export function useHeatmapSeries(seriesId: SeriesId): UseHeatmapSeriesReturnValue | undefined;
1923
/**
2024
* Get access to the internal state of heatmap series.
2125
*
22-
* @param {SeriesId} seriesId The id of the series to get.
23-
* @returns {ChartSeriesDefaultized<'heatmap'> | undefined} heatmapSeries
26+
* When called without arguments, it returns all heatmap series.
27+
*
28+
* @returns {UseHeatmapSeriesReturnValue[]} the heatmap series
2429
*/
25-
export function useHeatmapSeries(seriesId: SeriesId): ChartSeriesDefaultized<'heatmap'> | undefined;
30+
export function useHeatmapSeries(): UseHeatmapSeriesReturnValue[];
2631
/**
2732
* Get access to the internal state of heatmap series.
2833
*
2934
* @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
30-
* @returns {ChartSeriesDefaultized<'heatmap'>[] | undefined} heatmapSeries
35+
* @returns {UseHeatmapSeriesReturnValue[]} the heatmap series
3136
*/
32-
export function useHeatmapSeries(
33-
seriesIds: SeriesId[],
34-
): (ChartSeriesDefaultized<'heatmap'> | undefined)[];
37+
export function useHeatmapSeries(seriesIds: SeriesId[]): UseHeatmapSeriesReturnValue[];
3538
export function useHeatmapSeries(seriesIds?: SeriesId | SeriesId[]) {
36-
return selectorSeries(seriesIds);
39+
return useSelectorSeries(seriesIds);
40+
}
41+
42+
/**
43+
* Get access to the internal state of heatmap series.
44+
* The returned object contains:
45+
* - series: a mapping from ids to series attributes.
46+
* - seriesOrder: the array of series ids.
47+
* @returns the heatmap series
48+
*/
49+
export function useHeatmapSeriesContext(): UseHeatmapSeriesContextReturnValue {
50+
return useSelectorSeriesContext();
3751
}

‎packages/x-charts/src/BarChart/BarPlot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { BarClipPath } from './BarClipPath';
1313
import { BarLabelItemProps, BarLabelSlotProps, BarLabelSlots } from './BarLabel/BarLabelItem';
1414
import { BarLabelPlot } from './BarLabel/BarLabelPlot';
1515
import { checkScaleErrors } from './checkScaleErrors';
16-
import { useBarSeries } from '../hooks/useBarSeries';
16+
import { useBarSeriesContext } from '../hooks/useBarSeries';
1717
import { useSkipAnimation } from '../context/AnimationProvider';
1818
import { SeriesProcessorResult } from '../internals/plugins/models/seriesConfig/seriesProcessor.types';
1919

@@ -89,7 +89,7 @@ const useAggregatedData = (): {
8989
masksData: MaskData[];
9090
} => {
9191
const seriesData =
92-
useBarSeries() ??
92+
useBarSeriesContext() ??
9393
({ series: {}, stackingGroups: [], seriesOrder: [] } as SeriesProcessorResult<'bar'>);
9494

9595
const drawingArea = useDrawingArea();

‎packages/x-charts/src/LineChart/AreaPlot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { getCurveFactory } from '../internals/getCurve';
1515
import { isBandScale } from '../internals/isBandScale';
1616
import { DEFAULT_X_AXIS_KEY } from '../constants';
1717
import { LineItemIdentifier } from '../models/seriesType/line';
18-
import { useLineSeries } from '../hooks/useLineSeries';
18+
import { useLineSeriesContext } from '../hooks/useLineSeries';
1919
import { useSkipAnimation } from '../context/AnimationProvider';
2020
import { useChartGradientIdBuilder } from '../hooks/useChartGradientId';
2121
import { useXAxes, useYAxes } from '../hooks/useAxis';
@@ -49,7 +49,7 @@ const AreaPlotRoot = styled('g', {
4949
});
5050

5151
const useAggregatedData = () => {
52-
const seriesData = useLineSeries();
52+
const seriesData = useLineSeriesContext();
5353
const { xAxis, xAxisIds } = useXAxes();
5454
const { yAxis, yAxisIds } = useYAxes();
5555
const getGradientId = useChartGradientIdBuilder();

‎packages/x-charts/src/LineChart/LineHighlightPlot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useSelector } from '../internals/store/useSelector';
77
import { LineHighlightElement, LineHighlightElementProps } from './LineHighlightElement';
88
import { getValueToPositionMapper } from '../hooks/useScale';
99
import { DEFAULT_X_AXIS_KEY } from '../constants';
10-
import { useLineSeries } from '../hooks/useLineSeries';
10+
import { useLineSeriesContext } from '../hooks/useLineSeries';
1111
import getColor from './seriesConfig/getColor';
1212
import { useChartContext } from '../context/ChartProvider';
1313
import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
@@ -47,7 +47,7 @@ export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElemen
4747
function LineHighlightPlot(props: LineHighlightPlotProps) {
4848
const { slots, slotProps, ...other } = props;
4949

50-
const seriesData = useLineSeries();
50+
const seriesData = useLineSeriesContext();
5151
const { xAxis, xAxisIds } = useXAxes();
5252
const { yAxis, yAxisIds } = useYAxes();
5353

‎packages/x-charts/src/LineChart/LinePlot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { getCurveFactory } from '../internals/getCurve';
1515
import { isBandScale } from '../internals/isBandScale';
1616
import { DEFAULT_X_AXIS_KEY } from '../constants';
1717
import { LineItemIdentifier } from '../models/seriesType/line';
18-
import { useLineSeries } from '../hooks/useLineSeries';
18+
import { useLineSeriesContext } from '../hooks/useLineSeries';
1919
import { useSkipAnimation } from '../context/AnimationProvider';
2020
import { useChartGradientIdBuilder } from '../hooks/useChartGradientId';
2121
import { useXAxes, useYAxes } from '../hooks';
@@ -49,7 +49,7 @@ const LinePlotRoot = styled('g', {
4949
});
5050

5151
const useAggregatedData = () => {
52-
const seriesData = useLineSeries();
52+
const seriesData = useLineSeriesContext();
5353

5454
const { xAxis, xAxisIds } = useXAxes();
5555
const { yAxis, yAxisIds } = useYAxes();

‎packages/x-charts/src/LineChart/MarkPlot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
55
import { useSkipAnimation } from '../context/AnimationProvider';
66
import { useChartId } from '../hooks/useChartId';
77
import { getValueToPositionMapper } from '../hooks/useScale';
8-
import { useLineSeries } from '../hooks/useLineSeries';
8+
import { useLineSeriesContext } from '../hooks/useLineSeries';
99
import { cleanId } from '../internals/cleanId';
1010
import { LineItemIdentifier } from '../models/seriesType/line';
1111
import { CircleMarkElement } from './CircleMarkElement';
@@ -60,7 +60,7 @@ function MarkPlot(props: MarkPlotProps) {
6060
const { slots, slotProps, skipAnimation: inSkipAnimation, onItemClick, ...other } = props;
6161
const skipAnimation = useSkipAnimation(inSkipAnimation);
6262

63-
const seriesData = useLineSeries();
63+
const seriesData = useLineSeriesContext();
6464
const { xAxis, xAxisIds } = useXAxes();
6565
const { yAxis, yAxisIds } = useYAxes();
6666

‎packages/x-charts/src/PieChart/PiePlot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { PieArcPlot, PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } fro
55
import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps, PieArcLabelPlot } from './PieArcLabelPlot';
66
import { getPercentageValue } from '../internals/getPercentageValue';
77
import { getPieCoordinates } from './getPieCoordinates';
8-
import { usePieSeries } from '../hooks/usePieSeries';
8+
import { usePieSeriesContext } from '../hooks/usePieSeries';
99
import { useSkipAnimation } from '../context/AnimationProvider';
1010
import { useDrawingArea } from '../hooks';
1111

@@ -38,7 +38,7 @@ export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'o
3838
*/
3939
function PiePlot(props: PiePlotProps) {
4040
const { skipAnimation: inSkipAnimation, slots, slotProps, onItemClick } = props;
41-
const seriesData = usePieSeries();
41+
const seriesData = usePieSeriesContext();
4242
const { left, top, width, height } = useDrawingArea();
4343
const skipAnimation = useSkipAnimation(inSkipAnimation);
4444

‎packages/x-charts/src/ScatterChart/ScatterPlot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import { Scatter, ScatterProps } from './Scatter';
5-
import { useScatterSeries } from '../hooks/useScatterSeries';
5+
import { useScatterSeriesContext } from '../hooks/useScatterSeries';
66
import getColor from './seriesConfig/getColor';
77
import { useXAxes, useYAxes } from '../hooks';
88
import { useZAxes } from '../hooks/useZAxis';
@@ -40,7 +40,7 @@ export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
4040
*/
4141
function ScatterPlot(props: ScatterPlotProps) {
4242
const { slots, slotProps, onItemClick } = props;
43-
const seriesData = useScatterSeries();
43+
const seriesData = useScatterSeriesContext();
4444
const { xAxis, xAxisIds } = useXAxes();
4545
const { yAxis, yAxisIds } = useYAxes();
4646
const { zAxis, zAxisIds } = useZAxes();

0 commit comments

Comments
 (0)