Merge pull request #687 from plotly/localize-subplots

localize subplot names

Author: dmt0

src/components/containers/SubplotAccordion.js

@@ -6,6 +6,7 @@ import {
   connectTraceToPlot,
   connectCartesianSubplotToLayout,
   connectNonCartesianSubplotToLayout,
+  getSubplotTitle,
 } from 'lib';
 import {TRACE_TO_AXIS, SUBPLOT_TO_ATTR} from 'lib/constants';
 
@@ -15,7 +16,7 @@ const CartesianSubplotFold = connectCartesianSubplotToLayout(PlotlyFold);
 
 class SubplotAccordion extends Component {
   render() {
-    const {data = [], layout = {}} = this.context;
+    const {data = [], layout = {}, localize: _} = this.context;
     const {children, messageIfEmptyFold} = this.props;
     const subplotFolds = [];
 
@@ -31,8 +32,12 @@ class SubplotAccordion extends Component {
           acc.push({
             xaxis: xaxis,
             yaxis: yaxis,
-            xaxisName: curVal.xaxis || 'x1',
-            yaxisName: curVal.yaxis || 'y1',
+            xaxisName: curVal.xaxis
+              ? getSubplotTitle(curVal.xaxis, 'x', _)
+              : 'X 1',
+            yaxisName: curVal.yaxis
+              ? getSubplotTitle(curVal.yaxis, 'y', _)
+              : 'Y 1',
             index: [inx],
           });
         } else {
@@ -52,7 +57,7 @@ class SubplotAccordion extends Component {
             messageIfEmpty={messageIfEmptyFold}
             xaxis={d.xaxis}
             yaxis={d.yaxis}
-            name={`${d.xaxisName} ${d.yaxisName}`}
+            name={`${d.xaxisName} | ${d.yaxisName}`}
           >
             {children}
           </CartesianSubplotFold>
@@ -87,8 +92,10 @@ class SubplotAccordion extends Component {
 
     Object.keys(layout).forEach(layoutKey => {
       const traceIndexes = [];
+      let subplotName;
       if (
         ['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some(subplotType => {
+          subplotName = getSubplotTitle(layoutKey, subplotType, _);
           const trIndex =
             SUBPLOT_TO_ATTR[subplotType].layout === layoutKey
               ? data.findIndex(trace =>
@@ -111,23 +118,34 @@ class SubplotAccordion extends Component {
             canDelete={false}
             messageIfEmpty={messageIfEmptyFold}
             subplot={layoutKey}
-            name={layoutKey}
+            name={subplotName}
           >
             {children}
           </NonCartesianSubplotFold>
         );
       }
     });
 
+    let pieCounter = 0;
+    let tableCounter = 0;
     data.forEach((d, i) => {
       if ((d.type === 'pie' && d.values) || d.type === 'table') {
+        if (d.type === 'pie') {
+          pieCounter++;
+        } else if (d.type === 'table') {
+          tableCounter++;
+        }
         subplotFolds[i] = (
           <TraceFold
             key={i}
             traceIndexes={[i]}
             canDelete={false}
             messageIfEmpty={messageIfEmptyFold}
-            name={`${d.type} ${i}`}
+            name={
+              d.type === 'pie'
+                ? `${_('Pie')} ${pieCounter > 1 ? pieCounter : ''}`
+                : `${_('Table')} ${tableCounter > 1 ? tableCounter : ''}`
+            }
           >
             {children}
           </TraceFold>

src/components/fields/SubplotCreator.js

@@ -131,7 +131,7 @@ class UnconnectedSubplotCreator extends Component {
 
     function getOptions(subplotType) {
       return fullLayout._subplots[subplotType].map(subplotId => ({
-        label: getSubplotTitle(subplotId, subplotType),
+        label: getSubplotTitle(subplotId, subplotType, _),
         value: subplotId,
       }));
     }

src/lib/constants.js

@@ -79,8 +79,10 @@ export const TRACE_TO_AXIS = {
 // Note: scene, and xaxis/yaxis were added for convenience sake even though they're not subplot types
 export const SUBPLOT_TO_ATTR = {
   cartesian: {data: ['xaxis', 'yaxis'], layout: ['x', 'y']},
-  xaxis: {data: ['xaxis', 'yaxis'], layout: ['x', 'y']},
-  yaxis: {data: ['xaxis', 'yaxis'], layout: ['x', 'y']},
+  xaxis: {data: 'xaxis', layout: 'x'},
+  yaxis: {data: 'yaxis', layout: 'y'},
+  x: {data: 'xaxis', layout: 'x'},
+  y: {data: 'yaxis', layout: 'y'},
   ternary: {data: 'subplot', layout: 'ternary'},
   gl3d: {data: 'scene', layout: 'scene'},
   scene: {data: 'scene', layout: 'scene'},
@@ -89,6 +91,18 @@ export const SUBPLOT_TO_ATTR = {
   polar: {data: 'subplot', layout: 'polar'},
 };
 
+export const subplotName = (type, _) =>
+  ({
+    x: _('X'),
+    y: _('Y'),
+    ternary: _('Ternary'),
+    gl3d: _('Scene'),
+    scene: _('Scene'),
+    geo: _('Geo'),
+    mapbox: _('Mapbox'),
+    polar: _('Polar'),
+  }[type]);
+
 export const TRANSFORMS_LIST = ['filter', 'groupby', 'aggregate'];
 
 export const COLORS = {

src/lib/getAllAxes.js

@@ -1,4 +1,4 @@
-import {TRACE_TO_AXIS} from 'lib/constants';
+import {TRACE_TO_AXIS, SUBPLOT_TO_ATTR, subplotName} from 'lib/constants';
 import {capitalize, striptags} from 'lib';
 
 export default function getAllAxes(fullLayout) {
@@ -72,7 +72,7 @@ export function axisIdToAxisName(id) {
   return id.charAt(0) + 'axis' + id.slice(1);
 }
 
-function getSubplotNumber(axis) {
+function getAxisNumber(axis) {
   const splitSubplot = axis._subplot
     ? axis._subplot.split(axis._axisGroup)
     : [];
@@ -83,9 +83,21 @@ function getSubplotNumber(axis) {
 
 export function getAxisTitle(axis) {
   const axisType = capitalize(axis._name.split('axis')[0]);
-  const subplotNumber = getSubplotNumber(axis) || 1;
+  const subplotNumber = getAxisNumber(axis) || 1;
 
   return axis._input && axis._input.title
     ? striptags(`${axisType}: ${axis._input.title}`)
     : striptags(`${axisType} ${subplotNumber}`);
 }
+
+function getSubplotNumber(subplot, type) {
+  return Number(subplot.split(type)[1]);
+}
+
+export function getSubplotTitle(subplot, type, _) {
+  const axisName = subplotName(type, _);
+  const subplotNumber =
+    getSubplotNumber(subplot, SUBPLOT_TO_ATTR[type].layout) || '';
+
+  return `${axisName} ${subplotNumber}`;
+}

src/lib/getAllSubplots.js

@@ -21,11 +21,8 @@ import getAllAxes, {
   axisIdToAxisName,
   traceTypeToAxisType,
   getAxisTitle,
-} from './getAllAxes';
-import getAllSubplots, {
-  traceTypeToSubplotType,
   getSubplotTitle,
-} from './getAllSubplots';
+} from './getAllAxes';
 import localize, {localizeString} from './localize';
 import tinyColor from 'tinycolor2';
 import unpackPlotProps from './unpackPlotProps';
@@ -66,9 +63,18 @@ function renderTraceIcon(trace, prefix = 'Plot') {
     return null;
   }
   const gl = 'gl';
+
+  let tempTrace = trace;
+  if (tempTrace === 'cone') {
+    tempTrace = 'scatter3d';
+  } else if (tempTrace === 'streamtube') {
+    tempTrace = 'line3d';
+  }
+
   const componentName = `${prefix}${pascalCase(
-    trace.endsWith(gl) ? trace.slice(0, -gl.length) : trace
+    tempTrace.endsWith(gl) ? tempTrace.slice(0, -gl.length) : tempTrace
   )}Icon`;
+
   return PlotlyIcons[componentName]
     ? PlotlyIcons[componentName]
     : PlotlyIcons.PlotLineIcon;
@@ -242,8 +248,6 @@ export {
   dereference,
   getAllAxes,
   getAxisTitle,
-  getAllSubplots,
-  traceTypeToSubplotType,
   getSubplotTitle,
   getDisplayName,
   isPlainObject,