-
-
Notifications
You must be signed in to change notification settings - Fork 102
/
CustomEditor.js
82 lines (80 loc) · 2.52 KB
/
CustomEditor.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React, {Component} from 'react';
import {
Flaglist,
ColorPicker,
ColorscalePicker,
PlotlyFold,
PanelMenuWrapper,
TextEditor,
Radio,
Dropdown,
Info,
PlotlySection,
Numeric,
LayoutPanel,
Button,
SingleSidebarItem,
TraceAccordion,
} from 'react-chart-editor';
export default class CustomEditor extends Component {
render() {
return (
<PanelMenuWrapper>
<TraceAccordion group="Traces" name="Style">
<PlotlySection name="Colorscale" attr="marker.colorscale">
<ColorscalePicker label="Colorscale" attr="marker.colorscale" />
</PlotlySection>
</TraceAccordion>
<LayoutPanel group="Layout" name="Style">
<PlotlyFold name="PlotlyFold">
{
// At least one of the direct children of PlotlyFold must have an attr prop
// for the PlotlyFold to display itself
}
<Info attr="title">
<p>
This custom editor demonstrates the general-purpose container and field components.
</p>
<p>
This is an <code>Info</code> component.
</p>
</Info>
<PlotlySection name="PlotlySection">
<Numeric label="Numeric" attr="width" show units="units" />
<Dropdown
label="Dropdown"
attr="xaxis.title"
show
options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]}
/>
<Radio
label="Radio"
attr="yaxis.title"
show
options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]}
/>
<Flaglist
label="Flaglist"
attr="titlefont.family"
show
options={[{label: 'Yes', value: 'y'}, {label: 'No', value: 'n'}]}
/>
<ColorPicker label="ColorPicker" attr="plot_bgcolor" show />
<TextEditor attr="title" label="TextEditor default" />
</PlotlySection>
</PlotlyFold>
</LayoutPanel>
<SingleSidebarItem>
<Button variant="primary" label="save" onClick={() => alert('save button clicked!')} />
</SingleSidebarItem>
<SingleSidebarItem>
<Button
variant="secondary"
label="clear"
onClick={() => alert('clear button clicked!')}
/>
</SingleSidebarItem>
</PanelMenuWrapper>
);
}
}