Add customTraceType util

Author: VeraZab

src/components/fields/TraceSelector.js

@@ -1,8 +1,7 @@
 import {UnconnectedDropdown} from './Dropdown';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import nestedProperty from 'plotly.js/src/lib/nested_property';
-import {connectToContainer} from '../../lib';
+import {connectToContainer, customToPlotly, plotlyToCustom} from '../../lib';
 
 function computeTraceOptionsFromSchema(schema) {
   const capitalize = s => s.charAt(0).toUpperCase() + s.substring(1);
@@ -62,35 +61,15 @@ class TraceSelector extends Component {
       this.traceOptions = [{label: 'Scatter', value: 'scatter'}];
     }
 
-    // If we used fullData mode or fill it may be undefined if the fullTrace
-    // is not visible and therefore does not have these values computed.
-    const mode = nestedProperty(props.container, 'mode').get();
-    const fill = nestedProperty(props.container, 'fill').get();
-    const fullValue = props.fullValue;
-    if (fullValue === 'scatter' && this.fillTypes.includes(fill)) {
-      this.fullValue = 'area';
-    } else if (fullValue === 'scatter' && mode === 'lines') {
-      this.fullValue = 'line';
-    } else {
-      this.fullValue = fullValue;
-    }
+    this.fullValue = plotlyToCustom(props.container);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
     this.setLocals(nextProps, nextContext);
   }
 
   updatePlot(value) {
-    let update;
-    if (value === 'line') {
-      update = {type: 'scatter', mode: 'lines', fill: 'none'};
-    } else if (value === 'scatter') {
-      update = {type: 'scatter', mode: 'markers', fill: 'none'};
-    } else if (value === 'area') {
-      update = {type: 'scatter', fill: 'tozeroy'};
-    } else {
-      update = {type: value};
-    }
+    const update = customToPlotly(value);
 
     if (this.props.updateContainer) {
       this.props.updateContainer(update);

src/lib/index.js

@@ -10,6 +10,7 @@ import localize, {localizeString} from './localize';
 import tinyColor from 'tinycolor2';
 import unpackPlotProps from './unpackPlotProps';
 import walkObject, {isPlainObject} from './walkObject';
+import {customToPlotly, plotlyToCustom} from './customTraceType';
 
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
@@ -33,14 +34,16 @@ export {
   connectLayoutToPlot,
   connectToContainer,
   connectTraceToPlot,
+  customToPlotly,
   dereference,
+  findFullTraceIndex,
   getDisplayName,
   getLayoutContext,
-  findFullTraceIndex,
   icon,
   isPlainObject,
   localize,
   localizeString,
+  plotlyToCustom,
   unpackPlotProps,
   walkObject,
 };