-
Notifications
You must be signed in to change notification settings - Fork 240
/
demo.js
92 lines (81 loc) · 2.84 KB
/
demo.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
import * as d3 from 'd3/build/d3';
import eventDrops from '../src';
import '../src/style.css';
import { gravatar, humanizeDate } from './utils';
const repositories = require('./data.json');
const numberCommitsContainer = document.getElementById('numberCommits');
const zoomStart = document.getElementById('zoomStart');
const zoomEnd = document.getElementById('zoomEnd');
const updateCommitsInformation = chart => {
const filteredData = chart
.filteredData()
.reduce((total, repo) => total.concat(repo.data), []);
numberCommitsContainer.textContent = filteredData.length;
zoomStart.textContent = humanizeDate(chart.scale().domain()[0]);
zoomEnd.textContent = humanizeDate(chart.scale().domain()[1]);
};
const tooltip = d3
.select('body')
.append('div')
.classed('tooltip', true)
.style('opacity', 0)
.style('pointer-events', 'auto');
const chart = eventDrops({
d3,
zoom: {
onZoomEnd: () => updateCommitsInformation(chart),
},
drop: {
date: d => new Date(d.date),
onMouseOver: commit => {
tooltip
.transition()
.duration(200)
.style('opacity', 1)
.style('pointer-events', 'auto');
tooltip
.html(
`
<div class="commit">
<img class="avatar" src="${gravatar(
commit.author.email
)}" alt="${commit.author.name}" title="${
commit.author.name
}" />
<div class="content">
<h3 class="message">${commit.message}</h3>
<p>
<a href="https://www.github.com/${
commit.author.name
}" class="author">${commit.author.name}</a>
on <span class="date">${humanizeDate(
new Date(commit.date)
)}</span> -
<a class="sha" href="${
commit.sha
}">${commit.sha.substr(0, 10)}</a>
</p>
</div>
`
)
.style('left', `${d3.event.pageX - 30}px`)
.style('top', `${d3.event.pageY + 20}px`);
},
onMouseOut: () => {
tooltip
.transition()
.duration(500)
.style('opacity', 0)
.style('pointer-events', 'none');
},
},
});
const repositoriesData = repositories.map(repository => ({
name: repository.name,
data: repository.commits,
}));
d3
.select('#eventdrops-demo')
.data([repositoriesData])
.call(chart);
updateCommitsInformation(chart);