Add Overlay Dropdown

Author: VeraZab

src/components/fields/AxisCreator.js

@@ -50,13 +50,17 @@ export class UnconnectedAxisCreator extends Component {
             onClick: () => {
               props.updateContainer(update);
               if (subplot.startsWith('yaxis')) {
+                const currentAxis = props.fullContainer.yaxis;
                 context.onUpdate({
                   type: EDITOR_ACTIONS.UPDATE_LAYOUT,
                   payload: {
                     update: {
                       [`${subplot +
                         (context.fullLayout._subplots[subplot].length +
                           1)}.side`]: 'right',
+                      [`${subplot +
+                        (context.fullLayout._subplots[subplot].length +
+                          1)}.overlaying`]: currentAxis,
                     },
                   },
                 });

src/components/fields/derived.js

@@ -38,6 +38,29 @@ export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
+export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
+  modifyPlotProps: (props, context, plotProps) => {
+    let options = [];
+    if (plotProps.fullContainer.subplot.includes('xaxis')) {
+      options = context.fullLayout._subplots.xaxis.map(axis => {
+        return {
+          label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
+          value: axis,
+        };
+      });
+    } else if (plotProps.fullContainer.subplot.includes('yaxis')) {
+      options = context.fullLayout._subplots.yaxis.map(axis => {
+        return {
+          label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
+          value: axis,
+        };
+      });
+    }
+    plotProps.options = options;
+    plotProps.clearable = false;
+  },
+});
+
 export const CanvasSize = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer, updateContainer, container} = plotProps;

src/components/fields/index.js

@@ -32,6 +32,7 @@ import {
   LayoutNumericFraction,
   LayoutNumericFractionInverse,
   TraceOrientation,
+  AxisOverlayDropdown,
 } from './derived';
 import {LineDashSelector, LineShapeSelector} from './lineSelectors';
 
@@ -71,4 +72,5 @@ export {
   TraceOrientation,
   TraceSelector,
   AxisCreator,
+  AxisOverlayDropdown,
 };

src/components/index.js

@@ -2,6 +2,7 @@ import {
   AnnotationArrowRef,
   AnnotationRef,
   AxisAnchorDropdown,
+  AxisOverlayDropdown,
   PositioningRef,
   ArrowSelector,
   AxesRange,
@@ -61,6 +62,7 @@ import PanelMenuWrapper from './PanelMenuWrapper';
 export {
   AnnotationAccordion,
   AxisAnchorDropdown,
+  AxisOverlayDropdown,
   ShapeAccordion,
   ImageAccordion,
   AnnotationArrowRef,

src/default_panels/StyleAxesPanel.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   AxisAnchorDropdown,
+  AxisOverlayDropdown,
   AxesRange,
   ColorPicker,
   Dropdown,
@@ -41,6 +42,11 @@ const StyleAxesPanel = ({localize: _}) => (
 
         <Section name={_('Positioning')}>
           <AxisAnchorDropdown label={_('Anchor')} attr="anchor" localize={_} />
+          <AxisOverlayDropdown
+            label={_('Overlay')}
+            attr="overlaying"
+            localize={_}
+          />
           <Radio
             label={_('Side')}
             attr="side"