dashbord

Dashboard framework メモ

各種JSベースのダッシュボードを調査しました。

一長一短、選択も楽しく難しいです。

ngx-admin

https://github.com/akveo/ngx-admin
http://akveo.com/ngx-admin/

blur-adminの後継でAngular4版(2017/9/22)公開
だいぶ雰囲気が変わってしまいました。

開発陣のメッセージに、「開発を諦めたと思ったでしょ」というのがあるくらい、
ngxを創るのが大変だったようです。
https://www.akveo.com/blog/post-release-of-ngx-admin-and-nebular-in-a-nutshell/

image

angular-dashboard-framework

https://github.com/angular-dashboard-framework/angular-dashboard-framework
デモ:http://angular-dashboard-framework.github.io/angular-dashboard-framework/#/sample/01

angular1.x ベースのダッシュボードです。
ウィジェットもAngularのmoduleを追加する形で作っていきます。
それぞれのパーツが一つのウィジェットになっており、
サンプルではそれぞれがリポジトリ管理されていました。

ユーザーが位置を自由に変更することができます。またウィジェットを追加も可能にする事ができます。

image

image

blur-admin

https://www.akveo.com/products.html
https://github.com/akveo/blur-admin
デモ: http://akveo.com/blur-admin-mint/#/dashboard

Angular1ベースのテンプレート
キレイなテンプレートが特徴です
ダッシュボード、チャートなどのテンプレートが揃っています。
ひととおりなんでもできそうな感じです。
ユーザー側でレイアウトを自由に変えれる機能は無さそうです。
起動がちょっと遅い気がします。

現在、Angular2バージョンも開発中のようです。
https://www.akveo.com/ng2-admin/

image

image

mdbootstrap

https://mdbootstrap.com/angular/

AngularやReactベースでも提供があるmdbootstrap
マテリアルデザインをベースとしたコンポーネントを提供しています。
Facebook等でも積極的に情報をUPしています。
一部の機能は有料のPro版を購入する必要あり。
サイドナビゲーションを使いたければProを購入
https://mdbootstrap.com/product/material-design-for-bootstrap-pro/

image

puikinsh/gentelella

https://github.com/puikinsh/gentelella
https://colorlib.com/polygon/gentelella/index.html

image

Dazzle

http://raathigesh.com/dazzle/#

Reactベースのダッシュボード
Edit機能で位置変更やウィジェットの追加などが行えるようです。

image

image

propeller.in

http://propeller.in
http://propeller.in/templates/admin-dashboard/index.html
https://github.com/digicorp/propeller/
ダッシュボード、UIエレメント、フォーム、テーブル等のテンプレートが用意されてます。

image
image

angular-widget-grid

https://github.com/patbuergin/angular-widget-grid
ユーザー位置可変:可、格子状に配置

image
image

image

Dashboards by Keen IO

https://keen.github.io/dashboards/

keenのダッシュボード
ユーザー位置可変:不可

image

image

jif-dashboard

https://github.com/jpmorganchase/jif-dashboard
デモ: https://jpmorganchase.github.io/jif-dashboard/demo/

シンプルな感じのダッシュボードです。
ユーザー側でウィジェットを消したり追加したりができるようです。

image

Rdash-angular

https://github.com/rdash/rdash-angular
デモ: http://rdash.github.io/#/

angularベースです
ユーザー側で位置は変えれないようですが、
ダッシュボードレイアウト機能は揃えています。
image

Dashing

http://dashing.io/
https://github.com/Shopify/dashing
デモ: http://dashingdemo.herokuapp.com/sample
ユーザー側で位置を自由に変えれるダッシュボードUIです。
画面いっぱいに情報を出したい時にはいいと思います。
IE11では動きませんでした。

image

image

Angular Dashboard

https://codepen.io/sathishlxg/pen/dYRZxy

これはソースを見つける事ができませんでしたが、
ユーザーが自由にレイアウトを変えれるダッシュボードです。
image

Freeboards

https://freeboard.io/
https://github.com/Freeboard/freeboard
デモ:http://freeboard.github.io/freeboard/

UIがクール

image

image

CoreUI

https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template
http://coreui.io/demo/Ajax_Demo/#main.html
デモ:Bootstrap Admin Template
image

goaccess

https://github.com/allinurl/goaccess
https://goaccess.io/?src=gh
デモ:http://rt.goaccess.io/?20170729002319

real-time web log analyzer
image

Metabase

https://github.com/metabase/metabase

これはダッシュボードなのかよくわかりませんでした
herokuに簡単にビルドできるようなので試してみました。
https://metabasedashboardgdf.herokuapp.com/

image

DevOOPS

https://github.com/nnmware/devoops
デモ:デモサイトは消滅してました。

キレイなダッシュボードです。
チャートもひととおり揃っています。

http://www.moongift.jp/2015/02/devoops-%E5%A4%9A%E6%95%B0%E3%81%AE%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%82%92%E7%94%A8%E6%84%8F%E3%81%97%E3%81%9Fbootstrap%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2/

image

image

更新が3年前から途絶えているのが気になるところです。
デモサイトも消滅していることから、使うのはためらってしまいます。