Skip to content

Commit 0cecc53

Browse files
alexfauquettealexfauquette
committed
[charts][draft] Explore selector typing
1 parent aea0bd2 commit 0cecc53

3 files changed

Lines changed: 155 additions & 126 deletions

File tree

‎packages/x-charts/src/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,28 @@ import {
66
selectorChartRightAxisSize,
77
selectorChartTopAxisSize,
88
} from '../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors';
9+
import { ChartState } from '../../models/chart';
910

1011
export const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature> = (
1112
state,
1213
) => state.dimensions;
1314

14-
export const selectorChartMargin = createSelector(
15-
selectorChartDimensionsState,
16-
(dimensionsState) => dimensionsState.margin,
17-
);
18-
const selectorChartWidth = createSelector(
19-
selectorChartDimensionsState,
20-
(dimensionsState) => dimensionsState.width,
21-
);
22-
const selectorChartHeight = createSelector(
23-
selectorChartDimensionsState,
24-
(dimensionsState) => dimensionsState.height,
25-
);
15+
export const selectorChartMargin = (state: ChartState<[UseChartDimensionsSignature]>) =>
16+
state.dimensions.margin;
17+
18+
const selectorChartWidth = (state: ChartState<[UseChartDimensionsSignature]>) =>
19+
state.dimensions.width;
20+
const selectorChartHeight = (state: ChartState<[UseChartDimensionsSignature]>) =>
21+
state.dimensions.height;
2622

27-
const selectorChartTopMargin = createSelector(selectorChartMargin, (margin) => margin.top);
28-
const selectorChartRightMargin = createSelector(selectorChartMargin, (margin) => margin.right);
29-
const selectorChartBottomMargin = createSelector(selectorChartMargin, (margin) => margin.bottom);
30-
const selectorChartLeftMargin = createSelector(selectorChartMargin, (margin) => margin.left);
23+
const selectorChartTopMargin = (state: ChartState<[UseChartDimensionsSignature]>) =>
24+
state.dimensions.margin.top;
25+
const selectorChartRightMargin = (state: ChartState<[UseChartDimensionsSignature]>) =>
26+
state.dimensions.margin.right;
27+
const selectorChartBottomMargin = (state: ChartState<[UseChartDimensionsSignature]>) =>
28+
state.dimensions.margin.bottom;
29+
const selectorChartLeftMargin = (state: ChartState<[UseChartDimensionsSignature]>) =>
30+
state.dimensions.margin.left;
3131

3232
export const selectorChartDrawingArea = createSelector(
3333
selectorChartWidth,

‎packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
import { createSelector } from '../../utils/selectors';
21
import { UseChartCartesianAxisSignature } from './useChartCartesianAxis.types';
2+
import { DefaultedXAxis, DefaultedYAxis } from '../../../../models/axis';
33
import { ChartState } from '../../models/chart';
44

55
export const selectorChartCartesianAxisState = (
66
state: ChartState<[], [UseChartCartesianAxisSignature]>,
77
) => state.cartesianAxis;
88

9-
export const selectorChartRawXAxis = createSelector(
10-
selectorChartCartesianAxisState,
11-
(axis) => axis?.x,
12-
);
9+
export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(
10+
state: State,
11+
) => DefaultedXAxis[] | undefined;
1312

14-
export const selectorChartRawYAxis = createSelector(
15-
selectorChartCartesianAxisState,
16-
(axis) => axis?.y,
17-
);
13+
export const selectorChartRawXAxis: SelectorChartRawXAxisType = (state) => state.cartesianAxis?.x;
14+
15+
export type SelectorChartRawYAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(
16+
state: State,
17+
) => DefaultedYAxis[] | undefined;
18+
19+
export const selectorChartRawYAxis: SelectorChartRawYAxisType = (state) => state.cartesianAxis?.y;

‎packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.ts‎

Lines changed: 128 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,27 @@ import {
33
selectorChartSeriesConfig,
44
selectorChartSeriesProcessed,
55
} from '../../corePlugins/useChartSeries';
6-
import { createSelector } from '../../utils/selectors';
7-
import { computeAxisValue } from './computeAxisValue';
8-
import { UseChartCartesianAxisSignature } from './useChartCartesianAxis.types';
6+
import { ChartsSelector, createSelector } from '../../utils/selectors';
7+
import { computeAxisValue, ComputeResult } from './computeAxisValue';
8+
import {
9+
DefaultizedZoomOptions,
10+
ExtremumFilter,
11+
UseChartCartesianAxisSignature,
12+
} from './useChartCartesianAxis.types';
913
import { ChartState } from '../../models/chart';
1014
import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper';
1115
import { ZoomAxisFilters, ZoomData } from './zoom.types';
1216
import { createZoomLookup } from './createZoomLookup';
13-
import { AxisId } from '../../../../models/axis';
17+
import {
18+
AxisConfig,
19+
AxisId,
20+
AxisScaleConfig,
21+
ChartsAxisProps,
22+
ChartsXAxisProps,
23+
ChartsYAxisProps,
24+
DefaultedXAxis,
25+
DefaultedYAxis,
26+
} from '../../../../models/axis';
1427
import {
1528
selectorChartRawXAxis,
1629
selectorChartRawYAxis,
@@ -41,148 +54,162 @@ export const selectorChartZoomMap = createSelector(
4154
(zoom) => zoom?.zoomData && createZoomMap(zoom?.zoomData),
4255
);
4356

44-
const selectorChartXZoomOptionsLookup = createSelector(
45-
selectorChartRawXAxis,
46-
createZoomLookup('x'),
47-
);
48-
49-
const selectorChartYZoomOptionsLookup = createSelector(
50-
selectorChartRawYAxis,
51-
createZoomLookup('y'),
52-
);
53-
54-
export const selectorChartZoomOptionsLookup = createSelector(
55-
[selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup],
56-
(xLookup, yLookup) => ({ ...xLookup, ...yLookup }),
57-
);
57+
export const selectorChartZoomOptionsLookup: ChartsSelector<
58+
ChartState<any>,
59+
any,
60+
Record<AxisId, DefaultizedZoomOptions>
61+
> = createSelector([selectorChartRawXAxis, selectorChartRawYAxis], (xAxis, yAxis) => ({
62+
...createZoomLookup('x')(xAxis),
63+
...createZoomLookup('y')(yAxis),
64+
}));
5865

5966
export const selectorChartAxisZoomOptionsLookup = createSelector(
60-
[
61-
selectorChartXZoomOptionsLookup,
62-
selectorChartYZoomOptionsLookup,
63-
(state, axisId: AxisId) => axisId,
64-
],
65-
(xLookup, yLookup, axisId) => xLookup[axisId] ?? yLookup[axisId],
66-
);
67-
68-
const selectorChartXFilter = createSelector(
69-
[
70-
selectorChartZoomMap,
71-
selectorChartZoomOptionsLookup,
72-
selectorChartSeriesConfig,
73-
selectorChartSeriesProcessed,
74-
],
75-
(zoomMap, zoomOptions, seriesConfig, formattedSeries) =>
76-
zoomMap &&
77-
zoomOptions &&
78-
createAxisFilterMapper({
79-
zoomMap,
80-
zoomOptions,
81-
seriesConfig,
82-
formattedSeries,
83-
direction: 'x',
84-
}),
67+
[selectorChartZoomOptionsLookup, (_, axisId: AxisId) => axisId],
68+
(axisLookup, axisId) => axisLookup[axisId],
8569
);
8670

87-
const selectorChartYFilter = createSelector(
88-
[
89-
selectorChartZoomMap,
90-
selectorChartZoomOptionsLookup,
91-
selectorChartSeriesConfig,
92-
selectorChartSeriesProcessed,
93-
],
94-
(zoomMap, zoomOptions, seriesConfig, formattedSeries) =>
95-
zoomMap &&
96-
zoomOptions &&
97-
createAxisFilterMapper({
98-
zoomMap,
99-
zoomOptions,
100-
seriesConfig,
101-
formattedSeries,
102-
direction: 'y',
103-
}),
104-
);
105-
106-
const selectorChartZoomAxisFilters = createSelector(
107-
[selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis],
108-
(xMapper, yMapper, xAxis, yAxis) => {
109-
if (xMapper === undefined || yMapper === undefined) {
110-
// Early return if there is no zoom.
111-
return undefined;
71+
type AxisFilterMapper<Axis extends ChartsAxisProps> =
72+
| ((
73+
axis: AxisConfig<keyof AxisScaleConfig, any, Axis>,
74+
axisIndex: number,
75+
) => ExtremumFilter | null)
76+
| undefined;
77+
const getZoomAxisFilters = (
78+
xMapper: AxisFilterMapper<ChartsXAxisProps>,
79+
yMapper: AxisFilterMapper<ChartsYAxisProps>,
80+
xAxis: DefaultedXAxis[] | undefined,
81+
yAxis: DefaultedYAxis[] | undefined,
82+
) => {
83+
if (xMapper === undefined || yMapper === undefined) {
84+
// Early return if there is no zoom.
85+
return undefined;
86+
}
87+
88+
const xFilters = xAxis?.reduce<ZoomAxisFilters>((acc, axis, index) => {
89+
const filter = xMapper(axis, index);
90+
if (filter !== null) {
91+
acc[axis.id] = filter;
11292
}
93+
return acc;
94+
}, {});
11395

114-
const xFilters = xAxis?.reduce<ZoomAxisFilters>((acc, axis, index) => {
115-
const filter = xMapper(axis, index);
116-
if (filter !== null) {
117-
acc[axis.id] = filter;
118-
}
119-
return acc;
120-
}, {});
121-
122-
const yFilters = yAxis?.reduce<ZoomAxisFilters>((acc, axis, index) => {
123-
const filter = yMapper(axis, index);
124-
if (filter !== null) {
125-
acc[axis.id] = filter;
126-
}
127-
return acc;
128-
}, {} as ZoomAxisFilters);
129-
130-
if (Object.keys(xFilters ?? {}).length === 0 && Object.keys(yFilters ?? {}).length === 0) {
131-
return undefined;
96+
const yFilters = yAxis?.reduce<ZoomAxisFilters>((acc, axis, index) => {
97+
const filter = yMapper(axis, index);
98+
if (filter !== null) {
99+
acc[axis.id] = filter;
132100
}
101+
return acc;
102+
}, {} as ZoomAxisFilters);
133103

134-
return createGetAxisFilters({ ...xFilters, ...yFilters });
135-
},
136-
);
104+
if (Object.keys(xFilters ?? {}).length === 0 && Object.keys(yFilters ?? {}).length === 0) {
105+
return undefined;
106+
}
107+
108+
return createGetAxisFilters({ ...xFilters, ...yFilters });
109+
};
137110

138111
/**
139112
* The only interesting selectors that merge axis data and zoom if provided.
140113
*/
141114

142-
export const selectorChartXAxis = createSelector(
115+
export const selectorChartXAxis: ChartsSelector<
116+
ChartState<any>,
117+
any,
118+
ComputeResult<ChartsXAxisProps>
119+
> = createSelector(
143120
[
144121
selectorChartRawXAxis,
122+
selectorChartRawYAxis,
145123
selectorChartDrawingArea,
146124
selectorChartSeriesProcessed,
147125
selectorChartSeriesConfig,
148126
selectorChartZoomMap,
149127
selectorChartZoomOptionsLookup,
150-
selectorChartZoomAxisFilters,
151128
],
152-
(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) =>
153-
computeAxisValue({
129+
(xAxis, yAxis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions) => {
130+
const xAxisFilter =
131+
zoomMap &&
132+
zoomOptions &&
133+
createAxisFilterMapper({
134+
zoomMap,
135+
zoomOptions,
136+
seriesConfig,
137+
formattedSeries,
138+
direction: 'x',
139+
});
140+
const yAxisFilter =
141+
zoomMap &&
142+
zoomOptions &&
143+
createAxisFilterMapper({
144+
zoomMap,
145+
zoomOptions,
146+
seriesConfig,
147+
formattedSeries,
148+
direction: 'y',
149+
});
150+
151+
const getFilters = getZoomAxisFilters(xAxisFilter, yAxisFilter, xAxis, yAxis);
152+
return computeAxisValue({
154153
drawingArea,
155154
formattedSeries,
156-
axis,
155+
axis: xAxis,
157156
seriesConfig,
158157
axisDirection: 'x',
159158
zoomMap,
160159
zoomOptions,
161160
getFilters,
162-
}),
161+
});
162+
},
163163
);
164164

165-
export const selectorChartYAxis = createSelector(
165+
export const selectorChartYAxis: ChartsSelector<
166+
ChartState<any>,
167+
any,
168+
ComputeResult<ChartsYAxisProps>
169+
> = createSelector(
166170
[
171+
selectorChartRawXAxis,
167172
selectorChartRawYAxis,
168173
selectorChartDrawingArea,
169174
selectorChartSeriesProcessed,
170175
selectorChartSeriesConfig,
171176
selectorChartZoomMap,
172177
selectorChartZoomOptionsLookup,
173-
selectorChartZoomAxisFilters,
174178
],
175-
(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) =>
176-
computeAxisValue({
179+
(xAxis, yAxis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions) => {
180+
const xAxisFilter =
181+
zoomMap &&
182+
zoomOptions &&
183+
createAxisFilterMapper({
184+
zoomMap,
185+
zoomOptions,
186+
seriesConfig,
187+
formattedSeries,
188+
direction: 'x',
189+
});
190+
const yAxisFilter =
191+
zoomMap &&
192+
zoomOptions &&
193+
createAxisFilterMapper({
194+
zoomMap,
195+
zoomOptions,
196+
seriesConfig,
197+
formattedSeries,
198+
direction: 'y',
199+
});
200+
201+
const getFilters = getZoomAxisFilters(xAxisFilter, yAxisFilter, xAxis, yAxis);
202+
return computeAxisValue({
177203
drawingArea,
178204
formattedSeries,
179-
axis,
205+
axis: yAxis,
180206
seriesConfig,
181207
axisDirection: 'y',
182208
zoomMap,
183209
zoomOptions,
184210
getFilters,
185-
}),
211+
});
212+
},
186213
);
187214

188215
export const selectorChartAxis = createSelector(

0 commit comments

Comments
 (0)