grass-generator.

作った経緯

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 });

今後

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