dashing

Creating custom widgets for ruby gem dashing.io - Or combining widgets elements

I'm working with the dashing ruby gem and I would really like to combine elements of the graph and number widgets. I would like all elements of the graph and include the up/down percentage arrow from the number widget.

I've never done much work with ruby and I understand there are a few files within the widget that might need to be changed.

I've setup a few nice widgets and I'm using a job to pull data from a redis db to populate. I've added the following to the graph.html page:

<p class="change-rate">
  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
</p>

This has no effect, and I'm sure that I'm missing something in one of the many files that makes this all work.

Solution

  • Your on the right track, and I've actually put together something very similar but in order to complete what you are trying to do you need to send data to your two new data binds, which would be done with your jobs file and the graph.coffee file.

    I'm not sure how exactly you're getting your graph data from redis to your jobs erb file but you will want to setup a couple new variables, for the example I have used nowNumber and lastNumber. These will be the number that the valuation is performed on.

    jobs/jobname.erb

    send_event('graph', points: points, current: nowNumber, last: lastNumber )

    If you print this out you will get something like this:

    {:points=>[{:x=>6, :y=>64}, {:x=>5, :y=>62}, {:x=>4, :y=>56}], :current=>57, :last=>64}

    Tweak your graph/graph.coffee file:

    # The following 6 lines aren't needed for your solution, but if you wanted to take advantage of 'warning', 'danger', and 'ok' status classes (changes background color and flashes), just feed your send_event with 'status: [one of the three status names] 
  if data.status
    # clear existing "status-*" classes
      $(@get('node')).attr 'class', (i,c) ->
        c.replace /\bstatus-\S+/g, ''
      # add new class
      $(@get('node')).addClass "status-#{data.status}"

  @accessor 'difference', ->
    if @get('last')
      last = parseInt(@get('last'))
      current = parseInt(@get('current'))
      if last != 0
        diff = Math.abs(Math.round((current - last) / last * 100))
        "#{diff}%"
    else
      ""
  # Picks the direction of the arrow based on whether the current value is higher or lower than the last
  @accessor 'arrow', ->
    if @get('last')
      if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'