# 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

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

}

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

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

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

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()