Merge pull request #772 from plotly/autosize

preset sizeref reasonably

Author: nicolaskruchten

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-chart-editor",
   "description": "plotly.js chart editor react component UI",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "author": "Plotly, Inc.",
   "bugs": {
     "url": "https://github.com/plotly/react-chart-editor/issues"

src/EditorControls.js

@@ -10,6 +10,7 @@ import {
   shamefullyCreateSplitStyleProps,
   shamefullyAdjustSplitStyleTargetContainers,
   shamefullyDeleteRelatedAnalysisTransforms,
+  shamefullyAdjustSizeref,
 } from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
 import isNumeric from 'fast-isnumeric';
@@ -70,6 +71,7 @@ class EditorControls extends Component {
           this.props.beforeUpdateTraces(payload);
         }
 
+        shamefullyAdjustSizeref(graphDiv, payload);
         shamefullyClearAxisTypes(graphDiv, payload);
         shamefullyAdjustAxisRef(graphDiv, payload);
         shamefullyAddTableColumns(graphDiv, payload);

src/default_panels/StyleTracesPanel.js

@@ -246,7 +246,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Size Mode')}
         attr="marker.sizemode"
-        options={[{label: _('Diameter'), value: 'diameter'}, {label: _('Area'), value: 'area'}]}
+        options={[{label: _('Area'), value: 'area'}, {label: _('Diameter'), value: 'diameter'}]}
       />
       <Numeric label={_('Minimum Size')} attr="marker.sizemin" />
       <NumericReciprocal label={_('Size Scale')} attr="marker.sizeref" />

src/shame.js

@@ -202,3 +202,13 @@ export const shamefullyDeleteRelatedAnalysisTransforms = (graphDiv, payload) =>
     }
   }
 };
+
+export const shamefullyAdjustSizeref = (gd, {update}) => {
+  const {'marker.size': size = null, 'marker.sizesrc': src = null} = update;
+  if (size && src) {
+    const DEFAULT_MAX_AREA_PX = 45;
+    const scaleFactor = DEFAULT_MAX_AREA_PX * DEFAULT_MAX_AREA_PX;
+    update['marker.sizeref'] = size.reduce((a, b) => Math.max(a, b)) / scaleFactor;
+    update['marker.sizemode'] = 'area';
+  }
+};