Properly initialize trace

Author: VeraZab

examples/simple/src/App.js

@@ -4,7 +4,6 @@ import createPlotComponent from 'react-plotly.js/factory';
 import PlotlyEditor, {dereference} from 'react-plotly.js-editor';
 import 'react-plotly.js-editor/lib/react-plotly.js-editor.css';
 
-
 const Plot = createPlotComponent(plotly);
 
 class App extends Component {
@@ -24,7 +23,7 @@ class App extends Component {
     // overwritten with a full DOM node that contains data, layout, _fullData,
     // _fullLayout etc in handlePlotUpdate()
     const graphDiv = {
-      data: [{type: 'scatter', xsrc: 'col1', ysrc: 'col2', mode: 'markers'}],
+      data: [{type: 'scatter', xsrc: 'col1', ysrc: 'col2'}],
       layout: {title: 'Room readings'},
     };
 

src/components/fields/TraceSelector.js

@@ -65,15 +65,22 @@ class TraceSelector extends Component {
       this.traceOptions = [{label: 'Scatter', value: 'scatter'}];
     }
 
-    this.fullValue = plotlyTraceToCustomTrace(props.fullContainer);
+    this.fullValue = plotlyTraceToCustomTrace(props.container);
+  }
+
+  componentWillMount() {
+    const {container} = this.props;
+    const value = plotlyTraceToCustomTrace(container);
+    this.updatePlot(value);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
     this.setLocals(nextProps, nextContext);
   }
 
   updatePlot(value) {
-    const update = customTraceToPlotlyTrace(value);
+    const {container} = this.props;
+    const update = customTraceToPlotlyTrace(value, container);
 
     if (this.props.updateContainer) {
       this.props.updateContainer(update);
@@ -97,7 +104,7 @@ TraceSelector.contextTypes = {
 
 TraceSelector.propTypes = {
   getValObject: PropTypes.func,
-  fullContainer: PropTypes.object.isRequired,
+  container: PropTypes.object.isRequired,
   fullValue: PropTypes.any.isRequired,
   updateContainer: PropTypes.func,
 };

src/components/fields/__tests__/DataSelector-test.js

@@ -38,7 +38,7 @@ describe('DataSelector', () => {
     const onUpdateTraces = jest.fn();
     const wrapper = render({onUpdateTraces}).find(DropdownWidget);
     wrapper.prop('onChange')('y1');
-    expect(onUpdateTraces.mock.calls[0][0]).toEqual({
+    expect(onUpdateTraces.mock.calls[2][0]).toEqual({
       update: {xsrc: 'y1', x: [2, 3, 4]},
       traceIndexes: [0],
     });

src/components/fields/__tests__/TraceSelector-test.js

@@ -81,7 +81,7 @@ describe('TraceSelector', () => {
     const innerDropdown = wrapper.find(Dropdown);
     innerDropdown.prop('onChange')('line');
 
-    const payload = onUpdateTraces.mock.calls[0][0];
+    const payload = onUpdateTraces.mock.calls[1][0];
     expect(payload.update).toEqual({
       fill: 'none',
       mode: 'lines',
@@ -107,7 +107,7 @@ describe('TraceSelector', () => {
     const innerDropdown = wrapper.find(Dropdown);
     innerDropdown.prop('onChange')('area');
 
-    const payload = onUpdateTraces.mock.calls[0][0];
+    const payload = onUpdateTraces.mock.calls[1][0];
     expect(payload.update).toEqual({fill: 'tozeroy', type: 'scatter'});
   });
 });

src/lib/customTraceType.js

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