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

Question

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

我从未对 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'