创建红宝石宝石dashing.io自定义部件 - 或组合部件元素

Question

我与dashing红宝石宝石工作，我真的想图表和数量的小部件的元素结合起来。我希望图中的所有元素都包含数字小部件中的向上/向下百分比箭头。

我从来没有做过红宝石的工作和我的理解有可能需要更换小部件内的一些文件。

我设置了几个不错的小工具，我用工作来拉从Redis的DB数据来填充。我已经添加了以下到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。这些将是执行估值的数字。

工作/ 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.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'