为 ruby gem dashing.io 创建自定义小部件 - 或者组合小部件元素

Question

我正在使用 dashing ruby gem，我真的很想结合图表和数字小部件的元素。我想要图表的所有元素，并包括数字小部件中的 up/down 百分比箭头。

我从来没有用 ruby 做过很多工作，我知道小部件中有一些文件可能需要更改。

我已经设置了一些不错的小部件，并且我正在使用一个作业从 redis 数据库中提取数据以进行填充。我已将以下内容添加到 graph.html 页面：

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

这没有效果，而且我确定我在使这一切正常工作的众多文件之一中遗漏了一些东西。

Answer 1

你在正确的轨道上，我实际上已经把一些非常相似的东西放在一起但是为了完成你正在尝试做的事情你需要将数据发送到你的两个新数据绑定，这将通过你的作业文件和 graph.coffee 文件。

我不确定您是如何将图形数据从 Redis 获取到您的作业 erb 文件的，但是您需要设置几个新变量，例如我使用的 nowNumber 和 lastNumber。这些将是执行估值的数字。

jobs/jobname.erb

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

如果你打印出来你会得到这样的东西：

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

调整您的 graph/graph.coffee 文件：

# 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'

为 ruby gem dashing.io 创建自定义小部件 - 或者组合小部件元素

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

dashing