Skip to content

Commit 0f25c71

Browse files
dmt0dmt0
committed
marker color
1 parent 53088f8 commit 0f25c71

File tree

5 files changed

+154
-5
lines changed

5 files changed

+154
-5
lines changed

‎src/components/fields/MarkerColor.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import Field from './Field';
2+
import PropTypes from 'prop-types';
3+
import React, {Component} from 'react';
4+
import {connectToContainer} from 'lib';
5+
import RadioBlocks from '../widgets/RadioBlocks';
6+
import Color from './Color';
7+
import DataSelector from './DataSelector';
8+
import Colorscale from './Colorscale';
9+
import {MULTI_VALUED, COLORS} from 'lib/constants';
10+
11+
class UnconnectedMarkerColor extends Component {
12+
constructor(props, context) {
13+
super(props, context);
14+
15+
let type = null;
16+
if (
17+
!props.container.marker ||
18+
(props.container.marker && !props.container.marker.colorsrc)
19+
) {
20+
type = 'constant';
21+
} else if (
22+
props.container.marker &&
23+
Array.isArray(props.container.marker.color) &&
24+
props.fullContainer.marker &&
25+
Array.isArray(props.fullContainer.marker.color)
26+
) {
27+
type = 'variable';
28+
}
29+
30+
this.state = {
31+
type,
32+
value: {
33+
constant: type === 'constant' ? props.fullValue : COLORS.mutedBlue,
34+
variable: type === 'variable' ? props.fullValue : null,
35+
},
36+
};
37+
38+
this.setType = this.setType.bind(this);
39+
this.setValue = this.setValue.bind(this);
40+
this.setColorScale = this.setColorScale.bind(this);
41+
}
42+
43+
setType(type) {
44+
this.setState({type: type});
45+
this.props.updatePlot(this.state.value[type]);
46+
if (type === 'constant') {
47+
this.context.updateContainer({
48+
['marker.colorsrc']: null,
49+
['marker.colorscale']: null,
50+
});
51+
this.setState({colorscale: null});
52+
} else {
53+
this.context.updateContainer({
54+
['marker.color']: null,
55+
['marker.colorsrc']: null,
56+
['marker.colorscale']: [],
57+
});
58+
}
59+
}
60+
61+
setValue(inputValue) {
62+
const {type} = this.state;
63+
64+
this.setState(
65+
type === 'constant'
66+
? {value: {constant: inputValue}}
67+
: {value: {variable: inputValue}}
68+
);
69+
this.props.updatePlot(inputValue);
70+
}
71+
72+
setColorScale(inputValue) {
73+
this.setState({colorscale: inputValue});
74+
this.context.updateContainer({['marker.colorscale']: inputValue});
75+
}
76+
77+
render() {
78+
const {attr, fullValue, container} = this.props;
79+
const {localize: _} = this.context;
80+
const {type, value, colorscale} = this.state;
81+
const options = [
82+
{label: _('Constant'), value: 'constant'},
83+
{label: _('Variable'), value: 'variable'},
84+
];
85+
const multiValued =
86+
this.props.multiValued ||
87+
(Array.isArray(fullValue) && fullValue.includes(MULTI_VALUED)) ||
88+
(container.marker && container.marker.colorscale === MULTI_VALUED) ||
89+
(container.marker && container.marker.colorsrc === MULTI_VALUED) ||
90+
(container.marker &&
91+
container.marker.color &&
92+
Array.isArray(container.marker.color) &&
93+
container.marker.color.includes(MULTI_VALUED));
94+
95+
return (
96+
<div>
97+
<Field {...this.props} multiValued={multiValued} attr={attr}>
98+
<RadioBlocks
99+
options={options}
100+
activeOption={type}
101+
onOptionChange={this.setType}
102+
/>
103+
{!type ? null : type === 'constant' ? (
104+
<Color
105+
suppressMultiValuedMessage
106+
attr="marker.color"
107+
updatePlot={this.setValue}
108+
fullValue={value.constant}
109+
/>
110+
) : container.marker &&
111+
container.marker.colorsrc === MULTI_VALUED ? null : (
112+
<div>
113+
<DataSelector suppressMultiValuedMessage attr="marker.color" />
114+
{container.marker &&
115+
container.marker.colorscale === MULTI_VALUED ? null : (
116+
<Colorscale
117+
suppressMultiValuedMessage
118+
attr="marker.colorscale"
119+
updatePlot={this.setColorScale}
120+
colorscale={colorscale}
121+
/>
122+
)}
123+
</div>
124+
)}
125+
</Field>
126+
</div>
127+
);
128+
}
129+
}
130+
131+
UnconnectedMarkerColor.propTypes = {
132+
fullValue: PropTypes.any,
133+
updatePlot: PropTypes.func,
134+
...Field.propTypes,
135+
};
136+
137+
UnconnectedMarkerColor.contextTypes = {
138+
localize: PropTypes.func,
139+
updateContainer: PropTypes.func,
140+
};
141+
142+
export default connectToContainer(UnconnectedMarkerColor);

‎src/components/widgets/ColorPicker.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@ class ColorPicker extends Component {
9292
// We use our own toTinyColor because this value is a ColorPicker
9393
// color value which is an object that needs unpacking. We also handle
9494
// the case where a color string is passed in (just in case).
95-
9695
const color = toTinyColor(newColor);
9796

9897
// relayout call only wants a RGB String

‎src/default_panels/GraphCreatePanel.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,6 @@ const GraphCreatePanel = (props, {localize: _}) => {
205205
/>
206206
</LayoutSection>
207207
<Numeric label={_('Sum')} step={10} attr="sum" />
208-
<DataSelector label={_('Color')} attr="marker.color" />
209208
<Radio
210209
label={_('Transpose')}
211210
attr="transpose"

‎src/default_panels/StyleTracesPanel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
BinningDropdown,
3333
NumericReciprocal,
3434
} from '../components/fields/derived';
35+
import MarkerColor from '../components/fields/MarkerColor';
3536

3637
const StyleTracesPanel = (props, {localize: _}) => (
3738
<TraceAccordion canGroup>
@@ -223,8 +224,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
223224
/>
224225
<NumericFraction label={_('Jitter')} attr="jitter" />
225226
<Numeric label={_('Position')} attr="pointpos" step={0.1} showSlider />
226-
<ColorscalePicker label={_('Colorscale')} attr="marker.colorscale" />
227-
<ColorPicker label={_('Color')} attr="marker.color" />
227+
<MarkerColor label={_('Color')} attr="marker.color" />
228228
<NumericFraction label={_('Opacity')} attr="marker.opacity" />
229229
<MarkerSize label={_('Size')} attr="marker.size" />
230230
<Radio

‎src/styles/components/widgets/_colorscalepicker.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,14 @@
1313
}
1414

1515
.rc-slider {
16-
width: 200px;
16+
width: 254px !important;
17+
}
18+
19+
.colorscaleControlPanel {
20+
padding: 6px;
21+
width: 94%;
22+
}
23+
24+
.colorscale-block {
25+
margin: 0 20px !important;
1726
}

0 commit comments

Comments
 (0)