-
Notifications
You must be signed in to change notification settings - Fork 283
/
Index.js
149 lines (133 loc) · 5.11 KB
/
Index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/**
* Copyright (c) 2016, The Regents of the University of California,
* through Lawrence Berkeley National Laboratory (subject to receipt
* of any required approvals from the U.S. Dept. of Energy).
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
/* eslint max-len:0 */
import React from "react";
// Pond
import { TimeSeries, TimeRange, IndexedEvent, Collection } from "pondjs";
// Imports from the charts library
import ChartContainer from "../../../../../components/ChartContainer";
import ChartRow from "../../../../../components/ChartRow";
import Charts from "../../../../../components/Charts";
import YAxis from "../../../../../components/YAxis";
import BoxChart from "../../../../../components/BoxChart";
import Resizable from "../../../../../components/Resizable";
import styler from "../../../../../js/styler";
import nyc_docs from "./nyc_docs.md";
import nyc_thumbnail from "./nyc_thumbnail.png";
// Data
import weather from "./knyc.json";
const style = styler([{ key: "temp", color: "steelblue", width: 1, opacity: 0.5 }]);
//
// Extract data from CSV file
//
const name = "KNYC";
const events = weather.map(item => {
const { date, actual_min_temp, actual_max_temp, record_min_temp, record_max_temp } = item;
return new IndexedEvent(
date,
{
temp: [
+record_min_temp, //eslint-disable-line
+actual_min_temp, //eslint-disable-line
+actual_max_temp, //eslint-disable-line
+record_max_temp //eslint-disable-line
]
},
false
);
});
const collection = new Collection(events);
const series = new TimeSeries({ name, collection });
//
// Styles
//
class nyc extends React.Component {
//eslint-disable-line
state = {
timerange: new TimeRange([1425168000000, 1433116800000]),
selection: null
};
handleTimeRangeChange = timerange => {
this.setState({ timerange });
};
infoValues = () => {
if (this.state.highlight) {
return [
{
label: "day min",
value: `${this.state.highlight.get("innerMin")}°F`
},
{
label: "day max",
value: `${this.state.highlight.get("innerMax")}°F`
},
{
label: "all-time min",
value: `${this.state.highlight.get("outerMin")}°F`
},
{
label: "all-time max",
value: `${this.state.highlight.get("outerMax")}°F`
}
];
}
return null;
};
render() {
return (
<div>
<div className="row">
<div className="col-md-12">
<Resizable>
<ChartContainer
utc={false}
timeRange={this.state.timerange}
enablePanZoom={true}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
>
<ChartRow height="300">
<Charts>
<BoxChart
axis="temp"
style={style}
column="temp"
series={series}
info={this.infoValues()}
infoWidth={130}
infoHeight={75}
highlighted={this.state.highlight}
onHighlightChange={highlight =>
this.setState({ highlight })
}
selected={this.state.selection}
onSelectionChange={selection =>
this.setState({ selection })
}
/>
</Charts>
<YAxis
id="temp"
label="Temperature"
min={0}
max={120}
width="70"
/>
</ChartRow>
</ChartContainer>
</Resizable>
</div>
</div>
</div>
);
}
}
// Export example
export default { nyc, nyc_docs, nyc_thumbnail };