use modify & supply plotProp funcs to build BarWidth and PadWidth

Author: bpostlethwaite

src/DefaultEditor.js

@@ -24,7 +24,7 @@ import {
 import {DEFAULT_FONTS} from './constants';
 import {localize, connectAxesToLayout, connectLayoutToPlot} from './lib';
 
-import {BoxGap} from './shame';
+import {BoxWidth, BoxPad} from './shame';
 
 const LayoutPanel = connectLayoutToPlot(Panel);
 const AxesFold = connectAxesToLayout(Fold);
@@ -148,10 +148,10 @@ class DefaultEditor extends Component {
             </TraceMarkerSection>
 
             <Section name={_('Size and Spacing')}>
-              <BoxGap label={_('Bar Width')} attr="bargap" />
-              <BoxGap label={_('Box Width')} attr="boxgap" />
-              <BoxGap label={_('Bar Padding')} attr="bargroupgap" />
-              <BoxGap label={_('Box Padding')} attr="boxgroupgap" />
+              <BoxWidth label={_('Bar Width')} attr="bargap" />
+              <BoxWidth label={_('Box Width')} attr="boxgap" />
+              <BoxPad label={_('Bar Padding')} attr="bargroupgap" />
+              <BoxPad label={_('Box Padding')} attr="boxgroupgap" />
             </Section>
 
             <Section name={_('Lines')}>

src/shame.js

@@ -1,6 +1,7 @@
 /*
  * DELETE THIS FILE. EVERYTHING NEEDS TO FIND A HOME.
  */
+import isNumeric from 'fast-isnumeric';
 import {list} from 'plotly.js/src/plots/cartesian/axis_ids';
 import {UnconnectedNumeric} from './components/fields/Numeric';
 import {
@@ -22,20 +23,69 @@ class NumericNoArrows extends UnconnectedNumeric {}
 NumericNoArrows.propTypes = UnconnectedNumeric.propTypes;
 NumericNoArrows.defaultProps = {
   showArrows: false,
+  postfix: '%',
 };
 
-export const BoxGap = connectLayoutToPlot(
+// Workaround the issue with nested layouts inside trace component.
+// See:
+// https://github.com/plotly/react-plotly.js-editor/issues/58#issuecomment-345492794
+const supplyLayoutPlotProps = (props, context) => {
+  return unpackPlotProps(props, {
+    ...context,
+    ...getLayoutContext(context),
+  });
+};
+
+export const BoxWidth = connectLayoutToPlot(
   connectToContainer(NumericNoArrows, {
-    supplyPlotProps: (props, context) => {
-      // workaround the issue with nested layouts inside trace component.
-      // See
-      // https://github.com/plotly/react-plotly.js-editor/issues/58#issuecomment-345492794
-      const plotProps = unpackPlotProps(props, {
-        ...context,
-        ...getLayoutContext(context),
-      });
-
-      // Full value should multiply by percentage if number.
+    supplyPlotProps: supplyLayoutPlotProps,
+    modifyPlotProps: (props, context, plotProps) => {
+      const {fullValue, updatePlot} = plotProps;
+      plotProps.fullValue = () => {
+        let fv = fullValue();
+        if (isNumeric(fv)) {
+          fv = Math.round((1 - fv) * 100);
+        }
+        return fv;
+      };
+
+      plotProps.updatePlot = v => {
+        if (isNumeric(v)) {
+          updatePlot(1 - v / 100);
+        } else {
+          updatePlot(v);
+        }
+      };
+
+      plotProps.max = 100;
+
+      return plotProps;
+    },
+  })
+);
+
+export const BoxPad = connectLayoutToPlot(
+  connectToContainer(NumericNoArrows, {
+    supplyPlotProps: supplyLayoutPlotProps,
+    modifyPlotProps: (props, context, plotProps) => {
+      const {fullValue, updatePlot} = plotProps;
+      plotProps.fullValue = () => {
+        let fv = fullValue();
+        if (isNumeric(fv)) {
+          fv = fv * 100;
+        }
+        return fv;
+      };
+
+      plotProps.updatePlot = v => {
+        if (isNumeric(v)) {
+          updatePlot(v / 100);
+        } else {
+          updatePlot(v);
+        }
+      };
+
+      plotProps.max = 100;
 
       return plotProps;
     },