Skip to content

Commit 5627ff8

Browse files
dmt0dmt0
authored
Merge pull request #738 from plotly/hoverbg
hover label attrs
2 parents 5de680d + 096d400 commit 5627ff8

File tree

5 files changed

+103
-44
lines changed

5 files changed

+103
-44
lines changed

‎src/components/fields/ColorPicker.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,34 @@ import PropTypes from 'prop-types';
44
import React, {Component} from 'react';
55
import {connectToContainer} from 'lib';
66

7-
class UnconnectedColorPicker extends Component {
7+
export class UnconnectedColorPicker extends Component {
8+
constructor(props, context) {
9+
super(props, context);
10+
this.state = {
11+
empty: !this.props.fullValue && this.props.handleEmpty,
12+
};
13+
}
14+
815
render() {
16+
if (this.state.empty) {
17+
return (
18+
<Field {...this.props}>
19+
<div className="js-test-info">
20+
This color is computed from other parts of the figure but you can{' '}
21+
<a
22+
onClick={() => {
23+
this.setState({empty: false});
24+
this.props.updatePlot(this.props.defaultColor);
25+
}}
26+
>
27+
override it
28+
</a>
29+
.
30+
</div>
31+
</Field>
32+
);
33+
}
34+
935
return (
1036
<Field {...this.props}>
1137
<ColorPickerWidget
@@ -20,6 +46,8 @@ class UnconnectedColorPicker extends Component {
2046
UnconnectedColorPicker.propTypes = {
2147
fullValue: PropTypes.any,
2248
updatePlot: PropTypes.func,
49+
handleEmpty: PropTypes.bool,
50+
defaultColor: PropTypes.string,
2351
...Field.propTypes,
2452
};
2553

‎src/components/fields/MultiColorPicker.js‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ class UnconnectedMultiColorPicker extends Component {
3232
this.state = {
3333
selectedConstantColorOption:
3434
context.traceIndexes.length > 1 &&
35+
props.fullValue &&
3536
props.fullValue.every(v => v[1] === props.fullValue[0][1])
3637
? 'single'
3738
: 'multiple',
@@ -41,7 +42,11 @@ class UnconnectedMultiColorPicker extends Component {
4142
}
4243

4344
setColor(color) {
44-
this.props.updatePlot(color);
45+
if (this.props.setColor) {
46+
this.props.setColor(color);
47+
} else {
48+
this.props.updatePlot(color);
49+
}
4550
}
4651

4752
setColors(colorscale, colorscaleType) {
@@ -88,11 +93,7 @@ class UnconnectedMultiColorPicker extends Component {
8893
<Field {...this.props} suppressMultiValuedMessage>
8994
<RadioBlocks
9095
options={constantOptions}
91-
activeOption={
92-
this.props.parentSelectedConstantColorOption
93-
? this.props.parentSelectedConstantColorOption
94-
: this.state.selectedConstantColorOption
95-
}
96+
activeOption={selectedConstantColorOption}
9697
onOptionChange={
9798
this.props.onConstantColorOptionChange
9899
? this.props.onConstantColorOptionChange
@@ -101,10 +102,7 @@ class UnconnectedMultiColorPicker extends Component {
101102
/>
102103
<Info>{selectedConstantColorOption === 'single' ? singleMessage : multiMessage}</Info>
103104
{selectedConstantColorOption === 'single' ? (
104-
<ColorPicker
105-
attr={this.props.attr}
106-
updatePlot={this.props.setColor ? this.props.setColor : this.setColor}
107-
/>
105+
<ColorPicker attr={this.props.attr} updatePlot={this.setColor} />
108106
) : (
109107
<CustomColorscalePicker
110108
suppressMultiValuedMessage
@@ -119,11 +117,7 @@ class UnconnectedMultiColorPicker extends Component {
119117
}
120118

121119
return (
122-
<ColorPicker
123-
attr={this.props.attr}
124-
updatePlot={this.props.setColor ? this.props.setColor : this.setColor}
125-
label={this.props.label}
126-
/>
120+
<ColorPicker attr={this.props.attr} updatePlot={this.setColor} label={this.props.label} />
127121
);
128122
}
129123
}

‎src/components/fields/VisibilitySelect.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Field from './Field';
66
import Radio from './Radio';
77
import Dropdown from './Dropdown';
88

9-
class UnconnectedVisibilitySelect extends Component {
9+
export class UnconnectedVisibilitySelect extends Component {
1010
constructor(props, context) {
1111
super(props, context);
1212

‎src/components/fields/derived.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {UnconnectedNumeric} from './Numeric';
55
import {UnconnectedAxisRangeValue} from './AxisRangeValue';
66
import {UnconnectedRadio} from './Radio';
77
import Info from './Info';
8+
import {UnconnectedColorPicker} from './ColorPicker';
9+
import {UnconnectedVisibilitySelect} from './VisibilitySelect';
810
import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
911

1012
export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
@@ -638,7 +640,7 @@ export const HoveronDropdown = connectToContainer(UnconnectedDropdown, {
638640
},
639641
});
640642

641-
export const HovermodeDropdown = connectToContainer(UnconnectedDropdown, {
643+
export const HovermodeDropdown = connectToContainer(UnconnectedVisibilitySelect, {
642644
modifyPlotProps: (props, context, plotProps) => {
643645
const {localize: _} = context;
644646

@@ -652,5 +654,14 @@ export const HovermodeDropdown = connectToContainer(UnconnectedDropdown, {
652654
]
653655
: [{label: _('Closest'), value: 'closest'}, {label: _('Disable'), value: false}];
654656
plotProps.clearable = false;
657+
plotProps.dropdown = true;
658+
plotProps.showOn = ['closest', 'x', 'y'];
659+
},
660+
});
661+
662+
export const HoverColor = connectToContainer(UnconnectedColorPicker, {
663+
modifyPlotProps: (props, context, plotProps) => {
664+
plotProps.isVisible = Boolean(context.fullLayout.hovermode);
665+
return plotProps;
655666
},
656667
});

‎src/default_panels/StyleLayoutPanel.js‎

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
VisibilitySelect,
1414
HovermodeDropdown,
1515
} from '../components';
16+
import {HoverColor} from '../components/fields/derived';
1617

1718
const StyleLayoutPanel = (props, {localize: _}) => (
1819
<TraceRequiredPanel>
@@ -61,32 +62,57 @@ const StyleLayoutPanel = (props, {localize: _}) => (
6162
<Numeric label={_('Right')} attr="margin.r" units="px" />
6263
<Numeric label={_('Padding')} attr="margin.pad" units="px" />
6364
</PlotlyFold>
64-
<PlotlyFold name={_('Interaction')}>
65-
<HovermodeDropdown label={_('Hover Interaction')} attr="hovermode" />
66-
<Dropdown
67-
label={_('Drag Interaction')}
68-
attr="dragmode"
69-
options={[
70-
{label: _('Zoom'), value: 'zoom'},
71-
{label: _('Select'), value: 'select'},
72-
{label: _('Pan'), value: 'pan'},
73-
{label: _('Lasso'), value: 'lasso'},
74-
{label: _('Orbit'), value: 'orbit'},
75-
{label: _('Turntable'), value: 'turntable'},
76-
]}
77-
clearable={false}
78-
/>
79-
<Dropdown
80-
label={_('Select Direction')}
81-
attr="selectdirection"
82-
options={[
83-
{label: _('Any'), value: 'any'},
84-
{label: _('Horizontal'), value: 'h'},
85-
{label: _('Vertical'), value: 'v'},
86-
{label: _('Diagonal'), value: 'd'},
87-
]}
88-
clearable={false}
89-
/>
65+
<PlotlyFold name={_('Interactions')}>
66+
<PlotlySection name={_('Drag')} attr="dragmode">
67+
<Dropdown
68+
label={_('Mode')}
69+
attr="dragmode"
70+
options={[
71+
{label: _('Zoom'), value: 'zoom'},
72+
{label: _('Select'), value: 'select'},
73+
{label: _('Pan'), value: 'pan'},
74+
{label: _('Lasso'), value: 'lasso'},
75+
{label: _('Orbit'), value: 'orbit'},
76+
{label: _('Turntable'), value: 'turntable'},
77+
]}
78+
clearable={false}
79+
/>
80+
<Dropdown
81+
label={_('Select Direction')}
82+
attr="selectdirection"
83+
options={[
84+
{label: _('Any'), value: 'any'},
85+
{label: _('Horizontal'), value: 'h'},
86+
{label: _('Vertical'), value: 'v'},
87+
{label: _('Diagonal'), value: 'd'},
88+
]}
89+
clearable={false}
90+
/>
91+
</PlotlySection>
92+
<PlotlySection name={_('Hover')}>
93+
<HovermodeDropdown label={_('Mode')} attr="hovermode">
94+
<HoverColor
95+
label={_('Background Color')}
96+
attr="hoverlabel.bgcolor"
97+
defaultColor="#FFF"
98+
handleEmpty
99+
/>
100+
<HoverColor
101+
label={_('Border Color')}
102+
attr="hoverlabel.bordercolor"
103+
defaultColor="#000"
104+
handleEmpty
105+
/>
106+
<FontSelector label={_('Typeface')} attr="hoverlabel.font.family" clearable />
107+
<Numeric label={_('Font Size')} attr="hoverlabel.font.size" />
108+
<HoverColor
109+
label={_('Font Color')}
110+
attr="hoverlabel.font.color"
111+
defaultColor="#000"
112+
handleEmpty
113+
/>
114+
</HovermodeDropdown>
115+
</PlotlySection>
90116
</PlotlyFold>
91117
</TraceRequiredPanel>
92118
);

0 commit comments

Comments
 (0)