Kiteboard

A gem to make creating dynamic dashboards easy

Sponsored by tworedkites.

Installation

Add this line to your application's Gemfile:

gem 'kiteboard', git: 'https://github.com/Mbuckley0/kiteboard.git', branch: :master

And then execute:

$ bundle

Then add this line to your application.js file

//= require kiteboard

Then add this line to your application.css file

*= require kiteboard

Usage

To setup a dashboard you will need a javascript file, a controller and a html page. Following is some example code to create a dashboard with a single number widget.

Controller

class DashboardController < ApplicationController
  def index
    kites = Kite.all

    respond_to do |format|
      format.html
      format.json do
        render json: { 'total-kite-amount' => kites.count }
      end
    end
  end
end

Javascript

$(function () {
  'use strict';
  window.Dashboard = {
    init: function() {
      setTimeout(function() {
        Dashboard.getData();
        Dashboard.init();
      }, 15000);
    },

    getData: function () {
      $.getJSON($(location).attr('href')+'.json').then(function (data) {
        Kiteboard.updateWidgets(data);
      });
    }
  };
});

HTML

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" id="total-kite-amount" data-widget="Number">
      <%= render 'kiteboard/number', {title: 'Total Number of Kites'} %>
    </li>
  </ul>
</div>

<script>
  $(function () {
    Kiteboard.init();
    Dashboard.init();
    Dashboard.getData();
  });
</script>

You will also need to add a line to your routes file to point to the dashboard controller

Demo

The demo app webpage for the kiteboard gem is viewable here The demo app codebase can also be viewed here

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/mbuckley0/kiteboard.

License

The gem is available as open source under the terms of the MIT License.