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
Pull request Compare This branch is 39 commits ahead, 218 commits behind angular-dashboard-framework:master.

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)