Merge pull request #601 from plotly/axis-names-fix

Axis names fix

Author: dmt0

src/components/fields/AxisCreator.js renamed to src/components/fields/AxesCreator.js

@@ -12,7 +12,7 @@ import {
   axisIdToAxisName,
 } from 'lib';
 
-class UnconnectedNewAxisCreator extends Component {
+class UnconnectedAxisCreator extends Component {
   canAddAxis() {
     const currentAxisId = this.props.fullContainer[this.props.attr];
     const currentTraceIndex = this.props.fullContainer.index;
@@ -104,7 +104,7 @@ class UnconnectedNewAxisCreator extends Component {
   }
 }
 
-UnconnectedNewAxisCreator.propTypes = {
+UnconnectedAxisCreator.propTypes = {
   attr: PropTypes.string,
   label: PropTypes.string,
   options: PropTypes.array,
@@ -114,16 +114,16 @@ UnconnectedNewAxisCreator.propTypes = {
   updateContainer: PropTypes.func,
 };
 
-UnconnectedNewAxisCreator.contextTypes = {
+UnconnectedAxisCreator.contextTypes = {
   fullLayout: PropTypes.object,
   data: PropTypes.array,
   fullData: PropTypes.array,
   onUpdate: PropTypes.func,
 };
 
-const ConnectedNewAxisCreator = connectToContainer(UnconnectedNewAxisCreator);
+const AxisCreator = connectToContainer(UnconnectedAxisCreator);
 
-class AxisCreator extends Component {
+class UnconnectedAxesCreator extends Component {
   render() {
     const isFirstTraceOfType =
       this.context.data.filter(d => d.type === this.props.container.type)
@@ -148,7 +148,7 @@ class AxisCreator extends Component {
     if (axisType === 'cartesian') {
       ['xaxis', 'yaxis'].forEach((type, index) => {
         controls.push(
-          <ConnectedNewAxisCreator
+          <AxisCreator
             key={index}
             attr={type}
             label={type.charAt(0).toUpperCase() + ' Axis'}
@@ -169,19 +169,19 @@ class AxisCreator extends Component {
   }
 }
 
-AxisCreator.propTypes = {
+UnconnectedAxesCreator.propTypes = {
   container: PropTypes.object,
   fullContainer: PropTypes.object,
 };
 
-AxisCreator.contextTypes = {
+UnconnectedAxesCreator.contextTypes = {
   data: PropTypes.array,
   fullData: PropTypes.array,
   fullLayout: PropTypes.object,
   localize: PropTypes.func,
 };
 
-export default connectToContainer(AxisCreator, {
+export default connectToContainer(UnconnectedAxesCreator, {
   modifyPlotProps: (props, context, plotProps) => {
     const {data} = context;
     const {fullContainer} = plotProps;

src/components/fields/AxesSelector.js

@@ -16,36 +16,51 @@ class AxesSelector extends Component {
   }
 
   render() {
-    const {axesTargetHandler, axesTarget, localize: _} = this.context;
+    const {
+      axesTargetHandler,
+      axesTarget,
+      fullLayout,
+      localize: _,
+    } = this.context;
     const {axesOptions} = this.props;
+    const maxCharsThatFitInRadio = 27;
     const maxOptions = axesOptions.length > 4; // eslint-disable-line
 
-    if (maxOptions) {
-      return (
-        <Field {...this.props} label={_('Axis to Style')}>
-          <Dropdown
-            options={axesOptions.map(option => {
-              if (option.value !== 'allaxes') {
-                return {
+    const multipleSublots =
+      fullLayout &&
+      fullLayout._subplots &&
+      Object.values(fullLayout._subplots).some(s => s.length > 1);
+
+    const options = multipleSublots
+      ? axesOptions.map(
+          option =>
+            option.value === 'allaxes'
+              ? option
+              : {
                   label: option.title,
                   value: option.value,
-                };
-              }
+                }
+        )
+      : axesOptions;
 
-              return option;
-            })}
-            value={axesTarget}
-            onChange={axesTargetHandler}
-            clearable={false}
-          />
-        </Field>
-      );
-    }
+    const totalCharsInOptions =
+      (options &&
+        options.map(o => o.label).reduce((acc, o) => acc + o.length, 0)) ||
+      0;
 
-    return (
+    return maxOptions || totalCharsInOptions >= maxCharsThatFitInRadio ? (
+      <Field {...this.props} label={_('Axis to Style')}>
+        <Dropdown
+          options={options}
+          value={axesTarget}
+          onChange={axesTargetHandler}
+          clearable={false}
+        />
+      </Field>
+    ) : (
       <Field {...this.props} center>
         <RadioBlocks
-          options={axesOptions}
+          options={options}
           activeOption={axesTarget}
           onOptionChange={axesTargetHandler}
         />

src/components/fields/derived.js

@@ -47,6 +47,7 @@ export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
 
 export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
     let options = [];
     if (
       plotProps.fullContainer &&
@@ -72,13 +73,15 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
       });
     }
 
+    options.unshift({label: _('None'), value: false});
+
     // filter out the current axisID, can't overlay over itself
     plotProps.options = options.filter(
       option =>
         context.fullContainer && context.fullContainer._id !== option.value
     );
 
-    plotProps.clearable = true;
+    plotProps.clearable = false;
   },
 });
 

src/components/fields/index.js

@@ -16,7 +16,7 @@ import Text from './Text';
 import SymbolSelector from './SymbolSelector';
 import TraceSelector from './TraceSelector';
 import ErrorBars from './ErrorBars';
-import AxisCreator from './AxisCreator';
+import AxesCreator from './AxesCreator';
 import UpdateMenuButtons from './UpdateMenuButtons';
 import {FilterOperation, FilterValue} from './FilterOperation';
 import MarkerSize from './MarkerSize';
@@ -83,7 +83,7 @@ export {
   TextEditor,
   TraceOrientation,
   TraceSelector,
-  AxisCreator,
+  AxesCreator,
   AxisOverlayDropdown,
   AxisSide,
   UpdateMenuButtons,

src/components/index.js

@@ -35,7 +35,7 @@ import {
   Text,
   Radio,
   RangesliderVisible,
-  AxisCreator,
+  AxesCreator,
   SymbolSelector,
   TextEditor,
   TraceOrientation,
@@ -130,7 +130,7 @@ export {
   PlotlySection,
   Section,
   SingleSidebarItem,
-  AxisCreator,
+  AxesCreator,
   SymbolSelector,
   TextEditor,
   TraceAccordion,

src/default_panels/GraphCreatePanel.js

@@ -7,7 +7,7 @@ import {
   Radio,
   PlotlySection,
   LayoutSection,
-  AxisCreator,
+  AxesCreator,
   TraceAccordion,
   TraceSelector,
   TextEditor,
@@ -107,7 +107,7 @@ const GraphCreatePanel = (props, {localize: _}) => {
       </TraceTypeSection>
 
       <PlotlySection name={_('Axes to Use')}>
-        <AxisCreator attr="fake_attr" />
+        <AxesCreator attr="fake_attr" />
       </PlotlySection>
 
       <PlotlySection name={_('Error Bars X')}>

src/lib/getAllAxes.js

@@ -75,14 +75,16 @@ function getSubplotNumber(axis) {
   const splitSubplot = axis._subplot
     ? axis._subplot.split(axis._axisGroup)
     : [];
-  return splitSubplot[1] ? Number(splitSubplot[1]) : 0;
+  return splitSubplot[1]
+    ? Number(splitSubplot[1])
+    : axis._name.split('axis')[1];
 }
 
 export function getAxisTitle(axis) {
   const axisType = capitalize(axis._name.split('axis')[0]);
-  const subplotNb = getSubplotNumber(axis);
+  const subplotNb = getSubplotNumber(axis) || 1;
 
   return axis._input && axis._input.title
     ? striptags(`${axisType}: ${axis._input.title}`)
-    : striptags(`${axisType} ${subplotNb === 0 ? 1 : subplotNb}`);
+    : striptags(`${axisType} ${subplotNb}`);
 }