Create separate functions for plot type recognition + adjust line type

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.fullContainer);
   }
 
   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);
@@ -114,7 +93,7 @@ TraceSelector.contextTypes = {
 
 TraceSelector.propTypes = {
   getValObject: PropTypes.func,
-  container: PropTypes.object.isRequired,
+  fullContainer: PropTypes.object.isRequired,
   fullValue: PropTypes.any.isRequired,
   updateContainer: PropTypes.func,
 };

src/lib/customTraceType.js

@@ -0,0 +1,32 @@
+export function plotlyToCustom(trace) {
+  if (
+    trace.type === 'scatter' &&
+    ['tozeroy', 'tozerox', 'tonexty', 'tonextx', 'toself', 'tonext'].includes(
+      trace.fill
+    )
+  ) {
+    return 'area';
+  } else if (
+    trace.type === 'scatter' &&
+    (trace.mode === 'lines' || trace.mode === 'lines+markers')
+  ) {
+    return 'line';
+  }
+  return trace.type;
+}
+
+export function customToPlotly(customTraceType) {
+  if (customTraceType === 'line') {
+    return {type: 'scatter', mode: 'lines', fill: 'none'};
+  }
+
+  if (customTraceType === 'scatter') {
+    return {type: 'scatter', mode: 'markers', fill: 'none'};
+  }
+
+  if (customTraceType === 'area') {
+    return {type: 'scatter', fill: 'tozeroy'};
+  }
+
+  return {type: customTraceType};
+}

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,
 };