Dashing - "enhanced graph" widget

Readme.md

Dashing Enhanced Graph Widget

This widget is based on the standard Dashing Graph widget. The additions are:

• suffix management
• possibility of adding a background image

What it does

Very close to the standard graph widget, if you refer to the thumbnail, you'll see an example.

How to add to Dashing

Copy

• graphenhanced.coffee
• graphenhanced.html
• graphenhanced.scss

in a "graphenhanced" folder in your dashing widget directory.

How to use it

Its use is very close to the standard Graph widget, with the added management of prefix and background image.

In the dashboard UI

Add the declaration of the widget.

Examples :

For Dashing-js

  li(data-row='1', data-col='1', data-sizex='2', data-sizey='1')
    div(data-id='valuationineuro', data-view='Graphenhanced', data-title='Valuation', style='background-color:#25AA85', data-suffix=' €', data-moreinfo='(CAC)')
    i.fa.fa-keyboard-o.icon-background

For regular Dashing

  <li data-row='1' data-col='1' data-sizex='2' data-sizey='1'>
    <div data-id='valuationineuro' data-view='Graphenhanced' data-title='Valuation' style='background-color:#25AA85' data-suffix=' €' data-moreinfo='(CAC)'></div>
    <i class='fa fa-keyboard-o icon-background'></i>
  </li>

In your job

The events are the same as the standard graph widget.

Licence

Licenced under the Creative Commons Attribution 4.0

graphenhanced.coffee

class Dashing.Graphenhanced extends Dashing.Widget

  @accessor 'current', ->
    return @get('displayedValue') if @get('displayedValue')
    points = @get('points')
    if points
      points[points.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
      series: [
        {
        color: "#fff",
        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.render()

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

graphenhanced.html

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


<p>
	<i data-bind-class="bckicon"></i>
	<h2 class="value" data-bind="current | prettyNumber | prepend prefix | append suffix"></h2>
</p>

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

graphenhanced.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-graphenhanced {

  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;
  }

}

thumbnail.png