LoginSignup
54
63

More than 5 years have passed since last update.

Dashboard framework メモ

Last updated at Posted at 2017-08-24

各種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

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

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

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

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

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

image

DevOOPS

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

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

image

image

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

54
63
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
54
63