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](https://qiita-image-store.s3.amazonaws.com/0/49910/12241bc0-d879-0aa4-3765-9f18c6228e9b.png)




## 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](https://qiita-image-store.s3.amazonaws.com/0/49910/53336b62-eef9-8eeb-20e1-c5b51cffe534.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/533136a7-489f-d30a-5d55-d6d60dd6647d.png)


## 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](https://qiita-image-store.s3.amazonaws.com/0/49910/b861566e-ba8b-06fc-61ee-a439eae40bf4.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/4a695afc-252e-6c16-e23a-57fe4eec9d90.png)


## mdbootstrap
https://mdbootstrap.com/angular/

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


![image](https://qiita-image-store.s3.amazonaws.com/0/49910/5d4b03ae-2106-0b78-3d89-4bb0ff278723.png)


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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/27003cb5-9b82-1bea-5011-a235e7ebb610.png)



## Dazzle
http://raathigesh.com/dazzle/#

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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/8e06665a-04b3-fd44-de81-e2e54f5e8b4f.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/f3682571-0041-1ba4-888f-7d4122432a45.png)





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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/16806b12-5d6f-70da-a656-9e8302023bd6.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/ea02ea7d-d2f4-3dc1-df2d-1836dbfaff19.png)


## angular-widget-grid

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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/a2a32429-61da-25cc-02d1-9316a41bc037.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/167fd777-63f6-95c5-f34b-f9f1dcc1ec55.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/0fa0ad64-11ce-1813-c987-21cf64aec51c.png)


## Dashboards by Keen IO
https://keen.github.io/dashboards/

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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/749bf203-f624-2b5f-b336-539885d5c868.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/3796f45f-82d5-820c-01a2-777e9ade2242.png)

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/e13e54a0-8bea-31b4-0683-2335550ee886.png)



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

angularベースです
ユーザー側で位置は変えれないようですが、
ダッシュボードレイアウト機能は揃えています。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/77c3397d-704a-3048-9e82-443291834306.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/4eed4b20-0bc2-c663-bd14-a8362dadbbf6.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/20c7eb11-e66a-7b88-afd3-7f7940a1e4cc.png)

## Angular Dashboard
https://codepen.io/sathishlxg/pen/dYRZxy

これはソースを見つける事ができませんでしたが、
ユーザーが自由にレイアウトを変えれるダッシュボードです。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/a32a886e-089b-6745-a92e-3e5eaeae6eba.png)






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

UIがクール

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d738626e-5775-98ac-90af-82f2fb070951.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d5c786c1-2ef3-ad54-25db-93ee34e8b158.png)


## CoreUI
https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template
http://coreui.io/demo/Ajax_Demo/#main.html
デモ：Bootstrap Admin Template
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/9a90b928-81c2-ec26-438d-7da2f388d66d.png)



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

real-time web log analyzer
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/8d493d34-68bb-5677-4ee3-6f3904095081.png)






## Metabase

https://github.com/metabase/metabase

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

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/81733e17-2128-d4de-218c-c2e993880ccf.png)



## 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](https://qiita-image-store.s3.amazonaws.com/0/49910/2dcabf5a-6ba7-30e0-44be-2e3d35a80c49.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/6b782962-3e23-4b16-aed1-e56e8969e224.png)

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