Connect With Us

Building awesome ruby dashboard using dashing.io because it’s-cool.

By Kapil Raj Nakhwa on Mar, 16, 2016 in ruby

On one of the unofficial meet ups for rubynepal where we were going through our usual beer round when our conversation turned towards office set ups, One of our good friend Jonathan Clarke from vayu (http://www.vayu.com.au/) suggested a cool idea to have a dashboard in office to view some key metrics on the performance of the teams. Now obviously , If it was dashboard it had to be visible on the office workspace and had to be on center of our working hall where every one from the team could have a better view of it. Also it had to be auto updates with metrics as it changed. We ran through several options and landed on dashing.io from shopify . It was simple and was easy to implement and we were like okay so let’s give it a spin. Landed up on dashing.io page and was pretty straight forward from there. Added some widgets and there it is, your new dashboard. 

    

Getting Start :

Dashing is a simple sinatra based web application. So setting it up is pretty simple.

gem install dashing
dashing new jyaasa-dashboards
cd jyaasa-dashboards
bundle
dashing start

pointed our browser to http://localhost:3030 and wow!!

That was pretty easy.

So let’s dive a little deeper.


Your vanilla dashing dashboard gives you following folders. ( apart from config and the Capfile which we added later on )

          

 

Dashing.io uses sprockets to manage it’s assets .cool right .
images , fonts, coffee and sass exactly what we would’ve prefered.


In simple terms


  • Assets : your cool coffee, fonts , images, and sasy sass files.
  • Dashboards : your erb files for each of the dashboards that you would want to use.
  • Jobs : This is where you put your ruby *.rb files for fetching data . ( how awesome is that consume all api’s )
  • Lib : Usual helper files .
  • Public : error pages and stuff i guess ?
  • Widgets: Now this is where you put your widgets, Each widget is going to be a subdirectory on it’s own with your html/coffee/scss files for your widgets’ . Oh yes, that does mean each widget can be style separately .

Now here is an example of a typical dashboard you might want to have.


  •      
            <%
            require "httparty"
            url = "http://jyaasa2.emitii.com/api/projects.json?access_token=(token no)"
            response = HTTParty.get(url)
            projects = response["projects"]
            %>
            <% content_for(:title) { "Dashboard" } %>
              <div class="gridster">
                <ul>
                  <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
                    <div data-id="emitii_count" data-view="Number" data-title="Hours Tracked on Emitii" data-prefix="">
                    </div>
                  </li>
                </ul>
              </div>
         

       

Notice the data attributes ? Those are indeed special . Here’s what they do.


  • Data-id : Now this would be your widget id. Don’t worry about having it unique
  • Data-view : And this would be your view there are some prebuilt ones like Number, Clock, Text, Synergy, List etc . But you can add up as you prefer. Like in below we have added our quote and weather widgets.

     


Like we said earlier, Widgets would just be a mix of html/coffee and scss files. Here is what is composed of.

 

quote.html

 

      <h1 class="title" data-bind="title"></h1>
      <h3 data-bind="text"></h3>
      <p class="more-info" data-bind="moreinfo"></p>
      <p class="updated-at" data-bind="updatedAtMessage"></p>

 

quote.scss 

 

          //Sass declarations
          $background-color:  #9c4274;
          $title-color:       rgba(255, 255, 255, 0.7);
          $moreinfo-color:    rgba(255, 255, 255, 0.7);
        // Widget-quote styles
          .widget-quote {
            background: $background-color url('/assets/quote.png') no-repeat 50% 50%;
            .title {
              color: $title-color;
            }
            .more-info {
              color: $moreinfo-color;
            }
            .updated-at {
              color: rgba(0, 0, 0, 0.3);
            }
            h3 {
              position: relative;
              z-index: 1;
            }
            &.large h3 {
              font-size: 65px;
            }
          }
          quote.coffee
          class Dashing.Quote extends Dashing.Widget

 


The widget uses what’s called as nana-nana-nana-nana BATMAN !! yes batman js (http://batmanjs.org/) . I know it is no longer supported . Because it is not the hero gotham deserve but the hero gotham needs. But you can check out batman binding docs here for reference http://batmanjs.org/docs/api/batman.view_bindings.html

The cool thing is whenever the widget receives JSON data it automatically updates it into itself. And you handle the data fetch in your job files

 

here’s jobs/quote.rb
  require 'net/http'
  require 'uri'
  require 'json'
  server = "http://api.forismatic.com"
  SCHEDULER.every '10s', :first_in => 0 do |job|
    url = URI.parse("#{server}/api/1.0/?method=getQuote&key=&format=json&lang=en")
    req = Net::HTTP::Get.new(url.to_s)
    res = Net::HTTP.start(url.host, url.port) {|http|
      http.request(req)
    }
    # Convert to JSON
    j = JSON[res.body]
    # Update the dashboard
    send_event("quote", { text: j['quoteText'], moreinfo: j['quoteAuthor'] })
  end

 

Notice the line send_event("quote", { text: j['quoteText'], moreinfo: j['quoteAuthor'] }) It is automatically updating the widget with it “quote” with the updated data.

Deployment ? Normal Capistrano recipe should do that job to get the code to the server. For nginx you can use proxy pass and start the dashing with a monitored script or even a detached screen. Here’s a simple conf we are using for nginx.

 

server {
          listen       80;
          server_name
dashboard.jyaasa.com;
          root /home/deployer/www/jyaasa-dashboard/current/public;
        location /{
        proxy_pass
http://127.0.0.1:3030;
        }
      }

   

 

There you now Know. What would you build with it ? . Feel free to get in touch .


References :   http://dashing.io/

 

Share This:

Comments

ShanSaulp
Prescription Drug Cephalexin Cialis Generique Pharmacie En Ligne Amoxicillin Breastfeeding buy cialis Bactrim Online Up Levitra
 November 30, 2017
Manjinder
 March 03, 2018
Michael E
I am web developer and i work for edubirdie basically we have a team with different works,this information is very important for us and we keep in this mind. thanks,
 March 03, 2018

Add a new comment

Latest Posts


Encrypted secrets in Ruby on Rails By Rasna Shakya on Apr, 20, 2018

Rails Payment Integration with zipPay (Buy Now and Pay Later) By Nelson Suwal on Mar, 23, 2018

Getting started with React Native: Core Architecture of React Native By Aman Maharjan on Dec, 15, 2017

First Step to Software Development: Design Thinking Process By Rasna Shakya on Nov, 03, 2017

Bourbon By Rasna Shakya on Oct, 20, 2017