Skip to content

Commit 82cdd16

Browse files
hsbthsbt
authored
Merge pull request #2970 from gotoken/2965-timeline-chart
Add branch lifecycle timeline charts
2 parents da45290 + 8bdd8bb commit 82cdd16

File tree

6 files changed

+194
-3
lines changed

6 files changed

+194
-3
lines changed

‎_data/branches.yml

+12
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,71 @@
1111
- name: 3.2
1212
status: normal maintenance
1313
date: 2022-12-25
14+
security_maintenance_date:
1415
eol_date:
1516

1617
- name: 3.1
1718
status: normal maintenance
1819
date: 2021-12-25
20+
security_maintenance_date:
1921
eol_date:
2022

2123
- name: 3.0
2224
status: normal maintenance
2325
date: 2020-12-25
26+
security_maintenance_date:
2427
eol_date:
2528

2629
- name: 2.7
2730
status: security maintenance
2831
date: 2019-12-25
32+
security_maintenance_date: 2022-04-01
2933
eol_date:
3034

3135
- name: 2.6
3236
status: eol
3337
date: 2018-12-25
38+
security_maintenance_date: 2021-04-01
3439
eol_date: 2022-04-12
3540

3641
- name: 2.5
3742
status: eol
3843
date: 2017-12-25
44+
security_maintenance_date: 2020-04-01
3945
eol_date: 2021-04-05
4046

4147
- name: 2.4
4248
status: eol
4349
date: 2016-12-25
50+
security_maintenance_date: 2019-04-01
4451
eol_date: 2020-03-31
4552

4653
- name: 2.3
4754
status: eol
4855
date: 2015-12-25
56+
security_maintenance_date: 2018-03-28
4957
eol_date: 2019-03-31
5058

5159
- name: 2.2
5260
status: eol
5361
date: 2014-12-25
62+
security_maintenance_date: 2017-03-28
5463
eol_date: 2018-03-31
5564

5665
- name: 2.1
5766
status: eol
5867
date: 2013-12-25
68+
security_maintenance_date: 2016-03-31
5969
eol_date: 2017-03-31
6070

6171
- name: 2.0.0
6272
status: eol
6373
date: 2013-02-24
74+
security_maintenance_date: 2016-02-24
6475
eol_date: 2016-02-24
6576

6677
- name: 1.9.3
6778
status: eol
6879
date: 2011-10-31
80+
security_maintenance_date: 2014-02-24
6981
eol_date: 2015-02-23

‎_includes/branches-timeline.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<figure>
2+
<figcaption>
3+
<h3>Ruby Lifecycle Timelines</h3>
4+
</figcaption>
5+
<style>
6+
rect[fill="#ff0000"] {
7+
transform: translate(0,-9px);
8+
height: calc(5 * 41px);
9+
width: 1px;
10+
}
11+
</style>
12+
<div id="lifecycle-timeline" style="height: 344px"></div>
13+
</figure>
14+
15+
<script src="https://www.gstatic.com/charts/loader.js"></script>
16+
<script src="/javascripts/branch-timeline.js"></script>
17+
{% include branches.json.html %}

‎_includes/branches.json.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script type="ruby-lang-org-data" id="branches.json">
2+
[
3+
{%- assign n = 0 -%}
4+
{%- for branch in site.data.branches -%}
5+
{%- if n > 0 -%},{%- endif %}
6+
{"name":"{{ branch.name }}","status":"{{ branch.status }}","date":"{{ branch.date }}"{% if branch.security_maintenance_date %},"security_maintenance_date":"{{ branch.security_maintenance_date }}"{% endif %}{% if branch.eol_date %},"eol_date":"{{ branch.eol_date }}"{% endif %}}
7+
{%- assign n = n |plus: 1 -%}
8+
{%- endfor -%}
9+
]
10+
</script>

‎en/downloads/branches/index.md

+5-3
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,14 @@ the following phases:
3232
Only previews or release candidates have been released for
3333
this branch so far.
3434

35+
{% include branches-timeline.html %}
36+
3537
{% for branch in site.data.branches %}
3638
### Ruby {{ branch.name }}
3739

3840
status: {{ branch.status }}<br>
39-
release date: {{ branch.date }}{% if branch.eol_date %}<br>
40-
EOL date: {{ branch.eol_date }}
41-
{% endif %}
41+
release date: {{ branch.date }}<br>
42+
normal maintenance until: {% if branch.security_maintenance_date %}{{ branch.security_maintenance_date }}{% else %}TBD{% endif %}<br>
43+
EOL: {% if branch.eol_date %}{{ branch.eol_date }}{% else %}TBD{% endif %}
4244

4345
{% endfor %}

‎ja/downloads/index.md

+12
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,15 @@ Windows向けのバイナリが有志により配布されています。
8080
[railsinstaller]: http://railsinstaller.org/
8181
[rvm]: http://rvm.io/
8282
[rbenv]: https://github.com/rbenv/rbenv
83+
84+
{% include branches-timeline.html %}
85+
86+
{% for branch in site.data.branches %}
87+
### Ruby {{ branch.name }}
88+
89+
ステータス: {{ branch.status }}<br>
90+
リリース: {{ branch.date }}<br>
91+
通常メンテナンス終了: {% if branch.security_maintenance_date %}{{ branch.security_maintenance_date }}{% else %}TBD{% endif %}<br>
92+
EOL: {% if branch.eol_date %}{{ branch.eol_date }}{% else %}TBD{% endif %}
93+
94+
{% endfor %}

‎javascripts/branch-timeline.js

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
(function (){
2+
google.charts.load("current", {
3+
packages: ["timeline"]
4+
});
5+
google.charts.setOnLoadCallback(drawChart);
6+
7+
function drawChart() {
8+
const source =
9+
JSON.parse(document.getElementById("branches.json").innerHTML).slice(0, 5).reverse()
10+
.map(e => {
11+
return {
12+
...e,
13+
date: new Date(e.date),
14+
security_maintenance_date: e.security_maintenance_date ? new Date(e.security_maintenance_date) : null,
15+
eol_date: e.eol_date ? new Date(e.eol_date) : null
16+
};
17+
});
18+
const container = document.getElementById('lifecycle-timeline');
19+
const options = {
20+
timeline: {
21+
groupByRowLabel: true,
22+
showBarLabels: false
23+
},
24+
alternatingRowStyle: false,
25+
enableInteractivity: false,
26+
tooltip: {
27+
isHtml: true
28+
}
29+
};
30+
31+
container.style.height = `${50+source.length*42}px`
32+
const chart = new google.visualization.Timeline(container);
33+
const dataTable = new google.visualization.DataTable();
34+
const color_eol = '#555555';
35+
const colors = {
36+
past: {
37+
'normal maintenance': '#7f9382',
38+
'security maintenance': '#e7d9cb'
39+
},
40+
current: {
41+
'normal maintenance': '#028A0F',
42+
'security maintenance': '#F28C28'
43+
},
44+
future: {
45+
'normal maintenance': '#71b47b',
46+
'security maintenance': '#ffd58b'
47+
}
48+
}
49+
window.dt = dataTable;
50+
dataTable.addColumn({
51+
type: 'string',
52+
id: 'Version'
53+
});
54+
dataTable.addColumn({
55+
type: 'string',
56+
id: 'Status'
57+
});
58+
dataTable.addColumn({
59+
type: 'string',
60+
id: 'style',
61+
role: 'style'
62+
});
63+
dataTable.addColumn({
64+
type: 'date',
65+
id: 'Start'
66+
});
67+
dataTable.addColumn({
68+
type: 'date',
69+
id: 'End'
70+
});
71+
const today = new Date();
72+
const active = [];
73+
dataTable.addRows(source.map(e => {
74+
const name = e.name == 3 ? "3.0" : `${e.name}`;
75+
let color1 = colors.current["normal maintenance"];
76+
let color2 = colors.current["security maintenance"];
77+
const status = e.status.toUpperCase();
78+
let eol_date = e.eol_date;
79+
if (!eol_date) {
80+
eol_date = new Date(e.date.getFullYear() + 4, 2, 31);
81+
}
82+
let security_maintenance_date = e.security_maintenance_date;
83+
if (!security_maintenance_date) {
84+
security_maintenance_date = new Date(e.date.getFullYear() + 3, 2, 31);
85+
}
86+
if (security_maintenance_date < today) {
87+
color1 = colors.past["normal maintenance"];
88+
} else if (today < e.date) {
89+
color1 = colors.future["normal maintenance"];
90+
} else {
91+
active.push(name);
92+
}
93+
if (eol_date < today) {
94+
color2 = colors.past["security maintenance"];
95+
} else if (today < security_maintenance_date) {
96+
color2 = colors.future["security maintenance"];
97+
} else {
98+
active.push(name);
99+
}
100+
return [[
101+
name,
102+
"NORMAL MAINTENANCE",
103+
color1,
104+
e.date,
105+
security_maintenance_date,
106+
],[
107+
name,
108+
"SECURITY MAINTENANCE",
109+
color2,
110+
security_maintenance_date,
111+
eol_date,
112+
]];
113+
}).flat());
114+
115+
var todayColor = "#ff0000";
116+
dataTable.addRows([[source[0].name,"today",todayColor,today,today]]);
117+
118+
window.addEventListener("resize", () => {
119+
if (this.resizeTO) clearTimeout(this.resizeTO);
120+
this.resizeTO = setTimeout(() => {
121+
window.dispatchEvent(new Event('resizeEnd'));
122+
}, 500);
123+
});
124+
window.addEventListener("resizeEnd", () => {
125+
const tooltips = document.querySelectorAll(".rlo-timeline-tooltip");
126+
for(const tooltip of tooltips){tooltip.parentElement.remove();}
127+
chart.draw(dataTable, options);
128+
});
129+
google.visualization.events.addListener(chart, 'ready', ()=>{
130+
const line = document.querySelector(`rect[fill="${todayColor}"]`);
131+
line.parentElement.appendChild(line);
132+
active.forEach(a=>{
133+
$(`text:contains("${a}")`).css({"font-weight": 900});
134+
});
135+
});
136+
chart.draw(dataTable, options);
137+
}
138+
})();

0 commit comments

Comments
 (0)