Skip to content

Commit d506001

Browse files
nicolaskruchtennicolaskruchten
authored
Merge pull request #299 from plotly/colorbar
Color bar panel
2 parents a3b59f2 + 13ac4a5 commit d506001

File tree

1 file changed

+232
-8
lines changed

1 file changed

+232
-8
lines changed

‎src/default_panels/StyleColorbarsPanel.js

Lines changed: 232 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
import {Radio, TextEditor, TraceAccordion, Fold, Panel} from '../components';
4+
import {
5+
Radio,
6+
TextEditor,
7+
TraceAccordion,
8+
Numeric,
9+
Fold,
10+
Panel,
11+
Section,
12+
Dropdown,
13+
FontSelector,
14+
ColorPicker,
15+
MenuPanel,
16+
} from '..';
517

618
import {localize} from '../lib';
719

8-
const StyleTracesPanel = ({localize: _}) => (
20+
const StyleColorBarsPanel = ({localize: _}) => (
921
<TraceAccordion messageIfEmptyFold="Need a color for a colorbar!">
1022
<Radio
1123
attr="showscale"
@@ -17,17 +29,229 @@ const StyleTracesPanel = ({localize: _}) => (
1729
<Panel showExpandCollapse={false}>
1830
<Fold name={_('Title')}>
1931
<TextEditor attr="colorbar.title" />
32+
33+
<Dropdown
34+
label={_('Location')}
35+
attr="colorbar.titleside"
36+
options={[
37+
{label: _('Top'), value: 'top'},
38+
{label: _('Right'), value: 'right'},
39+
{label: _('Bottom'), value: 'bottom'},
40+
]}
41+
/>
42+
<FontSelector label={_('Typeface')} attr="colorbar.titlefont.family" />
43+
<Numeric
44+
label={_('Font Size')}
45+
attr="colorbar.titlefont.size"
46+
units="px"
47+
/>
48+
<ColorPicker label={_('Font Color')} attr="colorbar.titlefont.color" />
49+
</Fold>
50+
<Fold name={_('Size and Positioning')}>
51+
<Section name={_('Size')} attr="colorbar.len">
52+
<Numeric label={_('Height')} attr="colorbar.len" />
53+
54+
<Radio
55+
attr="colorbar.lenmode"
56+
options={[
57+
{label: _('Fraction of Plot'), value: 'fraction'},
58+
{label: _('Pixels'), value: 'pixels'},
59+
]}
60+
/>
61+
62+
<Numeric label={_('Width')} attr="colorbar.thickness" />
63+
64+
<Radio
65+
attr="colorbar.thicknessmode"
66+
options={[
67+
{label: _('Fraction of Plot'), value: 'fraction'},
68+
{label: _('Pixels'), value: 'pixels'},
69+
]}
70+
/>
71+
</Section>
72+
<Section name={_('Horizontal Positioning')} attr="colorbar.x">
73+
<Numeric label={_('Horizontal Position')} attr="colorbar.x" />
74+
75+
<Dropdown
76+
label={_('Positioning Anchor')}
77+
attr="colorbar.xanchor"
78+
options={[
79+
{label: _('Left'), value: 'left'},
80+
{label: _('Center'), value: 'center'},
81+
{label: _('Right'), value: 'right'},
82+
]}
83+
/>
84+
</Section>
85+
<Section name={_('Vertical Positioning')} attr="colorbar.y">
86+
<Numeric label={_('Vertical Position')} attr="colorbar.y" />
87+
88+
<Dropdown
89+
label={_('Positioning Anchor')}
90+
attr="colorbar.yanchor"
91+
options={[
92+
{label: _('Top'), value: 'top'},
93+
{label: _('Middle'), value: 'middle'},
94+
{label: _('Bottom'), value: 'bottom'},
95+
]}
96+
/>
97+
</Section>
98+
<Section name={_('Padding')} attr="colorbar.xpad">
99+
<Numeric
100+
label={_('Vertical Padding')}
101+
attr="colorbar.ypad"
102+
units="px"
103+
/>
104+
<Numeric
105+
label={_('Horizontal Padding')}
106+
attr="colorbar.xpad"
107+
units="px"
108+
/>
109+
</Section>
110+
</Fold>
111+
<Fold name={_('Labels')}>
112+
<Radio
113+
attr="colorbar.showticklabels"
114+
options={[
115+
{label: _('Show'), value: true},
116+
{label: _('Hide'), value: false},
117+
]}
118+
/>
119+
<FontSelector label={_('Typeface')} attr="colorbar.tickfont.family" />
120+
<Numeric
121+
label={_('Font Size')}
122+
attr="colorbar.tickfont.size"
123+
units="px"
124+
/>
125+
<ColorPicker label={_('Font Color')} attr="colorbar.tickfont.color" />
126+
<Dropdown
127+
label={_('Angle')}
128+
attr="colorbar.tickangle"
129+
clearable={false}
130+
options={[
131+
{label: _('Auto'), value: 'auto'},
132+
{label: _('45'), value: 45},
133+
{label: _('90'), value: 90},
134+
{label: _('135'), value: 135},
135+
{label: _('180'), value: 180},
136+
]}
137+
/>
138+
<Dropdown
139+
label={_('Exponents')}
140+
attr="colorbar.exponentformat"
141+
clearable={false}
142+
options={[
143+
{label: _('None'), value: '000'},
144+
{label: _('e+6'), value: 'e'},
145+
{label: _('E+6'), value: 'E'},
146+
{label: _('x10^6'), value: 'power'},
147+
{label: _('k/M/G'), value: 'SI'},
148+
{label: _('k/M/B'), value: 'B'},
149+
]}
150+
/>
151+
<Section name={_('Label Formatting')}>
152+
<MenuPanel>
153+
<Section name={_('Prefix')}>
154+
<Radio
155+
attr="colorbar.showtickprefix"
156+
options={[
157+
{label: _('Every'), value: 'all'},
158+
{label: _('First'), value: 'first'},
159+
{label: _('Last'), value: 'last'},
160+
{label: _('None'), value: 'none'},
161+
]}
162+
/>
163+
</Section>
164+
<Section name={_('Suffix')}>
165+
<Radio
166+
attr="colorbar.showticksuffix"
167+
options={[
168+
{label: _('Every'), value: 'all'},
169+
{label: _('First'), value: 'first'},
170+
{label: _('Last'), value: 'last'},
171+
{label: _('None'), value: 'none'},
172+
]}
173+
/>
174+
</Section>
175+
</MenuPanel>
176+
<Dropdown
177+
label={_('Prefix')}
178+
attr="colorbar.tickprefix"
179+
options={[
180+
{label: _('x'), value: 'x'},
181+
{label: _('$'), value: '$'},
182+
{label: _('#'), value: '#'},
183+
{label: _('@'), value: '@'},
184+
{label: _('custom'), value: 'custom'},
185+
]}
186+
/>
187+
<Dropdown
188+
label={_('Suffix')}
189+
attr="colorbar.ticksuffix"
190+
options={[
191+
{label: _('C'), value: 'C'},
192+
{label: _('%'), value: '%'},
193+
{label: _('^'), value: '^'},
194+
{label: _('custom'), value: 'custom'},
195+
]}
196+
/>
197+
</Section>
198+
<Section name={_('Number of labels')}>
199+
<Radio
200+
attr="colorbar.tickmode"
201+
options={[
202+
{label: _('Linear'), value: 'linear'},
203+
{label: _('Custom'), value: 'auto'},
204+
]}
205+
/>
206+
207+
<Numeric label={_('Step Offset')} attr="colorbar.tick0" />
208+
<Numeric label={_('Step Size')} attr="colorbar.dtick" />
209+
<Numeric label={_('Max Number of Labels')} attr="colorbar.nticks" />
210+
</Section>
211+
</Fold>
212+
<Fold name={_('Ticks')}>
213+
<Radio
214+
attr="colorbar.ticks"
215+
options={[
216+
{label: _('Inside'), value: 'inside'},
217+
{label: _('Outside'), value: 'outside'},
218+
{label: _('Hide'), value: ''},
219+
]}
220+
/>
221+
<Numeric label={_('Length')} attr="colorbar.ticklen" units="px" />
222+
<Numeric label={_('Width')} attr="colorbar.tickwidth" units="px" />
223+
<ColorPicker label={_('Tick Color')} attr="colorbar.tickcolor" />
224+
<Section name={_('Number of Markers')}>
225+
<Radio
226+
attr="colorbar.tickmode"
227+
options={[
228+
{label: _('Linear'), value: 'linear'},
229+
{label: _('Custom'), value: 'auto'},
230+
]}
231+
/>
232+
233+
<Numeric label={_('Step Offset')} attr="colorbar.tick0" />
234+
<Numeric label={_('Step Size')} attr="colorbar.dtick" />
235+
<Numeric label={_('Max Number of Markers')} attr="colorbar.nticks" />
236+
</Section>
237+
</Fold>
238+
<Fold name={_('Borders and Background')}>
239+
<Section name={_('Color Bar')} attr="colorbar.outlinewidth">
240+
<Numeric label={_('Border Width')} attr="colorbar.outlinewidth" />
241+
<ColorPicker label={_('Border Color')} attr="colorbar.outlinecolor" />
242+
</Section>
243+
<Section name={_('Container')} attr="colorbar.bgcolor">
244+
<ColorPicker label={_('Background Color')} attr="colorbar.bgcolor" />
245+
<Numeric label={_('Border Width')} attr="colorbar.borderwidth" />
246+
<ColorPicker label={_('Border Color')} attr="colorbar.bordercolor" />
247+
</Section>
20248
</Fold>
21-
<Fold name={_('Size and Positioning')} />
22-
<Fold name={_('Labels')} />
23-
<Fold name={_('Ticks')} />
24-
<Fold name={_('Borders and Background')} />
25249
</Panel>
26250
</TraceAccordion>
27251
);
28252

29-
StyleTracesPanel.propTypes = {
253+
StyleColorBarsPanel.propTypes = {
30254
localize: PropTypes.func,
31255
};
32256

33-
export default localize(StyleTracesPanel);
257+
export default localize(StyleColorBarsPanel);

0 commit comments

Comments
 (0)