move components from shame -> derived. Update index and tests

Author: bpostlethwaite

src/DefaultEditor.js

@@ -10,6 +10,8 @@ import {
   Flaglist,
   Fold,
   Info,
+  LayoutNumericFraction,
+  LayoutNumericFractionInverse,
   Numeric,
   Panel,
   PanelMenuWrapper,
@@ -24,8 +26,6 @@ import {
 import {DEFAULT_FONTS} from './constants';
 import {localize, connectAxesToLayout, connectLayoutToPlot} from './lib';
 
-import {LayoutNumericFractionInverse, LayoutNumericFraction} from './shame';
-
 const LayoutPanel = connectLayoutToPlot(Panel);
 const AxesFold = connectAxesToLayout(Fold);
 

src/components/fields/AxesRange.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {connectLayoutToPlot} from '../../../lib';
-import {Panel, Fold, Numeric} from '../../';
+import {Panel, Fold} from '../../';
 import {TestEditor, fixtures} from '../../../lib/test-utils';
 import {mount} from 'enzyme';
-import CanvasSize from '../CanvasSize';
+import {CanvasSize} from '../';
 
 describe('CanvasSize', () => {
   const LayoutPanel = connectLayoutToPlot(Panel);
@@ -18,9 +18,9 @@ describe('CanvasSize', () => {
           </Fold>
         </LayoutPanel>
       </TestEditor>
-    ).find(Numeric);
+    ).find(CanvasSize);
 
-    expect(wrapper.length).toBe(0);
+    expect(wrapper.children().length).toBe(0);
   });
 
   it('is visible when autosize is false', () => {
@@ -33,8 +33,8 @@ describe('CanvasSize', () => {
           </Fold>
         </LayoutPanel>
       </TestEditor>
-    ).find(Numeric);
+    ).find(CanvasSize);
 
-    expect(wrapper.length).toBe(1);
+    expect(wrapper.children().length).toBe(1);
   });
 });

src/components/fields/CanvasSize.js

@@ -0,0 +1,113 @@
+import isNumeric from 'fast-isnumeric';
+import {UnconnectedNumeric} from './Numeric';
+import {
+  connectLayoutToPlot,
+  connectToContainer,
+  getLayoutContext,
+  unpackPlotProps,
+} from '../../lib';
+
+export const CanvasSize = connectToContainer(UnconnectedNumeric, {
+  modifyPlotProps: (props, context, plotProps) => {
+      const {fullContainer} = plotProps;
+      if (plotProps.isVisible && fullContainer && fullContainer.autosize) {
+      plotProps.isVisible = false;
+    }
+  },
+});
+
+export const AxesRange = connectToContainer(UnconnectedNumeric, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {fullContainer} = plotProps;
+    if (plotProps.isVisible && fullContainer && fullContainer.autorange) {
+      plotProps.isVisible = false;
+    }
+    return plotProps;
+  },
+});
+
+class NumericFractionNoArrows extends UnconnectedNumeric {}
+NumericFractionNoArrows.propTypes = UnconnectedNumeric.propTypes;
+NumericFractionNoArrows.defaultProps = {
+  showArrows: false,
+  postfix: '%',
+};
+
+// 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 LayoutNumericFractionInverse = connectLayoutToPlot(
+  connectToContainer(NumericFractionNoArrows, {
+    supplyPlotProps: supplyLayoutPlotProps,
+    modifyPlotProps: (props, context, plotProps) => {
+      const {attrMeta, 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);
+        }
+      };
+
+      // Also take the inverse of max and min.
+      if (attrMeta) {
+        if (isNumeric(attrMeta.min)) {
+          plotProps.max = (1 - attrMeta.min) * 100;
+        }
+
+        if (isNumeric(attrMeta.max)) {
+          plotProps.min = (1 - attrMeta.max) * 100;
+        }
+      }
+    },
+  })
+);
+
+export const LayoutNumericFraction = connectLayoutToPlot(
+  connectToContainer(NumericFractionNoArrows, {
+    supplyPlotProps: supplyLayoutPlotProps,
+    modifyPlotProps: (props, context, plotProps) => {
+      const {attrMeta, 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);
+        }
+      };
+
+      if (attrMeta) {
+        if (isNumeric(attrMeta.max)) {
+          plotProps.max = attrMeta.max * 100;
+        }
+
+        if (isNumeric(attrMeta.min)) {
+          plotProps.min = attrMeta.min * 100;
+        }
+      }
+    },
+  })
+);

src/components/fields/__tests__/CanvasSize-test.js

@@ -1,6 +1,4 @@
-import AxesRange from './AxesRange';
 import AxesSelector from './AxesSelector';
-import CanvasSize from './CanvasSize';
 import ColorPicker from './Color';
 import Dropdown from './Dropdown';
 import Flaglist from './Flaglist';
@@ -10,6 +8,12 @@ import DataSelector from './DataSelector';
 import Numeric from './Numeric';
 import SymbolSelector from './SymbolSelector';
 import TraceSelector from './TraceSelector';
+import {
+  AxesRange,
+  CanvasSize,
+  LayoutNumericFraction,
+  LayoutNumericFractionInverse,
+} from './derived';
 
 export {
   AxesRange,
@@ -19,6 +23,8 @@ export {
   Dropdown,
   Flaglist,
   Info,
+  LayoutNumericFraction,
+  LayoutNumericFractionInverse,
   Radio,
   DataSelector,
   Numeric,

src/components/fields/derived.js

@@ -6,6 +6,8 @@ import {
   Dropdown,
   Flaglist,
   Info,
+  LayoutNumericFraction,
+  LayoutNumericFractionInverse,
   Radio,
   DataSelector,
   Numeric,
@@ -34,6 +36,8 @@ export {
   Flaglist,
   Fold,
   Info,
+  LayoutNumericFraction,
+  LayoutNumericFractionInverse,
   Numeric,
   Panel,
   PanelMenuWrapper,

src/components/fields/index.js

@@ -20,6 +20,8 @@ import {
   Fold,
   Info,
   Layout,
+  LayoutNumericFraction,
+  LayoutNumericFractionInverse,
   Numeric,
   Panel,
   PanelMenuWrapper,
@@ -46,6 +48,8 @@ export {
   Info,
   Hub,
   Layout,
+  LayoutNumericFraction,
+  LayoutNumericFractionInverse,
   Numeric,
   Panel,
   PanelMenuWrapper,

src/components/index.js

@@ -8,8 +8,8 @@ import Adapter from 'enzyme-adapter-react-15';
 configure({adapter: new Adapter()});
 
 const fixtures = {
-  scatter() {
-    return {
+  scatter(config) {
+    return applyConfig(config, {
       dataSources: {
         x1: [1, 2, 3],
         y1: [2, 3, 4],
@@ -18,11 +18,11 @@ const fixtures = {
         data: [{type: 'scatter', mode: 'markers', xsrc: 'x1', ysrc: 'y1'}],
         layout: {},
       },
-    };
+    });
   },
 
-  area() {
-    return {
+  area(config) {
+    return applyConfig(config, {
       dataSources: {
         x1: [1, 2, 3],
         y1: [2, 3, 4],
@@ -39,11 +39,11 @@ const fixtures = {
         ],
         layout: {},
       },
-    };
+    });
   },
 
-  pie() {
-    return {
+  pie(config) {
+    return applyConfig(config, {
       dataSources: {
         x1: [1, 2, 3],
         y1: [2, 3, 4],
@@ -54,7 +54,7 @@ const fixtures = {
         ],
         layout: {},
       },
-    };
+    });
   },
 };
 
@@ -75,11 +75,6 @@ function applyConfig(config = {}, {graphDiv: {data, layout}, dataSources}) {
   return {dataSources, graphDiv};
 }
 
-Object.keys(fixtures).forEach(k => {
-  const fixtureFunc = fixtures[k];
-  fixtures[k] = config => applyConfig(config, fixtureFunc());
-});
-
 function newGraphDiv() {
   const graphDiv = window.document.createElement('div');
   graphDiv.id = 'graphDiv';