Skip to content

StyleGeoPanel #904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 11, 2019
Merged

StyleGeoPanel #904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b16fd2
StyleGeoPanel
dmt0 Apr 11, 2019
a44a349
Hide legend tab when not needed
dmt0 Apr 11, 2019
6ff7b7d
Hide Maps tab based on presense of traces
dmt0 Apr 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dev/mocks.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"/percy/waterfall.json",
"/percy/sunburst.json",
"/percy/sankey.json",
"/percy/choropleth.json",
"/percy/geoTest.json",
"0.json",
"1.json",
"10.json",
Expand Down
42 changes: 0 additions & 42 deletions dev/percy/choropleth.json
View file
Open in desktop

This file was deleted.

95 changes: 95 additions & 0 deletions dev/percy/geoTest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
{
"data": [
{
"type": "choropleth",
"mode": "markers",
"stackgroup": null,
"locations": [
"Angola",
"Albania",
"Armenia"
],
"locationssrc": "x1",
"locationmode": "country names",
"z": [
1.01,
1.66,
3.5
],
"zsrc": "x1",
"zauto": false,
"hovertemplate": ""
},
{
"type": "scattermapbox",
"lat": [
1,
2,
3
],
"latsrc": "x1",
"lon": [
1,
2,
3
],
"lonsrc": "x1",
"mode": "markers+lines+text",
"connectgaps": false,
"fill": "toself"
},
{
"type": "scattergeo",
"lat": [
16.99,
10.34,
21.01
],
"latsrc": "x1",
"lon": [
16.99,
10.34,
21.01
],
"lonsrc": "x1",
"geo": "geo2",
"mode": "markers+lines+text"
}
],
"layout": {
"xaxis": {
"range": [
0.8304469606674613,
3.679553039332539
],
"autorange": true,
"type": "linear"
},
"yaxis": {
"range": [
-0.12629852378348821,
2.1262985237834884
],
"autorange": true
},
"autosize": true,
"geo": {
"showcountries": true,
"showocean": true,
"showland": true,
"showlakes": true,
"showrivers": true
},
"geo2": {
"showcountries": true,
"showrivers": true,
"showlakes": true,
"showland": true,
"showocean": true
},
"mapbox": {
"style": "basic"
}
},
"frames": []
}
2 changes: 1 addition & 1 deletion dev/percy/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ export {default as box} from './box.json';
export {default as waterfall} from './waterfall.json';
export {default as sunburst} from './sunburst.json';
export {default as sankey} from './sankey.json';
export {default as choropleth} from './choropleth.json';
export {default as geoTest} from './geoTest.json';
17 changes: 15 additions & 2 deletions src/DefaultEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
GraphSubplotsPanel,
StyleLayoutPanel,
StyleAxesPanel,
StyleMapsPanel,
StyleLegendPanel,
StyleNotesPanel,
StyleShapesPanel,
Expand All @@ -18,7 +19,7 @@ import {
} from './default_panels';
import {traceHasColorbar} from './default_panels/StyleColorbarsPanel';
import Logo from './components/widgets/Logo';
import {TRANSFORMABLE_TRACES} from './lib/constants';
import {TRANSFORMABLE_TRACES, TRACE_TO_AXIS} from './lib/constants';

class DefaultEditor extends Component {
constructor(props, context) {
Expand All @@ -28,6 +29,7 @@ class DefaultEditor extends Component {
this.hasMenus = this.hasMenus.bind(this);
this.hasSliders = this.hasSliders.bind(this);
this.hasColorbars = this.hasColorbars.bind(this);
this.hasLegend = this.hasLegend.bind(this);
}

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

hasLegend() {
return this.context.fullData.some(t => t.showlegend !== undefined); // eslint-disable-line no-undefined
}

hasMaps() {
return this.context.fullData.some(d =>
[...TRACE_TO_AXIS.geo, ...TRACE_TO_AXIS.mapbox].includes(d.type)
);
}

render() {
const _ = this.context.localize;
const logo = this.props.logoSrc && <Logo src={this.props.logoSrc} />;
Expand All @@ -79,7 +91,8 @@ class DefaultEditor extends Component {
<StyleLayoutPanel group={_('Style')} name={_('General')} />
<StyleTracesPanel group={_('Style')} name={_('Traces')} />
{this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
<StyleLegendPanel group={_('Style')} name={_('Legend')} />
{this.hasMaps() && <StyleMapsPanel group={_('Style')} name={_('Maps')} />}
{this.hasLegend() && <StyleLegendPanel group={_('Style')} name={_('Legend')} />}
{this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}
<StyleNotesPanel group={_('Style')} name={_('Annotation')} />
<StyleShapesPanel group={_('Style')} name={_('Shapes')} />
Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const panelsToTest = {
waterfall: ['GraphCreatePanel', 'StyleTracesPanel'],
sunburst: ['GraphCreatePanel', 'StyleTracesPanel'],
sankey: ['GraphCreatePanel', 'StyleTracesPanel'],
choropleth: ['GraphCreatePanel', 'GraphSubplotsPanel', 'StyleTracesPanel'],
geoTest: ['GraphCreatePanel', 'StyleMapsPanel', 'StyleTracesPanel'],
};

window.URL.createObjectURL = function() {
Expand Down
147 changes: 0 additions & 147 deletions src/default_panels/GraphSubplotsPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,153 +79,6 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
<NumericFraction label={_('Bar Padding')} attr="bargap" showSlider />
</PlotlySection>

<PlotlySection name={_('Map Style')}>
<Dropdown
label={_('Mapbox Style')}
attr="style"
options={[
{label: _('Basic'), value: 'basic'},
{label: _('Outdoors'), value: 'outdoors'},
{label: _('Light'), value: 'light'},
{label: _('Dark'), value: 'dark'},
{label: _('Satellite'), value: 'satellite'},
{label: _('Satellite with Streets'), value: 'satellite-streets'},
]}
clearable={false}
/>
</PlotlySection>
<PlotlySection name={_('Map Positioning')}>
<Numeric label={_('Center Latitude')} attr="center.lat" />
<Numeric label={_('Center Longitude')} attr="center.lon" />
<Numeric label={_('Zoom Level')} attr="zoom" min={0} />
<Numeric label={_('Bearing')} attr="bearing" />
<Numeric label={_('Pitch')} attr="pitch" min={0} />
</PlotlySection>

<PlotlySection name={_('Map Projection')}>
<Dropdown
label={_('Region')}
attr="scope"
options={[
{label: _('World'), value: 'world'},
{label: _('USA'), value: 'usa'},
{label: _('Europe'), value: 'europe'},
{label: _('Asia'), value: 'asia'},
{label: _('Africa'), value: 'africa'},
{label: _('North America'), value: 'north america'},
{label: _('South America'), value: 'south america'},
]}
clearable={false}
/>
<Dropdown
label={_('Projection')}
attr="projection.type"
clearable={false}
options={[
{label: _('Equirectangular'), value: 'equirectangular'},
{label: _('Mercator'), value: 'mercator'},
{label: _('Orthographic'), value: 'orthographic'},
{label: _('Natural Earth'), value: 'natural earth'},
{label: _('Albers USA'), value: 'albers usa'},
{label: _('Winkel Tripel'), value: 'winkel tripel'},
{label: _('Robinson'), value: 'robinson'},
{label: _('Miller'), value: 'miller'},
{label: _('Kavrayskiy 7'), value: 'kavrayskiy7'},
{label: _('Eckert 4'), value: 'eckert4'},
{label: _('Azimuthal Equal Area'), value: 'azimuthal equal area'},
{
label: _('Azimuthal Equidistant'),
value: 'azimuthal equidistant',
},
{label: _('Conic Equal Area'), value: 'conic equal area'},
{label: _('Conic Conformal'), value: 'conic conformal'},
{label: _('Conic Equidistant'), value: 'conic equidistant'},
{label: _('Gnomonic'), value: 'gnomonic'},
{label: _('Stereographic'), value: 'stereographic'},
{label: _('Mollweide'), value: 'mollweide'},
{label: _('Hammer'), value: 'hammer'},
{label: _('Transverse Mercator'), value: 'transverse mercator'},
{label: _('Aitoff'), value: 'aitoff'},
{label: _('Sinusoidal'), value: 'sinusoidal'},
]}
/>
</PlotlySection>

<PlotlySection name={_('Country Borders')} attr="showcountries">
<Radio
attr="showcountries"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<Numeric label={_('Border Width')} attr="countrywidth" units="px" />
<ColorPicker label={_('Border Color')} attr="countrycolor" />
</PlotlySection>
<PlotlySection name={_('Sub-Country Unit Borders')} attr="showsubunits">
<Radio
attr="showsubunits"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<Numeric label={_('Border Width')} attr="subunitwidth" units="px" />
<ColorPicker label={_('Border Color')} attr="subunitcolor" />
</PlotlySection>
<PlotlySection name={_('Coastlines')} attr="showcoastlines">
<Radio
attr="showcoastlines"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<Numeric label={_('Width')} attr="coastlinewidth" units="px" />
<ColorPicker label={_('Color')} attr="coastlinecolor" />
</PlotlySection>
<PlotlySection name={_('Oceans')} attr="showocean">
<Radio
attr="showocean"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<ColorPicker label={_('Color')} attr="oceancolor" />
</PlotlySection>
<PlotlySection name={_('Land')} attr="showland">
<Radio
attr="showland"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<ColorPicker label={_('Color')} attr="landcolor" />
</PlotlySection>
<PlotlySection name={_('Lakes')} attr="showlakes">
<Radio
attr="showlakes"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<ColorPicker label={_('Color')} attr="lakecolor" />
</PlotlySection>
<PlotlySection name={_('Rivers')} attr="showrivers">
<Radio
attr="showrivers"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<Numeric label={_('Width')} attr="riverwidth" units="px" />
<ColorPicker label={_('Color')} attr="rivercolor" />
</PlotlySection>

<PlotlySection name={_('Map Frame')} attr="showframe">
<Radio
attr="showframe"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<Numeric label={_('Width')} attr="framewidth" units="px" />
<ColorPicker label={_('Color')} attr="framecolor" />
</PlotlySection>

<PlotlySection name={_('Map Options')}>
<Radio
label={_('Resolution')}
attr="resolution"
options={[{label: _('1:110,000,000'), value: 110}, {label: _('1:50,000,000'), value: 50}]}
/>
<Numeric label={_('Scale')} attr="projection.scale" min={0} />
<Numeric label={_('Latitude')} attr="projection.rotation.lon" min={0} />
<Numeric label={_('Longitude')} attr="projection.rotation.lat" min={0} />
<Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
</PlotlySection>

<PlotlySection name={_('Ternary')}>
<Numeric label={_('Sum')} attr="sum" />
</PlotlySection>
Expand Down
Loading