Multi-graph example widget for Shopify's Dashing dashboard

_mgraph.md

Multi-graph widget for Dashing

Description

Multi-graph widget for Shopify's dashing to display a comparison style graph (or stacked with a minor modification). Obviously, this is an example that is built heavily on the existing graph widget that is provided with dashing. This widget provides a more clear framework for expanding the graph for multiple series (or nodes) of data. After seeing the example code, it should be fairly easy to expand to 3 or more overlaid graphs (although colors might get tricky). And really, this is just a slightly greater use of the cool rickshaw graphs.

To use this widget:

• copy mgraph.coffee, mgraph.html and mgraph.scss into a new /widgets/mgraph folder
• copy multitest.rb into your /jobs folder

Then include the widget in a dashboard, by adding the following snippet to your dashboard layout file:

• For a nice 2 tile-wide widget:

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">

      <div data-id="multitest" data-view="Mgraph" data-title="Multi Convergence" style="background-color:#ff9618"></div>
      
    </li>

mgraph.coffee

class Dashing.Mgraph extends Dashing.Widget

  @accessor 'current', ->
    return @get('displayedValue') if @get('displayedValue')
    points = @get('points')
    if points
      points[0][points[0].length - 1].y + ' / ' + points[1][points[1].length - 1].y 

  ready: ->
    container = $(@node).parent()
    # Gross hacks. Let's fix this.
    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
    @graph = new Rickshaw.Graph(
      element: @node
      width: width
      height: height
      renderer: 'area'
      stroke: false
      series: [
        {
        color: "#fff",
        data: [{x:0, y:0}]
        },
        {
            color: "#222",
            data: [{x:0, y:0}]
        }
      ]
    )

    @graph.series[0].data = @get('points') if @get('points')

    x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph)
    y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
    @graph.renderer.unstack = true
    @graph.render()

  onData: (data) ->
    if @graph
      @graph.series[0].data = data.points[0]
      @graph.series[1].data = data.points[1]
      @graph.render()

mgraph.html

<h1 class="title" data-bind="title"></h1>

<h3 class="value" data-bind="current"></h2>

<p class="more-info" data-bind="moreinfo"></p>

mgraph.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #dc5945;

$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.3);
$tick-color:        rgba(0, 0, 0, 0.4);


// ----------------------------------------------------------------------------
// Widget-graph styles
// ----------------------------------------------------------------------------
.widget-mgraph {

  background-color: $background-color;
  position: relative;


  svg {
    position: absolute;
    opacity: 0.4;
    fill-opacity: 0.4;
    left: 0px;
    top: 0px;
  }

  .title, .value {
    position: relative;
    z-index: 99;
  }

  .title {
    color: $title-color;
  }

  .more-info {
    color: $moreinfo-color;
    font-weight: 600;
    font-size: 20px;
    margin-top: 0;
  }

  .x_tick {
    position: absolute;
    bottom: 0;
    .title {
      font-size: 20px;
      color: $tick-color;
      opacity: 0.5;
      padding-bottom: 3px;
    }
  }

  .y_ticks {
    font-size: 20px;
    fill: $tick-color;
    fill-opacity: 1;
  }

  .domain {
    display: none;
  }

}

multitest.rb

# this is just the dummy sample using random data to illustrate
# replace the random data with your real data... wherever you get it from

# Populate the multi-graph with some initial points
points1 = []
points2 = []
(1..10).each do |i|
  points1 << { x: i, y: rand(50) }     # graph 1 initialization
  points2 << { x: i, y: rand(50) }     # graph 2 initialization
end
last_x = points1.last[:x]

SCHEDULER.every '2s' do
  points1.shift
  points2.shift
  last_x += 1
  points1 << { x: last_x, y: rand(50) }         # this is where you'd add a data element for graph 1
  points2 << { x: last_x, y: rand(50) }         # this is where you'd add a data element for graph 2
  send_event('multitest', points: [points1, points2])
end

Figured out the fill option. Do anyone know how to have the "points" have dots, or indicators of where the data is? Also, possible to add lines in the back.