rangeslider/rangeselector UI (#416)

Author: nicolaskruchten

src/EditorControls.js

@@ -223,6 +223,22 @@ class EditorControls extends Component {
         }
         break;
 
+      case EDITOR_ACTIONS.DELETE_RANGESELECTOR:
+        if (isNumeric(payload.rangeselectorIndex)) {
+          graphDiv.layout[payload.axisId].rangeselector.buttons.splice(
+            payload.rangeselectorIndex,
+            1
+          );
+          if (this.props.onUpdate) {
+            this.props.onUpdate(
+              graphDiv.data,
+              Object.assign({}, graphDiv.layout),
+              graphDiv._transitionData._frames
+            );
+          }
+        }
+        break;
+
       default:
         throw new Error('must specify an action type to handleEditorUpdate');
     }

src/components/containers/PanelHeader.js

@@ -57,6 +57,7 @@ class PanelHeader extends Component {
 
 PanelHeader.contextTypes = {
   layout: PropTypes.object,
+  fullContainer: PropTypes.object,
   onUpdate: PropTypes.func,
   updateContainer: PropTypes.func,
 };

src/components/containers/RangeSelectorAccordion.js

@@ -0,0 +1,64 @@
+import Fold from './Fold';
+import Panel from './Panel';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectRangeSelectorToAxis, localize} from 'lib';
+
+const RangeSelectorFold = connectRangeSelectorToAxis(Fold);
+
+class RangeSelectorAccordion extends Component {
+  render() {
+    if (
+      !this.context.fullContainer.rangeselector ||
+      !this.context.fullContainer.rangeselector.visible ||
+      // next line checks for "all" case
+      this.context.fullContainer._axisGroup === 0
+    ) {
+      return null;
+    }
+
+    const {fullContainer: {rangeselector: {buttons = []}}} = this.context;
+    const {children, localize: _} = this.props;
+
+    const content =
+      buttons.length &&
+      buttons.map((btn, i) => (
+        <RangeSelectorFold
+          key={i}
+          rangeselectorIndex={i}
+          buttonIndex={i}
+          name={btn.label}
+          canDelete={true}
+        >
+          {children}
+        </RangeSelectorFold>
+      ));
+
+    const addAction = {
+      label: _('Button'),
+      handler: context => {
+        const {fullContainer, updateContainer} = context;
+        if (updateContainer) {
+          const shapeIndex = Array.isArray(fullContainer.rangeselector.buttons)
+            ? fullContainer.rangeselector.buttons.length
+            : 0;
+
+          updateContainer({[`rangeselector.buttons[${shapeIndex}]`]: {}});
+        }
+      },
+    };
+
+    return <Panel addAction={addAction}>{content ? content : null}</Panel>;
+  }
+}
+
+RangeSelectorAccordion.contextTypes = {
+  fullContainer: PropTypes.object,
+};
+
+RangeSelectorAccordion.propTypes = {
+  children: PropTypes.node,
+  localize: PropTypes.func,
+};
+
+export default localize(RangeSelectorAccordion);

src/components/containers/index.js

@@ -3,6 +3,7 @@ import ShapeAccordion from './ShapeAccordion';
 import SliderAccordion from './SliderAccordion';
 import ImageAccordion from './ImageAccordion';
 import UpdateMenuAccordion from './UpdateMenuAccordion';
+import RangeSelectorAccordion from './RangeSelectorAccordion';
 import AxesFold from './AxesFold';
 import Fold from './Fold';
 import MenuPanel from './MenuPanel';
@@ -23,6 +24,7 @@ export {
   SliderAccordion,
   ImageAccordion,
   UpdateMenuAccordion,
+  RangeSelectorAccordion,
   MenuPanel,
   Fold,
   Panel,

src/components/fields/AxisRangeValue.js

@@ -0,0 +1,33 @@
+import Field from './Field';
+import {UnconnectedNumeric} from './Numeric';
+import {UnconnectedText} from './Text';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectToContainer} from 'lib';
+
+export class UnconnectedAxisRangeValue extends Component {
+  render() {
+    return this.props.multiValued ||
+      (this.props.fullContainer && this.props.fullContainer.type === 'date') ? (
+      <UnconnectedText {...this.props} />
+    ) : (
+      <UnconnectedNumeric {...this.props} />
+    );
+  }
+}
+
+UnconnectedAxisRangeValue.propTypes = {
+  defaultValue: PropTypes.any,
+  fullValue: PropTypes.any,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  multiValued: PropTypes.bool,
+  hideArrows: PropTypes.bool,
+  showSlider: PropTypes.bool,
+  step: PropTypes.number,
+  fullContainer: PropTypes.object,
+  updatePlot: PropTypes.func,
+  ...Field.propTypes,
+};
+
+export default connectToContainer(UnconnectedAxisRangeValue);

src/components/fields/Numeric.js

@@ -33,7 +33,7 @@ export class UnconnectedNumeric extends Component {
 }
 
 UnconnectedNumeric.propTypes = {
-  defaultValue: PropTypes.number,
+  defaultValue: PropTypes.any,
   fullValue: PropTypes.any,
   min: PropTypes.number,
   max: PropTypes.number,

src/components/fields/Text.js

@@ -0,0 +1,37 @@
+import Field from './Field';
+import TextInput from '../widgets/TextInput';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectToContainer} from 'lib';
+
+export class UnconnectedText extends Component {
+  render() {
+    let fullValue = this.props.fullValue;
+    let placeholder;
+    if (this.props.multiValued) {
+      placeholder = fullValue;
+      fullValue = '';
+    }
+
+    return (
+      <Field {...this.props}>
+        <TextInput
+          value={fullValue}
+          defaultValue={this.props.defaultValue}
+          placeholder={placeholder}
+          onUpdate={this.props.updatePlot}
+        />
+      </Field>
+    );
+  }
+}
+
+UnconnectedText.propTypes = {
+  defaultValue: PropTypes.any,
+  fullValue: PropTypes.any,
+  multiValued: PropTypes.bool,
+  updatePlot: PropTypes.func,
+  ...Field.propTypes,
+};
+
+export default connectToContainer(UnconnectedText);

src/components/fields/TraceSelector.js

@@ -68,6 +68,7 @@ class TraceSelector extends Component {
       container &&
       container.uid &&
       !container.mode &&
+      fullContainer._fullInput &&
       fullContainer._fullInput.type === 'scatter'
     ) {
       updateContainer({

src/components/fields/derived.js

@@ -2,6 +2,7 @@ import isNumeric from 'fast-isnumeric';
 import {UnconnectedDropdown} from './Dropdown';
 import {UnconnectedFlaglist} from './Flaglist';
 import {UnconnectedNumeric} from './Numeric';
+import {UnconnectedAxisRangeValue} from './AxisRangeValue';
 import {UnconnectedRadio} from './Radio';
 import {
   connectLayoutToPlot,
@@ -78,6 +79,33 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
+export const RangesliderVisible = connectToContainer(UnconnectedRadio, {
+  modifyPlotProps: (props, context, plotProps) => {
+    if (
+      !plotProps.isVisible &&
+      context.fullContainer._id &&
+      context.fullContainer._id.startsWith('x')
+    ) {
+      plotProps.isVisible = true;
+      return;
+    }
+  },
+});
+
+export const RangeselectorVisible = connectToContainer(UnconnectedRadio, {
+  modifyPlotProps: (props, context, plotProps) => {
+    if (
+      !plotProps.isVisible &&
+      context.fullContainer._id &&
+      context.fullContainer._id.startsWith('x') &&
+      context.fullContainer.type === 'date'
+    ) {
+      plotProps.isVisible = true;
+      return;
+    }
+  },
+});
+
 export const AxisSide = connectToContainer(UnconnectedRadio, {
   modifyPlotProps: (props, context, plotProps) => {
     const _ = props.localize;
@@ -197,7 +225,7 @@ export const TraceOrientation = connectToContainer(UnconnectedRadio, {
   },
 });
 
-export const AxesRange = connectToContainer(UnconnectedNumeric, {
+export const AxesRange = connectToContainer(UnconnectedAxisRangeValue, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer} = plotProps;
     if (plotProps.isVisible && fullContainer && fullContainer.autorange) {
@@ -207,6 +235,34 @@ export const AxesRange = connectToContainer(UnconnectedNumeric, {
   },
 });
 
+export const NTicks = connectToContainer(UnconnectedNumeric, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {fullContainer} = plotProps;
+    if (
+      plotProps.isVisible &&
+      fullContainer &&
+      fullContainer.tickmode !== 'auto'
+    ) {
+      plotProps.isVisible = false;
+    }
+    return plotProps;
+  },
+});
+
+export const DTicks = connectToContainer(UnconnectedAxisRangeValue, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {fullContainer} = plotProps;
+    if (
+      plotProps.isVisible &&
+      fullContainer &&
+      fullContainer.tickmode !== 'linear'
+    ) {
+      plotProps.isVisible = false;
+    }
+    return plotProps;
+  },
+});
+
 class UnconnectedNumericFraction extends UnconnectedNumeric {}
 UnconnectedNumericFraction.propTypes = UnconnectedNumeric.propTypes;
 UnconnectedNumericFraction.defaultProps = {

src/components/fields/index.js

@@ -11,6 +11,8 @@ import Radio from './Radio';
 import TextEditor from './TextEditor';
 import DataSelector from './DataSelector';
 import Numeric from './Numeric';
+import AxisRangeValue from './AxisRangeValue';
+import Text from './Text';
 import SymbolSelector from './SymbolSelector';
 import TraceSelector from './TraceSelector';
 import ErrorBars from './ErrorBars';
@@ -21,6 +23,8 @@ import {
   AnnotationRef,
   PositioningRef,
   AxesRange,
+  NTicks,
+  DTicks,
   AxisAnchorDropdown,
   CanvasSize,
   ContourNumeric,
@@ -34,6 +38,8 @@ import {
   NumericFractionInverse,
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
+  RangesliderVisible,
+  RangeselectorVisible,
   TraceOrientation,
   AxisOverlayDropdown,
   AxisSide,
@@ -47,6 +53,8 @@ export {
   PositioningRef,
   ArrowSelector,
   AxesRange,
+  NTicks,
+  DTicks,
   AxesSelector,
   CanvasSize,
   ColorPicker,
@@ -71,8 +79,12 @@ export {
   LineDashSelector,
   LineShapeSelector,
   Numeric,
+  AxisRangeValue,
+  Text,
   Radio,
   SymbolSelector,
+  RangesliderVisible,
+  RangeselectorVisible,
   TextEditor,
   TraceOrientation,
   TraceSelector,

src/components/index.js

@@ -7,6 +7,8 @@ import {
   PositioningRef,
   ArrowSelector,
   AxesRange,
+  NTicks,
+  DTicks,
   AxesSelector,
   CanvasSize,
   ColorPicker,
@@ -31,7 +33,11 @@ import {
   LineDashSelector,
   LineShapeSelector,
   Numeric,
+  AxisRangeValue,
+  Text,
   Radio,
+  RangesliderVisible,
+  RangeselectorVisible,
   AxisCreator,
   SymbolSelector,
   TextEditor,
@@ -47,6 +53,7 @@ import {
   SliderAccordion,
   ImageAccordion,
   UpdateMenuAccordion,
+  RangeSelectorAccordion,
   AxesFold,
   Fold,
   LayoutPanel,
@@ -70,11 +77,16 @@ export {
   AxisAnchorDropdown,
   AxisOverlayDropdown,
   AxisSide,
+  NTicks,
+  DTicks,
   ShapeAccordion,
+  RangeSelectorAccordion,
   SliderAccordion,
   ImageAccordion,
   UpdateMenuAccordion,
   AnnotationArrowRef,
+  RangesliderVisible,
+  RangeselectorVisible,
   AnnotationRef,
   PositioningRef,
   ArrowSelector,
@@ -108,6 +120,8 @@ export {
   LineShapeSelector,
   MenuPanel,
   Numeric,
+  AxisRangeValue,
+  Text,
   Panel,
   PanelMenuWrapper,
   Radio,