Standardize axis titles

Author: VeraZab

src/components/fields/AxisCreator.js

@@ -3,9 +3,15 @@ import Field from './Field';
 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';
+import {
+  connectToContainer,
+  localize,
+  traceTypeToAxisType,
+  getAxisTitle,
+  axisIdToAxisName,
+} from 'lib';
 
 export class UnconnectedAxisCreator extends Component {
   constructor(props, context) {
@@ -58,7 +64,7 @@ export class UnconnectedAxisCreator extends Component {
             },
           }}
           options={context.fullLayout._subplots[subplot].map(subplot => ({
-            label: subplot,
+            label: getAxisTitle(context.fullLayout[axisIdToAxisName(subplot)]),
             value: subplot,
           }))}
         />

src/components/fields/derived.js

@@ -4,12 +4,12 @@ import {UnconnectedFlaglist} from './Flaglist';
 import {UnconnectedNumeric} from './Numeric';
 import {UnconnectedRadio} from './Radio';
 import {
-  capitalize,
   connectLayoutToPlot,
   connectToContainer,
   getAllAxes,
+  getAxisTitle,
+  axisIdToAxisName,
   supplyLayoutPlotProps,
-  striptags,
 } from 'lib';
 
 export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
@@ -19,11 +19,17 @@ export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
     plotProps.options = [{label: 'x', value: 'x'}];
     if (plotProps.fullContainer.subplot.includes('xaxis')) {
       options = context.fullLayout._subplots.yaxis.map(axis => {
-        return {label: capitalize(axis), value: axis};
+        return {
+          label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
+          value: axis,
+        };
       });
     } else if (plotProps.fullContainer.subplot.includes('yaxis')) {
       options = context.fullLayout._subplots.xaxis.map(axis => {
-        return {label: capitalize(axis), value: axis};
+        return {
+          label: getAxisTitle(context.fullLayout[axisIdToAxisName(axis)]),
+          value: axis,
+        };
       });
     }
     options.push({label: _('Free'), value: 'free'});
@@ -293,8 +299,7 @@ function computeAxesRefOptions(axes, propsAttr) {
       ax._id.charAt(0) === propsAttr.charAt(0) ||
       ax._id.charAt(0) === propsAttr.charAt(1)
     ) {
-      // checking user data for title avoids default "Click to enter axis title"
-      const label = striptags(ax._input.title || ax._id);
+      const label = getAxisTitle(ax);
       options.push({label, value: ax._id});
     }
   }

src/lib/connectAxesToLayout.js

@@ -7,7 +7,7 @@ import {
   getAllAxes,
   getDisplayName,
   localize,
-  striptags,
+  getAxisTitle,
 } from '../lib';
 
 function computeAxesOptions(axes, _) {
@@ -26,11 +26,7 @@ function computeAxesOptions(axes, _) {
       label,
       value,
       axisGroup: ax.axisGroup,
-      title: striptags(
-        ax._input.title
-          ? `${label} Axis: ${ax._input.title}`
-          : capitalize(ax._id)
-      ),
+      title: getAxisTitle(ax),
     };
   }
 

src/lib/getAllAxes.js

@@ -1,4 +1,5 @@
 import {TRACE_TO_AXIS} from 'lib/constants';
+import {capitalize, striptags} from 'lib';
 
 export default function getAllAxes(fullLayout) {
   const axes = [];
@@ -61,3 +62,14 @@ export function traceTypeToAxisType(traceType) {
 
   throw new Error(`Sorry, could not find ${traceType} in any category.`);
 }
+
+export function axisIdToAxisName(id) {
+  return id.charAt(0) + 'axis' + id.slice(1);
+}
+
+export function getAxisTitle(axis) {
+  const axisType = capitalize(axis._name.split('axis')[0]);
+  return axis._input && axis._input.title
+    ? striptags(`${axisType} Axis: ${axis._input.title}`)
+    : capitalize(axis._id);
+}

src/lib/index.js

@@ -10,7 +10,11 @@ import connectToContainer, {
 import connectTraceToPlot from './connectTraceToPlot';
 import dereference from './dereference';
 import findFullTraceIndex from './findFullTraceIndex';
-import getAllAxes, {traceTypeToAxisType} from './getAllAxes';
+import getAllAxes, {
+  axisIdToAxisName,
+  traceTypeToAxisType,
+  getAxisTitle,
+} from './getAllAxes';
 import localize, {localizeString} from './localize';
 import tinyColor from 'tinycolor2';
 import unpackPlotProps from './unpackPlotProps';
@@ -49,6 +53,7 @@ function renderTraceIcon(trace) {
 }
 
 export {
+  axisIdToAxisName,
   bem,
   capitalize,
   clamp,
@@ -64,6 +69,7 @@ export {
   dereference,
   findFullTraceIndex,
   getAllAxes,
+  getAxisTitle,
   getDisplayName,
   getLayoutContext,
   isPlainObject,