A dashboard built with Angular Dashboard Framework and Firebase. It shows data from json, markdown files and iframes, but does not serve as a data storage / aggregation. Simple charts using D3 and C3.
JavaScript HTML CSS
Clone or download
Pull request Compare This branch is 39 commits ahead, 220 commits behind angular-dashboard-framework:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
dist
e2e
src
.bowerrc
.editorconfig
.gitattributes
.gitignore
.gitmodules
.jshintrc
LICENSE.md
README.md
bower.json
git
gulpfile.js
index.html
package.json
protractor.conf.js

README.md

Fireboard

A dashboard built with Angular Dashboard Framework and Firebase. It shows data from json, markdown files and iframes, but does not serve as a data storage / aggregation. Simple charts using D3 and C3.

Demo

A live demo can be viewed here.

Setup

Install

Install bower and grunt:

npm install -g bower
npm install -g gulp

Clone the repository:

git clone https://github.com/simonbuechi/angular-firebase-dashboard
cd angular-firebase-dashboard

Install npm and bower dependencies:

npm install
bower install

Firebase setup

  1. Create account on http://www.firebase.com
  2. Create new app
  3. Replace firebase URL in scripts/app.js
.value('firebaseUrl', 'https://YOUR_APP.firebaseio.com')
.value('firebaseDashboardsUrl', 'https://YOUR_APP.firebaseio.com/dashboards/')
  1. Set security rules in your Firebase app:
{
  "rules": {
    "users": {
      "$user_id": {
        ".write": "$user_id === auth.uid",
        ".read": "$user_id === auth.uid"
      }
    },
    "public": {
    	".read": true,
      ".write": "auth != null"
    }
  }
}

Run

You can start the sample dashboard, by using the serve gulp task:

gulp serve

Now you open the sample in your browser at http://localhost:9001/sample

Or you can create a release build of angular-dashboard-framework and the samples:

gulp all

The sample and the final build of angular-dashboard-framework are now in the dist directory.

Implementation

Currently implemented data sources

  • RSS feed
  • JSON
  • .md file
  • directly entered (markdown) text
  • URL, shown as iframe

Widgets

  • markdown (text or file)
  • iframe (url)
  • news (rss)
  • data/numbers (json)
  • chart (json)

ToDo / Issues

  • Clean implementation of widgets as submodules
  • Make chart and edit widget editable via UI
  • More efficient data queries to/from Firebase
  • Submodules (widgets) are not loaded properly, sometimes. As a workaround, use git command (e.g. git submodule add https://github.com/simonbuechi/adf-widget-markdown app/widgets/markdown)