Merge pull request #905 from plotly/hover-namelength

Add hoverlabel.namelength widget

Author: VeraZab

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 (
+      <Field {...this.props}>
+        <RadioBlocks
+          activeOption={this.state.currentOption}
+          options={[
+            {label: _('Clip To'), value: 'clip'},
+            {label: _('No Clip'), value: 'no-clip'},
+            {label: _('Hide'), value: 'hide'},
+          ]}
+          onOptionChange={this.onOptionChange}
+        />
+        <div style={{height: '10px', width: '100%'}} />
+        {this.state.currentOption === 'clip' ? (
+          <NumericInput
+            value={this.props.fullValue}
+            onChange={this.props.updatePlot}
+            onUpdate={this.props.updatePlot}
+            units="px"
+          />
+        ) : null}
+      </Field>
+    );
+  }
+}
+
+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 === ' ');
+  },
+});

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,
 };

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}
       </div>
     );
   }
@@ -203,6 +204,7 @@ NumericInput.propTypes = {
   step: PropTypes.number,
   stepmode: PropTypes.string,
   value: PropTypes.any,
+  units: PropTypes.string,
 };
 
 NumericInput.defaultProps = {

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: '
           )}
-          <p>
-            {_('Ex: ')}
-            <span style={{letterSpacing: '1px', fontStyle: 'italic', userSelect: 'text'}}>
-              {_('My custom title %{meta[1]}')}
-            </span>
-          </p>
+        </p>
+        <p>
+          {_('Ex: ')}
+          <span style={{letterSpacing: '1px', fontStyle: 'italic', userSelect: 'text'}}>
+            {_('My custom title %{meta[1]}')}
+          </span>
         </p>
       </Info>
     </PlotlyFold>

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}]}
       />
+      <HoverLabelNameLength label={_('Trace Name')} attr="hoverlabel.namelength" />
       <VisibilitySelect
         attr="contour.show"
         label={_('Show Contour')}