From a3462c355e04e3eb14435976a40d9e710eeb75a7 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Thu, 11 Apr 2019 14:47:05 -0400 Subject: [PATCH 1/3] Add hoverlabel.namelength widget --- src/components/fields/HoverLabelNameLength.js | 91 +++++++++++++++++++ src/components/fields/index.js | 2 + src/components/widgets/NumericInput.js | 2 + src/default_panels/StyleTracesPanel.js | 2 + 4 files changed, 97 insertions(+) create mode 100644 src/components/fields/HoverLabelNameLength.js diff --git a/src/components/fields/HoverLabelNameLength.js b/src/components/fields/HoverLabelNameLength.js new file mode 100644 index 000000000..e29e48708 --- /dev/null +++ b/src/components/fields/HoverLabelNameLength.js @@ -0,0 +1,91 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {connectToContainer} from 'lib'; +import Field from './Field'; +import RadioBlocks from '../widgets/RadioBlocks'; +import NumericInput from '../widgets/NumericInput'; + +export class UnconnectedHoverLabelNameLength extends Component { + constructor(props) { + super(props); + this.state = { + currentOption: this.getCurrentOption(props), + }; + this.onOptionChange = this.onOptionChange.bind(this); + } + + getCurrentOption(props) { + return props.fullValue > 0 ? 'clip' : props.fullValue === 0 ? 'hide' : 'no-clip'; + } + + componentWillReceiveProps(nextProps) { + if (nextProps.fullValue !== this.props.fullValue) { + this.setState({ + currentOption: this.getCurrentOption(nextProps), + }); + } + } + + onOptionChange(option) { + if (this.state.currentOption !== 'clip' && option === 'clip') { + // this allows us to go back to plotly.js default if we've + // clicked away from the 'clip' option. + this.props.updatePlot(15); //eslint-disable-line + return; + } + if (option === 'no-clip') { + this.props.updatePlot(-1); + return; + } + if (option === 'hide') { + this.props.updatePlot(0); + return; + } + } + + render() { + const _ = this.context.localize; + + return ( + + +
+ {this.state.currentOption === 'clip' ? ( + + ) : null} + + ); + } +} + +UnconnectedHoverLabelNameLength.propTypes = { + fullValue: PropTypes.number, + updatePlot: PropTypes.func, + ...Field.propTypes, +}; + +UnconnectedHoverLabelNameLength.contextTypes = { + localize: PropTypes.func, +}; + +export default connectToContainer(UnconnectedHoverLabelNameLength, { + modifyPlotProps: (props, context, plotProps) => { + const {container} = plotProps; + plotProps.isVisible = + (container.hoverinfo && container.hoverinfo.includes('name')) || + (container.hovertemplate || container.hovertemplate === ' '); + }, +}); diff --git a/src/components/fields/index.js b/src/components/fields/index.js index 0a7a656f5..481a2b78b 100644 --- a/src/components/fields/index.js +++ b/src/components/fields/index.js @@ -36,6 +36,7 @@ import LocationSelector from './LocationSelector'; import AxisInterval from './AxisInterval'; import DateTimePicker from './DateTimePicker'; import TextPosition from './TextPosition'; +import HoverLabelNameLength from './HoverLabelNameLength'; export * from './derived'; export * from './LineSelectors'; @@ -80,4 +81,5 @@ export { AxisInterval, NumericOrDate, DateTimePicker, + HoverLabelNameLength, }; diff --git a/src/components/widgets/NumericInput.js b/src/components/widgets/NumericInput.js index 1c4904103..3c9697053 100644 --- a/src/components/widgets/NumericInput.js +++ b/src/components/widgets/NumericInput.js @@ -185,6 +185,7 @@ export default class NumericInput extends Component { /> {this.renderArrows()} {this.renderSlider()} + {this.props.units ? this.props.units : null}
); } @@ -203,6 +204,7 @@ NumericInput.propTypes = { step: PropTypes.number, stepmode: PropTypes.string, value: PropTypes.any, + units: PropTypes.string, }; NumericInput.defaultProps = { diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js index 32951e6e1..75833cd58 100644 --- a/src/default_panels/StyleTracesPanel.js +++ b/src/default_panels/StyleTracesPanel.js @@ -37,6 +37,7 @@ import { GroupCreator, NumericOrDate, AxisInterval, + HoverLabelNameLength, } from '../components'; import { BinningDropdown, @@ -737,6 +738,7 @@ const StyleTracesPanel = (props, {localize: _}) => ( attr="hoverlabel.split" options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]} /> + Date: Thu, 11 Apr 2019 15:31:12 -0400 Subject: [PATCH 2/3] Don't nest

so that no error shows up in console --- src/default_panels/StyleLayoutPanel.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/default_panels/StyleLayoutPanel.js b/src/default_panels/StyleLayoutPanel.js index b47634874..bf2042a67 100644 --- a/src/default_panels/StyleLayoutPanel.js +++ b/src/default_panels/StyleLayoutPanel.js @@ -184,12 +184,12 @@ const StyleLayoutPanel = (props, {localize: _}) => ( {_( 'You can refer to the items in this column in any text fields of the editor like so: ' )} -

- {_('Ex: ')} - - {_('My custom title %{meta[1]}')} - -

+

+

+ {_('Ex: ')} + + {_('My custom title %{meta[1]}')} +

From 0ad66657dbcfae51c425a2f2623a7b3931c496f4 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Thu, 11 Apr 2019 16:18:02 -0400 Subject: [PATCH 3/3] shorten label name --- src/default_panels/StyleTracesPanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js index 75833cd58..e78cb8db8 100644 --- a/src/default_panels/StyleTracesPanel.js +++ b/src/default_panels/StyleTracesPanel.js @@ -738,7 +738,7 @@ const StyleTracesPanel = (props, {localize: _}) => ( attr="hoverlabel.split" options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]} /> - +