Skip to content

Commit ce8b49a

Browse files
alexfauquettealexfauquette
committed
feedback
1 parent 72f6e08 commit ce8b49a

3 files changed

Lines changed: 150 additions & 139 deletions

File tree

‎docs/data/charts/map/ProjectionMapShape.js‎

Lines changed: 69 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -149,67 +149,75 @@ export default function ProjectionMapShape() {
149149
<Typography gutterBottom>
150150
Rotation: {autoRotation ? 'auto' : `(${rotation[0]}°, ${rotation[1]}°)`}
151151
</Typography>
152-
<FormControlLabel
153-
control={
154-
<Checkbox
155-
size="small"
156-
checked={autoRotation}
157-
onChange={(event) => setAutoRotation(event.target.checked)}
152+
{usaProjection ? (
153+
<Typography variant="caption">
154+
Rotation is not available for the Albers USA projection.
155+
</Typography>
156+
) : (
157+
<React.Fragment>
158+
<FormControlLabel
159+
control={
160+
<Checkbox
161+
size="small"
162+
checked={autoRotation}
163+
onChange={(event) => setAutoRotation(event.target.checked)}
164+
/>
165+
}
166+
label={`auto rotation`}
158167
/>
159-
}
160-
label={`auto rotation`}
161-
/>
162-
{autoRotation ? null : (
163-
<div>
164-
<ButtonGroup
165-
variant="outlined"
166-
aria-label="outlined button group"
167-
fullWidth
168-
>
169-
{cities.map(({ name, coordinates }) => (
170-
<Button
168+
{autoRotation ? null : (
169+
<div>
170+
<ButtonGroup
171+
variant="outlined"
172+
aria-label="outlined button group"
173+
fullWidth
174+
>
175+
{cities.map(({ name, coordinates }) => (
176+
<Button
177+
size="small"
178+
key={name}
179+
onClick={() => {
180+
if ('transverseMercator' === projection) {
181+
return setRotation([0, -coordinates[1]]);
182+
}
183+
if (isCylindrical(projection)) {
184+
return setRotation([-coordinates[0], 0]);
185+
}
186+
return setRotation([-coordinates[0], -coordinates[1]]);
187+
}}
188+
disabled={usaProjection}
189+
>
190+
{name}
191+
</Button>
192+
))}
193+
</ButtonGroup>
194+
<Slider
195+
value={rotation[0]}
196+
min={-180}
197+
max={180}
198+
step={10}
199+
marks={[{ value: 0, label: '' }]}
200+
aria-label="longitude"
171201
size="small"
172-
key={name}
173-
onClick={() => {
174-
if ('transverseMercator' === projection) {
175-
return setRotation([0, -coordinates[1]]);
176-
}
177-
if (isCylindrical(projection)) {
178-
return setRotation([-coordinates[0], 0]);
179-
}
180-
return setRotation([-coordinates[0], -coordinates[1]]);
181-
}}
202+
onChange={(_, value) => setRotation((prev) => [value, prev[1]])}
203+
valueLabelDisplay="auto"
182204
disabled={usaProjection}
183-
>
184-
{name}
185-
</Button>
186-
))}
187-
</ButtonGroup>
188-
<Slider
189-
value={rotation[0]}
190-
min={-180}
191-
max={180}
192-
step={10}
193-
marks={[{ value: 0, label: '' }]}
194-
aria-label="longitude"
195-
size="small"
196-
onChange={(_, value) => setRotation((prev) => [value, prev[1]])}
197-
valueLabelDisplay="auto"
198-
disabled={usaProjection}
199-
/>
200-
<Slider
201-
value={rotation[1]}
202-
min={-180}
203-
max={180}
204-
step={10}
205-
marks={[{ value: 0, label: '' }]}
206-
aria-label="latitude"
207-
size="small"
208-
onChange={(_, value) => setRotation((prev) => [prev[0], value])}
209-
valueLabelDisplay="auto"
210-
disabled={usaProjection}
211-
/>
212-
</div>
205+
/>
206+
<Slider
207+
value={rotation[1]}
208+
min={-180}
209+
max={180}
210+
step={10}
211+
marks={[{ value: 0, label: '' }]}
212+
aria-label="latitude"
213+
size="small"
214+
onChange={(_, value) => setRotation((prev) => [prev[0], value])}
215+
valueLabelDisplay="auto"
216+
disabled={usaProjection}
217+
/>
218+
</div>
219+
)}
220+
</React.Fragment>
213221
)}
214222
</div>
215223
<div>
@@ -238,7 +246,6 @@ export default function ProjectionMapShape() {
238246
size="small"
239247
onChange={(_, value) => setTranslation((prev) => [value, prev[1]])}
240248
valueLabelDisplay="auto"
241-
disabled={usaProjection}
242249
/>
243250
<Slider
244251
value={translation[1]}
@@ -249,7 +256,6 @@ export default function ProjectionMapShape() {
249256
size="small"
250257
onChange={(_, value) => setTranslation((prev) => [prev[0], value])}
251258
valueLabelDisplay="auto"
252-
disabled={usaProjection}
253259
/>
254260
</div>
255261
)}
@@ -268,9 +274,9 @@ export default function ProjectionMapShape() {
268274
/>
269275
<Slider
270276
value={scale}
271-
min={10}
272-
max={500}
273-
step={10}
277+
min={100}
278+
max={1500}
279+
step={100}
274280
size="small"
275281
disabled={autoScale}
276282
onChange={(_, value) => setScale(value)}

‎docs/data/charts/map/ProjectionMapShape.tsx‎

Lines changed: 73 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -161,71 +161,79 @@ export default function ProjectionMapShape() {
161161
<Typography gutterBottom>
162162
Rotation: {autoRotation ? 'auto' : `(${rotation[0]}°, ${rotation[1]}°)`}
163163
</Typography>
164-
<FormControlLabel
165-
control={
166-
<Checkbox
167-
size="small"
168-
checked={autoRotation}
169-
onChange={(event) => setAutoRotation(event.target.checked)}
170-
/>
171-
}
172-
label={`auto rotation`}
173-
/>
174-
{autoRotation ? null : (
175-
<div>
176-
<ButtonGroup
177-
variant="outlined"
178-
aria-label="outlined button group"
179-
fullWidth
180-
>
181-
{cities.map(({ name, coordinates }) => (
182-
<Button
164+
{usaProjection ? (
165+
<Typography variant="caption">
166+
Rotation is not available for the Albers USA projection.
167+
</Typography>
168+
) : (
169+
<React.Fragment>
170+
<FormControlLabel
171+
control={
172+
<Checkbox
183173
size="small"
184-
key={name}
185-
onClick={() => {
186-
if ('transverseMercator' === projection) {
187-
return setRotation([0, -coordinates[1]]);
188-
}
189-
if (isCylindrical(projection)) {
190-
return setRotation([-coordinates[0], 0]);
191-
}
192-
return setRotation([-coordinates[0], -coordinates[1]]);
193-
}}
194-
disabled={usaProjection}
195-
>
196-
{name}
197-
</Button>
198-
))}
199-
</ButtonGroup>
200-
<Slider
201-
value={rotation[0]}
202-
min={-180}
203-
max={180}
204-
step={10}
205-
marks={[{ value: 0, label: '' }]}
206-
aria-label="longitude"
207-
size="small"
208-
onChange={(_, value: number) =>
209-
setRotation((prev) => [value, prev[1]])
174+
checked={autoRotation}
175+
onChange={(event) => setAutoRotation(event.target.checked)}
176+
/>
210177
}
211-
valueLabelDisplay="auto"
212-
disabled={usaProjection}
213-
/>
214-
<Slider
215-
value={rotation[1]}
216-
min={-180}
217-
max={180}
218-
step={10}
219-
marks={[{ value: 0, label: '' }]}
220-
aria-label="latitude"
221-
size="small"
222-
onChange={(_, value: number) =>
223-
setRotation((prev) => [prev[0], value])
224-
}
225-
valueLabelDisplay="auto"
226-
disabled={usaProjection}
178+
label={`auto rotation`}
227179
/>
228-
</div>
180+
{autoRotation ? null : (
181+
<div>
182+
<ButtonGroup
183+
variant="outlined"
184+
aria-label="outlined button group"
185+
fullWidth
186+
>
187+
{cities.map(({ name, coordinates }) => (
188+
<Button
189+
size="small"
190+
key={name}
191+
onClick={() => {
192+
if ('transverseMercator' === projection) {
193+
return setRotation([0, -coordinates[1]]);
194+
}
195+
if (isCylindrical(projection)) {
196+
return setRotation([-coordinates[0], 0]);
197+
}
198+
return setRotation([-coordinates[0], -coordinates[1]]);
199+
}}
200+
disabled={usaProjection}
201+
>
202+
{name}
203+
</Button>
204+
))}
205+
</ButtonGroup>
206+
<Slider
207+
value={rotation[0]}
208+
min={-180}
209+
max={180}
210+
step={10}
211+
marks={[{ value: 0, label: '' }]}
212+
aria-label="longitude"
213+
size="small"
214+
onChange={(_, value: number) =>
215+
setRotation((prev) => [value, prev[1]])
216+
}
217+
valueLabelDisplay="auto"
218+
disabled={usaProjection}
219+
/>
220+
<Slider
221+
value={rotation[1]}
222+
min={-180}
223+
max={180}
224+
step={10}
225+
marks={[{ value: 0, label: '' }]}
226+
aria-label="latitude"
227+
size="small"
228+
onChange={(_, value: number) =>
229+
setRotation((prev) => [prev[0], value])
230+
}
231+
valueLabelDisplay="auto"
232+
disabled={usaProjection}
233+
/>
234+
</div>
235+
)}
236+
</React.Fragment>
229237
)}
230238
</div>
231239
<div>
@@ -256,7 +264,6 @@ export default function ProjectionMapShape() {
256264
setTranslation((prev) => [value, prev[1]])
257265
}
258266
valueLabelDisplay="auto"
259-
disabled={usaProjection}
260267
/>
261268
<Slider
262269
value={translation[1]}
@@ -269,7 +276,6 @@ export default function ProjectionMapShape() {
269276
setTranslation((prev) => [prev[0], value])
270277
}
271278
valueLabelDisplay="auto"
272-
disabled={usaProjection}
273279
/>
274280
</div>
275281
)}
@@ -288,9 +294,9 @@ export default function ProjectionMapShape() {
288294
/>
289295
<Slider
290296
value={scale}
291-
min={10}
292-
max={500}
293-
step={10}
297+
min={100}
298+
max={1500}
299+
step={100}
294300
size="small"
295301
disabled={autoScale}
296302
onChange={(_, value) => setScale(value as number)}

‎packages/x-charts-premium/src/internals/plugins/useGeoProjection/useGeoProjection.selectors.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
type ExtendedFeatureCollection,
2121
type GeoProjection,
2222
type GeoPath,
23+
type GeoConicProjection,
2324
} from '@mui/x-charts-vendor/d3-geo';
2425
import type {
2526
D3NamedProjection,
@@ -51,9 +52,7 @@ const PROJECTION_FACTORIES: Record<D3NamedProjection, (() => GeoProjection) | un
5152
naturalEarth1: geoNaturalEarth1,
5253
};
5354

54-
const isConicProjection = (
55-
projection: GeoProjection,
56-
): projection is GeoProjection & { parallels(parallels: [number, number]): GeoProjection } => {
55+
const isConicProjection = (projection: GeoProjection): projection is GeoConicProjection => {
5756
return 'parallels' in projection && typeof projection.parallels === 'function';
5857
};
5958
export const selectorChartGeoProjectionState = (
@@ -167,8 +166,8 @@ export const selectorChartProjection = createSelectorMemoized(
167166
}
168167
if (geoData) {
169168
if (isConicProjection(projection)) {
170-
if (rotate && typeof projection.rotate === 'function') {
171-
projection.rotate(rotate);
169+
if (rotate) {
170+
projection.rotate?.(rotate);
172171
}
173172

174173
if (!scale) {
@@ -188,18 +187,18 @@ export const selectorChartProjection = createSelectorMemoized(
188187
return projection;
189188
}
190189

191-
if (rotate && typeof projection.rotate === 'function') {
192-
projection.rotate(rotate);
190+
if (rotate) {
191+
projection.rotate?.(rotate);
193192
}
194193

195194
if (scale) {
196195
projection.scale(scale);
197-
projection.clipExtent([
196+
projection.clipExtent?.([
198197
[drawingArea.left, drawingArea.top],
199198
[drawingArea.left + drawingArea.width, drawingArea.top + drawingArea.height],
200199
]);
201200
} else {
202-
projection.fitExtent(
201+
projection.fitExtent?.(
203202
[
204203
[drawingArea.left, drawingArea.top],
205204
[drawingArea.left + drawingArea.width, drawingArea.top + drawingArea.height],

0 commit comments

Comments
 (0)