Merge pull request #804 from plotly/date-axis

Fix date handling

Author: VeraZab

src/EditorControls.js

@@ -11,6 +11,7 @@ import {
   shamefullyAdjustSplitStyleTargetContainers,
   shamefullyDeleteRelatedAnalysisTransforms,
   shamefullyAdjustSizeref,
+  shamefullyAdjustBinSize,
 } from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
 import isNumeric from 'fast-isnumeric';
@@ -72,6 +73,7 @@ class EditorControls extends Component {
         }
 
         shamefullyAdjustSizeref(graphDiv, payload);
+
         shamefullyClearAxisTypes(graphDiv, payload);
         shamefullyAdjustAxisRef(graphDiv, payload);
         shamefullyAddTableColumns(graphDiv, payload);
@@ -80,6 +82,9 @@ class EditorControls extends Component {
         for (let i = 0; i < payload.traceIndexes.length; i++) {
           for (const attr in payload.update) {
             const traceIndex = payload.traceIndexes[i];
+
+            shamefullyAdjustBinSize(graphDiv, payload, traceIndex);
+
             const splitTraceGroup = payload.splitTraceGroup
               ? payload.splitTraceGroup.toString()
               : null;

src/components/fields/NumericOrDate.js

@@ -0,0 +1,38 @@
+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';
+
+export class UnconnectedNumericOrDate extends Component {
+  render() {
+    const fullValueIsDate =
+      typeof this.props.fullValue === 'string' &&
+      (isDateTime(this.props.fullValue) || isJSDate(this.props.fullValue));
+
+    return fullValueIsDate ? (
+      <UnconnectedText {...this.props} placeholder={'yyyy-mm-dd 00:00:00.00'} />
+    ) : (
+      <UnconnectedNumeric {...this.props} />
+    );
+  }
+}
+
+UnconnectedNumericOrDate.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(UnconnectedNumericOrDate);

src/components/fields/derived.js

@@ -3,6 +3,7 @@ import {UnconnectedDropdown} from './Dropdown';
 import {UnconnectedDropdownCustom} from './DropdownCustom';
 import {UnconnectedFlaglist} from './Flaglist';
 import {UnconnectedNumeric} from './Numeric';
+import {UnconnectedNumericOrDate} from './NumericOrDate';
 import {UnconnectedAxisRangeValue} from './AxisRangeValue';
 import {UnconnectedRadio} from './Radio';
 import Info from './Info';
@@ -432,7 +433,7 @@ export const PositioningRef = connectToContainer(UnconnectedDropdown, {
   },
 });
 
-export const PositioningNumeric = connectToContainer(UnconnectedNumeric, {
+export const PositioningNumeric = connectToContainer(UnconnectedNumericOrDate, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer, fullValue, updatePlot} = plotProps;
     if (
@@ -676,3 +677,15 @@ export const HoverColor = connectToContainer(UnconnectedColorPicker, {
     return plotProps;
   },
 });
+
+export const BinSize = connectToContainer(UnconnectedNumeric, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
+    if (typeof plotProps.fullValue === 'string' && plotProps.fullValue[0] === 'M') {
+      plotProps.fullValue = plotProps.fullValue.substring(1);
+      plotProps.min = 1;
+      plotProps.max = 12;
+      plotProps.units = parseInt(plotProps.fullValue, 10) === 1 ? _('Month') : _('Months');
+    }
+  },
+});

src/components/fields/index.js

@@ -13,6 +13,7 @@ import Radio from './Radio';
 import TextEditor from './TextEditor';
 import DataSelector from './DataSelector';
 import Numeric from './Numeric';
+import NumericOrDate from './NumericOrDate';
 import DualNumeric from './DualNumeric';
 import AxisRangeValue from './AxisRangeValue';
 import Text from './Text';
@@ -55,6 +56,7 @@ import {
   HoveronDropdown,
   HovermodeDropdown,
   TickFormat,
+  BinSize,
 } from './derived';
 import {LineDashSelector, LineShapeSelector} from './LineSelectors';
 
@@ -118,4 +120,6 @@ export {
   LocationSelector,
   HoveronDropdown,
   HovermodeDropdown,
+  BinSize,
+  NumericOrDate,
 };

src/components/index.js

@@ -57,6 +57,7 @@ import {
   HoveronDropdown,
   HovermodeDropdown,
   TickFormat,
+  NumericOrDate,
 } from './fields';
 
 import {
@@ -175,4 +176,5 @@ export {
   LocationSelector,
   HoveronDropdown,
   HovermodeDropdown,
+  NumericOrDate,
 };

src/default_panels/StyleColorbarsPanel.js

@@ -14,6 +14,7 @@ import {
   FontSelector,
   ColorPicker,
   VisibilitySelect,
+  NumericOrDate,
 } from '../components';
 
 export const traceHasColorbar = (trace, fullTrace) =>
@@ -211,7 +212,7 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     label={_('Tick spacing')}
                   />
 
-                  <Numeric label={_('Step Offset')} attr={prefix + 'colorbar.tick0'} />
+                  <NumericOrDate label={_('Step Offset')} attr={prefix + 'colorbar.tick0'} />
                   <Numeric label={_('Step Size')} attr={prefix + 'colorbar.dtick'} />
                   <Numeric label={_('Max Number of Labels')} attr={prefix + 'colorbar.nticks'} />
                 </VisibilitySelect>
@@ -239,7 +240,7 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     label={_('Tick spacing')}
                   />
 
-                  <Numeric label={_('Step Offset')} attr={prefix + 'colorbar.tick0'} />
+                  <NumericOrDate label={_('Step Offset')} attr={prefix + 'colorbar.tick0'} />
                   <Numeric label={_('Step Size')} attr={prefix + 'colorbar.dtick'} />
                   <Numeric label={_('Max Number of Labels')} attr={prefix + 'colorbar.nticks'} />
                 </VisibilitySelect>

src/default_panels/StyleNotesPanel.js

@@ -13,6 +13,7 @@ import {
   Radio,
   TextEditor,
   PlotlySection,
+  NumericOrDate,
 } from '../components';
 
 const StyleNotesPanel = (props, {localize: _}) => (
@@ -35,8 +36,8 @@ const StyleNotesPanel = (props, {localize: _}) => (
       <Numeric label={_('Scale')} step={0.1} attr="arrowsize" units="px" />
       <AnnotationArrowRef label={_('X Offset')} attr="axref" />
       <AnnotationArrowRef label={_('Y Offset')} attr="ayref" />
-      <Numeric label={_('X Vector')} attr="ax" />
-      <Numeric label={_('Y Vector')} attr="ay" />
+      <NumericOrDate label={_('X Vector')} attr="ax" />
+      <NumericOrDate label={_('Y Vector')} attr="ay" />
     </PlotlySection>
     <PlotlySection name={_('Horizontal Positioning')}>
       <Dropdown

src/default_panels/StyleTracesPanel.js

@@ -31,13 +31,15 @@ import {
   DataSelector,
   VisibilitySelect,
   GroupCreator,
+  NumericOrDate,
 } from '../components';
 import {
   BinningDropdown,
   NumericReciprocal,
   ShowInLegend,
   TextInfo,
   HoveronDropdown,
+  BinSize,
 } from '../components/fields/derived';
 
 const StyleTracesPanel = (props, {localize: _}) => (
@@ -193,18 +195,18 @@ const StyleTracesPanel = (props, {localize: _}) => (
       />
     </PlotlySection>
     <PlotlySection name={_('Binning')}>
-      <Numeric label={_('X Bin Start')} attr="xbins.start" axis="x" />
-      <Numeric label={_('X Bin End')} attr="xbins.end" axis="x" />
-      <Numeric label={_('X Bin Size')} attr="xbins.size" axis="x" />
+      <NumericOrDate label={_('X Bin Start')} attr="xbins.start" axis="x" />
+      <NumericOrDate label={_('X Bin End')} attr="xbins.end" axis="x" />
+      <BinSize label={_('X Bin Size')} attr="xbins.size" axis="x" />
       <Numeric label={_('Max X Bins')} attr="nbinsx" />
 
-      <Numeric label={_('Y Bin Start')} attr="ybins.start" axis="y" />
-      <Numeric label={_('Y Bin End')} attr="ybins.end" axis="y" />
-      <Numeric label={_('Y Bin Size')} attr="ybins.size" axis="y" />
+      <NumericOrDate label={_('Y Bin Start')} attr="ybins.start" axis="y" />
+      <NumericOrDate label={_('Y Bin End')} attr="ybins.end" axis="y" />
+      <BinSize label={_('Y Bin Size')} attr="ybins.size" axis="y" />
       <Numeric label={_('Max Y Bins')} attr="nbinsy" />
     </PlotlySection>
     <PlotlySection label={_('Bar Position')}>
-      <Numeric label={_('Base')} attr="base" />
+      <NumericOrDate label={_('Base')} attr="base" />
       <Numeric label={_('Offset')} attr="offset" />
       <Numeric label={_('Width')} attr="width" />
     </PlotlySection>

src/shame.js

@@ -3,6 +3,7 @@
  */
 import {getFromId} from 'plotly.js/src/plots/cartesian/axis_ids';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
+import {isDateTime} from 'plotly.js/src/lib';
 
 // Temporary fix for:
 // https://github.com/plotly/react-chart-editor/issues/103
@@ -212,3 +213,22 @@ export const shamefullyAdjustSizeref = (gd, {update}) => {
     update['marker.sizemode'] = 'area';
   }
 };
+
+export const shamefullyAdjustBinSize = (gd, {update}, traceIndexInDataArray) => {
+  const traceIndexInFullDataArray = gd._fullData.filter(t => t.index === traceIndexInDataArray)[0]
+    ._expandedIndex;
+  const binSizeAttrs = Object.keys(update).filter(attr => attr.includes('bins.size'));
+
+  binSizeAttrs.forEach(attr => {
+    const attrHead = attr.split('.')[0];
+    if (
+      gd._fullData[traceIndexInFullDataArray] &&
+      gd._fullData[traceIndexInFullDataArray][attrHead] &&
+      gd._fullData[traceIndexInFullDataArray][attrHead].start &&
+      isDateTime(gd._fullData[traceIndexInFullDataArray][attrHead].start)
+    ) {
+      const monthNum = update[attr];
+      update[attr] = 'M' + monthNum;
+    }
+  });
+};