Directives refactoring

This commit is contained in:
cubedro 2015-05-19 19:26:30 +03:00
parent 7c24c44b54
commit 1499d25664
5 changed files with 58 additions and 69 deletions

2
dist/index.html vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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 ()
{
var data = scope.data;
// element.empty();
tElement.replaceWith('<span>' + tAttrs.data + "</span>");
jQuery(element[0]).sparkline(data, {
type: 'bar',
tooltipSuffix: (attrs.tooltipsuffix || '')
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 = {
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>';
tElement.replaceWith('<span>' + tAttrs.data + "</span>");
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);
}
};
}])

View File

@ -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 #[&nbsp;]
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 }}