Skip to content

Commit 410870e

Browse files
nicolaskruchtennicolaskruchten
authored
Merge pull request #650 from plotly/subplot-attrs
move subplot-related widgets to subplot panel
2 parents 4f4d074 + c5502ad commit 410870e

File tree

5 files changed

+199
-175
lines changed

5 files changed

+199
-175
lines changed

‎src/components/containers/derived.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,17 @@ const LayoutSection = connectLayoutToPlot(PlotlySection);
1010

1111
const TraceTypeSection = (props, context) => {
1212
const {fullContainer, fullData} = context;
13+
const {mode, traceTypes} = props;
1314

1415
const ifConnectedToTrace =
15-
fullContainer && props.traceTypes.includes(fullContainer.type);
16+
mode === 'trace' &&
17+
fullContainer &&
18+
traceTypes.includes(fullContainer.type);
1619

1720
const ifConnectedToLayout =
18-
fullData && fullData.some(t => props.traceTypes.includes(t.type));
21+
mode === 'layout' &&
22+
fullData &&
23+
fullData.some(t => traceTypes.includes(t.type));
1924

2025
if (ifConnectedToTrace || ifConnectedToLayout) {
2126
return <PlotlySection {...props} />;
@@ -29,10 +34,12 @@ TraceTypeSection.propTypes = {
2934
children: PropTypes.node,
3035
name: PropTypes.string,
3136
traceTypes: PropTypes.array,
37+
mode: PropTypes.string,
3238
};
3339

3440
TraceTypeSection.defaultProps = {
3541
traceTypes: [],
42+
mode: 'layout',
3643
};
3744

3845
export {LayoutPanel, LayoutSection, TraceTypeSection};

‎src/default_panels/GraphCreatePanel.js

+4-50
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
Dropdown,
66
Radio,
77
PlotlySection,
8-
LayoutSection,
98
AxesCreator,
109
SubplotCreator,
1110
TraceAccordion,
@@ -84,7 +83,10 @@ const GraphCreatePanel = (props, {localize: _}) => {
8483
<DataSelector label={_('Headers')} attr="header.values" />
8584
<DataSelector label={_('Columns')} attr="cells.values" />
8685

87-
<TraceTypeSection traceTypes={['scatterpolar', 'scatterpolargl']}>
86+
<TraceTypeSection
87+
traceTypes={['scatterpolar', 'scatterpolargl']}
88+
mode="trace"
89+
>
8890
<DataSelector label={_('Radius')} attr="r" />
8991
<DataSelector label={_('Theta')} attr="theta" />
9092
<Dropdown
@@ -146,54 +148,6 @@ const GraphCreatePanel = (props, {localize: _}) => {
146148
]}
147149
/>
148150
</PlotlySection>
149-
<LayoutSection name={_('Map Options')}>
150-
<Dropdown
151-
label={_('Map Region')}
152-
attr="geo.scope"
153-
options={[
154-
{label: _('World'), value: 'world'},
155-
{label: _('USA'), value: 'usa'},
156-
{label: _('Europe'), value: 'europe'},
157-
{label: _('Asia'), value: 'asia'},
158-
{label: _('Africa'), value: 'africa'},
159-
{label: _('North America'), value: 'north america'},
160-
{label: _('South America'), value: 'south america'},
161-
]}
162-
clearable={false}
163-
/>
164-
<Dropdown
165-
label={_('Projection')}
166-
attr="geo.projection.type"
167-
clearable={false}
168-
options={[
169-
{label: _('Equirectangular'), value: 'equirectangular'},
170-
{label: _('Mercator'), value: 'mercator'},
171-
{label: _('Orthographic'), value: 'orthographic'},
172-
{label: _('Natural Earth'), value: 'natural earth'},
173-
{label: _('Albers USA'), value: 'albers usa'},
174-
{label: _('Winkel Tripel'), value: 'winkel tripel'},
175-
{label: _('Robinson'), value: 'robinson'},
176-
{label: _('Miller'), value: 'miller'},
177-
{label: _('Kavrayskiy 7'), value: 'kavrayskiy7'},
178-
{label: _('Eckert 4'), value: 'eckert4'},
179-
{label: _('Azimuthal Equal Area'), value: 'azimuthal equal area'},
180-
{
181-
label: _('Azimuthal Equidistant'),
182-
value: 'azimuthal equidistant',
183-
},
184-
{label: _('Conic Equal Area'), value: 'conic equal area'},
185-
{label: _('Conic Conformal'), value: 'conic conformal'},
186-
{label: _('Conic Equidistant'), value: 'conic equidistant'},
187-
{label: _('Gnomonic'), value: 'gnomonic'},
188-
{label: _('Stereographic'), value: 'stereographic'},
189-
{label: _('Mollweide'), value: 'mollweide'},
190-
{label: _('Hammer'), value: 'hammer'},
191-
{label: _('Transverse Mercator'), value: 'transverse mercator'},
192-
{label: _('Aitoff'), value: 'aitoff'},
193-
{label: _('Sinusoidal'), value: 'sinusoidal'},
194-
]}
195-
/>
196-
</LayoutSection>
197151
</TraceAccordion>
198152
);
199153
};

‎src/default_panels/GraphSubplotsPanel.js

+164
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ import {
88
TraceTypeSection,
99
AxisAnchorDropdown,
1010
AxisSide,
11+
Dropdown,
12+
Radio,
13+
Numeric,
14+
ColorPicker,
15+
VisibilitySelect,
1116
} from '../components';
1217
import {TRACE_TO_AXIS} from '../lib/constants';
1318

@@ -37,6 +42,165 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
3742
/>
3843
<AxisSide label={_('Side')} attr="yaxis.side" />
3944
</TraceTypeSection>
45+
46+
<PlotlySection name={_('Aspect Ratio')}>
47+
<VisibilitySelect
48+
attr="aspectmode"
49+
options={[
50+
{label: _('Auto'), value: 'mode'},
51+
{label: _('Cube'), value: 'cube'},
52+
{label: _('Data'), value: 'data'},
53+
{label: _('Manual'), value: 'manual'},
54+
]}
55+
dropdown={true}
56+
clearable={false}
57+
showOn="manual"
58+
dafault="mode"
59+
>
60+
<Numeric label={_('X')} attr="aspectratio.x" step={0.1} />
61+
<Numeric label={_('Y')} attr="aspectratio.y" step={0.1} />
62+
<Numeric label={_('Z')} attr="aspectratio.z" step={0.1} />
63+
</VisibilitySelect>
64+
</PlotlySection>
65+
66+
<PlotlySection name={_('Canvas')}>
67+
<ColorPicker label={_('Plot Background')} attr="bgcolor" />
68+
</PlotlySection>
69+
70+
<PlotlySection name={_('Map Options')}>
71+
<Dropdown
72+
label={_('Map Region')}
73+
attr="scope"
74+
options={[
75+
{label: _('World'), value: 'world'},
76+
{label: _('USA'), value: 'usa'},
77+
{label: _('Europe'), value: 'europe'},
78+
{label: _('Asia'), value: 'asia'},
79+
{label: _('Africa'), value: 'africa'},
80+
{label: _('North America'), value: 'north america'},
81+
{label: _('South America'), value: 'south america'},
82+
]}
83+
clearable={false}
84+
/>
85+
<Dropdown
86+
label={_('Projection')}
87+
attr="projection.type"
88+
clearable={false}
89+
options={[
90+
{label: _('Equirectangular'), value: 'equirectangular'},
91+
{label: _('Mercator'), value: 'mercator'},
92+
{label: _('Orthographic'), value: 'orthographic'},
93+
{label: _('Natural Earth'), value: 'natural earth'},
94+
{label: _('Albers USA'), value: 'albers usa'},
95+
{label: _('Winkel Tripel'), value: 'winkel tripel'},
96+
{label: _('Robinson'), value: 'robinson'},
97+
{label: _('Miller'), value: 'miller'},
98+
{label: _('Kavrayskiy 7'), value: 'kavrayskiy7'},
99+
{label: _('Eckert 4'), value: 'eckert4'},
100+
{label: _('Azimuthal Equal Area'), value: 'azimuthal equal area'},
101+
{
102+
label: _('Azimuthal Equidistant'),
103+
value: 'azimuthal equidistant',
104+
},
105+
{label: _('Conic Equal Area'), value: 'conic equal area'},
106+
{label: _('Conic Conformal'), value: 'conic conformal'},
107+
{label: _('Conic Equidistant'), value: 'conic equidistant'},
108+
{label: _('Gnomonic'), value: 'gnomonic'},
109+
{label: _('Stereographic'), value: 'stereographic'},
110+
{label: _('Mollweide'), value: 'mollweide'},
111+
{label: _('Hammer'), value: 'hammer'},
112+
{label: _('Transverse Mercator'), value: 'transverse mercator'},
113+
{label: _('Aitoff'), value: 'aitoff'},
114+
{label: _('Sinusoidal'), value: 'sinusoidal'},
115+
]}
116+
/>
117+
</PlotlySection>
118+
119+
<PlotlySection name={_('Country Borders')} attr="showcountries">
120+
<Radio
121+
attr="showcountries"
122+
options={[
123+
{label: _('Show'), value: true},
124+
{label: _('Hide'), value: false},
125+
]}
126+
/>
127+
<Numeric label={_('Border Width')} attr="countrywidth" units="px" />
128+
<ColorPicker label={_('Border Color')} attr="countrycolor" />
129+
</PlotlySection>
130+
<PlotlySection name={_('Sub-Country Unit Borders')} attr="showsubunits">
131+
<Radio
132+
attr="showsubunits"
133+
options={[
134+
{label: _('Show'), value: true},
135+
{label: _('Hide'), value: false},
136+
]}
137+
/>
138+
<Numeric label={_('Border Width')} attr="subunitwidth" units="px" />
139+
<ColorPicker label={_('Border Color')} attr="subunitcolor" />
140+
</PlotlySection>
141+
<PlotlySection name={_('Coastlines')} attr="showcoastlines">
142+
<Radio
143+
attr="showcoastlines"
144+
options={[
145+
{label: _('Show'), value: true},
146+
{label: _('Hide'), value: false},
147+
]}
148+
/>
149+
<Numeric label={_('Width')} attr="coastlinewidth" units="px" />
150+
<ColorPicker label={_('Color')} attr="coastlinecolor" />
151+
</PlotlySection>
152+
<PlotlySection name={_('Oceans')} attr="showocean">
153+
<Radio
154+
attr="showocean"
155+
options={[
156+
{label: _('Show'), value: true},
157+
{label: _('Hide'), value: false},
158+
]}
159+
/>
160+
<ColorPicker label={_('Color')} attr="oceancolor" />
161+
</PlotlySection>
162+
<PlotlySection name={_('Land')} attr="showland">
163+
<Radio
164+
attr="showland"
165+
options={[
166+
{label: _('Show'), value: true},
167+
{label: _('Hide'), value: false},
168+
]}
169+
/>
170+
<ColorPicker label={_('Color')} attr="landcolor" />
171+
</PlotlySection>
172+
<PlotlySection name={_('Lakes')} attr="showlakes">
173+
<Radio
174+
attr="showlakes"
175+
options={[
176+
{label: _('Show'), value: true},
177+
{label: _('Hide'), value: false},
178+
]}
179+
/>
180+
<ColorPicker label={_('Color')} attr="lakecolor" />
181+
</PlotlySection>
182+
<PlotlySection name={_('Rivers')} attr="showrivers">
183+
<Radio
184+
attr="showrivers"
185+
options={[
186+
{label: _('Show'), value: true},
187+
{label: _('Hide'), value: false},
188+
]}
189+
/>
190+
<Numeric label={_('Width')} attr="riverwidth" units="px" />
191+
<ColorPicker label={_('Color')} attr="rivercolor" />
192+
</PlotlySection>
193+
<PlotlySection name={_('Map Frame')} attr="showframe">
194+
<Radio
195+
attr="showframe"
196+
options={[
197+
{label: _('Show'), value: true},
198+
{label: _('Hide'), value: false},
199+
]}
200+
/>
201+
<Numeric label={_('Width')} attr="framewidth" units="px" />
202+
<ColorPicker label={_('Color')} attr="framecolor" />
203+
</PlotlySection>
40204
</SubplotAccordion>
41205
);
42206

0 commit comments

Comments
 (0)