README.md

Description

Simple Dashing widget that tracks time since a certain event. Time Since Last waits for request to be made to your instance of Dashing and will then reset the time since the last occurrence of whatever event you would like to track. An example could be the time since the last exception for one of your applications, or the time since the last accident on the workfloor (better keep that widget green)!

The widget was made by @hannesfostie for use @openminds. If you end up using this widget, please send me a tweet! I'd love to hear about it.

Dependencies

This widget requires HTML5's localStorage in order to keep track of the last time the event occurred in order for it to work across restarts and refreshes.

I also use Moment.js for easier date objects, and to display the time like a few seconds ago rather than something ugly. If you are not a fan of this, I'm sure you can figure out how to remove this. If not, get in touch!

Usage

To use this widget, copy time_since_last.html, time_since_last.coffee, and time_since_last.scss into the /widgets/time_since_last directory.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="time_since_last" data-view="TimeSinceLast" data-title="Time since last event" data-green-after="60"></div>
</li>

Settings

The data-green-after-attribute of the widget takes a number in seconds that have to pass in order for the widget to turn green. You can remove this, and the widget will default to turning the widget green after 100 seconds.

Making things look nice

I made one extra modification to the widget, but I decided to describe it here because it requires additional javascript libraries which you may or may not want to include. In any case this step is not really required, but I prefer to add it.

The second uses RainbowVis-JS to set the background color to a color between two (or more!) colors of your choosing. I changed the backgroundColor function to achieve this. In my case:

 backgroundColor: =>
    if ($(@node).data('green-after'))
      greenAfter = parseInt($(@node).data('green-after'))
    else
      greenAfter = 100

    diff = moment().unix() - moment(@last_event).unix()
    if (diff > greenAfter)
      "#4d9e45"
    else
      rainbow = new Rainbow().setSpectrum('#e84916', '#4d9e45');
      '#'+rainbow.colourAt(diff / greenAfter * 100)

Contributing

Have tips on making this better? Please leave a comment and/or fork the gist. Sending me a tweet on Twitter is probably a good idea as well!

time_since_last.coffee

class Dashing.TimeSinceLast extends Dashing.Widget

  ready: ->
    @last_event = moment(localStorage.getItem(@get('id')+'_last_event'))
    @last_event = moment() unless @last_event
    setInterval(@startTime, 500)

  onData: (data) ->
    localStorage.setItem(@get('id')+'_last_event', moment())
    @last_event = moment()
    @set('time_past', moment(@last_event).fromNow())
    $(@node).fadeOut().css('background-color', @backgroundColor).fadeIn()

  startTime: =>
    @set('time_past', moment(@last_event).fromNow())
    $(@node).css('background-color', @backgroundColor())

  backgroundColor: =>
    if (@get('green-after'))
      greenAfter = parseInt(@get('green-after'))
    else
      greenAfter = 100

    diff = moment().unix() - moment(@last_event).unix()
    if (diff > greenAfter)
      "#4d9e45"
    else
      '#e84916'

time_since_last.html

<h1 data-bind="title"></h1>
<p data-bind="time_past"></p>

time_since_last.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #4d9e45;

// ----------------------------------------------------------------------------
// time_since_last styles
// ----------------------------------------------------------------------------
.widget-time-since_last {

  background-color: $background-color;

}

@derwin12 very sorry I didn't spot your comment earlier, must've missed the notification. Glad you figured it out

Hi @hannesfostie,
When I refresh the page in my browser, the widget displays "last_past" as a few seconds ago. When I send data to the widget, the widget displays "last_past" as a few seconds ago. So how does the widget remember the "last_event" across restarts of dashing? It seems the widget is being reset everytime I refresh the page. It shouldn't be doing that. Please help. Thanks.

Hi @hannesfostie,
I figured it out. Thanks for the widget.

Hi @hannesfostie,
I forked your gist so that I could change the semantics of your widget.
The widget can now take a string as a date input and update "time_past" to reflect the time since that event. E.g.

curl -d '{"auth_token: "some_token", since-date: "2014-may-21", green-after: 10}' http://localhost:3030/widgets/time_since_last

Also, moment("some random string") is now deprecated. Therefore to get the equivalent functionality of moment interpreting a string as a date you need to moment(new Date("some random string")).format(). See moment/moment#1407

Thanks again for the gist.

@denhua, Could you share your modifications to allow the widget to take a string as a date?

is there a way to make it not act like it's gotten an update from the API if you refresh the page? if someone else loads the page/dashboard, it's just going to start back at "a few seconds ago". :/

@itsonlym3 I haven't used this code in years, sorry I can't be of more help

@hannesfostie thanks for the reply. i'll have a go @ hacking it a bit and see what i can come up with.
thanks again for the reply