Skip to content

Commit c2ddc6e

Browse files
dmt0dmt0
authored
Merge pull request #904 from plotly/geo-panel
StyleGeoPanel
2 parents 8b64ccd + 6ff7b7d commit c2ddc6e

File tree

9 files changed

+294
-223
lines changed

9 files changed

+294
-223
lines changed

‎dev/mocks.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"/percy/waterfall.json",
1111
"/percy/sunburst.json",
1212
"/percy/sankey.json",
13-
"/percy/choropleth.json",
13+
"/percy/geoTest.json",
1414
"0.json",
1515
"1.json",
1616
"10.json",

‎dev/percy/choropleth.json‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎dev/percy/geoTest.json‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
{
2+
"data": [
3+
{
4+
"type": "choropleth",
5+
"mode": "markers",
6+
"stackgroup": null,
7+
"locations": [
8+
"Angola",
9+
"Albania",
10+
"Armenia"
11+
],
12+
"locationssrc": "x1",
13+
"locationmode": "country names",
14+
"z": [
15+
1.01,
16+
1.66,
17+
3.5
18+
],
19+
"zsrc": "x1",
20+
"zauto": false,
21+
"hovertemplate": ""
22+
},
23+
{
24+
"type": "scattermapbox",
25+
"lat": [
26+
1,
27+
2,
28+
3
29+
],
30+
"latsrc": "x1",
31+
"lon": [
32+
1,
33+
2,
34+
3
35+
],
36+
"lonsrc": "x1",
37+
"mode": "markers+lines+text",
38+
"connectgaps": false,
39+
"fill": "toself"
40+
},
41+
{
42+
"type": "scattergeo",
43+
"lat": [
44+
16.99,
45+
10.34,
46+
21.01
47+
],
48+
"latsrc": "x1",
49+
"lon": [
50+
16.99,
51+
10.34,
52+
21.01
53+
],
54+
"lonsrc": "x1",
55+
"geo": "geo2",
56+
"mode": "markers+lines+text"
57+
}
58+
],
59+
"layout": {
60+
"xaxis": {
61+
"range": [
62+
0.8304469606674613,
63+
3.679553039332539
64+
],
65+
"autorange": true,
66+
"type": "linear"
67+
},
68+
"yaxis": {
69+
"range": [
70+
-0.12629852378348821,
71+
2.1262985237834884
72+
],
73+
"autorange": true
74+
},
75+
"autosize": true,
76+
"geo": {
77+
"showcountries": true,
78+
"showocean": true,
79+
"showland": true,
80+
"showlakes": true,
81+
"showrivers": true
82+
},
83+
"geo2": {
84+
"showcountries": true,
85+
"showrivers": true,
86+
"showlakes": true,
87+
"showland": true,
88+
"showocean": true
89+
},
90+
"mapbox": {
91+
"style": "basic"
92+
}
93+
},
94+
"frames": []
95+
}

‎dev/percy/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ export {default as box} from './box.json';
88
export {default as waterfall} from './waterfall.json';
99
export {default as sunburst} from './sunburst.json';
1010
export {default as sankey} from './sankey.json';
11-
export {default as choropleth} from './choropleth.json';
11+
export {default as geoTest} from './geoTest.json';

‎src/DefaultEditor.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
GraphSubplotsPanel,
88
StyleLayoutPanel,
99
StyleAxesPanel,
10+
StyleMapsPanel,
1011
StyleLegendPanel,
1112
StyleNotesPanel,
1213
StyleShapesPanel,
@@ -18,7 +19,7 @@ import {
1819
} from './default_panels';
1920
import {traceHasColorbar} from './default_panels/StyleColorbarsPanel';
2021
import Logo from './components/widgets/Logo';
21-
import {TRANSFORMABLE_TRACES} from './lib/constants';
22+
import {TRANSFORMABLE_TRACES, TRACE_TO_AXIS} from './lib/constants';
2223

2324
class DefaultEditor extends Component {
2425
constructor(props, context) {
@@ -28,6 +29,7 @@ class DefaultEditor extends Component {
2829
this.hasMenus = this.hasMenus.bind(this);
2930
this.hasSliders = this.hasSliders.bind(this);
3031
this.hasColorbars = this.hasColorbars.bind(this);
32+
this.hasLegend = this.hasLegend.bind(this);
3133
}
3234

3335
hasTransforms() {
@@ -64,6 +66,16 @@ class DefaultEditor extends Component {
6466
return this.context.fullData.some(d => traceHasColorbar({}, d));
6567
}
6668

69+
hasLegend() {
70+
return this.context.fullData.some(t => t.showlegend !== undefined); // eslint-disable-line no-undefined
71+
}
72+
73+
hasMaps() {
74+
return this.context.fullData.some(d =>
75+
[...TRACE_TO_AXIS.geo, ...TRACE_TO_AXIS.mapbox].includes(d.type)
76+
);
77+
}
78+
6779
render() {
6880
const _ = this.context.localize;
6981
const logo = this.props.logoSrc && <Logo src={this.props.logoSrc} />;
@@ -79,7 +91,8 @@ class DefaultEditor extends Component {
7991
<StyleLayoutPanel group={_('Style')} name={_('General')} />
8092
<StyleTracesPanel group={_('Style')} name={_('Traces')} />
8193
{this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
82-
<StyleLegendPanel group={_('Style')} name={_('Legend')} />
94+
{this.hasMaps() && <StyleMapsPanel group={_('Style')} name={_('Maps')} />}
95+
{this.hasLegend() && <StyleLegendPanel group={_('Style')} name={_('Legend')} />}
8396
{this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}
8497
<StyleNotesPanel group={_('Style')} name={_('Annotation')} />
8598
<StyleShapesPanel group={_('Style')} name={_('Shapes')} />

‎src/__stories__/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const panelsToTest = {
2727
waterfall: ['GraphCreatePanel', 'StyleTracesPanel'],
2828
sunburst: ['GraphCreatePanel', 'StyleTracesPanel'],
2929
sankey: ['GraphCreatePanel', 'StyleTracesPanel'],
30-
choropleth: ['GraphCreatePanel', 'GraphSubplotsPanel', 'StyleTracesPanel'],
30+
geoTest: ['GraphCreatePanel', 'StyleMapsPanel', 'StyleTracesPanel'],
3131
};
3232

3333
window.URL.createObjectURL = function() {

‎src/default_panels/GraphSubplotsPanel.js‎

Lines changed: 0 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -79,153 +79,6 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
7979
<NumericFraction label={_('Bar Padding')} attr="bargap" showSlider />
8080
</PlotlySection>
8181

82-
<PlotlySection name={_('Map Style')}>
83-
<Dropdown
84-
label={_('Mapbox Style')}
85-
attr="style"
86-
options={[
87-
{label: _('Basic'), value: 'basic'},
88-
{label: _('Outdoors'), value: 'outdoors'},
89-
{label: _('Light'), value: 'light'},
90-
{label: _('Dark'), value: 'dark'},
91-
{label: _('Satellite'), value: 'satellite'},
92-
{label: _('Satellite with Streets'), value: 'satellite-streets'},
93-
]}
94-
clearable={false}
95-
/>
96-
</PlotlySection>
97-
<PlotlySection name={_('Map Positioning')}>
98-
<Numeric label={_('Center Latitude')} attr="center.lat" />
99-
<Numeric label={_('Center Longitude')} attr="center.lon" />
100-
<Numeric label={_('Zoom Level')} attr="zoom" min={0} />
101-
<Numeric label={_('Bearing')} attr="bearing" />
102-
<Numeric label={_('Pitch')} attr="pitch" min={0} />
103-
</PlotlySection>
104-
105-
<PlotlySection name={_('Map Projection')}>
106-
<Dropdown
107-
label={_('Region')}
108-
attr="scope"
109-
options={[
110-
{label: _('World'), value: 'world'},
111-
{label: _('USA'), value: 'usa'},
112-
{label: _('Europe'), value: 'europe'},
113-
{label: _('Asia'), value: 'asia'},
114-
{label: _('Africa'), value: 'africa'},
115-
{label: _('North America'), value: 'north america'},
116-
{label: _('South America'), value: 'south america'},
117-
]}
118-
clearable={false}
119-
/>
120-
<Dropdown
121-
label={_('Projection')}
122-
attr="projection.type"
123-
clearable={false}
124-
options={[
125-
{label: _('Equirectangular'), value: 'equirectangular'},
126-
{label: _('Mercator'), value: 'mercator'},
127-
{label: _('Orthographic'), value: 'orthographic'},
128-
{label: _('Natural Earth'), value: 'natural earth'},
129-
{label: _('Albers USA'), value: 'albers usa'},
130-
{label: _('Winkel Tripel'), value: 'winkel tripel'},
131-
{label: _('Robinson'), value: 'robinson'},
132-
{label: _('Miller'), value: 'miller'},
133-
{label: _('Kavrayskiy 7'), value: 'kavrayskiy7'},
134-
{label: _('Eckert 4'), value: 'eckert4'},
135-
{label: _('Azimuthal Equal Area'), value: 'azimuthal equal area'},
136-
{
137-
label: _('Azimuthal Equidistant'),
138-
value: 'azimuthal equidistant',
139-
},
140-
{label: _('Conic Equal Area'), value: 'conic equal area'},
141-
{label: _('Conic Conformal'), value: 'conic conformal'},
142-
{label: _('Conic Equidistant'), value: 'conic equidistant'},
143-
{label: _('Gnomonic'), value: 'gnomonic'},
144-
{label: _('Stereographic'), value: 'stereographic'},
145-
{label: _('Mollweide'), value: 'mollweide'},
146-
{label: _('Hammer'), value: 'hammer'},
147-
{label: _('Transverse Mercator'), value: 'transverse mercator'},
148-
{label: _('Aitoff'), value: 'aitoff'},
149-
{label: _('Sinusoidal'), value: 'sinusoidal'},
150-
]}
151-
/>
152-
</PlotlySection>
153-
154-
<PlotlySection name={_('Country Borders')} attr="showcountries">
155-
<Radio
156-
attr="showcountries"
157-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
158-
/>
159-
<Numeric label={_('Border Width')} attr="countrywidth" units="px" />
160-
<ColorPicker label={_('Border Color')} attr="countrycolor" />
161-
</PlotlySection>
162-
<PlotlySection name={_('Sub-Country Unit Borders')} attr="showsubunits">
163-
<Radio
164-
attr="showsubunits"
165-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
166-
/>
167-
<Numeric label={_('Border Width')} attr="subunitwidth" units="px" />
168-
<ColorPicker label={_('Border Color')} attr="subunitcolor" />
169-
</PlotlySection>
170-
<PlotlySection name={_('Coastlines')} attr="showcoastlines">
171-
<Radio
172-
attr="showcoastlines"
173-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
174-
/>
175-
<Numeric label={_('Width')} attr="coastlinewidth" units="px" />
176-
<ColorPicker label={_('Color')} attr="coastlinecolor" />
177-
</PlotlySection>
178-
<PlotlySection name={_('Oceans')} attr="showocean">
179-
<Radio
180-
attr="showocean"
181-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
182-
/>
183-
<ColorPicker label={_('Color')} attr="oceancolor" />
184-
</PlotlySection>
185-
<PlotlySection name={_('Land')} attr="showland">
186-
<Radio
187-
attr="showland"
188-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
189-
/>
190-
<ColorPicker label={_('Color')} attr="landcolor" />
191-
</PlotlySection>
192-
<PlotlySection name={_('Lakes')} attr="showlakes">
193-
<Radio
194-
attr="showlakes"
195-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
196-
/>
197-
<ColorPicker label={_('Color')} attr="lakecolor" />
198-
</PlotlySection>
199-
<PlotlySection name={_('Rivers')} attr="showrivers">
200-
<Radio
201-
attr="showrivers"
202-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
203-
/>
204-
<Numeric label={_('Width')} attr="riverwidth" units="px" />
205-
<ColorPicker label={_('Color')} attr="rivercolor" />
206-
</PlotlySection>
207-
208-
<PlotlySection name={_('Map Frame')} attr="showframe">
209-
<Radio
210-
attr="showframe"
211-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
212-
/>
213-
<Numeric label={_('Width')} attr="framewidth" units="px" />
214-
<ColorPicker label={_('Color')} attr="framecolor" />
215-
</PlotlySection>
216-
217-
<PlotlySection name={_('Map Options')}>
218-
<Radio
219-
label={_('Resolution')}
220-
attr="resolution"
221-
options={[{label: _('1:110,000,000'), value: 110}, {label: _('1:50,000,000'), value: 50}]}
222-
/>
223-
<Numeric label={_('Scale')} attr="projection.scale" min={0} />
224-
<Numeric label={_('Latitude')} attr="projection.rotation.lon" min={0} />
225-
<Numeric label={_('Longitude')} attr="projection.rotation.lat" min={0} />
226-
<Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
227-
</PlotlySection>
228-
22982
<PlotlySection name={_('Ternary')}>
23083
<Numeric label={_('Sum')} attr="sum" />
23184
</PlotlySection>

0 commit comments

Comments
 (0)