創建紅寶石寶石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'