HI,
Reference react-pivottable
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