charts: port toggleChart back in (functional, but it's not getting the

right width)

archive/derby_controllers/tasks.coffee

@@ -10,31 +10,6 @@ misc = require './misc'
     _.each completedIds, (id) -> user.del "tasks.#{id}"; true
     user.set 'todoIds', _.difference(todoIds, completedIds)
 
-  appExports.toggleChart = (e, el) ->
-    id = $(el).attr('data-id')
-    [historyPath, togglePath] = ['','']
-
-    switch id
-      when 'exp'
-        [togglePath, historyPath] = ['_page.charts.exp', '_user.history.exp']
-      when 'todos'
-        [togglePath, historyPath] = ['_page.charts.todos', '_user.history.todos']
-      else
-        [togglePath, historyPath] = ["_page.charts.#{id}", "_user.tasks.#{id}.history"]
-        model.set "_tasks.editing.#{id}", false
-
-    history = model.get(historyPath)
-    model.set togglePath, !(model.get togglePath)
-
-    matrix = [['Date', 'Score']]
-    _.each history, (obj) -> matrix.push([ moment(obj.date).format('MM/DD/YY'), obj.value ])
-    data = google.visualization.arrayToDataTable matrix
-    options =
-      title: 'History'
-      backgroundColor: { fill:'transparent' }
-    chart = new google.visualization.LineChart $(".#{id}-chart")[0]
-    chart.draw(data, options)
-
 
   ###
     Undo

public/js/controllers/rootCtrl.js

@@ -61,5 +61,37 @@ habitrpg.controller("RootCtrl", ['$scope', '$rootScope', '$location', 'User', '$
         }
       });
     }
+
+    $rootScope.charts = {};
+    $rootScope.toggleChart = function(id, task) {
+      var history = [], matrix, data, chart, options;
+      switch (id) {
+        case 'exp':
+          $rootScope.charts.exp = !$rootScope.charts.exp;
+          history = User.user.history.exp;
+          break;
+        case 'todos':
+          $rootScope.charts.todos = !$rootScope.charts.todos;
+          history = User.user.history.todos;
+          break;
+        default:
+          $rootScope.charts[id] = !$rootScope.charts[id];
+          history = task.history;
+          if (task) task._editing = false;
+      }
+      matrix = [['Date', 'Score']];
+      _.each(history, function(obj) {
+        matrix.push([moment(obj.date).format('MM/DD/YY'), obj.value]);
+      });
+      data = google.visualization.arrayToDataTable(matrix);
+      options = {
+        title: 'History',
+        backgroundColor: {
+          fill: 'transparent'
+        }
+      };
+      chart = new google.visualization.LineChart($("." + id + "-chart")[0]);
+      chart.draw(data, options);
+    };
   }
 ]);

views/index.jade

@@ -102,7 +102,7 @@ html
         div(ng-if='user.preferences.hideHeader')
           include ./shared/header/menu
 
-        .exp-chart(ng-show='page.charts.exp')
+        .exp-chart(ng-show='charts.exp')
 
         #main(ng-view)
 

views/shared/header/header.jade

@@ -23,7 +23,7 @@
           | {{user.stats.exp | number:0}} / {{tnl(user.stats.lvl)}}
           // FIXME doesn't look great here, but the "Experience" CSS title rollover covers it where it was before
           span(ng-show='user.history.exp')
-            a(x-bind='click:toggleChart', ng-click='notPorted()', data-id='exp', tooltip='Progress')
+            a(ng-click='toggleChart("exp")', tooltip='Progress')
               i.icon-signal
     // party
     span(ng-controller='PartyCtrl')

views/tasks/index.jade

@@ -6,10 +6,10 @@ div(ng-controller='TasksCtrl')
 
         // Todos export/graph options
         span.option-box.pull-right(ng-if='list.main && list.type=="todo"')
-          a.option-action(ng-show='user.history.todos', x-bind='click:toggleChart', ng-click='notPorted()', data-id='todos', tooltip='Progress')
+          a.option-action(ng-show='user.history.todos', ng-click='toggleChart("todos")', tooltip='Progress')
             i.icon-signal
           //-a.option-action(ng-href='/v1/users/{{user.id}}/calendar.ics?apiToken={{user.apiToken}}', tooltip='iCal')
-          a.option-action(ng-click='notPorted()', tooltip='iCal')
+          a.option-action(ng-click='notPorted()', tooltip='iCal', ng-show='false')
             i.icon-calendar
           // <a href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}" rel=tooltip title="Google Calendar"><i class=icon-calendar></i></a>
 
@@ -26,7 +26,7 @@ div(ng-controller='TasksCtrl')
         h2.task-column_title {{list.header}}
 
         // Todo Chart
-        .todos-chart(ng-if='list.type == "todo"', ng-show='_page.charts.todos')
+        .todos-chart(ng-if='list.type == "todo"', ng-show='charts.todos')
 
         // Add New
         form.addtask-form.form-inline.new-task-form(name='new{{list.type}}form', ng-show='list.editable', ng-hide='list.showCompleted && list.type=="todo"', data-task-type='{{list.type}}', ng-submit='addTask(list)')

views/tasks/task.jade

@@ -27,10 +27,10 @@ li(ng-repeat='task in user[list.type + "s"]', class='task {{taskClasses(task,use
     a(ng-click='remove(task)', tooltip='Delete')
       i.icon-trash
     // chart
-    a(ng-show='task.history', x-bind='click:toggleChart', ng-click='notPorted()', data-id='{{task.id}}', tooltip='Progress')
+    a(ng-show='task.history', ng-click='toggleChart(task.id, task)', tooltip='Progress')
       i.icon-signal
     // notes
-    span.task-notes(ng-hide='task._editing', ng-show='task.notes', popover-trigger='mouseenter', popover-placement='left', popover='{{task.notes}}', popover-title='{{task.text}}')
+    span.task-notes(ng-show='task.notes && !task._editing', popover-trigger='mouseenter', popover-placement='left', popover='{{task.notes}}', popover-title='{{task.text}}')
       i.icon-comment
 
   // left-hand side checkbox
@@ -157,4 +157,4 @@ li(ng-repeat='task in user[list.type + "s"]', class='task {{taskClasses(task,use
             input.option-content(type='number', ng-model='task.streak')
       button.task-action-btn.tile.spacious(type='submit') Save & Close
 
-  div(class='{{task.id}}-chart', ng-show='_page.charts[task.id]')
+  div(class='{{task.id}}-chart', ng-show='charts[task.id]')