Directives refactoring

public/js/directives.js

@@ -7,43 +7,46 @@ angular.module('netStatsApp.directives', [])
 			elm.text(version);
 		};
 }])
-	.directive('sparkchart', ['$compile', '$filter', function($compile, $filter) {
+	.directive('sparkchart', function () {
 		return {
 			restrict: 'E',
 			scope: {
-				data: '='
+				data: '@'
 			},
-			link: function (scope, element, attrs)
+			compile: function (tElement, tAttrs, transclude)
 			{
-				scope.init = function ()
+				tElement.replaceWith('<span>' + tAttrs.data + "</span>");
-				{
-					var data = scope.data;
-					// element.empty();
 
-					jQuery(element[0]).sparkline(data, {
+				return function(scope, element, attrs)
+				{
+					attrs.$observe("data", function (newValue)
+					{
+						element.html(newValue);
+						element.sparkline('html', {
 							type: 'bar',
 							tooltipSuffix: (attrs.tooltipsuffix || '')
 						});
-				}
+					});
-
+				};
-				scope.init();
-
-				scope.$watch('data', function ()
-				{
-					scope.init();
-				}, true);
 			}
 		};
-}])
+})
-	.directive('nodepropagchart', ['$compile', '$filter', function($compile, $filter) {
+	.directive('nodepropagchart', ['$filter', function($filter) {
 		return {
 			restrict: 'E',
 			scope: {
-				data: '='
+				data: '@'
 			},
-			link: function (scope, element, attrs)
+			compile: function (tElement, tAttrs, transclude)
 			{
-				var options = {
+				tElement.replaceWith('<span>' + tAttrs.data + "</span>");
+
+				return function(scope, element, attrs)
+				{
+					attrs.$observe("data", function (newValue)
+					{
+						element.html(newValue);
+						element.sparkline('html', {
 							type: 'bar',
 							negBarColor: '#7f7f7f',
 							zeroAxis: false,
@@ -66,23 +69,9 @@ angular.module('netStatsApp.directives', [])
 
 								return tooltip;
 							}
+						});
+					});
 				};
-
-				scope.init = function ()
-				{
-					var data = scope.data;
-
-					// element.empty();
-
-					jQuery(element[0]).sparkline(data, options);
-				}
-
-				scope.init();
-
-				scope.$watch('data', function ()
-				{
-					scope.init();
-				}, true);
 			}
 		};
 }])

views/index.jade

@@ -92,14 +92,14 @@ block content
               //- i.icon-time
               span.small-title block time
               //- span.small-value {{ avgBlockTime | avgTimeFilter }}
-              sparkchart.big-details.spark-blocktimes(data="lastBlocksTime", tooltipsuffix="s")
+              sparkchart.big-details.spark-blocktimes(data="{{lastBlocksTime.join(',')}}", tooltipsuffix="s")
 
           div.col-xs-3.stat-holder
             div.big-info.chart.text-info
               //- i.icon-difficulty
               span.small-title difficulty
               //- span.small-value {{ lastDifficulty | number }}
-              sparkchart.big-details.spark-difficulty(data="difficultyChart")
+              sparkchart.big-details.spark-difficulty(data="{{difficultyChart.join(',')}}")
 
           div.col-xs-3.stat-holder.xpull-right
             div.big-info.chart.xdouble-chart(class="{{ blockPropagationAvg | propagationAvgTimeClass : true }}")
@@ -123,19 +123,19 @@ block content
               span.small-title uncle count #[ ]
                 span.small (25 blocks per bar)
               //- span.small-value {{ bestStats.block.uncles.length }}/{{ uncleCount }}
-              sparkchart.big-details.spark-uncles(data="uncleCountChart")
+              sparkchart.big-details.spark-uncles(data="{{uncleCountChart.join(',')}}")
 
           div.col-xs-3.stat-holder
             div.big-info.chart.text-info
               //- i.icon-uncle
               span.small-title transactions
-              sparkchart.big-details.spark-transactions(data="transactionDensity")
+              sparkchart.big-details.spark-transactions(data="{{transactionDensity.join(',')}}")
 
           div.col-xs-3.stat-holder
             div.big-info.chart.text-info
               //- i.icon-gasprice
               span.small-title gas spending
-              sparkchart.big-details.spark-gasspending(data="gasSpending")
+              sparkchart.big-details.spark-gasspending(data="{{gasSpending.join(',')}}")
 
 
 
@@ -209,6 +209,6 @@ block content
               div.propagationBox
               span {{node.stats.block.propagation | blockPropagationFilter}}
             td.peerPropagationChart(class="{{node.id}}")
-              nodepropagchart(data="node.history")
+              nodepropagchart(data="{{node.history.join(',')}}")
             td(class="{{ node.stats | propagationNodeAvgTimeClass : bestBlock }}") {{ node.stats | blockPropagationAvgFilter : bestBlock }}
             td(class="{{ node.stats.uptime | upTimeClass : node.stats.active }}") {{ node.stats.uptime | upTimeFilter }}