Edited at

Dashboard framework メモ

More than 1 year has passed since last update.


各種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年前から途絶えているのが気になるところです。

デモサイトも消滅していることから、使うのはためらってしまいます。