管理画面で必要な機能と言えばデータをメンテナンスする機能と、主なKPIやシステムのトラフィックを確認できるグラフ機能です。しかしメンテナンスは簡単に実現できてもグラフは意外と面倒で後回しになったり、CSVでダウンロードしてExcelで作るなんて状態になっているのではないでしょうか。 そこで使ってみたいのがjust-dashboardです。設定ファイルとデータの二つでダッシュボードを生成します。

just-dashboardの使い方

just-dashboardの設定ファイルです。YAMLまたはJSON形式で記述します。

dashboard "Food":
  - h1 text: Food
  - h2 text: By caloric content
  - 3 columns:
    - rows:
      - h3 text: Bananas
      - pie chart: {
          "columns": [
            ["Protein", 5], ["Sugar", 10], ["Other carbs", 40], ["Fat", 1]
          ]
        }
    - rows:
      - h3 text: Tofu
      - pie chart: {
          "columns": [
            ["Protein", 30], ["Sugar", 0], ["Other carbs", 40], ["Fat", 3]
          ]
        }
    - rows:
      - h3 text: Peanut butter
      - pie chart: {
          "columns": [
            ["Protein", 20], ["Sugar", 2], ["Other carbs", 20], ["Fat", 50]
          ]
}

この設定ファイルを読み込むとグラフ化してくれます。

マウスオーバーなどのイベントも実装されています。

データはURLで指定もできます。

dashboard "Food":
  - h1 text: Food
  - h2 text: By caloric content
  - 3 columns:
    - attr:query: '[to_entries | .[] | {"component": "rows", "data": [
      {"component": "text", "args": {"tagName": "h3"}, "data": .key},
      {"component": "chart", "args": {"type": "pie"}, "data": {"columns": .value}}
    ]}]'
    - data: https://gist.githubusercontent.com/kantord/2b2e3b22cb70be0415a7d50c395fa411/raw/47542f8a3db0d65aeeb48e28ddfaa8feabbc72b5/nutri.json

just-dashboardを使えばデータをAPI形式で提供するだけで表示側は自動で行ってくれるようになります。定期的に表示を更新すればリアルタイムダッシュボードのできあがりです。管理画面の提供時に使っていきたいソフトウェアではないでしょうか。

just-dashboardはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

kantord/just-dashboard: Create dashboards using YAML/JSON files