Generalized exports.toggleChart function that takes data- attributes

for arguments
This commit is contained in:
Tyler Renelle 2012-07-06 22:46:22 -04:00
parent 5fefd4df2b
commit 623db84502
2 changed files with 17 additions and 45 deletions

View file

@ -282,13 +282,15 @@ ready (model) ->
$('#\\' + task.get('id') + '-chart').hide()
$('#\\' + task.get('id') + '-edit').toggle()
exports.toggleTaskChart = (e, el) ->
task = model.at $(el).parents('li')[0]
$('#\\' + task.get('id') + '-edit').hide()
$('#\\' + task.get('id') + '-chart').toggle()
exports.toggleChart = (e, el) ->
hideSelector = $(el).attr('data-hide-selector')
chartSelector = $(el).attr('data-chart-selector')
historyPath = $(el).attr('data-history-path')
$(document.getElementById(hideSelector)).hide()
$(document.getElementById(chartSelector)).toggle()
matrix = [['Date', 'Score']]
for obj in task.get('history')
for obj in model.get(historyPath)
date = new Date(obj.date)
readableDate = "#{date.getMonth()}/#{date.getDate()}/#{date.getFullYear()}"
matrix.push [ readableDate, obj.value ]
@ -300,45 +302,9 @@ ready (model) ->
backgroundColor: 'whiteSmoke'
}
chart = new google.visualization.LineChart(document.getElementById( task.get('id') + '-chart' ))
chart = new google.visualization.LineChart(document.getElementById( chartSelector ))
chart.draw(data, options)
exports.toggleTodosChart = (e, el) ->
$('#todos-chart').toggle()
matrix = [['Date', 'Score']]
for obj in model.get('_user.history.todos')
date = new Date(obj.date)
readableDate = "#{date.getMonth()}/#{date.getDate()}/#{date.getFullYear()}"
matrix.push [ readableDate, obj.value ]
data = google.visualization.arrayToDataTable matrix
options = {
title: 'History'
backgroundColor: 'whiteSmoke'
}
chart = new google.visualization.LineChart(document.getElementById( 'todos-chart' ))
chart.draw(data, options)
exports.toggleExpChart = (e, el) ->
$('#exp-chart').toggle()
matrix = [['Date', 'Score']]
for obj in model.get('_user.history.exp')
date = new Date(obj.date)
readableDate = "#{date.getMonth()}/#{date.getDate()}/#{date.getFullYear()}"
matrix.push [ readableDate, obj.value ]
data = google.visualization.arrayToDataTable matrix
options = {
title: 'History'
backgroundColor: 'whiteSmoke'
}
chart = new google.visualization.LineChart(document.getElementById( 'exp-chart' ))
chart.draw(data, options)
exports.vote = (e, el, next) ->
direction = $(el).attr('data-direction')
direction = 'up' if direction == 'true/'

View file

@ -19,7 +19,9 @@
<div class="progress progress-warning">
{#if _user.history.exp}
<span class="progress-text"><a x-bind=click:toggleExpChart><i class=icon-signal></i></a> Exp: {round(_user.exp)} / {_tnl}</span>
<span class="progress-text">
<a x-bind=click:toggleChart data-chart-selector="exp-chart" data-history-path="_user.history.exp"><i class=icon-signal></i></a> Exp: {round(_user.exp)} / {_tnl}
</span>
{/}
<div class="bar" style="width: {percent(_user.exp,_tnl)}%;"></div>
</div>
@ -88,7 +90,7 @@
</div>
</div>
{#if _user.history.todos}
<a x-bind=click:toggleTodosChart><i class=icon-signal></i></a>
<a x-bind=click:toggleChart data-chart-selector="todos-chart" data-history-path="_user.history.todos"><i class=icon-signal></i></a>
<div id="todos-chart" style="display:none;"></div>
{/}
</div>
@ -123,7 +125,11 @@
<div class="hover-show">
<a x-bind=click:toggleTaskEdit><i class="icon-pencil"></i></a>
{#if :task.history}<a x-bind=click:toggleTaskChart><i class="icon-signal"></i></a>{/}
{#if :task.history}
<a x-bind=click:toggleChart data-chart-selector="{{:task.id}}-chart" data-hide-selector="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history">
<i class="icon-signal"></i>
</a>
{/}
</div>
<!--<a class="edit-link" href="#/<%= id %>/edit">Edit</a>-->