Merge pull request #811 from plotly/datetimepicker

Datetimepicker

Author: VeraZab

package.json

@@ -14,12 +14,13 @@
     "draft-js-utils": "^1.2.0",
     "fast-isnumeric": "^1.1.1",
     "immutability-helper": "^2.7.1",
-    "plotly-icons": "1.2.2",
+    "plotly-icons": "1.2.3",
     "plotly.js": "1.43.1",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",
     "react-colorscales": "0.7.2",
+    "react-day-picker": "^7.2.4",
     "react-dropzone": "^5.0.1",
     "react-plotly.js": "^2.2.0",
     "react-rangeslider": "^2.2.0",

scripts/translationKeys/combined-translation-keys.txt

@@ -221,7 +221,7 @@ Distributions
 Divergence                                                                                                                                                                 // react-chart-editor: /components/fields/derived.js:597
 Diverging                                                                                                                                                                  // react-chart-editor: /default_panels/StyleLayoutPanel.js:30
 Double-click on legend to isolate one trace                                                                                                                                // plotly.js: components/legend/handle_click.js:89
-Double-click to zoom back out                                                                                                                                              // plotly.js: plots/cartesian/dragbox.js:1040
+Double-click to zoom back out                                                                                                                                              // plotly.js: plots/cartesian/dragbox.js:1041
 Download plot                                                                                                                                                              // plotly.js: components/modebar/buttons.js:55
 Download plot as a png                                                                                                                                                     // plotly.js: components/modebar/buttons.js:54
 Drag                                                                                                                                                                       // react-chart-editor: /default_panels/StyleLayoutPanel.js:90

src/components/fields/AxisRangeValue.js

@@ -1,6 +1,6 @@
 import Field from './Field';
 import {UnconnectedNumeric} from './Numeric';
-import {UnconnectedText} from './Text';
+import {UnconnectedDateTimePicker} from './DateTimePicker';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectToContainer} from 'lib';
@@ -9,7 +9,7 @@ export class UnconnectedAxisRangeValue extends Component {
   render() {
     return this.props.multiValued ||
       (this.props.fullContainer && this.props.fullContainer.type === 'date') ? (
-      <UnconnectedText {...this.props} />
+      <UnconnectedDateTimePicker {...this.props} />
     ) : (
       <UnconnectedNumeric {...this.props} />
     );

src/components/fields/DateTimePicker.js

@@ -0,0 +1,28 @@
+import Field from './Field';
+import Picker from '../widgets/DateTimePicker';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectToContainer} from 'lib';
+
+export class UnconnectedDateTimePicker extends Component {
+  render() {
+    return (
+      <Field {...this.props}>
+        <Picker
+          value={this.props.fullValue}
+          placeholder={this.props.placeholder}
+          onChange={this.props.updatePlot}
+        />
+      </Field>
+    );
+  }
+}
+
+UnconnectedDateTimePicker.propTypes = {
+  fullValue: PropTypes.string,
+  updatePlot: PropTypes.func,
+  placeholder: PropTypes.string,
+  ...Field.propTypes,
+};
+
+export default connectToContainer(UnconnectedDateTimePicker);

src/components/fields/NumericOrDate.js

@@ -1,20 +1,20 @@
 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';
 import {isDateTime} from 'plotly.js/src/lib';
 import {isJSDate} from 'plotly.js/src/lib/dates';
+import {UnconnectedDateTimePicker} from './DateTimePicker';
 
 export class UnconnectedNumericOrDate extends Component {
   render() {
+    const date = typeof this.props.fullValue === 'string' && this.props.fullValue.split(' ')[0];
     const fullValueIsDate =
-      typeof this.props.fullValue === 'string' &&
-      (isDateTime(this.props.fullValue) || isJSDate(this.props.fullValue));
+      typeof this.props.fullValue === 'string' && date && (isDateTime(date) || isJSDate(date));
 
     return fullValueIsDate ? (
-      <UnconnectedText {...this.props} placeholder={'yyyy-mm-dd 00:00:00.00'} />
+      <UnconnectedDateTimePicker {...this.props} placeholder={'yyyy-mm-dd hh:mm:ss.xxx'} />
     ) : (
       <UnconnectedNumeric {...this.props} />
     );

src/components/fields/index.js

@@ -33,6 +33,8 @@ import MultiColorPicker from './MultiColorPicker';
 import RectanglePositioner from './RectanglePositioner';
 import LocationSelector from './LocationSelector';
 import AxisInterval from './AxisInterval';
+import DateTimePicker from './DateTimePicker';
+
 import {
   AnnotationArrowRef,
   AnnotationRef,
@@ -128,4 +130,5 @@ export {
   HovermodeDropdown,
   AxisInterval,
   NumericOrDate,
+  DateTimePicker,
 };