Skip to content

Commit c76a572

Browse files
nicolaskruchtennicolaskruchten
committed
prettier and various other fixups
1 parent 9a4a229 commit c76a572

File tree

3 files changed

+132
-82
lines changed

3 files changed

+132
-82
lines changed

‎examples/App.jsx

Lines changed: 108 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -6,115 +6,152 @@ import createPlotlyComponent from 'react-plotly.js/factory';
66
import createPlotlyRenderers from '../src/PlotlyRenderers';
77
import PivotTableUI from '../src/PivotTableUI';
88
import '../src/pivottable.css';
9-
import Dropzone from 'react-dropzone'
10-
import Papa from 'papaparse'
9+
import Dropzone from 'react-dropzone';
10+
import Papa from 'papaparse';
1111

1212
const Plot = createPlotlyComponent(window.Plotly);
1313

1414
class PivotTableUISmartWrapper extends React.PureComponent {
1515
constructor(props) {
16-
super(props)
17-
this.state = { pivotState: props };
16+
super(props);
17+
this.state = {pivotState: props};
1818
}
1919

20-
2120
componentWillReceiveProps(nextProps) {
2221
this.setState({pivotState: nextProps});
2322
}
2423

2524
render() {
26-
return <PivotTableUI
27-
renderers={Object.assign({}, TableRenderers, createPlotlyRenderers(Plot))}
28-
rendererOptions = {{
29-
table: {
30-
clickCallback: function(e, value, filters, pivotData){
31-
var names = [];
32-
pivotData.forEachMatchingRecord(filters,
33-
function(record){ names.push(record.Meal); });
34-
alert(names.join("\n"));
35-
}
36-
}
37-
}}
38-
{...this.state.pivotState} onChange={s => this.setState({pivotState: s})}
39-
unusedOrientationCutoff={Infinity}
40-
/>;
25+
return (
26+
<PivotTableUI
27+
renderers={Object.assign(
28+
{},
29+
TableRenderers,
30+
createPlotlyRenderers(Plot)
31+
)}
32+
{...this.state.pivotState}
33+
onChange={s => this.setState({pivotState: s})}
34+
unusedOrientationCutoff={Infinity}
35+
/>
36+
);
4137
}
4238
}
4339

4440
export default class App extends React.Component {
4541
componentWillMount() {
4642
this.setState({
47-
mode: "demo",
48-
filename: "Sample Dataset: Tips",
43+
mode: 'demo',
44+
filename: 'Sample Dataset: Tips',
4945
pivotState: {
5046
data: tips,
51-
rows: ["Payer Gender"], cols: ["Party Size"],
52-
aggregatorName: "Sum over Sum", vals: ["Tip", "Total Bill"],
53-
rendererName: "Grouped Column Chart",
47+
rows: ['Payer Gender'],
48+
cols: ['Party Size'],
49+
aggregatorName: 'Sum over Sum',
50+
vals: ['Tip', 'Total Bill'],
51+
rendererName: 'Grouped Column Chart',
5452
sorters: {
55-
"Meal": sortAs(["Lunch", "Dinner"]),
56-
"Day of Week": sortAs(["Thursday", "Friday", "Saturday", "Sunday"])},
57-
plotlyOptions: {width: 900, height: 500}
58-
}
53+
Meal: sortAs(['Lunch', 'Dinner']),
54+
'Day of Week': sortAs([
55+
'Thursday',
56+
'Friday',
57+
'Saturday',
58+
'Sunday',
59+
]),
60+
},
61+
plotlyOptions: {width: 900, height: 500},
62+
plotlyConfig: {},
63+
tableOptions: {
64+
clickCallback: function(e, value, filters, pivotData) {
65+
var names = [];
66+
pivotData.forEachMatchingRecord(filters, function(
67+
record
68+
) {
69+
names.push(record.Meal);
70+
});
71+
alert(names.join('\n'));
72+
},
73+
},
74+
},
5975
});
6076
}
6177

6278
onDrop(files) {
63-
this.setState({
64-
mode: "thinking",
65-
filename: "(Parsing CSV...)",
66-
textarea: "",
67-
pivotState: { data: [] }
68-
}, () => Papa.parse(files[0], {
69-
skipEmptyLines: true,
70-
error: (e) => alert(e),
71-
complete: (parsed) => this.setState({
72-
mode: "file",
73-
filename: files[0].name,
74-
pivotState: { data: parsed.data }
75-
}) })
79+
this.setState(
80+
{
81+
mode: 'thinking',
82+
filename: '(Parsing CSV...)',
83+
textarea: '',
84+
pivotState: {data: []},
85+
},
86+
() =>
87+
Papa.parse(files[0], {
88+
skipEmptyLines: true,
89+
error: e => alert(e),
90+
complete: parsed =>
91+
this.setState({
92+
mode: 'file',
93+
filename: files[0].name,
94+
pivotState: {data: parsed.data},
95+
}),
96+
})
7697
);
7798
}
7899

79100
onType(event) {
80101
Papa.parse(event.target.value, {
81102
skipEmptyLines: true,
82-
error: (e) => alert(e),
83-
complete: (parsed) => this.setState({
84-
mode: "text",
85-
filename: "Data from <textarea>",
86-
textarea: event.target.value,
87-
pivotState: { data: parsed.data }
88-
})
103+
error: e => alert(e),
104+
complete: parsed =>
105+
this.setState({
106+
mode: 'text',
107+
filename: 'Data from <textarea>',
108+
textarea: event.target.value,
109+
pivotState: {data: parsed.data},
110+
}),
89111
});
90112
}
91113

92114
render() {
93-
return (<div>
94-
<div className="row text-center">
95-
<div className="col-md-3 col-md-offset-3">
96-
<p>Try it right now on a file...</p>
97-
<Dropzone onDrop={this.onDrop.bind(this)} accept="text/csv" className="dropzone"
98-
activeClassName="dropzoneActive" rejectClassName="dropzoneReject" >
99-
<p>Drop a CSV file here, or click to choose a file from your computer.</p>
100-
</Dropzone>
115+
return (
116+
<div>
117+
<div className="row text-center">
118+
<div className="col-md-3 col-md-offset-3">
119+
<p>Try it right now on a file...</p>
120+
<Dropzone
121+
onDrop={this.onDrop.bind(this)}
122+
accept="text/csv"
123+
className="dropzone"
124+
activeClassName="dropzoneActive"
125+
rejectClassName="dropzoneReject"
126+
>
127+
<p>
128+
Drop a CSV file here, or click to choose a file
129+
from your computer.
130+
</p>
131+
</Dropzone>
132+
</div>
133+
<div className="col-md-3 text-center">
134+
<p>...or paste some data:</p>
135+
<textarea
136+
value={this.state.textarea}
137+
onChange={this.onType.bind(this)}
138+
placeholder="Paste from a spreadsheet or CSV-like file"
139+
/>
140+
</div>
101141
</div>
102-
<div className="col-md-3 text-center">
103-
<p>...or paste some data:</p>
104-
<textarea value={this.state.textarea} onChange={this.onType.bind(this)}
105-
placeholder="Paste from a spreadsheet or CSV-like file"/>
142+
<div className="row text-center">
143+
<p>
144+
<em>Note: the data never leaves your browser!</em>
145+
</p>
146+
<br />
106147
</div>
107-
</div>
108-
<div className="row text-center">
109-
<p><em>Note: the data never leaves your browser!</em></p>
110-
<br />
111-
</div>
112-
<div className="row">
113-
<h2 className="text-center">{this.state.filename}</h2>
114-
<br />
148+
<div className="row">
149+
<h2 className="text-center">{this.state.filename}</h2>
150+
<br />
115151

116-
<PivotTableUISmartWrapper {...this.state.pivotState} />
152+
<PivotTableUISmartWrapper {...this.state.pivotState} />
153+
</div>
117154
</div>
118-
</div>);
155+
);
119156
}
120157
}

‎src/PlotlyRenderers.jsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
23
import {PivotData} from './Utilities';
34

5+
/* eslint-disable react/prop-types */
6+
// eslint can't see inherited propTypes!
7+
48
function makeRenderer(
59
PlotlyComponent,
610
traceOptions = {},
@@ -94,8 +98,14 @@ function makeRenderer(
9498
}
9599
}
96100

97-
Renderer.defaultProps = PivotData.defaultProps;
98-
Renderer.propTypes = PivotData.propTypes;
101+
Renderer.defaultProps = Object.assign({}, PivotData.defaultProps, {
102+
plotlyOptions: {},
103+
plotlyConfig: {},
104+
});
105+
Renderer.propTypes = Object.assign({}, PivotData.propTypes, {
106+
plotlyOptions: PropTypes.object,
107+
plotlyConfig: PropTypes.object,
108+
});
99109

100110
return Renderer;
101111
}
@@ -147,8 +157,14 @@ function makeScatterRenderer(PlotlyComponent) {
147157
}
148158
}
149159

150-
Renderer.defaultProps = PivotData.defaultProps;
151-
Renderer.propTypes = PivotData.propTypes;
160+
Renderer.defaultProps = Object.assign({}, PivotData.defaultProps, {
161+
plotlyOptions: {},
162+
plotlyConfig: {},
163+
});
164+
Renderer.propTypes = Object.assign({}, PivotData.propTypes, {
165+
plotlyOptions: PropTypes.object,
166+
plotlyConfig: PropTypes.object,
167+
});
152168

153169
return Renderer;
154170
}

‎src/TableRenderers.jsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,8 @@ function makeRenderer(opts = {}) {
106106
}
107107
}
108108

109-
// PutClickHandler
110-
// this.props.rendererOptions.table.clickCallback
111109
const getClickHandler =
112-
this.props.rendererOptions &&
113-
this.props.rendererOptions.table &&
114-
this.props.rendererOptions.table.clickCallback
110+
this.props.tableOptions && this.props.tableOptions.clickCallback
115111
? (value, rowValues, colValues) => {
116112
const filters = {};
117113
for (const i of Object.keys(colAttrs || {})) {
@@ -127,7 +123,7 @@ function makeRenderer(opts = {}) {
127123
}
128124
}
129125
return e =>
130-
this.props.rendererOptions.table.clickCallback(
126+
this.props.tableOptions.clickCallback(
131127
e,
132128
value,
133129
filters,
@@ -301,8 +297,9 @@ function makeRenderer(opts = {}) {
301297
TableRenderer.defaultProps = PivotData.defaultProps;
302298
TableRenderer.propTypes = PivotData.propTypes;
303299
TableRenderer.defaultProps.tableColorScaleGenerator = redColorScaleGenerator;
300+
TableRenderer.defaultProps.tableOptions = {};
304301
TableRenderer.propTypes.tableColorScaleGenerator = PropTypes.func;
305-
TableRenderer.propTypes.rendererOptions = PropTypes.object;
302+
TableRenderer.propTypes.tableOptions = PropTypes.object;
306303
return TableRenderer;
307304
}
308305

0 commit comments

Comments
 (0)