Skip to content

Commit 9d0c53c

Browse files
nicolaskruchtennicolaskruchten
committed
mapbox++ checkpoint
1 parent 7f9e8e2 commit 9d0c53c

File tree

8 files changed

+94
-64
lines changed

8 files changed

+94
-64
lines changed

‎dev/dataSources.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1725,6 +1725,25 @@ export default {
17251725
],
17261726

17271727
ints: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
1728+
states: [
1729+
'AL',
1730+
'AK',
1731+
'AZ',
1732+
'AR',
1733+
'CA',
1734+
'CO',
1735+
'CT',
1736+
'DE',
1737+
'FL',
1738+
'GA',
1739+
'HI',
1740+
'ID',
1741+
'IL',
1742+
'IN',
1743+
'IA',
1744+
'KS',
1745+
'KY',
1746+
],
17281747
'jagged ints': [2, 1, 3, 5, 4, 6],
17291748
'toggle ints': [1, -1, 1, -1, 1, -1],
17301749
'big ints': [1000, 10100, 10000, 20000, 100000],

‎src/components/fields/Dropzone.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,10 @@ UnconnectedDropzone.propTypes = {
2626

2727
UnconnectedDropzone.displayName = 'UnconnectedDropzone';
2828

29-
export default connectToContainer(UnconnectedDropzone);
29+
function modifyPlotProps(props, context, plotProps) {
30+
if (context.container.type === 'choroplethmapbox') {
31+
plotProps.isVisible = true;
32+
}
33+
}
34+
35+
export default connectToContainer(UnconnectedDropzone, {modifyPlotProps});

‎src/components/fields/LocationSelector.js

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -91,31 +91,36 @@ class UnconnectedLocationSelector extends Component {
9191
container: {type: type},
9292
} = this.context;
9393

94-
return type === 'scattergeo' ? (
95-
<>
96-
<Field {...this.props} attr={this.props.attr}>
97-
<Radio
98-
options={[
99-
{value: 'latlon', label: _('Lat/Lon')},
100-
{value: 'location', label: _('Location')},
101-
]}
102-
fullValue={mode}
103-
updatePlot={this.setMode}
104-
attr={this.props.attr}
105-
/>
106-
</Field>
107-
{mode === 'latlon' ? (
108-
<>
109-
<DataSelector label={_('Latitude')} attr="lat" />
110-
<DataSelector label={_('Longitude')} attr="lon" />
111-
</>
112-
) : (
113-
<Location attr="type" />
114-
)}
115-
</>
116-
) : type === 'choropleth' ? (
117-
<Location attr="type" />
118-
) : (
94+
if (type === 'scattergeo') {
95+
return (
96+
<>
97+
<Field {...this.props} attr={this.props.attr}>
98+
<Radio
99+
options={[
100+
{value: 'latlon', label: _('Lat/Lon')},
101+
{value: 'location', label: _('Location')},
102+
]}
103+
fullValue={mode}
104+
updatePlot={this.setMode}
105+
attr={this.props.attr}
106+
/>
107+
</Field>
108+
{mode === 'latlon' ? (
109+
<>
110+
<DataSelector label={_('Latitude')} attr="lat" />
111+
<DataSelector label={_('Longitude')} attr="lon" />
112+
</>
113+
) : (
114+
<Location attr="type" />
115+
)}
116+
</>
117+
);
118+
} else if (type === 'choropleth') {
119+
return <Location attr="type" />;
120+
} else if (type === 'choroplethmapbox') {
121+
return <DataSelector label={_('Locations')} attr="locations" />;
122+
}
123+
return (
119124
<>
120125
<DataSelector label={_('Latitude')} attr="lat" />
121126
<DataSelector label={_('Longitude')} attr="lon" />

‎src/components/fields/SubplotCreator.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
22
import Dropdown from './Dropdown';
33
import Info from './Info';
44
import PropTypes from 'prop-types';
5-
import {EDITOR_ACTIONS, SUBPLOT_TO_ATTR} from 'lib/constants';
5+
import {EDITOR_ACTIONS, SUBPLOT_TO_ATTR, subplotName} from 'lib/constants';
66
import Button from '../widgets/Button';
77
import {PlusIcon} from 'plotly-icons';
88
import {connectToContainer, traceTypeToAxisType, getSubplotTitle} from 'lib';
@@ -127,7 +127,7 @@ class UnconnectedSubplotCreator extends Component {
127127
<SingleSubplotCreator
128128
attr={SUBPLOT_TO_ATTR[subplotType].data}
129129
layoutAttr={subplotType}
130-
label={SUBPLOT_TO_ATTR[subplotType].layout}
130+
label={subplotName(SUBPLOT_TO_ATTR[subplotType].layout, _)}
131131
options={getOptions(subplotType)}
132132
/>
133133
<Info>

‎src/components/widgets/Dropzone.js

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,18 @@ import Drop from 'react-dropzone';
55
class Dropzone extends Component {
66
constructor(props, context) {
77
super(props, context);
8-
const _ = context.localize;
98

109
this.state = {
1110
content: '',
1211
};
1312

1413
this.validFiletypes = {
15-
image: _('image/jpeg, image/jpg, image/svg, image/png, image/gif, image/bmp, image/webp'),
14+
image: 'image/jpeg, image/jpg, image/svg, image/png, image/gif, image/bmp, image/webp',
15+
geojson: 'application/json',
1616
};
1717

1818
this.onDrop = this.onDrop.bind(this);
19+
this.parsingError = this.parsingError.bind(this);
1920
this.renderSuccess = this.renderSuccess.bind(this);
2021
}
2122

@@ -27,6 +28,14 @@ class Dropzone extends Component {
2728
<div className="dropzone-container__image" style={{backgroundImage: `url(${value})`}} />
2829
);
2930
}
31+
if (this.props.fileType === 'geojson') {
32+
return (
33+
<div className="dropzone-container__message">
34+
<p>{_('GeoJSON loaded!')}</p>
35+
<p>{value.features.length + _(' features detected.')}</p>
36+
</div>
37+
);
38+
}
3039

3140
return <div className="dropzone-container__message">{_('File loaded!')}</div>;
3241
}
@@ -48,7 +57,7 @@ class Dropzone extends Component {
4857
_(' to upload here or click to choose a file from your computer.')}
4958
</p>
5059

51-
{this.props.fileType === 'image' ? (
60+
{this.validFiletypes[this.props.fileType] ? (
5261
<p>
5362
{_('Supported formats are: ') +
5463
this.validFiletypes[this.props.fileType].split('image/').join('') +
@@ -60,32 +69,34 @@ class Dropzone extends Component {
6069
});
6170
}
6271

63-
onLoad(e) {
72+
parsingError() {
6473
const _ = this.context.localize;
6574
const supportedFileTypes =
6675
this.props.fileType === 'image'
6776
? this.validFiletypes[this.props.fileType].split('image/').join('')
6877
: this.validFiletypes[this.props.fileType];
6978

70-
const parsingError = (
79+
return (
7180
<div className="dropzone-container__message">
72-
<p>{_('Yikes! An error occurred while parsing this file.')}</p>
81+
{_("Yikes! This doesn't look like a valid ") + this.props.fileType}
7382
<p>{_('Try again with a supported file format: ') + supportedFileTypes + '.'}</p>
7483
</div>
7584
);
85+
}
7686

77-
if (this.props.fileType === 'image') {
78-
try {
79-
this.props.onUpdate(e.target.result);
80-
this.setState({
81-
content: this.renderSuccess(e.target.result),
82-
});
83-
} catch (error) {
84-
console.warn(error); // eslint-disable-line
85-
this.setState({
86-
content: parsingError,
87-
});
88-
}
87+
onLoad(e) {
88+
try {
89+
const payload = e.target.result;
90+
const parsedValue = this.props.fileType === 'image' ? payload : JSON.parse(payload);
91+
this.props.onUpdate(parsedValue);
92+
this.setState({
93+
content: this.renderSuccess(parsedValue),
94+
});
95+
} catch (error) {
96+
console.warn(error); // eslint-disable-line
97+
this.setState({
98+
content: this.parsingError(),
99+
});
89100
}
90101
}
91102

@@ -99,9 +110,6 @@ class Dropzone extends Component {
99110
content: (
100111
<div className="dropzone-container__message">
101112
<p>{_('Yikes! You can only upload one file at a time.')}</p>
102-
<p>
103-
{_('To upload multiple files, create multiple files and upload them individually.')}
104-
</p>
105113
</div>
106114
),
107115
});
@@ -111,24 +119,14 @@ class Dropzone extends Component {
111119
reader.onload = e => this.onLoad(e);
112120
if (this.props.fileType === 'image') {
113121
reader.readAsDataURL(accepted[0]);
122+
} else if (this.props.fileType === 'geojson') {
123+
reader.readAsText(accepted[0]);
114124
}
115125
}
116126

117127
if (rejected.length) {
118-
const supportedFileTypes =
119-
this.props.fileType === 'image'
120-
? this.validFiletypes[this.props.fileType].split('image/').join('')
121-
: this.validFiletypes[this.props.fileType];
122-
123128
this.setState({
124-
content: (
125-
<div className="dropzone-container__message">
126-
<p>
127-
{_("Yikes! This doesn't look like a valid ") + this.props.fileType + _(' to us. ')}
128-
</p>
129-
<p>{_('Try again with a ') + supportedFileTypes + ' file.'}</p>
130-
</div>
131-
),
129+
content: this.parsingError(),
132130
});
133131
}
134132
}

‎src/default_panels/GraphCreatePanel.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
TraceSelector,
1212
TraceTypeSection,
1313
LocationSelector,
14+
Dropzone,
1415
Numeric,
1516
} from '../components';
1617
import {
@@ -30,6 +31,7 @@ const GraphCreatePanel = (props, {localize: _, setPanel}) => {
3031
>
3132
<TraceSelector label={_('Type')} attr="type" show />
3233

34+
<Dropzone attr="geojson" fileType="geojson" />
3335
<LocationSelector attr="type" />
3436
<DataSelector label={_('Values')} attr="values" />
3537
<DataSelector label={_('Labels')} attr="labels" />

‎src/default_panels/StyleImagesPanel.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const StyleImagesPanel = (props, {localize: _}) => (
1717
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
1818
/>
1919

20-
<Dropzone attr="source" fileType={_('image')} show />
20+
<Dropzone attr="source" fileType="image" show />
2121

2222
<Dropdown
2323
label={_('Aspect Ratio')}

‎src/styles/components/containers/_modal.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
flex-direction: column;
4646
will-change: opacity, transform;
4747
flex-grow: 0;
48-
margin: 5vh 10vw;
48+
margin: 3vh 10vw;
4949
}
5050

5151
&__header {

0 commit comments

Comments
 (0)