BinSize adjustments

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

@@ -679,3 +679,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

@@ -55,6 +55,7 @@ import {
   HoveronDropdown,
   HovermodeDropdown,
   TickFormat,
+  BinSize,
   NumericOrDate,
 } from './derived';
 import {LineDashSelector, LineShapeSelector} from './LineSelectors';
@@ -119,5 +120,6 @@ export {
   LocationSelector,
   HoveronDropdown,
   HovermodeDropdown,
+  BinSize,
   NumericOrDate,
 };

src/default_panels/StyleTracesPanel.js

@@ -39,6 +39,7 @@ import {
   ShowInLegend,
   TextInfo,
   HoveronDropdown,
+  BinSize,
 } from '../components/fields/derived';
 
 const StyleTracesPanel = (props, {localize: _}) => (
@@ -194,14 +195,14 @@ const StyleTracesPanel = (props, {localize: _}) => (
       />
     </PlotlySection>
     <PlotlySection name={_('Binning')}>
-      <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" />
 
       <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" />
+      <BinSize label={_('Y Bin Size')} attr="ybins.size" axis="y" />
       <Numeric label={_('Max Y Bins')} attr="nbinsy" />
     </PlotlySection>
     <PlotlySection label={_('Bar Position')}>

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;
+    }
+  });
+};