Vega-liteで稼働状況グラフを作成してみた

現在ESP32とRaspberry Piを使ってNC工作機械の稼働監視を行おうとしています。
稼働監視その物はESP32のNC工作機械主軸の電流を計測することで可能なのですが、問題はその稼働状況をグラフ化するところになります。

データはRaspberry Pi上でNode-redを動かしているのでDashboardを使えば可視化はある程度できましすが、よく見かける稼働監視グラフ（横方向の積み上げグラフあるいはガントチャートの応用）を表示しようとしてつまづきました。
Dashboardそのものはchartでグラフ化は可能ですが、積み上げグラフには対応していないようです。

node-red-node-ui-vega

ライブラリを検索しているとnode-red-node-ui-vegaというノードを発見しました。
Vega（「可視化を記述する言語」を目指した物で描画ライブラリとしてはD3を使用しているようです）及びVega-lite（Vegaの文法を簡略化した物でVega用の定義ファイルを出力して描画はVegaで行います）をNode-redから使えるようにしてくれるノードのようです。非常に高機能なグラフ化ツールのようです。積み上げグラフを表示する程度ならVega-liteで十分なようです。

サンプルも豊富に用意されていますが、残念ながらx軸を時間でとった横方向の積み上げグラフのサンプルはありませんでした。（横方向の積み上げ棒グラフのサンプルはありました）
これを修正して横軸を時間にできれば出来そうです。

ところがこれでハマってしまいました。Vegaに関する日本語の解説本もなく情報が少ない上にVegaの概念がちょっと複雑なのが原因です。基本的にはデータをチャネルという概念でデータ変換（データドメインから表示ドメインへ変換）して表示用の修飾を行って可視化（グラフ表示）するという考え方のようです。

Vega-liteによる稼働状況グラフ

結局数日かけた結果が以下のソースになります。Vega-Editorをブラウザで表示してコピペをするとどのように表示されるか見ることが出来ます。
このサイトを使えば自分で表示したいグラフのテストが簡単に出来るので開発もスムーズに出来ます。

{
  "config": {
      "legend": { "disable": true }
  },
  "width": 600,
  "height": 100,
  "data": {
    "values": [
      {"machine": "machine01", "start": "2021-04-01 08:30:00", "end": "2021-04-01 10:00:00", "color": "#ff0000"},
      {"machine": "machine01", "start": "2021-04-01 10:00:00", "end": "2021-04-01 11:15:00", "color": "#00ff00"},
      {"machine": "machine01", "start": "2021-04-01 12:00:00", "end": "2021-04-01 13:00:00", "color": "#ff00ff"},
      {"machine": "machine01", "start": "2021-04-01 14:00:00", "end": "2021-04-01 16:42:00", "color": "#0000ff"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {"field": "machine", "title": null},
    "x": {
      "field": "start",
      "timeUnit": "hoursminutes",
      "scale": {
        "domain": [{"hours": 8}, {"hours": 19}]
      },      
      "title": null
    },
    "x2": {
      "field": "end",
      "timeUnit": "hoursminutes"
    },
    "color": {
      "legend": {"disable": true, "title": null, "values": [ "" ]},
      "field": "color",
      "scale": {
          "range": {"field": "color"}
      }
    }
  }
}