localize a whole lotta stuff

Author: alexcjohnson

scripts/translationKeys/combined-translation-keys.txt

@@ -1,7 +1,6 @@
 import DefaultEditor from './DefaultEditor';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import dictionaries from './locales';
 import {bem} from './lib';
 import {noShame, maybeClearAxisTypes} from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
@@ -40,7 +39,7 @@ class PlotlyEditor extends Component {
       dataSourceOptions: this.props.dataSourceOptions,
       dataSourceValueRenderer: this.props.dataSourceValueRenderer,
       dataSourceOptionRenderer: this.props.dataSourceOptionRenderer,
-      dictionaries: dictionaries,
+      dictionaries: this.props.dictionaries || {},
       fullData: gd._fullData,
       fullLayout: gd._fullLayout,
       graphDiv: gd,
@@ -159,6 +158,7 @@ PlotlyEditor.propTypes = {
   dataSourceOptions: PropTypes.array,
   dataSourceValueRenderer: PropTypes.func,
   dataSourceOptionRenderer: PropTypes.func,
+  dictionaries: PropTypes.object,
   graphDiv: PropTypes.object,
   locale: PropTypes.string,
   revision: PropTypes.any,

scripts/translationKeys/translation-keys.txt

@@ -32,7 +32,15 @@ class PanelHeader extends Component {
   }
 
   render() {
-    const {children, action, allowCollapse, toggleFolds, hasOpen} = this.props;
+    const {
+      children,
+      action,
+      allowCollapse,
+      toggleFolds,
+      hasOpen,
+      localize: _
+    } = this.props;
+
     return !children && !action && !allowCollapse ? null : (
       <div className="panel__header">
         {children && children.length ? (
@@ -44,12 +52,12 @@ class PanelHeader extends Component {
               {hasOpen ? (
                 <span>
                   <ResizeDownIcon />
-                  Collapse All
+                  {_('Collapse All')}
                 </span>
               ) : (
                 <span>
                   <ResizeUpIcon />
-                  Expand All
+                  {_('Expand All')}
                 </span>
               )}
             </div>

src/PlotlyEditor.js

@@ -5,26 +5,54 @@ import {
   capitalize,
   connectToContainer,
   customTraceToPlotlyTrace,
+  localize,
   plotlyTraceToCustomTrace,
 } from 'lib';
 
-function computeTraceOptionsFromSchema(schema) {
+function computeTraceOptionsFromSchema(schema, _) {
   // Filter out Polar "area" type as it is fairly broken and we want to present
   // scatter with fill as an "area" chart type for convenience.
   const traceTypes = Object.keys(schema.traces).filter(t => t !== 'area');
 
-  const labels = traceTypes.map(capitalize);
-  const traceOptions = traceTypes.map((t, i) => ({
-    label: labels[i],
-    value: t,
-  }));
+  // explicit map of all supported trace types (as of plotlyjs 1.32)
+  const traceOptions = [
+    {value: 'scatter', label: _('Scatter')},
+    {value: 'box', label: _('Box')},
+    {value: 'bar', label: _('Bar')},
+    {value: 'heatmap', label: _('Heatmap')},
+    {value: 'histogram', label: _('Histogram')},
+    {value: 'histogram2d', label: _('2D Histogram')},
+    {value: 'histogram2dcontour', label: _('2D Contour Histogram')},
+    {value: 'pie', label: _('Pie')},
+    {value: 'contour', label: _('Contour')},
+    {value: 'scatterternary', label: _('Ternary Scatter')},
+    {value: 'violin', label: _('Violin')},
+    {value: 'scatter3d', label: _('3D Scatter')},
+    {value: 'surface', label: _('Surface')},
+    {value: 'mesh3d', label: _('Mesh3d')},
+    {value: 'scattergeo', label: _('Atlas Map')},
+    {value: 'choropleth', label: _('Choropleth')},
+    {value: 'scattergl', label: _('Scatter GL')},
+    {value: 'pointcloud', label: _('Point Cloud')},
+    {value: 'heatmapgl', label: _('Heatmap GL')},
+    {value: 'parcoords', label: _('Parallel Coordinates')},
+    {value: 'scattermapbox', label: _('Satellite Map')},
+    {value: 'sankey', label: _('Sankey')},
+    {value: 'table', label: _('Table')},
+    {value: 'carpet', label: _('Carpet')},
+    {value: 'scattercarpet', label: _('Carpet Scatter')},
+    {value: 'contourcarpet', label: _('Carpet Contour')},
+    {value: 'ohlc', label: _('OHLC')},
+    {value: 'candlestick', label: _('Candlestick')},
+    {value: 'scatterpolar', label: _('Polar Scatter')},
+  ].filter(obj => traceTypes.indexOf(obj.value) !== -1);
 
   const i = traceOptions.findIndex(opt => opt.value === 'scatter');
   traceOptions.splice(
     i + 1,
     0,
-    {label: 'Line', value: 'line'},
-    {label: 'Area', value: 'area'}
+    {label: _('Line'), value: 'line'},
+    {label: _('Area'), value: 'area'}
   );
 
   return traceOptions;
@@ -60,12 +88,13 @@ class TraceSelector extends Component {
   }
 
   setLocals(props, context) {
+    const _ = props.localize;
     if (props.traceOptions) {
       this.traceOptions = props.traceOptions;
     } else if (context.plotSchema) {
-      this.traceOptions = computeTraceOptionsFromSchema(context.plotSchema);
+      this.traceOptions = computeTraceOptionsFromSchema(context.plotSchema, _);
     } else {
-      this.traceOptions = [{label: 'Scatter', value: 'scatter'}];
+      this.traceOptions = [{label: _('Scatter'), value: 'scatter'}];
     }
     this.fullValue = plotlyTraceToCustomTrace(props.container);
   }
@@ -112,7 +141,8 @@ TraceSelector.propTypes = {
   container: PropTypes.object.isRequired,
   fullContainer: PropTypes.object.isRequired,
   fullValue: PropTypes.any.isRequired,
+  localize: PropTypes.func,
   updateContainer: PropTypes.func,
 };
 
-export default connectToContainer(TraceSelector);
+export default connectToContainer(localize(TraceSelector));

src/components/containers/PanelHeader.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Select from 'react-select';
 import classnames from 'classnames';
+import {localize} from 'lib';
 
 class Dropdown extends Component {
   constructor(props) {
@@ -40,6 +41,7 @@ class Dropdown extends Component {
       disabled,
       className,
       width,
+      localize: _,
     } = this.props;
 
     const dropdownStyle = {minWidth};
@@ -62,7 +64,7 @@ class Dropdown extends Component {
       <div className={dropdownContainerClass} style={dropdownStyle}>
         <Select
           backspaceToRemoveMessage={backspaceToRemoveMessage}
-          placeholder={placeholder}
+          placeholder={placeholder || _('select an option...')}
           clearable={clearable}
           value={value}
           options={opts}
@@ -71,7 +73,7 @@ class Dropdown extends Component {
           multi={multi}
           optionRenderer={optionRenderer}
           valueRenderer={valueRenderer}
-          noResultsText={noResultsText}
+          noResultsText={noResultsText || _('no results...')}
           valueKey={valueKey}
           disabled={disabled}
           className={className}
@@ -84,8 +86,6 @@ class Dropdown extends Component {
 Dropdown.defaultProps = {
   clearable: true,
   multi: false,
-  noResultsText: 'no results...',
-  placeholder: 'select an option...',
   searchable: false,
   minWidth: '120px',
   valueKey: 'value',
@@ -110,6 +110,7 @@ Dropdown.propTypes = {
   disabled: PropTypes.bool,
   className: PropTypes.string,
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  localize: PropTypes.func,
 };
 
-export default Dropdown;
+export default localize(Dropdown);

src/components/fields/TraceSelector.js

@@ -7,6 +7,7 @@ import {
   connectTraceToPlot,
   dereference,
   localize,
+  localizeString,
   walkObject,
 } from './lib';
 import {EDITOR_ACTIONS} from './lib/constants';
@@ -85,6 +86,7 @@ export {
   connectTraceToPlot,
   dereference,
   localize,
+  localizeString,
   walkObject,
   LayoutPanel,
   AxesFold,

src/components/widgets/Dropdown.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
 import {MULTI_VALUED} from './constants';
-import {getDisplayName, isPlainObject} from '../lib';
+import {getDisplayName, isPlainObject, localize} from '../lib';
 
 /**
  * Simple replacer to use with JSON.stringify.
@@ -92,8 +92,8 @@ function setMultiValuedContainer(intoObj, fromObj, key, config = {}) {
   }
 }
 
-function computeAxesOptions(axes) {
-  const options = [{label: 'All', value: 'allaxes'}];
+function computeAxesOptions(axes, _) {
+  const options = [{label: _('All'), value: 'allaxes'}];
   for (let i = 0; i < axes.length; i++) {
     const ax = axes[i];
     const axesPrefix = ax._id.length > 1 ? ' ' + ax._id.substr(1) : '';
@@ -133,7 +133,7 @@ export default function connectAxesToLayout(WrappedComponent) {
       } else {
         this.axes = [];
       }
-      this.axesOptions = computeAxesOptions(this.axes);
+      this.axesOptions = computeAxesOptions(this.axes, nextProps.localize);
 
       if (axesTarget === 'allaxes') {
         const multiValuedContainer = deepCopyPublic(this.axes[0]);
@@ -210,6 +210,7 @@ export default function connectAxesToLayout(WrappedComponent) {
 
   AxesConnectedComponent.propTypes = {
     defaultAxesTarget: PropTypes.string,
+    localize: PropTypes.func,
   };
 
   AxesConnectedComponent.defaultProps = {
@@ -234,5 +235,5 @@ export default function connectAxesToLayout(WrappedComponent) {
     updateContainer: PropTypes.func,
   };
 
-  return AxesConnectedComponent;
+  return localize(AxesConnectedComponent);
 }