use plotly.js template strings in titles where possible

Author: VeraZab

src/components/containers/AnnotationAccordion.js

@@ -3,8 +3,7 @@ import {LayoutPanel} from './derived';
 import {PanelMessage} from './PanelEmpty';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {connectAnnotationToLayout} from 'lib';
-import {templateString} from 'plotly.js/src/lib';
+import {connectAnnotationToLayout, getParsedTemplateString} from 'lib';
 
 const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
@@ -19,12 +18,11 @@ class AnnotationAccordion extends Component {
     const content =
       annotations.length &&
       annotations.map((ann, i) => {
-        const textPostTemplate = templateString(ann.text, {meta});
         return (
           <AnnotationFold
             key={i}
             annotationIndex={i}
-            name={textPostTemplate === '' ? ann.text : textPostTemplate}
+            name={getParsedTemplateString(ann.text, meta)}
             canDelete={canAdd}
           >
             {children}

src/components/containers/RangeSelectorAccordion.js

@@ -2,7 +2,7 @@ import PlotlyFold from './PlotlyFold';
 import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {connectRangeSelectorToAxis} from 'lib';
+import {connectRangeSelectorToAxis, getParsedTemplateString} from 'lib';
 
 const RangeSelectorFold = connectRangeSelectorToAxis(PlotlyFold);
 
@@ -23,13 +23,19 @@ class RangeSelectorAccordion extends Component {
         rangeselector: {buttons = []},
       },
       localize: _,
+      layout: meta,
     } = this.context;
     const {children} = this.props;
 
     const content =
       buttons.length &&
       buttons.map((btn, i) => (
-        <RangeSelectorFold key={i} rangeselectorIndex={i} name={btn.label} canDelete={true}>
+        <RangeSelectorFold
+          key={i}
+          rangeselectorIndex={i}
+          name={getParsedTemplateString(btn.label, meta)}
+          canDelete={true}
+        >
           {children}
         </RangeSelectorFold>
       ));
@@ -57,6 +63,7 @@ class RangeSelectorAccordion extends Component {
 RangeSelectorAccordion.contextTypes = {
   fullContainer: PropTypes.object,
   localize: PropTypes.func,
+  layout: PropTypes.object,
 };
 
 RangeSelectorAccordion.propTypes = {

src/components/fields/AxesCreator.js

@@ -5,7 +5,13 @@ import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
 import Button from '../widgets/Button';
 import {PlusIcon} from 'plotly-icons';
-import {connectToContainer, traceTypeToAxisType, getAxisTitle, axisIdToAxisName} from 'lib';
+import {
+  connectToContainer,
+  traceTypeToAxisType,
+  getAxisTitle,
+  axisIdToAxisName,
+  getParsedTemplateString,
+} from 'lib';
 import {PlotlySection} from 'components';
 
 class UnconnectedAxisCreator extends Component {
@@ -128,7 +134,10 @@ class UnconnectedAxesCreator extends Component {
 
     function getOptions(axisType) {
       return fullLayout._subplots[axisType].map(axisId => ({
-        label: getAxisTitle(fullLayout[axisIdToAxisName(axisId)]),
+        label: getParsedTemplateString(
+          getAxisTitle(fullLayout[axisIdToAxisName(axisId)]),
+          fullLayout.meta
+        ),
         value: axisId,
       }));
     }

src/lib/connectTraceToPlot.js

@@ -7,6 +7,7 @@ import {
   renderTraceIcon,
   traceTypeToAxisType,
   getFullTrace,
+  getParsedTemplateString,
 } from '../lib';
 import {deepCopyPublic, setMultiValuedContainer} from './multiValues';
 import {EDITOR_ACTIONS, SUBPLOT_TO_ATTR} from 'lib/constants';
@@ -27,7 +28,7 @@ export default function connectTraceToPlot(WrappedComponent) {
 
     setLocals(props, context) {
       const {traceIndexes} = props;
-      const {data, fullData, plotly} = context;
+      const {data, fullData, plotly, layout: meta} = context;
 
       const trace = data[traceIndexes[0]];
       const fullTrace = getFullTrace(props, context);
@@ -68,7 +69,7 @@ export default function connectTraceToPlot(WrappedComponent) {
 
       if (trace && fullTrace) {
         this.icon = renderTraceIcon(plotlyTraceToCustomTrace(trace));
-        this.name = fullTrace.name;
+        this.name = getParsedTemplateString(fullTrace.name, meta);
       }
     }
 
@@ -194,6 +195,7 @@ export default function connectTraceToPlot(WrappedComponent) {
     data: PropTypes.array,
     plotly: PropTypes.object,
     onUpdate: PropTypes.func,
+    layout: PropTypes.object,
   };
 
   TraceConnectedComponent.childContextTypes = {

src/lib/index.js

@@ -30,6 +30,7 @@ import * as PlotlyIcons from 'plotly-icons';
 import striptags from './striptags';
 import {capitalize, lowerCase, upperCase, removeNonWord, camelCase, pascalCase} from './strings';
 import {getColorscale} from 'react-colorscales';
+import {templateString} from 'plotly.js/src/lib';
 
 const TOO_LIGHT_FACTOR = 0.8;
 
@@ -202,6 +203,16 @@ function getFullTrace(props, context) {
   return fullTrace;
 }
 
+function getParsedTemplateString(originalString, meta) {
+  let text = originalString;
+
+  if (originalString && meta && meta.length) {
+    text = templateString(originalString, {meta});
+  }
+
+  return text === '' && originalString ? originalString : text;
+}
+
 export {
   adjustColorscale,
   axisIdToAxisName,