ダッシュ：番号ウィジェットの背景色

Question

数字ウィジェットを同じダッシュボードで何度も使用できますか？

各チームメンバーの現在のスコア、チームメンバーごとに1つのウィジェット、現在のスコアと最後のスコアを比較する上向き/下向き矢印が表示されます。スコアが上がっている場合はウィジェットの背景が緑色になります赤い。

私の.rbファイルは、Excelファイルからデータを渡します。

すべてのウィジェットが すべてのウィジェットを正しい現在のスコアを示してはインクルードはすべてのウィジェットは、私は反対のことを示す.coffeeにもかかわらず、何をしたいのと同じであるが反対色を表示する矢印 をアップ/ダウン修正を示しています。

これは、最初のパスの後にバックグラウンドを停止する必要がある色を検出するループの場合と同じです。

バグコードが間違っていますか？ number4.coffee

class Dashing.Number4 extends Dashing.Widget 

@accessor 'current', Dashing.AnimatedValue 

@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 
"" 

@accessor 'arrow', -> 
if @get('last') 
if parseInt(@get('current')) > parseInt(@get('last')) then 'fa fa-arrow-up' else 'fa fa-arrow-down' 

constructor: -> 
super 

@onData(Dashing.lastEvents[@id]) if Dashing.lastEvents[@id] 
onData: (data) -> 
if parseInt(@get('current')) > parseInt(@get('last')) then $(@node).css('background-color', '#006600') else $(@node).css('background-color', '#660000') 

number4.scss

// 
// ---------------------------------------------------------------------------- 
// Mixins 
// ---------------------------------------------------------------------------- 
@mixin transition($transition-property, $transition-time, $method) { 
-webkit-transition: $transition-property $transition-time $method; 
-moz-transition: $transition-property $transition-time $method; 
-o-transition: $transition-property $transition-time $method; 
transition: $transition-property $transition-time $method; 
} 

// ---------------------------------------------------------------------------- 
// Sass declarations 
// ---------------------------------------------------------------------------- 
$value-color: #fff; 

$title-color: rgba(255, 255, 255, 0.7); 
$moreinfo-color: rgba(255, 255, 255, 0.7); 

// ---------------------------------------------------------------------------- 
// Widget-number styles 
// ---------------------------------------------------------------------------- 
.widget-number4 { 

.title { 
color: $title-color; 
font-size: 40px; 

} 

.value { 
color: $value-color; 

} 

.change-rate { 
font-weight: 500; 
font-size: 30px; 
color: $value-color; 
} 

.more-info { 
color: $moreinfo-color; 
font-size: 23px; 
bottom: 40px; 

} 

.updated-at { 
color: white; 
font-size: 23px; 
} 

} 

Answer 1

あなたが1つのダッシュボード上のウィジェットを複数回使用することはできますが、一部はすでに働いていることを持っているようですね。

ウィジェットをフェードアウトし、背景色を設定してからフェードインする必要があります。そうしないと、レンダリングが既に行われているため、背景色の変更は表示されません。

onData: (data) -> 
 
     
 
    if @get('last') 
 
     if parseInt(@get('current')) > parseInt(@get('last')) then $(@node).fadeOut().css('background-color', "#006600").fadeIn() else $(@node).fadeOut().css('background-color', "#660000").fadeIn() 
 

この情報がお役に立てば幸いです。