ソースコードから理解する技術－ＵｎｄｅｒＳｏｕｒｃｅＣｏｄｅ

手を動かす(プログラムを組む)ことで技術を理解するブログ

cal-heatmapを使ってGithubの草を再現してみる

GitHub JavaScript

Githubの草、去年は結構話題だったかと思います（いや、Githubが出来てからずっとか？w）
遅ればせながら、あの「草」をどのようにすれば作れるのかを調べてみました。

結論としてはcal-heatmapというライブラリを使えば出来ることが分かりました。
https://cal-heatmap.com/

今回はこれを使い、以下のような草をhtmlファイル一つで作ってみました。
f:id:UnderSourceCode:20190103115740p:plain

htmlファイル一つで作ってみた理由としては

  • APIからデータを取得している例が多いが、cal-heatmapを試したいだけの場合はAPIは用意したくない
  • cal-heatmapをbowerなどでローカルに持ってきている例も多いが、これも試したいでだけの場合は面倒

といったところです。

今回作成したソース

今回作成したソースは以下になります。

<html>
    <head>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
    </head>
    <body>
        <div id="sample-heatmap"></div>
    </body>
    <script type="text/javascript">
        var datas = {
            "1530370800" : 1, // 2018/07/01
            "1530457200" : 3, // 2018/07/02
            "1533049200" : 5, // 2018/08/01
            "1533135600" : 7, // 2018/08/02
            "1546268400" : 10 // 2019/01/01
        };
        var cal = new CalHeatMap();
        var now = new Date();
        cal.init({
            itemSelector: '#sample-heatmap',
            domain: "month",
            data: datas,
            domainLabelFormat: '%Y-%m',
            start: new Date(now.getFullYear(), now.getMonth() - 11),
            cellSize: 10,
            range: 12,
            legend: [1, 3, 5, 7, 10],
        });
    </script>
</html>

またGithubにも格納してあります。
https://github.com/SrcHndWng/cal-heatmap-sample

過去1年を表示するようになっているので、「datas」に格納しているデータの日付は任意の値に変えてください。
キーは日付のUnix Timestampですが、以下のサイトで算出できます。
https://url-c.com/tc/

少しソースについて解説すると

  • head部で必要なライブラリ、css等を参照
  • divタグで「草」を表示
  • JavaScriptの「datas」に表示するデータを固定値で設定
  • 「cal.init～」で草の設定

を行っています。

「datas」については先に書いたように、

  • キー = 日付のUnix Timestamp
  • 値 = commit（か何かの）回数

となります。
この値は、実運用ではAPIから取得することが多いかと思います。

「cal.init」で草のグラフの書式を設定します。

  • domainで月毎の表示
  • rangeで表示する期間（ここでは12カ月を設定）
  • legentで草の色の濃さを変えるレベルを指定

という感じです。

上記のソースで単純な「草」は実現できましたが、その他の機能を知りたければ
以下の公式ドキュメントを参考にしてみてください。
https://cal-heatmap.com/

参考サイト

http://webty.jp/staffblog/production/post-409/
https://cal-heatmap.com/