Connect With Us

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

By Kapil Raj Nakhwa on Nov, 10, 2017 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


Add a new comment

Latest Posts


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

Bourbon By Rasna Shakya on Oct, 20, 2017

Design Sprint By Neha Suwal on Aug, 14, 2017

3 years of helping startups and entrepreneurs with technology By Neha Suwal on Aug, 04, 2017

Digital Marketing for Startups By Neha Suwal on Jun, 30, 2017