Skip to content

Commit cf40784

Browse files
bpostlethwaitebpostlethwaite
committed
pull trace handling from DefaultEditor into TraceSelector fixes #56 
1 parent e0e0fd5 commit cf40784

File tree

3 files changed

+98
-62
lines changed

3 files changed

+98
-62
lines changed

‎src/DefaultEditor.js

+27-43
Original file line numberDiff line numberDiff line change
@@ -28,32 +28,6 @@ const LayoutPanel = connectLayoutToPlot(Panel);
2828
const AxesFold = connectAxesToLayout(Fold);
2929

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

@@ -65,7 +39,6 @@ class DefaultEditor extends Component {
6539
label="Plot Type"
6640
attr="type"
6741
clearable={false}
68-
options={this.traceOptions}
6942
show
7043
/>
7144

@@ -117,6 +90,18 @@ class DefaultEditor extends Component {
11790
<Numeric label={_('Opacity')} step={0.1} attr="opacity" />
11891
</Section>
11992

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+
120105
<Section name={_('Display')}>
121106
<Flaglist
122107
attr="mode"
@@ -252,21 +237,21 @@ class DefaultEditor extends Component {
252237
</Section>
253238
</AxesFold>
254239

255-
<AxesFold name={_('Lines')}>
256-
<AxesSelector />
257-
</AxesFold>
258-
<AxesFold name={_('Tick Labels')}>
259-
<AxesSelector />
260-
</AxesFold>
261-
<AxesFold name={_('Tick Markers')}>
262-
<AxesSelector />
263-
</AxesFold>
264-
<AxesFold name={_('Zoom Interactivity')}>
265-
<AxesSelector />
266-
</AxesFold>
267-
<AxesFold name={_('Layout')}>
268-
<AxesSelector />
269-
</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> */}
270255
</LayoutPanel>
271256

272257
<LayoutPanel group="Style" name={_('Legend')}>
@@ -378,7 +363,6 @@ class DefaultEditor extends Component {
378363

379364
DefaultEditor.contextTypes = {
380365
dataSourceNames: PropTypes.array.isRequired,
381-
plotSchema: PropTypes.object.isRequired,
382366
};
383367

384368
export default localize(DefaultEditor);

‎src/components/containers/TraceAccordion.js

+11-14
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,34 @@ import {connectTraceToPlot} from '../../lib';
77
const TraceFold = connectTraceToPlot(Fold);
88

99
export default class TraceAccordion extends Component {
10-
constructor(props, context) {
10+
constructor(props) {
1111
super(props);
1212

1313
this.addTrace = this.addTrace.bind(this);
14-
this.renderPanel = this.renderPanel.bind(this);
15-
}
16-
17-
renderPanel(d, i) {
18-
return (
19-
<TraceFold key={i} traceIndex={i} name={`Trace ${i}`}>
20-
{this.props.children}
21-
</TraceFold>
22-
);
2314
}
2415

2516
addTrace() {
26-
this.context.onUpdate &&
17+
if (this.context.onUpdate) {
2718
this.context.onUpdate({
2819
type: EDITOR_ACTIONS.ADD_TRACE,
2920
});
21+
}
3022
}
3123

3224
render() {
3325
const data = this.context.data || [];
3426
return (
3527
<div>
36-
{this.props.canAdd && (
28+
{this.props.canAdd ? (
3729
<a href="#" onClick={this.addTrace}>
3830
Add
3931
</a>
40-
)}
41-
{data.map(this.renderPanel)}
32+
) : null}
33+
{data.map((d, i) => (
34+
<TraceFold key={i} traceIndex={i} name={`Trace ${i}`}>
35+
{this.props.children}
36+
</TraceFold>
37+
))}
4238
</div>
4339
);
4440
}
@@ -50,5 +46,6 @@ TraceAccordion.contextTypes = {
5046
};
5147

5248
TraceAccordion.propTypes = {
49+
children: PropTypes.node,
5350
canAdd: PropTypes.bool,
5451
};

‎src/components/fields/TraceSelector.js

+60-5
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,70 @@ import React, {Component} from 'react';
44
import nestedProperty from 'plotly.js/src/lib/nested_property';
55
import {connectToContainer} from '../../lib';
66

7+
function computeTraceOptionsFromSchema(schema) {
8+
const capitalize = s => s.charAt(0).toUpperCase() + s.substring(1);
9+
10+
// Filter out Polar "area" type as it is fairly broken and we want to present
11+
// scatter with fill as an "area" chart type for convenience.
12+
const traceTypes = Object.keys(schema.traces).filter(t => t !== 'area');
13+
14+
const labels = traceTypes.map(capitalize);
15+
const traceOptions = traceTypes.map((t, i) => ({
16+
label: labels[i],
17+
value: t,
18+
}));
19+
20+
const i = traceOptions.findIndex(opt => opt.value === 'scatter');
21+
traceOptions.splice(
22+
i + 1,
23+
0,
24+
{label: 'Line', value: 'line'},
25+
{label: 'Area', value: 'area'}
26+
);
27+
28+
return traceOptions;
29+
}
30+
731
class TraceSelector extends Component {
8-
constructor(props) {
9-
super(props);
32+
constructor(props, context) {
33+
super(props, context);
1034
this.updatePlot = this.updatePlot.bind(this);
1135
this.fullValue = this.fullValue.bind(this);
1236

13-
const fillMeta = props.getValObject('fill');
37+
let fillMeta;
38+
if (props.getValObject) {
39+
fillMeta = props.getValObject('fill');
40+
}
1441
if (fillMeta) {
1542
this.fillTypes = fillMeta.values.filter(v => v !== 'none');
1643
} else {
17-
this.fillTypes = [];
44+
this.fillTypes = [
45+
'tozeroy',
46+
'tozerox',
47+
'tonexty',
48+
'tonextx',
49+
'toself',
50+
'tonext',
51+
];
52+
}
53+
54+
this.setLocals(props, context);
55+
}
56+
57+
setLocals(props, context) {
58+
if (props.traceOptions) {
59+
this.traceOptions = props.traceOptions;
60+
} else if (context.plotSchema) {
61+
this.traceOptions = computeTraceOptionsFromSchema(context.plotSchema);
62+
} else {
63+
this.traceOptions = [{label: 'Scatter', value: 'scatter'}];
1864
}
1965
}
2066

67+
componentWillReceiveProps(nextProps, nextContext) {
68+
this.setLocals(nextProps, nextContext);
69+
}
70+
2171
updatePlot(value) {
2272
let update;
2373
if (value === 'line') {
@@ -59,14 +109,19 @@ class TraceSelector extends Component {
59109
const props = Object.assign({}, this.props, {
60110
fullValue: this.fullValue,
61111
updatePlot: this.updatePlot,
112+
options: this.traceOptions,
62113
});
63114

64115
return <UnconnectedDropdown {...props} />;
65116
}
66117
}
67118

119+
TraceSelector.contextTypes = {
120+
plotSchema: PropTypes.object,
121+
};
122+
68123
TraceSelector.propTypes = {
69-
getValObject: PropTypes.func.isRequired,
124+
getValObject: PropTypes.func,
70125
container: PropTypes.object.isRequired,
71126
fullValue: PropTypes.func.isRequired,
72127
updateContainer: PropTypes.func,

0 commit comments

Comments
 (0)