-
Notifications
You must be signed in to change notification settings - Fork 35
/
index.html
86 lines (74 loc) · 2.85 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>React component for d3.js calendar heatmap graph</title>
</head>
<body>
<div id="root"></div>
<!-- React Dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<!-- Dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.0/d3.min.js"></script>
<!-- Calendar Heatmap -->
<script src="dist/calendar-heatmap.min.js"></script>
<!-- Example Component -->
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props)
// Initialize random data for the demo
let now = moment().endOf('day').toDate()
let time_ago = moment().startOf('day').subtract(10, 'year').toDate()
let data = d3.timeDays(time_ago, now).map(function (dateElement, index) {
return {
date: dateElement,
details: Array.apply(null, new Array(Math.floor(Math.random() * 15))).map(function(e, i, arr) {
return {
'name': 'Project ' + Math.ceil(Math.random() * 10),
'date': function () {
let projectDate = new Date(dateElement.getTime())
projectDate.setHours(Math.floor(Math.random() * 24))
projectDate.setMinutes(Math.floor(Math.random() * 60))
return projectDate
}(),
'value': 3600 * ((arr.length - i) / 5) + Math.floor(Math.random() * 3600) * Math.round(Math.random() * (index / 365))
}
}),
init: function () {
this.total = this.details.reduce(function (prev, e) {
return prev + e.value
}, 0)
return this
}
}.init()
})
this.state = {
data: data,
color: '#cd2327',
overview: 'year',
}
}
print(val) {
console.log(val)
}
render() {
return (
<CalendarHeatmap
data={this.state.data}
color={this.state.color}
overview={this.state.overview}
handler={this.print.bind(this)}>
</CalendarHeatmap>
)
}
}
// Render calendar heatmap component
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />)
</script>
</body>
</html>