Skip to content

Instantly share code, notes, and snippets.

@bennacer860
Last active August 29, 2015 14:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bennacer860/853691aed8b9a4cbc535 to your computer and use it in GitHub Desktop.
Save bennacer860/853691aed8b9a4cbc535 to your computer and use it in GitHub Desktop.
Classy Dashing widget

##Description A Dashing widget to display the total amount of donations you have received through classy.org. It is set by default to display the past 30 days but you can set up the start and end date to an arbitrary date.

you would need to ask for a classy access token and a cid from the classy.org customer technical staff. Just shoot them an email and the will reply very quickly ##Usage

To use this widget, copy classy.html, classy.coffee, and classy.scss into the /widgets/classy directory. copy classy.rb to /jobs/ and set up the variables in the begining of the file.

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

  • ##Preview

    lass Dashing.Classy extends Dashing.Widget
    @accessor 'current', Dashing.AnimatedValue
    @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
    ""
    @accessor 'arrow', ->
    if @get('last')
    if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'
    onData: (data) ->
    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}"
    <h1 class="title" data-bind="title"></h1>
    <h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix"></h2>
    <p class="change-rate">
    <i data-bind-class="arrow"></i><span data-bind="difference"></span>
    </p>
    <p class="more-info" data-bind="moreinfo"></p>
    <p class="updated-at" data-bind="updatedAtMessage"></p>
    require 'httparty'
    #past month days
    limit = 3000000
    token = "xxxxxx"
    cid = "xxxx"
    @options = {query: {limit: limit, token: token, cid: cid}}
    SCHEDULER.every '60s' do
    #calulate the current amount
    @options[:query][:start_date] = Date.today.prev_month
    @options[:query][:end_date] = Date.today
    response = HTTParty.get("http://www.stayclassy.org/api1/donations", @options)
    current_amount = JSON.parse(response.body)["donations"].map{|d| d["donate_amount"].to_i}.reduce(:+)
    #calulate the last amount
    @options[:query][:start_date] = Date.today.prev_month.prev_month
    @options[:query][:end_date] = Date.today.prev_month
    response = HTTParty.get("http://www.stayclassy.org/api1/donations", @options)
    last_amount = JSON.parse(response.body)["donations"].map{|d| d["donate_amount"].to_i}.reduce(:+)
    send_event('classy', { current: current_amount, last: last_amount })
    end
    // ----------------------------------------------------------------------------
    // Sass declarations
    // ----------------------------------------------------------------------------
    $background-color: #77297f;
    $value-color: #fcb515;
    $title-color: #f26a2f;
    $moreinfo-color: #ffcb4b;
    // ----------------------------------------------------------------------------
    // Widget-number styles
    // ----------------------------------------------------------------------------
    .widget-classy {
    background-color: $background-color;
    .title {
    color: $title-color;
    }
    .value {
    color: $value-color;
    }
    .change-rate {
    font-weight: 500;
    font-size: 30px;
    color: $value-color;
    }
    .more-info {
    color: $moreinfo-color;
    }
    .updated-at {
    color: rgba(0, 0, 0, 0.3);
    }
    }
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment