newPlot of undefined error when used with external plotly.js in react-pivottable?

Private · September 26, 2018, 1:36pm

HI,

Steps to reproduce

Here is my npm install command npm install --save react-pivottable react-plotly.js react react-dom

Here is my App.js file

import React, { Component } from 'react';
import tips from './tips';
import PivotTable from 'react-pivottable/PivotTable';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import createPlotlyComponent from 'react-plotly.js/factory';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';
import AWS from 'aws-sdk';
// create Plotly React component via dependency injection
const Plot = createPlotlyComponent(window.Plotly);

// create Plotly renderers via dependency injection
const PlotlyRenderers = createPlotlyRenderers(Plot);

class App extends Component {
  state = {
    filename: 'Sample Dataset: Tips',
    pivotState: {
      data:  [["Name", "CreationDate"]],
      rows: ['Name'],
      cols: ['Humanize'],
      aggregatorName: 'Count',
      rendererName: 'Grouped Column Chart',
  plotlyOptions: {width: 500, height: 500}
  }
  };

 handleClick = () => {
                this.setState(
                  {
                    filename: 'Sample Dataset: Tips',
                    pivotState: {
                      data: tips,
                      rows: ['Payer Gender'],
                      cols: ['Party Size'],
                      aggregatorName: 'Count',
                      rendererName: 'Grouped Column Chart',
                  plotlyOptions: {width: 600, height: 500}
                  }
                  });
        }
render() {
    //console.log(this.state)
  return (
    <div styles="width=50px">
      <PivotTable
               //  data={this.state.pullResults.body || []}
                onChange={s => this.setState({pivotState: s})}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state.pivotState}
            />
            
      <button onClick={this.handleClick}>Get results</button>
    </div>

  );
  }
}


export default App;

My tips component is like this

export default [
    ["Total Bill","Tip","Payer Gender","Payer Smoker","Day of Week","Meal","Party Size"],
    [16.99,1.01,"Female","Non-Smoker","Sunday","Dinner",2],
    [10.34,1.66,"Male","Non-Smoker","Sunday","Dinner",3],
    [21.01,3.5,"Male","Non-Smoker","Sunday","Dinner",3] ];

When rendering i am getting error like this

Error while plotting: TypeError: Cannot read property 'newPlot' of undefined

But when i installed plotly.js and used below App.js it worked fine .

import React, { Component } from 'react';
import tips from './tips';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import PivotTable from 'react-pivottable/PivotTable';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

const PlotlyRenderers = createPlotlyRenderers(Plot);

class App extends Component {
  state = {
    filename: 'Sample Dataset: Tips',
    pivotState: {
      data:  [["Name", "CreationDate"]],
      rows: ['Name'],
      cols: ['Humanize'],
      aggregatorName: 'Count',
      rendererName: 'Grouped Column Chart',
  plotlyOptions: {width: 500, height: 500}
  }
  };

 handleClick = () => {
                this.setState(
                  {
                    filename: 'Sample Dataset: Tips',
                    pivotState: {
                      data: tips,
                      rows: ['Payer Gender'],
                      cols: ['Party Size'],
                      aggregatorName: 'Count',
                      rendererName: 'Grouped Column Chart',
                  plotlyOptions: {width: 600, height: 500}
                  }
                  });
        }
render() {
    //console.log(this.state)
  return (
    <div styles="width=50px">
      <PivotTable
               //  data={this.state.pullResults.body || []}
                onChange={s => this.setState({pivotState: s})}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state.pivotState}
            />
            
            
      <button onClick={this.handleClick}>Get results</button>
    </div>

  );
  }
}

export default App;

Which is almost similar to the top one . Only difference is in import statement.

Am i missing anything ?

Any help is appreciated

Thanks