-
-
Notifications
You must be signed in to change notification settings - Fork 100
/
StyleNotesPanel.js
100 lines (96 loc) · 3.14 KB
/
StyleNotesPanel.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React from 'react';
import PropTypes from 'prop-types';
import {
AnnotationArrowRef,
AnnotationRef,
AnnotationAccordion,
ArrowSelector,
ColorPicker,
FontSelector,
Numeric,
Dropdown,
PositioningNumeric,
Radio,
TextEditor,
PlotlySection,
NumericOrDate,
} from '../components';
const StyleNotesPanel = (props, {localize: _}) => (
<AnnotationAccordion canAdd canReorder>
<PlotlySection name={_('Note Text')} attr="text">
<TextEditor attr="text" />
<FontSelector label={_('Typeface')} attr="font.family" />
<Numeric label={_('Font Size')} attr="font.size" units="px" />
<ColorPicker label={_('Font Color')} attr="font.color" />
<Numeric label={_('Angle')} attr="textangle" units="°" />
<Dropdown
label={_('Horizontal Alignment')}
clearable={false}
attr="align"
options={[
{label: _('Left'), value: 'left'},
{label: _('Center'), value: 'center'},
{label: _('Right'), value: 'right'},
]}
/>
<Dropdown
label={_('Vertical Alignment')}
clearable={false}
attr="valign"
options={[
{label: _('Left'), value: 'left'},
{label: _('Center'), value: 'center'},
{label: _('Right'), value: 'right'},
]}
/>
</PlotlySection>
<PlotlySection name={_('Arrow')}>
<Radio
attr="showarrow"
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
/>
<Numeric label={_('Line Width')} attr="arrowwidth" units="px" />
<ColorPicker label={_('Color')} attr="arrowcolor" />
<ArrowSelector label={_('Arrowhead')} attr="arrowhead" />
<Numeric label={_('Scale')} step={0.1} attr="arrowsize" units="px" />
<AnnotationArrowRef label={_('X Offset')} attr="axref" />
<AnnotationArrowRef label={_('Y Offset')} attr="ayref" />
<NumericOrDate label={_('X Vector')} attr="ax" />
<NumericOrDate label={_('Y Vector')} attr="ay" />
</PlotlySection>
<PlotlySection name={_('Horizontal Positioning')}>
<Dropdown
label={_('Anchor Point')}
clearable={false}
attr="xanchor"
options={[
{label: _('Auto'), value: 'auto'},
{label: _('Left'), value: 'left'},
{label: _('Center'), value: 'center'},
{label: _('Right'), value: 'right'},
]}
/>
<PositioningNumeric label={_('Position')} attr="x" />
<AnnotationRef label={_('Relative To')} attr="xref" />
</PlotlySection>
<PlotlySection name={_('Vertical Positioning')}>
<Dropdown
label={_('Anchor Point')}
clearable={false}
attr="yanchor"
options={[
{label: _('Auto'), value: 'auto'},
{label: _('Top'), value: 'top'},
{label: _('Middle'), value: 'middle'},
{label: _('Bottom'), value: 'bottom'},
]}
/>
<PositioningNumeric label={_('Position')} attr="y" />
<AnnotationRef label={_('Relative To')} attr="yref" />
</PlotlySection>
</AnnotationAccordion>
);
StyleNotesPanel.contextTypes = {
localize: PropTypes.func,
};
export default StyleNotesPanel;