-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchart.html
126 lines (116 loc) · 3.56 KB
/
chart.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crypto projects complexity comparison</title>
<style>
.highcharts-figure {
min-width: 350px;
max-width: 1200px;
margin: 64px auto;
}
</style>
</head>
<body>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script type="module">
import data from "./result/res.json" assert { type: "json" };
import {
filter,
flow,
groupBy,
map,
mapValues,
reduce,
} from "./node_modules/lodash-es/lodash.js";
import Highcharts from "./node_modules/highcharts/es-modules/masters/highcharts.src.js";
import "./node_modules/highcharts/es-modules/masters/modules/data.src.js";
import "./node_modules/highcharts/es-modules/masters/modules/exporting.src.js";
import "./node_modules/highcharts/es-modules/masters/modules/export-data.src.js";
import "./node_modules/highcharts/es-modules/masters/modules/accessibility.src.js";
async function main() {
const dataKeyToColor = {
"bitcoin-core": "#e4d354",
"eth-go-ethereum": "#5885AF",
"eth-solidity": "#C3E0E5",
};
const dataKeyToName = {
"bitcoin-core": "Bitcoin Core",
"eth-go-ethereum": "Ethereum Go",
"eth-solidity": "Ethereum Solidity",
};
const dataGroupToName = {
eth: "Ethereum All Repositories",
};
const dataGroupToColor = {
eth: "#274472",
};
const seriesSingle = data.map((result) => {
return {
name: dataKeyToName[result.key],
data: result.data.map((d) => [new Date(d.date).getTime(), d.loc]),
color: dataKeyToColor[result.key],
};
});
const seriesGrouped = flow(
(d) => groupBy(d, (g) => g.group),
(d) => map(d, (val, key) => ({ group: key, data: val })),
(d) => filter(d, (g) => g.data.length >= 2),
(d) =>
map(d, (i) => {
const data = flow(
(i) => reduce(i, (acc, g) => [...acc, ...g.data], []),
(d) => groupBy(d, (i) => i.date),
(d) =>
mapValues(d, (i) => reduce(i, (acc, i) => acc + i.loc, 0)),
(d) => map(d, (loc, date) => [new Date(date).getTime(), loc])
)(i.data);
return {
name: dataGroupToName[i.group],
data,
color: dataGroupToColor[i.group],
};
})
)(data);
const series = [...seriesSingle, ...seriesGrouped];
Highcharts.chart("container", {
chart: {
height: 500,
zoomType: "x",
},
title: {
text: "Crypto Projects Complexity Comparison",
},
legend: {},
subtitle: {
text: "Complexity measured as lines of code over time",
},
height: "100",
xAxis: {
type: "datetime",
},
yAxis: {
title: {
text: "Lines of code",
},
},
plotOptions: {
line: {
lineWidth: 3,
states: {
hover: {
lineWidth: 1,
},
},
},
},
series,
});
}
main();
</script>
</body>
</html>