Skip to content

Commit 6dc5db0

Browse files
alexfauquettealexfauquette
committed
docs:typescript
1 parent 055cd34 commit 6dc5db0

6 files changed

Lines changed: 377 additions & 1 deletion

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function BasicGeoDataPlot() {
4646
{ name: 'Czechia' },
4747
{ name: 'Denmark' },
4848
{ name: 'Estonia' },
49-
{ name: 'France', value: 10 },
49+
{ name: 'France' },
5050
{ name: 'Finland' },
5151
{ name: 'Germany' },
5252
{ name: 'Hungary' },

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import TextField from '@mui/material/TextField';
5+
import { feature as topojsonFeature } from 'topojson-client';
6+
import countriesTopology from 'world-atlas/countries-110m.json';
7+
import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
8+
import { GeoDataPlot } from '@mui/x-charts-premium/Map';
9+
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
10+
11+
const countries = topojsonFeature(countriesTopology, 'countries');
12+
13+
export default function GeoDataPlotDemo() {
14+
const [fill, setFill] = React.useState('#e3f2fd');
15+
const [stroke, setStroke] = React.useState('#0d47a1');
16+
const [strokeWidth, setStrokeWidth] = React.useState(0.5);
17+
18+
return (
19+
<Stack
20+
direction={{ xs: 'column', md: 'row' }}
21+
spacing={2}
22+
sx={{ width: '100%' }}
23+
>
24+
<Box sx={{ flexGrow: 1, maxWidth: 800 }}>
25+
<ChartsGeoDataProviderPremium
26+
geoData={countries}
27+
projection="naturalEarth1"
28+
height={360}
29+
>
30+
<ChartsSurface>
31+
<GeoDataPlot fill={fill} stroke={stroke} strokeWidth={strokeWidth} />
32+
</ChartsSurface>
33+
</ChartsGeoDataProviderPremium>
34+
</Box>
35+
<Stack spacing={2} sx={{ minWidth: 180 }}>
36+
<TextField
37+
label="fill"
38+
type="color"
39+
value={fill}
40+
onChange={(event) => setFill(event.target.value)}
41+
/>
42+
<TextField
43+
label="stroke"
44+
type="color"
45+
value={stroke}
46+
onChange={(event) => setStroke(event.target.value)}
47+
/>
48+
<TextField
49+
label="strokeWidth"
50+
type="number"
51+
slotProps={{ htmlInput: { min: 0, max: 5, step: 0.5 } }}
52+
value={strokeWidth}
53+
onChange={(event) => setStrokeWidth(Number(event.target.value))}
54+
/>
55+
</Stack>
56+
</Stack>
57+
);
58+
}

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import TextField from '@mui/material/TextField';
5+
import MenuItem from '@mui/material/MenuItem';
6+
import { feature as topojsonFeature } from 'topojson-client';
7+
import countriesTopology from 'world-atlas/countries-110m.json';
8+
import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
9+
import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map';
10+
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
11+
import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip';
12+
13+
const countries = topojsonFeature(countriesTopology, 'countries');
14+
15+
const americas = [
16+
'Argentina',
17+
'Bolivia',
18+
'Brazil',
19+
'Chile',
20+
'Colombia',
21+
'Ecuador',
22+
'Paraguay',
23+
'Peru',
24+
'Uruguay',
25+
'Venezuela',
26+
];
27+
28+
const europe = [
29+
'France',
30+
'Germany',
31+
'Italy',
32+
'Poland',
33+
'Portugal',
34+
'Romania',
35+
'Spain',
36+
'Sweden',
37+
'United Kingdom',
38+
];
39+
40+
export default function HighlightedMapShape() {
41+
const [highlight, setHighlight] = React.useState('item');
42+
const [fade, setFade] = React.useState('global');
43+
44+
return (
45+
<Stack
46+
direction={{ xs: 'column', md: 'row' }}
47+
spacing={2}
48+
sx={{ width: '100%' }}
49+
>
50+
<Box sx={{ flexGrow: 1, maxWidth: 800 }}>
51+
<ChartsGeoDataProviderPremium
52+
geoData={countries}
53+
projection="naturalEarth1"
54+
height={360}
55+
series={[
56+
{
57+
type: 'mapShape',
58+
label: 'South America',
59+
color: '#43a047',
60+
highlightScope: { highlight, fade },
61+
data: americas.map((name) => ({ name })),
62+
},
63+
{
64+
type: 'mapShape',
65+
label: 'Europe',
66+
color: '#1e88e5',
67+
highlightScope: { highlight, fade },
68+
data: europe.map((name) => ({ name })),
69+
},
70+
]}
71+
>
72+
<ChartsSurface>
73+
<GeoDataPlot fill="#f5f5f5" stroke="#bdbdbd" />
74+
<MapShapePlot />
75+
</ChartsSurface>
76+
<ChartsTooltip trigger="item" />
77+
</ChartsGeoDataProviderPremium>
78+
</Box>
79+
<Stack spacing={2} sx={{ minWidth: 150 }}>
80+
<TextField
81+
select
82+
label="highlight"
83+
value={highlight}
84+
onChange={(event) => setHighlight(event.target.value)}
85+
>
86+
<MenuItem value="none">none</MenuItem>
87+
<MenuItem value="item">item</MenuItem>
88+
<MenuItem value="series">series</MenuItem>
89+
</TextField>
90+
<TextField
91+
select
92+
label="fade"
93+
value={fade}
94+
onChange={(event) => setFade(event.target.value)}
95+
>
96+
<MenuItem value="none">none</MenuItem>
97+
<MenuItem value="series">series</MenuItem>
98+
<MenuItem value="global">global</MenuItem>
99+
</TextField>
100+
</Stack>
101+
</Stack>
102+
);
103+
}

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import { feature as topojsonFeature } from 'topojson-client';
4+
import countriesTopology from 'world-atlas/countries-110m.json';
5+
import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
6+
import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map';
7+
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
8+
import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip';
9+
10+
const countries = topojsonFeature(countriesTopology, 'countries');
11+
12+
const euMembers = [
13+
'Austria',
14+
'Belgium',
15+
'Bulgaria',
16+
'Croatia',
17+
'Cyprus',
18+
'Czechia',
19+
'Denmark',
20+
'Estonia',
21+
'Finland',
22+
'France',
23+
'Germany',
24+
'Greece',
25+
'Hungary',
26+
'Ireland',
27+
'Italy',
28+
'Latvia',
29+
'Lithuania',
30+
'Luxembourg',
31+
'Malta',
32+
'Netherlands',
33+
'Poland',
34+
'Portugal',
35+
'Romania',
36+
'Slovakia',
37+
'Slovenia',
38+
'Spain',
39+
'Sweden',
40+
];
41+
42+
export default function MapShapePlotDemo() {
43+
return (
44+
<Box sx={{ width: '100%', maxWidth: 800 }}>
45+
<ChartsGeoDataProviderPremium
46+
geoData={countries}
47+
projection="naturalEarth1"
48+
height={360}
49+
series={[
50+
{
51+
type: 'mapShape',
52+
label: 'European Union',
53+
color: '#1976d2',
54+
data: euMembers.map((name) => ({ name })),
55+
valueFormatter: (point) => point.name,
56+
},
57+
]}
58+
>
59+
<ChartsSurface>
60+
<GeoDataPlot fill="#f5f5f5" stroke="#bdbdbd" />
61+
<MapShapePlot />
62+
</ChartsSurface>
63+
<ChartsTooltip trigger="item" />
64+
</ChartsGeoDataProviderPremium>
65+
</Box>
66+
);
67+
}

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import TextField from '@mui/material/TextField';
5+
import MenuItem from '@mui/material/MenuItem';
6+
import { feature as topojsonFeature } from 'topojson-client';
7+
import countriesTopology from 'world-atlas/countries-110m.json';
8+
import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
9+
import { GeoDataPlot } from '@mui/x-charts-premium/Map';
10+
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
11+
12+
const countries = topojsonFeature(countriesTopology, 'countries');
13+
14+
const projections = [
15+
// Azimuthal projections (https://d3js.org/d3-geo/azimuthal)
16+
'azimuthalEqualArea',
17+
'azimuthalEquidistant',
18+
'gnomonic',
19+
'orthographic',
20+
'stereographic',
21+
// Conic projections (https://d3js.org/d3-geo/conic)
22+
'conicConformal',
23+
'conicEqualArea',
24+
'conicEquidistant',
25+
'albers',
26+
'albersUsa', // Special composition for the USA with an edge case for Alaska and Hawaii.
27+
28+
// Cylindrical projections (https://d3js.org/d3-geo/cylindrical)
29+
'equirectangular',
30+
'mercator',
31+
'transverseMercator',
32+
'equalEarth',
33+
'naturalEarth1',
34+
];
35+
36+
export default function ProjectionMapShape() {
37+
// const [projection, setProjection] = React.useState('naturalEarth1');
38+
const [projection, setProjection] = React.useState('conicConformal');
39+
40+
return (
41+
<Stack
42+
direction={{ xs: 'column', md: 'row' }}
43+
spacing={2}
44+
sx={{ width: '100%' }}
45+
>
46+
<Box sx={{ flexGrow: 1, maxWidth: 800 }}>
47+
<ChartsGeoDataProviderPremium
48+
geoData={countries}
49+
projection={projection}
50+
height={360}
51+
>
52+
<ChartsSurface>
53+
<GeoDataPlot fill="#e3f2fd" stroke="#0d47a1" strokeWidth={0.5} />
54+
</ChartsSurface>
55+
</ChartsGeoDataProviderPremium>
56+
</Box>
57+
<Stack spacing={2} sx={{ minWidth: 200 }}>
58+
<TextField
59+
select
60+
label="projection"
61+
value={projection}
62+
onChange={(event) => setProjection(event.target.value)}
63+
>
64+
{projections.map((name) => (
65+
<MenuItem key={name} value={name}>
66+
{name}
67+
</MenuItem>
68+
))}
69+
</TextField>
70+
</Stack>
71+
</Stack>
72+
);
73+
}

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import { feature as topojsonFeature } from 'topojson-client';
4+
import countriesTopology from 'world-atlas/countries-110m.json';
5+
import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
6+
import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map';
7+
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
8+
import { ChartsLegend } from '@mui/x-charts-premium/ChartsLegend';
9+
import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip';
10+
11+
const countries = topojsonFeature(countriesTopology, 'countries');
12+
13+
const continents = {
14+
Africa: [
15+
'Algeria',
16+
'Angola',
17+
'Egypt',
18+
'Ethiopia',
19+
'Kenya',
20+
'Morocco',
21+
'Nigeria',
22+
'South Africa',
23+
'Sudan',
24+
'Tanzania',
25+
],
26+
Asia: ['China', 'India', 'Indonesia', 'Iran', 'Japan', 'Kazakhstan', 'Mongolia'],
27+
Europe: [
28+
'France',
29+
'Germany',
30+
'Italy',
31+
'Poland',
32+
'Spain',
33+
'Sweden',
34+
'United Kingdom',
35+
],
36+
};
37+
38+
export default function VisibleMapShape() {
39+
return (
40+
<Box sx={{ width: '100%', maxWidth: 800 }}>
41+
<ChartsGeoDataProviderPremium
42+
geoData={countries}
43+
projection="naturalEarth1"
44+
height={360}
45+
series={[
46+
{
47+
type: 'mapShape',
48+
label: 'Africa',
49+
color: '#ef6c00',
50+
data: continents.Africa.map((name) => ({ name })),
51+
},
52+
{
53+
type: 'mapShape',
54+
label: 'Asia',
55+
color: '#8e24aa',
56+
data: continents.Asia.map((name) => ({ name })),
57+
},
58+
{
59+
type: 'mapShape',
60+
label: 'Europe',
61+
color: '#1e88e5',
62+
data: continents.Europe.map((name) => ({ name })),
63+
},
64+
]}
65+
>
66+
<ChartsLegend toggleVisibilityOnClick />
67+
<ChartsSurface>
68+
<GeoDataPlot fill="#f5f5f5" stroke="#bdbdbd" />
69+
<MapShapePlot />
70+
</ChartsSurface>
71+
<ChartsTooltip trigger="item" />
72+
</ChartsGeoDataProviderPremium>
73+
</Box>
74+
);
75+
}

0 commit comments

Comments
 (0)