Skip to content

Commit dfa3acb

Browse files
pjm17971pjm17971
committed
Use prettier!
1 parent 1d3ae2d commit dfa3acb

File tree

34 files changed

+3668
-3882
lines changed

34 files changed

+3668
-3882
lines changed

‎src/components/AreaChart.js‎

Lines changed: 253 additions & 261 deletions
Large diffs are not rendered by default.

‎src/components/BarChart.js‎

Lines changed: 231 additions & 241 deletions
Large diffs are not rendered by default.

‎src/components/BoxChart.js‎

Lines changed: 556 additions & 587 deletions
Large diffs are not rendered by default.

‎src/components/EventChart.js‎

Lines changed: 157 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -21,216 +21,209 @@ import { TimeSeries, Event } from "pondjs";
2121
* or IndexedEvents.
2222
*/
2323
export default class EventChart extends React.Component {
24-
constructor(props) {
25-
super(props);
26-
this.state = {
27-
hover: null
28-
};
29-
}
30-
31-
/**
24+
constructor(props) {
25+
super(props);
26+
this.state = {
27+
hover: null
28+
};
29+
}
30+
31+
/**
3232
* Continues a hover event on a specific bar of the bar chart.
3333
*/
34-
onMouseOver(e, event) {
35-
if (this.props.onMouseOver) {
36-
this.props.onMouseOver(event);
34+
onMouseOver(e, event) {
35+
if (this.props.onMouseOver) {
36+
this.props.onMouseOver(event);
37+
}
38+
this.setState({ hover: event });
3739
}
38-
this.setState({ hover: event });
39-
}
4040

41-
/**
41+
/**
4242
* Handle mouse leave and calls onMouseLeave callback if one is provided
4343
*/
44-
onMouseLeave() {
45-
if (this.props.onMouseLeave) {
46-
this.props.onMouseLeave(this.state.hover);
44+
onMouseLeave() {
45+
if (this.props.onMouseLeave) {
46+
this.props.onMouseLeave(this.state.hover);
47+
}
48+
this.setState({ hover: null });
4749
}
48-
this.setState({ hover: null });
49-
}
5050

51-
/**
51+
/**
5252
* Handle click will call the onSelectionChange callback if one is provided
5353
* as a prop. It will be called with the event selected.
5454
*/
55-
handleClick(e, event) {
56-
e.stopPropagation();
57-
if (this.props.onSelectionChange) {
58-
this.props.onSelectionChange(event);
55+
handleClick(e, event) {
56+
e.stopPropagation();
57+
if (this.props.onSelectionChange) {
58+
this.props.onSelectionChange(event);
59+
}
5960
}
60-
}
61-
62-
render() {
63-
const { series, textOffsetX, textOffsetY, hoverMarkerWidth } = this.props;
64-
const scale = this.props.timeScale;
65-
const eventMarkers = [];
66-
67-
// Create and array of markers, one for each event
68-
let i = 0;
69-
for (const event of series.events()) {
70-
const begin = event.begin();
71-
const end = event.end();
72-
const beginPos = scale(begin) >= 0 ? scale(begin) : 0;
73-
const endPos = scale(end) <= this.props.width
74-
? scale(end)
75-
: this.props.width;
76-
77-
const transform = `translate(${beginPos},0)`;
78-
const isHover = this.state.hover
79-
? Event.is(event, this.state.hover)
80-
: false;
81-
82-
let state;
83-
if (isHover) {
84-
state = "hover";
85-
} else {
86-
state = "normal";
87-
}
88-
89-
let barNormalStyle = {};
90-
let barStyle = {};
91-
if (this.props.style) {
92-
barNormalStyle = this.props.style(event, "normal");
93-
barStyle = this.props.style(event, state);
94-
}
95-
96-
let label = "";
97-
if (this.props.label) {
98-
if (_.isString(this.props.label)) {
99-
label = this.props.label;
100-
} else if (_.isFunction(this.props.label)) {
101-
label = this.props.label(event);
61+
62+
render() {
63+
const { series, textOffsetX, textOffsetY, hoverMarkerWidth } = this.props;
64+
const scale = this.props.timeScale;
65+
const eventMarkers = [];
66+
67+
// Create and array of markers, one for each event
68+
let i = 0;
69+
for (const event of series.events()) {
70+
const begin = event.begin();
71+
const end = event.end();
72+
const beginPos = scale(begin) >= 0 ? scale(begin) : 0;
73+
const endPos = scale(end) <= this.props.width ? scale(end) : this.props.width;
74+
75+
const transform = `translate(${beginPos},0)`;
76+
const isHover = this.state.hover ? Event.is(event, this.state.hover) : false;
77+
78+
let state;
79+
if (isHover) {
80+
state = "hover";
81+
} else {
82+
state = "normal";
83+
}
84+
85+
let barNormalStyle = {};
86+
let barStyle = {};
87+
if (this.props.style) {
88+
barNormalStyle = this.props.style(event, "normal");
89+
barStyle = this.props.style(event, state);
90+
}
91+
92+
let label = "";
93+
if (this.props.label) {
94+
if (_.isString(this.props.label)) {
95+
label = this.props.label;
96+
} else if (_.isFunction(this.props.label)) {
97+
label = this.props.label(event);
98+
}
99+
}
100+
101+
const x = this.props.spacing;
102+
const y = 0;
103+
let width = endPos - beginPos - 2 * this.props.spacing;
104+
width = width < 0 ? 0 : width;
105+
const height = this.props.size;
106+
107+
const eventLabelStyle = {
108+
fontWeight: 100,
109+
fontSize: 11
110+
};
111+
112+
let text = null;
113+
if (isHover) {
114+
text = (
115+
<g>
116+
<rect
117+
className="eventchart-marker"
118+
x={x}
119+
y={y}
120+
width={hoverMarkerWidth}
121+
height={height + 4}
122+
style={merge(true, barNormalStyle, { pointerEvents: "none" })}
123+
/>
124+
<text
125+
style={{
126+
pointerEvents: "none",
127+
fill: "#444",
128+
...eventLabelStyle
129+
}}
130+
x={8 + textOffsetX}
131+
y={15 + textOffsetY}
132+
>
133+
{label}
134+
</text>
135+
</g>
136+
);
137+
}
138+
139+
eventMarkers.push(
140+
<g transform={transform} key={i}>
141+
<rect
142+
className="eventchart-marker"
143+
x={x}
144+
y={y}
145+
width={width}
146+
height={height}
147+
style={barStyle}
148+
onClick={e => this.handleClick(e, event)}
149+
onMouseLeave={() => this.onMouseLeave()}
150+
onMouseOver={e => this.onMouseOver(e, event)}
151+
/>
152+
{text}
153+
</g>
154+
);
155+
156+
i += 1;
102157
}
103-
}
104-
105-
const x = this.props.spacing;
106-
const y = 0;
107-
let width = endPos - beginPos - 2 * this.props.spacing;
108-
width = width < 0 ? 0 : width;
109-
const height = this.props.size;
110-
111-
const eventLabelStyle = {
112-
fontWeight: 100,
113-
fontSize: 11
114-
};
115-
116-
let text = null;
117-
if (isHover) {
118-
text = (
119-
<g>
120-
<rect
121-
className="eventchart-marker"
122-
x={x}
123-
y={y}
124-
width={hoverMarkerWidth}
125-
height={height + 4}
126-
style={merge(true, barNormalStyle, { pointerEvents: "none" })}
127-
/>
128-
<text
129-
style={{
130-
pointerEvents: "none",
131-
fill: "#444",
132-
...eventLabelStyle
133-
}}
134-
x={8 + textOffsetX}
135-
y={15 + textOffsetY}
136-
>
137-
{label}
138-
</text>
139-
</g>
158+
159+
return (
160+
<g>
161+
{eventMarkers}
162+
</g>
140163
);
141-
}
142-
143-
eventMarkers.push(
144-
<g transform={transform} key={i}>
145-
<rect
146-
className="eventchart-marker"
147-
x={x}
148-
y={y}
149-
width={width}
150-
height={height}
151-
style={barStyle}
152-
onClick={e => this.handleClick(e, event)}
153-
onMouseLeave={() => this.onMouseLeave()}
154-
onMouseOver={e => this.onMouseOver(e, event)}
155-
/>
156-
{text}
157-
</g>
158-
);
159-
160-
i += 1;
161164
}
162-
163-
return (
164-
<g>
165-
{eventMarkers}
166-
</g>
167-
);
168-
}
169165
}
170166

171167
EventChart.defaultProps = {
172-
size: 30,
173-
spacing: 0,
174-
textOffsetX: 0,
175-
textOffsetY: 0,
176-
hoverMarkerWidth: 5
168+
size: 30,
169+
spacing: 0,
170+
textOffsetX: 0,
171+
textOffsetY: 0,
172+
hoverMarkerWidth: 5
177173
};
178174

179175
EventChart.propTypes = {
180-
/**
176+
/**
181177
* What [Pond TimeSeries](http://software.es.net/pond#timeseries) data to visualize
182178
*/
183-
series: PropTypes.instanceOf(TimeSeries).isRequired,
184-
/**
179+
series: PropTypes.instanceOf(TimeSeries).isRequired,
180+
/**
185181
* Set hover label text
186182
* When label is function callback it will be called with current event.
187183
*/
188-
label: PropTypes.oneOfType([
189-
PropTypes.string,
190-
PropTypes.func
191-
]),
192-
/**
184+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
185+
/**
193186
* The height in pixels for the event bar
194187
*/
195-
size: PropTypes.number,
196-
/**
188+
size: PropTypes.number,
189+
/**
197190
* The distance in pixels to inset the event bar from its actual timerange
198191
*/
199-
spacing: PropTypes.number,
200-
/**
192+
spacing: PropTypes.number,
193+
/**
201194
* Marker width on hover
202195
*/
203-
hoverMarkerWidth: PropTypes.number,
204-
/**
196+
hoverMarkerWidth: PropTypes.number,
197+
/**
205198
* Hover text offset position X
206199
*/
207-
textOffsetX: PropTypes.number,
208-
/**
200+
textOffsetX: PropTypes.number,
201+
/**
209202
* Hover text offset position Y
210203
*/
211-
textOffsetY: PropTypes.number,
212-
/**
204+
textOffsetY: PropTypes.number,
205+
/**
213206
* A function that should return the style of the event box
214207
*/
215-
style: PropTypes.func,
216-
/**
208+
style: PropTypes.func,
209+
/**
217210
* Event selection on click. Will be called with selected event.
218211
*/
219-
onSelectionChange: PropTypes.func,
220-
/**
212+
onSelectionChange: PropTypes.func,
213+
/**
221214
* Mouse leave at end of hover event
222215
*/
223-
onMouseLeave: PropTypes.func,
224-
/**
216+
onMouseLeave: PropTypes.func,
217+
/**
225218
* Mouse over event callback
226219
*/
227-
onMouseOver: PropTypes.func,
228-
/**
220+
onMouseOver: PropTypes.func,
221+
/**
229222
* [Internal] The timeScale supplied by the surrounding ChartContainer
230223
*/
231-
timeScale: PropTypes.func,
232-
/**
224+
timeScale: PropTypes.func,
225+
/**
233226
* [Internal] The width supplied by the surrounding ChartContainer
234227
*/
235-
width: PropTypes.number
228+
width: PropTypes.number
236229
};

0 commit comments

Comments
 (0)