Use NumericOrDate

Author: VeraZab

src/components/fields/derived.js

@@ -435,7 +435,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 (

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,6 +31,7 @@ import {
   DataSelector,
   VisibilitySelect,
   GroupCreator,
+  NumericOrDate,
 } from '../components';
 import {
   BinningDropdown,
@@ -193,18 +194,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" />
       <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>
     <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>