Directives refactoring

public/js/directives.js

@@ -7,82 +7,71 @@ 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)
-						type: 'bar',
+				{
-						tooltipSuffix: (attrs.tooltipsuffix || '')
+					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>");
-					type: 'bar',
-					negBarColor: '#7f7f7f',
-					zeroAxis: false,
-					height: 20,
-					barWidth : 2,
-					barSpacing : 1,
-					tooltipSuffix: '',
-					chartRangeMax: 8000,
-					colorMap: jQuery.range_map({
-						'0:1': '#10a0de',
-						'1:1000': '#7bcc3a',
-						'1001:3000': '#FFD162',
-						'3001:7000': '#ff8a00',
-						'7001:': '#F74B4B'
-					}),
-					tooltipFormatter: function (spark, opt, ms) {
-						var tooltip = '<div class="tooltip-arrow"></div><div class="tooltip-inner">';
-						tooltip += $filter('blockPropagationFilter')(ms[0].value, '');
-						tooltip += '</div>';
 
-						return tooltip;
+				return function(scope, element, attrs)
-					}
+				{
+					attrs.$observe("data", function (newValue)
+					{
+						element.html(newValue);
+						element.sparkline('html', {
+							type: 'bar',
+							negBarColor: '#7f7f7f',
+							zeroAxis: false,
+							height: 20,
+							barWidth : 2,
+							barSpacing : 1,
+							tooltipSuffix: '',
+							chartRangeMax: 8000,
+							colorMap: jQuery.range_map({
+								'0:1': '#10a0de',
+								'1:1000': '#7bcc3a',
+								'1001:3000': '#FFD162',
+								'3001:7000': '#ff8a00',
+								'7001:': '#F74B4B'
+							}),
+							tooltipFormatter: function (spark, opt, ms) {
+								var tooltip = '<div class="tooltip-arrow"></div><div class="tooltip-inner">';
+								tooltip += $filter('blockPropagationFilter')(ms[0].value, '');
+								tooltip += '</div>';
+
+								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 }}