作った経緯

Github ではコントリビュートに応じて草が生える機能があります。 それを応用した自身のアプリケーションが作成したくて作りました。 canvas と svg のどちらかで生成することができて、label 等もカスタマイズ可能でです。

npm package として npm registry に登録してあるのでどなたでも使用可能です。

grass-generator

機能

以下のような json データを取得 or 作成します。

{
  "years": [
    {
      "year": "2023",
      "total": 0,
      "range": {
        "start": "2023-01-01",
        "end": "2023-12-31"
      }
    },
    {
      "year": "2022",
      "total": 360,
      "range": {
        "start": "2022-01-01",
        "end": "2022-12-31"
      }
    }
  ]
}

このデータを以下のようにライブラリを import して、API を実行するだけです。

SVG

import { drawGrassSvg } from "grass-generator";
drawGrassSvg(document.getElementById("svg"), { data });

Canvas

import { drawGrassCanvas } from "grass-generator";
drawGrassCanvas(document.getElementById("canvas"), { data });

今後

これを使ってデイリータスクの進捗計測アプリでも作ろうかなと思います。 以上！さようなら！