Make y2 axis creation prettier // add label to axis dropdown

Author: VeraZab

src/components/fields/AxesSelector.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import Dropdown from '../widgets/Dropdown';
 import RadioBlocks from '../widgets/RadioBlocks';
 import React, {Component} from 'react';
+import {localize} from 'lib';
 
-export default class AxesSelector extends Component {
+class AxesSelector extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -17,6 +18,7 @@ export default class AxesSelector extends Component {
 
   render() {
     const {axesTargetHandler, axesOptions, axesTarget} = this.context;
+    const {localize: _} = this.props;
     const hasSecondaryAxis =
       axesOptions &&
       axesOptions.some(option => {
@@ -26,11 +28,10 @@ export default class AxesSelector extends Component {
         );
       });
 
-    return (
-      <Field {...this.props} center>
-        {hasSecondaryAxis ? (
+    if (hasSecondaryAxis) {
+      return (
+        <Field {...this.props} label={_('Select axis')}>
           <Dropdown
-            label={_('Select Axis')}
             options={axesOptions.map(option => {
               if (option.value !== 'allaxes') {
                 return {
@@ -45,13 +46,17 @@ export default class AxesSelector extends Component {
             onChange={axesTargetHandler}
             clearable={false}
           />
-        ) : (
-          <RadioBlocks
-            options={axesOptions}
-            activeOption={axesTarget}
-            onOptionChange={axesTargetHandler}
-          />
-        )}
+        </Field>
+      );
+    }
+
+    return (
+      <Field {...this.props} center>
+        <RadioBlocks
+          options={axesOptions}
+          activeOption={axesTarget}
+          onOptionChange={axesTargetHandler}
+        />
       </Field>
     );
   }
@@ -63,3 +68,9 @@ AxesSelector.contextTypes = {
   axesTarget: PropTypes.string,
   fullLayout: PropTypes.object,
 };
+
+AxesSelector.propTypes = {
+  localize: PropTypes.func,
+};
+
+export default localize(AxesSelector);

src/components/fields/AxisCreator.js

@@ -4,6 +4,7 @@ import Info from './Info';
 import PropTypes from 'prop-types';
 import React, {Component, Fragment} from 'react';
 import {connectToContainer, localize, traceTypeToAxisType} from 'lib';
+import {EDITOR_ACTIONS} from 'lib/constants';
 import {PlusIcon} from 'plotly-icons';
 
 export class UnconnectedAxisCreator extends Component {
@@ -40,7 +41,17 @@ export class UnconnectedAxisCreator extends Component {
             label: _('Axis'),
             variant: 'secondary',
             icon: icon,
-            onClick: () => props.updateContainer(update),
+            onClick: () => {
+              props.updateContainer(update);
+              if (subplot.startsWith('yaxis')) {
+                context.onUpdate({
+                  type: EDITOR_ACTIONS.UPDATE_LAYOUT,
+                  payload: {
+                    update: {[`${subplot}.side`]: 'right'},
+                  },
+                });
+              }
+            },
           }}
           options={context.fullLayout._subplots[subplot].map(subplot => ({
             label: subplot,
@@ -125,6 +136,7 @@ UnconnectedAxisCreator.propTypes = {
 UnconnectedAxisCreator.contextTypes = {
   fullLayout: PropTypes.object,
   data: PropTypes.array,
+  onUpdate: PropTypes.func,
 };
 
 UnconnectedAxisCreator.plotly_editor_traits = {