Use NumericOrDate

Author: VeraZab

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/StyleTracesPanel.js

@@ -31,6 +31,7 @@ import {
   DataSelector,
   VisibilitySelect,
   GroupCreator,
+  NumericOrDate,
 } from '../components';
 import {
   BinningDropdown,
@@ -193,13 +194,13 @@ 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" />
       <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" />
+      <NumericOrDate label={_('Y Bin Start')} attr="ybins.start" axis="y" />
+      <NumericOrDate label={_('Y Bin End')} attr="ybins.end" axis="y" />
       <Numeric label={_('Y Bin Size')} attr="ybins.size" axis="y" />
       <Numeric label={_('Max Y Bins')} attr="nbinsy" />
     </PlotlySection>