Skip to content

Commit fa29c2d

Browse files
bpostlethwaitebpostlethwaite
authored
Merge pull request #78 from plotly/SymbolSelector
Symbol selector
2 parents e4c2049 + 274df5d commit fa29c2d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1299
-833
lines changed

‎src/DefaultEditor.js

+79-61
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
33
import {
44
AxesSelector,
55
AxesRange,
6+
CanvasSize,
67
ColorPicker,
78
DataSelector,
89
Dropdown,
@@ -14,8 +15,10 @@ import {
1415
PanelMenuWrapper,
1516
Radio,
1617
Section,
17-
SubPanel,
18+
MenuPanel,
19+
SymbolSelector,
1820
TraceAccordion,
21+
TraceMarkerSection,
1922
TraceSelector,
2023
} from './components';
2124
import {DEFAULT_FONTS} from './constants';
@@ -25,32 +28,6 @@ const LayoutPanel = connectLayoutToPlot(Panel);
2528
const AxesFold = connectAxesToLayout(Fold);
2629

2730
class DefaultEditor extends Component {
28-
constructor(props, context) {
29-
super(props, context);
30-
31-
const capitalize = s => s.charAt(0).toUpperCase() + s.substring(1);
32-
33-
// Filter out Polar "area" type as it is fairly broken and we want to present
34-
// scatter with fill as an "area" chart type for convenience.
35-
const traceTypes = Object.keys(context.plotSchema.traces).filter(
36-
t => t !== 'area'
37-
);
38-
39-
const labels = traceTypes.map(capitalize);
40-
this.traceOptions = traceTypes.map((t, i) => ({
41-
label: labels[i],
42-
value: t,
43-
}));
44-
45-
const i = this.traceOptions.findIndex(opt => opt.value === 'scatter');
46-
this.traceOptions.splice(
47-
i + 1,
48-
0,
49-
{label: 'Line', value: 'line'},
50-
{label: 'Area', value: 'area'}
51-
);
52-
}
53-
5431
render() {
5532
const _ = this.props.localize;
5633

@@ -62,7 +39,6 @@ class DefaultEditor extends Component {
6239
label="Plot Type"
6340
attr="type"
6441
clearable={false}
65-
options={this.traceOptions}
6642
show
6743
/>
6844

@@ -114,6 +90,18 @@ class DefaultEditor extends Component {
11490
<Numeric label={_('Opacity')} step={0.1} attr="opacity" />
11591
</Section>
11692

93+
<Section name={_('Text Attributes')}>
94+
<Flaglist
95+
attr="textinfo"
96+
options={[
97+
{label: 'Label', value: 'label'},
98+
{label: 'Text', value: 'text'},
99+
{label: 'Value', value: 'value'},
100+
{label: '%', value: 'percent'},
101+
]}
102+
/>
103+
</Section>
104+
117105
<Section name={_('Display')}>
118106
<Flaglist
119107
attr="mode"
@@ -141,25 +129,25 @@ class DefaultEditor extends Component {
141129
<ColorPicker label={_('Color')} attr="fillcolor" />
142130
</Section>
143131

144-
<Section name={_('Points')}>
145-
<Numeric
146-
label={_('Marker Opacity')}
147-
step={0.1}
148-
attr="marker.opacity"
132+
<TraceMarkerSection>
133+
<Radio
134+
attr="orientation"
135+
options={[
136+
{label: _('Vertical'), value: 'v'},
137+
{label: _('Horizontal'), value: 'h'},
138+
]}
149139
/>
150-
151-
<ColorPicker label={_('Marker Color')} attr="marker.color" />
152-
140+
<ColorPicker label={_('Color')} attr="marker.color" />
141+
<Numeric label={_('Opacity')} step={0.1} attr="marker.opacity" />
153142
<Numeric label={_('Size')} attr="marker.size" />
154-
155-
<Numeric label={_('Line width')} attr="marker.line.width" />
156-
</Section>
143+
<SymbolSelector label={_('Symbol')} attr="marker.symbol" />
144+
<Numeric label={_('Border Width')} attr="marker.line.width" />
145+
<ColorPicker label={_('Border Color')} attr="marker.line.color" />
146+
</TraceMarkerSection>
157147

158148
<Section name={_('Lines')}>
159149
<Numeric label={_('Width')} step={1.0} attr="line.width" />
160-
161-
<ColorPicker label={_('Line color')} attr="line.color" />
162-
150+
<ColorPicker label={_('Line Color')} attr="line.color" />
163151
<Radio
164152
label={_('Connect Gaps')}
165153
attr="connectgaps"
@@ -174,12 +162,43 @@ class DefaultEditor extends Component {
174162

175163
<LayoutPanel group="Style" name={_('Layout')}>
176164
<Fold name={_('Canvas')}>
177-
<Numeric
165+
<Radio
166+
attr="autosize"
167+
options={[
168+
{label: _('Auto'), value: true},
169+
{label: _('Custom'), value: false},
170+
]}
171+
/>
172+
<CanvasSize
178173
label={_('Fixed Width')}
179174
step={1}
180175
attr="width"
181176
postfix="px"
182177
/>
178+
<CanvasSize
179+
label={_('Fixed Height')}
180+
step={1}
181+
attr="height"
182+
postfix="px"
183+
/>
184+
<ColorPicker label={_('Color')} attr="paper_bgcolor" />
185+
</Fold>
186+
<Fold name={_('Margins and Padding')}>
187+
<Numeric label={_('Top')} step={1} attr="margin.t" postfix="px" />
188+
<Numeric
189+
label={_('Bottom')}
190+
step={1}
191+
attr="margin.b"
192+
postfix="px"
193+
/>
194+
<Numeric label={_('Left')} step={1} attr="margin.l" postfix="px" />
195+
<Numeric label={_('Right')} step={1} attr="margin.r" postfix="px" />
196+
<Numeric
197+
label={_('Padding')}
198+
step={1}
199+
attr="margin.pad"
200+
postfix="px"
201+
/>
183202
</Fold>
184203
</LayoutPanel>
185204

@@ -218,21 +237,21 @@ class DefaultEditor extends Component {
218237
</Section>
219238
</AxesFold>
220239

221-
<AxesFold name={_('Lines')}>
222-
<AxesSelector />
223-
</AxesFold>
224-
<AxesFold name={_('Tick Labels')}>
225-
<AxesSelector />
226-
</AxesFold>
227-
<AxesFold name={_('Tick Markers')}>
228-
<AxesSelector />
229-
</AxesFold>
230-
<AxesFold name={_('Zoom Interactivity')}>
231-
<AxesSelector />
232-
</AxesFold>
233-
<AxesFold name={_('Layout')}>
234-
<AxesSelector />
235-
</AxesFold>
240+
{/* <AxesFold name={_('Lines')}>
241+
<AxesSelector />
242+
</AxesFold>
243+
<AxesFold name={_('Tick Labels')}>
244+
<AxesSelector />
245+
</AxesFold>
246+
<AxesFold name={_('Tick Markers')}>
247+
<AxesSelector />
248+
</AxesFold>
249+
<AxesFold name={_('Zoom Interactivity')}>
250+
<AxesSelector />
251+
</AxesFold>
252+
<AxesFold name={_('Layout')}>
253+
<AxesSelector />
254+
</AxesFold> */}
236255
</LayoutPanel>
237256

238257
<LayoutPanel group="Style" name={_('Legend')}>
@@ -278,7 +297,7 @@ class DefaultEditor extends Component {
278297
/>
279298
</Section>
280299
<Section name={_('Positioning')}>
281-
<SubPanel>
300+
<MenuPanel>
282301
<Section name={_('Anchor Point')}>
283302
<Info>
284303
{_(
@@ -303,7 +322,7 @@ class DefaultEditor extends Component {
303322
]}
304323
/>
305324
</Section>
306-
</SubPanel>
325+
</MenuPanel>
307326
<Numeric
308327
label={_('X Position')}
309328
step={0.01}
@@ -344,7 +363,6 @@ class DefaultEditor extends Component {
344363

345364
DefaultEditor.contextTypes = {
346365
dataSourceNames: PropTypes.array.isRequired,
347-
plotSchema: PropTypes.object.isRequired,
348366
};
349367

350368
export default localize(DefaultEditor);

‎src/PlotlyEditor.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ class PlotlyEditor extends Component {
1212
noShame({plotly: this.props.plotly});
1313

1414
// we only need to compute this once.
15-
this.plotSchema = this.props.plotly.PlotSchema.get();
15+
if (this.props.plotly) {
16+
this.plotSchema = this.props.plotly.PlotSchema.get();
17+
}
1618
}
1719

1820
getChildContext() {
@@ -51,7 +53,7 @@ class PlotlyEditor extends Component {
5153

5254
PlotlyEditor.propTypes = {
5355
onUpdate: PropTypes.func,
54-
plotly: PropTypes.object.isRequired,
56+
plotly: PropTypes.object,
5557
graphDiv: PropTypes.object,
5658
locale: PropTypes.string,
5759
dataSources: PropTypes.object,
@@ -72,8 +74,8 @@ PlotlyEditor.childContextTypes = {
7274
layout: PropTypes.object,
7375
locale: PropTypes.string,
7476
onUpdate: PropTypes.func,
75-
plotSchema: PropTypes.object.isRequired,
76-
plotly: PropTypes.object.isRequired,
77+
plotSchema: PropTypes.object,
78+
plotly: PropTypes.object,
7779
};
7880

7981
export default PlotlyEditor;

‎src/components/containers/MenuPanel.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, {Component} from 'react';
2+
import PropTypes from 'prop-types';
3+
import classnames from 'classnames';
4+
import ModalBox from './ModalBox';
5+
6+
export default class MenuPanel extends Component {
7+
constructor() {
8+
super();
9+
this.state = {isOpen: false};
10+
11+
this.togglePanel = this.togglePanel.bind(this);
12+
}
13+
14+
menupanelClasses() {
15+
if (this.props.iconClass) {
16+
return {
17+
iconClass: `menupanel__icon ${this.props.iconClass}`,
18+
spanClass: 'menupanel__icon-span',
19+
};
20+
} else if (this.props.question) {
21+
return {
22+
iconClass: 'menupanel__icon plotlyjs_editor__icon-question-circle',
23+
spanClass: `menupanel__icon-span menupanel__icon-span--question`,
24+
};
25+
}
26+
return {
27+
iconClass: 'menupanel__icon plotlyjs_editor__icon-cog',
28+
spanClass: 'menupanel__icon-span menupanel__icon-span--cog',
29+
};
30+
}
31+
32+
togglePanel() {
33+
this.setState({isOpen: !this.state.isOpen});
34+
}
35+
36+
render() {
37+
const isOpen = this.props.show || this.state.isOpen;
38+
const containerClass = classnames('menupanel', {
39+
'menupanel--ownline': this.props.ownline,
40+
});
41+
42+
const {iconClass, spanClass} = this.menupanelClasses();
43+
44+
return (
45+
<div className={containerClass}>
46+
<span className={spanClass}>
47+
<span>{this.props.label}</span>
48+
<i className={iconClass} onClick={this.togglePanel} />
49+
</span>
50+
{isOpen ? (
51+
<ModalBox onClose={this.togglePanel}>{this.props.children}</ModalBox>
52+
) : null}
53+
</div>
54+
);
55+
}
56+
}
57+
58+
MenuPanel.propTypes = {
59+
children: PropTypes.node,
60+
iconClass: PropTypes.string,
61+
show: PropTypes.bool,
62+
ownline: PropTypes.bool,
63+
question: PropTypes.bool,
64+
label: PropTypes.string,
65+
};

‎src/components/containers/ModalBox.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, {Component} from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
export default class ModalBox extends Component {
5+
render() {
6+
let style;
7+
if (this.props.backgroundColor) {
8+
style = {backgroundColor: this.props.backgroundColor};
9+
}
10+
11+
return (
12+
<div className="modalbox" style={style}>
13+
<div className="modalbox__cover" onClick={this.props.onClose} />
14+
<div>{this.props.children}</div>
15+
</div>
16+
);
17+
}
18+
}
19+
20+
ModalBox.propTypes = {
21+
backgroundColor: PropTypes.string,
22+
children: PropTypes.node,
23+
onClose: PropTypes.func,
24+
};

0 commit comments

Comments
 (0)