Add branch lifecycle timeline charts

_data/branches.yml

@@ -11,59 +11,71 @@
 - name: 3.2
   status: normal maintenance
   date: 2022-12-25
+  security_maintenance_date: 
   eol_date:
 
 - name: 3.1
   status: normal maintenance
   date: 2021-12-25
+  security_maintenance_date: 
   eol_date:
 
 - name: 3.0
   status: normal maintenance
   date: 2020-12-25
+  security_maintenance_date: 
   eol_date:
 
 - name: 2.7
   status: security maintenance
   date: 2019-12-25
+  security_maintenance_date: 2022-04-01
   eol_date:
 
 - name: 2.6
   status: eol
   date: 2018-12-25
+  security_maintenance_date: 2021-04-01
   eol_date: 2022-04-12
 
 - name: 2.5
   status: eol
   date: 2017-12-25
+  security_maintenance_date: 2020-04-01
   eol_date: 2021-04-05
 
 - name: 2.4
   status: eol
   date: 2016-12-25
+  security_maintenance_date: 2019-04-01
   eol_date: 2020-03-31
 
 - name: 2.3
   status: eol
   date: 2015-12-25
+  security_maintenance_date: 2018-03-28
   eol_date: 2019-03-31
 
 - name: 2.2
   status: eol
   date: 2014-12-25
+  security_maintenance_date: 2017-03-28
   eol_date: 2018-03-31
 
 - name: 2.1
   status: eol
   date: 2013-12-25
+  security_maintenance_date: 2016-03-31
   eol_date: 2017-03-31
 
 - name: 2.0.0
   status: eol
   date: 2013-02-24
+  security_maintenance_date: 2016-02-24
   eol_date: 2016-02-24
 
 - name: 1.9.3
   status: eol
   date: 2011-10-31
+  security_maintenance_date: 2014-02-24
   eol_date: 2015-02-23

_includes/branches-timeline.html

@@ -0,0 +1,17 @@
+<figure>
+  <figcaption>
+    <h3>Ruby Lifecycle Timelines</h3>
+  </figcaption>
+  <style>
+    rect[fill="#ff0000"] {
+      transform: translate(0,-9px);
+      height: calc(5 * 41px);
+      width: 1px;
+    }
+  </style>
+  <div id="lifecycle-timeline" style="height: 344px"></div>
+</figure>
+
+<script src="https://www.gstatic.com/charts/loader.js"></script>
+<script src="/javascripts/branch-timeline.js"></script>
+{% include branches.json.html %}

_includes/branches.json.html

@@ -0,0 +1,10 @@
+<script type="ruby-lang-org-data" id="branches.json">
+[
+{%- assign n = 0 -%}
+{%- for branch in site.data.branches -%}
+  {%- if n > 0 -%},{%- endif %}
+  {"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 %}}
+  {%- assign n = n |plus: 1 -%}
+{%- endfor -%}
+]
+</script>

en/downloads/branches/index.md

@@ -32,12 +32,14 @@ the following phases:
   Only previews or release candidates have been released for
   this branch so far.
 
+{% include branches-timeline.html %}
+
 {% for branch in site.data.branches %}
 ### Ruby {{ branch.name }}
 
 status: {{ branch.status }}<br>
-release date: {{ branch.date }}{% if branch.eol_date %}<br>
-EOL date: {{ branch.eol_date }}
-{% endif %}
+release date: {{ branch.date }}<br>
+normal maintenance until: {% if branch.security_maintenance_date %}{{ branch.security_maintenance_date }}{% else %}TBD{% endif %}<br>
+EOL: {% if branch.eol_date %}{{ branch.eol_date }}{% else %}TBD{% endif %}
 
 {% endfor %}

ja/downloads/index.md

@@ -80,3 +80,15 @@ Windows向けのバイナリが有志により配布されています。
 [railsinstaller]: http://railsinstaller.org/
 [rvm]: http://rvm.io/
 [rbenv]: https://github.com/rbenv/rbenv
+
+{% include branches-timeline.html %}
+
+{% for branch in site.data.branches %}
+### Ruby {{ branch.name }}
+
+ステータス: {{ branch.status }}<br>
+リリース: {{ branch.date }}<br>
+通常メンテナンス終了: {% if branch.security_maintenance_date %}{{ branch.security_maintenance_date }}{% else %}TBD{% endif %}<br>
+EOL: {% if branch.eol_date %}{{ branch.eol_date }}{% else %}TBD{% endif %}
+
+{% endfor %}

javascripts/branch-timeline.js

@@ -0,0 +1,138 @@
+(function (){
+  google.charts.load("current", {
+    packages: ["timeline"]
+  });
+  google.charts.setOnLoadCallback(drawChart);
+
+  function drawChart() {
+    const source =
+      JSON.parse(document.getElementById("branches.json").innerHTML).slice(0, 5).reverse()
+      .map(e => {
+        return {
+          ...e,
+          date: new Date(e.date),
+          security_maintenance_date: e.security_maintenance_date ? new Date(e.security_maintenance_date) : null,
+          eol_date: e.eol_date ? new Date(e.eol_date) : null
+        };
+      });
+    const container = document.getElementById('lifecycle-timeline');
+    const options = {
+      timeline: {
+        groupByRowLabel: true,
+        showBarLabels: false
+      },
+      alternatingRowStyle: false,
+      enableInteractivity: false,
+      tooltip: {
+        isHtml: true
+      }
+    };
+
+    container.style.height = `${50+source.length*42}px`
+    const chart = new google.visualization.Timeline(container);
+    const dataTable = new google.visualization.DataTable();
+    const color_eol = '#555555';
+    const colors = {
+      past: {
+        'normal maintenance': '#7f9382',
+        'security maintenance': '#e7d9cb'
+      },
+      current: {
+        'normal maintenance': '#028A0F',
+        'security maintenance': '#F28C28'
+      },
+      future: {
+        'normal maintenance': '#71b47b',
+        'security maintenance': '#ffd58b'
+      }
+    }
+    window.dt = dataTable;
+    dataTable.addColumn({
+      type: 'string',
+      id: 'Version'
+    });
+    dataTable.addColumn({
+      type: 'string',
+      id: 'Status'
+    });
+    dataTable.addColumn({
+      type: 'string',
+      id: 'style',
+      role: 'style'
+    });
+    dataTable.addColumn({
+      type: 'date',
+      id: 'Start'
+    });
+    dataTable.addColumn({
+      type: 'date',
+      id: 'End'
+    });
+    const today = new Date();
+    const active = [];
+    dataTable.addRows(source.map(e => {
+      const name = e.name == 3 ? "3.0" : `${e.name}`;
+      let color1 = colors.current["normal maintenance"];
+      let color2 = colors.current["security maintenance"];
+      const status = e.status.toUpperCase();
+      let eol_date = e.eol_date;
+      if (!eol_date) {
+        eol_date = new Date(e.date.getFullYear() + 4, 2, 31);
+      }
+      let security_maintenance_date = e.security_maintenance_date;
+      if (!security_maintenance_date) {
+        security_maintenance_date = new Date(e.date.getFullYear() + 3, 2, 31);
+      }
+      if (security_maintenance_date < today) {
+        color1 = colors.past["normal maintenance"];
+      } else if (today < e.date) {
+        color1 = colors.future["normal maintenance"];
+      } else {
+        active.push(name);
+      }
+      if (eol_date < today) {
+        color2 = colors.past["security maintenance"];
+      } else if (today < security_maintenance_date) {
+        color2 = colors.future["security maintenance"];
+      } else {
+        active.push(name);
+      }
+      return [[
+        name,
+        "NORMAL MAINTENANCE",
+        color1,
+        e.date,
+        security_maintenance_date,
+      ],[
+        name,
+        "SECURITY MAINTENANCE",
+        color2,
+        security_maintenance_date,
+        eol_date,
+      ]];
+    }).flat());
+
+    var todayColor = "#ff0000";
+    dataTable.addRows([[source[0].name,"today",todayColor,today,today]]);
+
+    window.addEventListener("resize", () => {
+      if (this.resizeTO) clearTimeout(this.resizeTO);
+      this.resizeTO = setTimeout(() => {
+        window.dispatchEvent(new Event('resizeEnd'));
+      }, 500);
+    });
+    window.addEventListener("resizeEnd", () => {
+      const tooltips = document.querySelectorAll(".rlo-timeline-tooltip");
+      for(const tooltip of tooltips){tooltip.parentElement.remove();}
+      chart.draw(dataTable, options);
+    });
+    google.visualization.events.addListener(chart, 'ready', ()=>{
+      const line = document.querySelector(`rect[fill="${todayColor}"]`);
+      line.parentElement.appendChild(line);
+      active.forEach(a=>{
+        $(`text:contains("${a}")`).css({"font-weight": 900});
+      });
+    });
+    chart.draw(dataTable, options);
+  }
+})();