Correct axis selector axis names and display

Author: VeraZab

src/components/fields/AxesSelector.js

@@ -17,12 +17,29 @@ export default class AxesSelector extends Component {
 
   render() {
     const {axesTargetHandler, axesOptions, axesTarget} = this.context;
+    const hasSecondaryAxis =
+      axesOptions &&
+      axesOptions.some(option => {
+        return (
+          option.axisGroup &&
+          this.context.fullLayout._subplots[option.axisGroup].length > 1
+        );
+      });
 
     return (
       <Field {...this.props} center>
-        {axesOptions.length > 4 ? ( // eslint-disable-line no-magic-numbers
+        {hasSecondaryAxis ? (
           <Dropdown
-            options={axesOptions}
+            options={axesOptions.map(option => {
+              if (option.value !== 'allaxes') {
+                return {
+                  label: option.title,
+                  value: option.value,
+                };
+              }
+
+              return option;
+            })}
             value={axesTarget}
             onChange={axesTargetHandler}
             clearable={false}
@@ -43,4 +60,5 @@ AxesSelector.contextTypes = {
   axesTargetHandler: PropTypes.func,
   axesOptions: PropTypes.array,
   axesTarget: PropTypes.string,
+  fullLayout: PropTypes.object,
 };

src/lib/connectAxesToLayout.js

@@ -2,7 +2,13 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
 import {deepCopyPublic, setMultiValuedContainer} from './multiValues';
-import {capitalize, getAllAxes, getDisplayName, localize} from '../lib';
+import {
+  capitalize,
+  getAllAxes,
+  getDisplayName,
+  localize,
+  striptags,
+} from '../lib';
 
 function computeAxesOptions(axes, _) {
   const options = [{label: _('All'), value: 'allaxes'}];
@@ -15,7 +21,15 @@ function computeAxesOptions(axes, _) {
       ? ax.subplot + '.' + ax._name
       : ax.subplot
     ).trim();
-    options[i + 1] = {label, value};
+    const axisTitle = !ax.title.startsWith('Click') ? ax.title : null;
+    options[i + 1] = {
+      label,
+      value,
+      axisGroup: ax.axisGroup,
+      title: striptags(
+        axisTitle ? `${label} Axis: ${axisTitle}` : capitalize(ax._id)
+      ),
+    };
   }
 
   return options;

src/lib/getAllAxes.js

@@ -19,12 +19,14 @@ export default function getAllAxes(fullLayout) {
                 : subplot + 'axis';
 
             fullLayout[subplot].subplot = subplot;
+            fullLayout[subplot].axisGroup = type;
             axes.push(fullLayout[subplot]);
           } else {
             Object.keys(fullLayout[subplot])
               .filter(key => key.includes('axis'))
               .forEach(axis => {
                 fullLayout[subplot][axis].subplot = subplot;
+                fullLayout[subplot][axis].axisGroup = type;
 
                 // it should be in plotly.js, but it's not there for geo axes..
                 if (!fullLayout[subplot][axis]._name) {