From 7b16fd203a66384d185737dc9ed7caca02a5ccac Mon Sep 17 00:00:00 2001 From: dmt0 Date: Wed, 10 Apr 2019 21:25:47 -0400 Subject: [PATCH 1/3] StyleGeoPanel --- dev/mocks.json | 2 +- dev/percy/choropleth.json | 42 ------ dev/percy/geoTest.json | 95 +++++++++++++ dev/percy/index.js | 2 +- src/DefaultEditor.js | 10 ++ src/__stories__/index.js | 2 +- src/default_panels/GraphSubplotsPanel.js | 147 -------------------- src/default_panels/StyleMapsPanel.js | 167 +++++++++++++++++++++++ src/default_panels/index.js | 43 ++---- 9 files changed, 289 insertions(+), 221 deletions(-) delete mode 100644 dev/percy/choropleth.json create mode 100644 dev/percy/geoTest.json create mode 100644 src/default_panels/StyleMapsPanel.js diff --git a/dev/mocks.json b/dev/mocks.json index 7b47dd749..c13a3f0d0 100644 --- a/dev/mocks.json +++ b/dev/mocks.json @@ -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", diff --git a/dev/percy/choropleth.json b/dev/percy/choropleth.json deleted file mode 100644 index f6cff42e3..000000000 --- a/dev/percy/choropleth.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "data": [ - { - "zmax": 1000, - "colorscale": "RdBu", - "zmin": -1000, - "locations": [ - "AGO", - "ALB", - "ARE" - ], - "locationssrc": "x1", - "z": [ - -639.491311425916, - 21.2123434330386, - -179.388449582104 - ], - "zsrc": "x1", - "text": [ - "AGO", - "ALB", - "ARE" - ], - "textsrc": "x1", - "type": "choropleth", - "zauto": false, - "hoverinfo": "text" - } - ], - "layout": { - "autosize": true, - "showlegend": false, - "geo": { - "showcountries": true, - "showocean": true, - "showland": true, - "showlakes": true, - "showrivers": true - } - }, - "frames": [] -} diff --git a/dev/percy/geoTest.json b/dev/percy/geoTest.json new file mode 100644 index 000000000..04f6c75da --- /dev/null +++ b/dev/percy/geoTest.json @@ -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": [] +} diff --git a/dev/percy/index.js b/dev/percy/index.js index 246082d0f..7598bd307 100644 --- a/dev/percy/index.js +++ b/dev/percy/index.js @@ -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'; diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js index 9ef3fb2bb..552026e9e 100644 --- a/src/DefaultEditor.js +++ b/src/DefaultEditor.js @@ -7,6 +7,7 @@ import { GraphSubplotsPanel, StyleLayoutPanel, StyleAxesPanel, + StyleMapsPanel, StyleLegendPanel, StyleNotesPanel, StyleShapesPanel, @@ -64,6 +65,14 @@ class DefaultEditor extends Component { return this.context.fullData.some(d => traceHasColorbar({}, d)); } + hasMaps() { + const { + layout: {geo, mapbox}, + } = this.context; + + return Boolean(geo) || Boolean(mapbox); + } + render() { const _ = this.context.localize; const logo = this.props.logoSrc && ; @@ -79,6 +88,7 @@ class DefaultEditor extends Component { {this.hasAxes() && } + {this.hasMaps() && } {this.hasColorbars() && } diff --git a/src/__stories__/index.js b/src/__stories__/index.js index 782ab2bbb..a6586e3de 100644 --- a/src/__stories__/index.js +++ b/src/__stories__/index.js @@ -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() { diff --git a/src/default_panels/GraphSubplotsPanel.js b/src/default_panels/GraphSubplotsPanel.js index 38dad4dce..41ca6ca6f 100644 --- a/src/default_panels/GraphSubplotsPanel.js +++ b/src/default_panels/GraphSubplotsPanel.js @@ -79,153 +79,6 @@ const GraphSubplotsPanel = (props, {localize: _}) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/default_panels/StyleMapsPanel.js b/src/default_panels/StyleMapsPanel.js new file mode 100644 index 000000000..097e11c14 --- /dev/null +++ b/src/default_panels/StyleMapsPanel.js @@ -0,0 +1,167 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + SubplotAccordion, + PlotlySection, + Dropdown, + Radio, + Numeric, + ColorPicker, +} from '../components'; + +const StyleMapsPanel = (props, {localize: _}) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +StyleMapsPanel.contextTypes = { + localize: PropTypes.func, +}; + +export default StyleMapsPanel; diff --git a/src/default_panels/index.js b/src/default_panels/index.js index a6aa1ca59..f5a90ef36 100644 --- a/src/default_panels/index.js +++ b/src/default_panels/index.js @@ -1,29 +1,14 @@ -import GraphCreatePanel from './GraphCreatePanel'; -import GraphTransformsPanel from './GraphTransformsPanel'; -import StyleLayoutPanel from './StyleLayoutPanel'; -import StyleAxesPanel from './StyleAxesPanel'; -import StyleLegendPanel from './StyleLegendPanel'; -import StyleNotesPanel from './StyleNotesPanel'; -import StyleShapesPanel from './StyleShapesPanel'; -import StyleSlidersPanel from './StyleSlidersPanel'; -import StyleImagesPanel from './StyleImagesPanel'; -import StyleTracesPanel from './StyleTracesPanel'; -import StyleColorbarsPanel from './StyleColorbarsPanel'; -import StyleUpdateMenusPanel from './StyleUpdateMenusPanel'; -import GraphSubplotsPanel from './GraphSubplotsPanel'; - -export { - GraphCreatePanel, - GraphTransformsPanel, - StyleLayoutPanel, - StyleAxesPanel, - StyleLegendPanel, - StyleNotesPanel, - StyleShapesPanel, - StyleSlidersPanel, - StyleImagesPanel, - StyleTracesPanel, - StyleColorbarsPanel, - StyleUpdateMenusPanel, - GraphSubplotsPanel, -}; +export {default as GraphCreatePanel} from './GraphCreatePanel'; +export {default as GraphTransformsPanel} from './GraphTransformsPanel'; +export {default as StyleLayoutPanel} from './StyleLayoutPanel'; +export {default as StyleAxesPanel} from './StyleAxesPanel'; +export {default as StyleMapsPanel} from './StyleMapsPanel'; +export {default as StyleLegendPanel} from './StyleLegendPanel'; +export {default as StyleNotesPanel} from './StyleNotesPanel'; +export {default as StyleShapesPanel} from './StyleShapesPanel'; +export {default as StyleSlidersPanel} from './StyleSlidersPanel'; +export {default as StyleImagesPanel} from './StyleImagesPanel'; +export {default as StyleTracesPanel} from './StyleTracesPanel'; +export {default as StyleColorbarsPanel} from './StyleColorbarsPanel'; +export {default as StyleUpdateMenusPanel} from './StyleUpdateMenusPanel'; +export {default as GraphSubplotsPanel} from './GraphSubplotsPanel'; From a44a34905b4f05f68cf3f4223bf4b7a4396eb53d Mon Sep 17 00:00:00 2001 From: dmt0 Date: Thu, 11 Apr 2019 16:03:56 -0400 Subject: [PATCH 2/3] Hide legend tab when not needed --- src/DefaultEditor.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js index 552026e9e..460b68657 100644 --- a/src/DefaultEditor.js +++ b/src/DefaultEditor.js @@ -29,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() { @@ -65,6 +66,10 @@ 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() { const { layout: {geo, mapbox}, @@ -89,7 +94,7 @@ class DefaultEditor extends Component { {this.hasAxes() && } {this.hasMaps() && } - + {this.hasLegend() && } {this.hasColorbars() && } From 6ff7b7d8d42b60cb5f0c283b31fd0b65fafbe986 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Thu, 11 Apr 2019 17:21:32 -0400 Subject: [PATCH 3/3] Hide Maps tab based on presense of traces --- src/DefaultEditor.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js index 460b68657..cfbb01e19 100644 --- a/src/DefaultEditor.js +++ b/src/DefaultEditor.js @@ -19,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) { @@ -71,11 +71,9 @@ class DefaultEditor extends Component { } hasMaps() { - const { - layout: {geo, mapbox}, - } = this.context; - - return Boolean(geo) || Boolean(mapbox); + return this.context.fullData.some(d => + [...TRACE_TO_AXIS.geo, ...TRACE_TO_AXIS.mapbox].includes(d.type) + ); } render() {