2016-06-11 3 views
1

私はdashingルビーの宝石を使っているので、グラフと数字のウィジェットの要素を組み合わせたいと思っています。私は、グラフのすべての要素を希望し、数値ウィジェットからの上下の割合の矢印を含めます。ルビーのカスタムウィジェットを作成するdashing.io - またはウィジェットの要素を組み合わせる

私はRubyを使ったことが一度もありませんでした。変更する必要があるファイルがウィジェット内にいくつかあると私は理解しています。

私はいくつかの素敵なウィジェットをセットアップしました。私はジョブを使用してredis dbからデータを取り込みます。私はgraph.htmlページに以下を追加しました:

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

これは効果がありません、と私は、このすべての作業になり、多くのファイルのいずれかで何かが欠けていることを確信しています。

答えて

1

私は実際には非常によく似たものを作りましたが、あなたがしようとしていることを完了するためには、2つの新しいデータバインドにデータを送信する必要がありますファイルとgraph.coffeeファイル。

あなたのグラフデータをあなたのジョブのerbファイルにどのくらい正確に取得しているのかよく分かりませんが、私はnowNumberlastNumberを使った例のために新しい変数をいくつか設定します。これらは、評価が行われる番号になります。

ジョブ/ jobname.erb

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

あなたがこれをプリントアウトする場合は、次のようなものでしょう:

:あなたの グラフ/ graph.coffeeファイルを微調整

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

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

したがって、ステータスも、graph.htmlの変更が必要ですか?私の送信イベントはこのように見えますか? 'send_event( 'グラフ'、ポイント:ポイント、現在:nowNumber、lastNumber、status:myStatus)'? –

+0

graph.htmlに変更はありません。あなたのsend_eventは、myStatus = 'danger'、 'warning'、または 'ok'を確認するだけです。おそらく、あなたの結合された要素を調整するためにいくつかのCSSを追加したいでしょう。ダッシュボードerbにスタイルブロックを追加することも、graph.scssにスタイルブロックを追加することもできます –

関連する問題