³Ô¹ÏÍøÕ¾

Figure 1. NBN plan speeds delivered during busy hours and the busiest hour

‘use strict’;
var dials = document.getElementsByClassName(‘dial’);

// Define the div for the tooltip
var div = d3.select(“body”).append(“div”)
.attr(“class”, “dial-tooltip”)
.style(“opacity”, 0);

function Gauge(placeholderName, configuration) {
this.placeholderName = placeholderName;

var self = this; // for internal d3 functions

this.configure = function(configuration) {
this.config = configuration;

this.config.size = this.config.size * 1.7;

this.config.radius = this.config.size * 1 / 2;
this.config.cx = this.config.size / 1.8;
this.config.cy = this.config.size / 1.6;

this.config.min = undefined !== configuration.min ? configuration.min : 0;
this.config.max = undefined !== configuration.max ? configuration.max : 100;
this.config.range = this.config.max – this.config.min;

this.config.primaryColor = configuration.primaryColor || ‘#410099’;
this.config.secondaryColor = configuration.secondaryColor || ‘#f3f3f3’;

this.config.value = configuration.value;

this.config.transitionDuration = configuration.transitionDuration || 750;
};

this.render = function() {
this.body = d3.select(‘#’ + this.placeholderName)
.append(‘svg:svg’)
.attr(‘class’, ‘gauge’)
.attr(‘width’, this.config.size)
.attr(‘height’, this.config.size);

for (var index in this.config.primaryZones) {
this.drawBand(this.config.primaryZones[index].from, this.config.primaryZones[index].to, self.config.primaryColor);
}

for (index in this.config.secondaryZones) {
this.drawBand(this.config.secondaryZones[index].from, this.config.secondaryZones[index].to, self.config.secondaryColor);
}

for (index in this.config.tertiaryZones) {
this.drawBand(this.config.tertiaryZones[index].from, this.config.tertiaryZones[index].to, self.config.tertiaryColor);
}

for (index in this.config.quaternaryZones) {
this.drawBand(this.config.quaternaryZones[index].from, this.config.quaternaryZones[index].to, self.config.quaternaryColor);
}

var fontSize = Math.round(this.config.size / 16);

for (var setMarker = 0; setMarker = end – start) {
return;
}

this.body.append(‘svg:path’)
.style(‘fill’, color)
.attr(‘d’, d3.svg.arc()
.startAngle(this.valueToRadians(start))
.endAngle(this.valueToRadians(end))
.innerRadius(0.44 * this.config.radius) // bar width
.outerRadius(0.76 * this.config.radius))
.attr(‘transform’, function() {
return ‘translate(‘ + self.config.cx + ‘, ‘ + self.config.cy + ‘) rotate(270)’;
});

/* console.log(this.config.percentages); */

};

this.redraw = function(value, transitionDuration) {
var pointerContainer = this.body.select(‘#’ + this.placeholderName + ‘ .pointerContainer’);

pointerContainer.selectAll(‘text’).text(value + ‘%’);
var pointer = pointerContainer.selectAll(‘path’);

pointer.transition()
.duration(undefined !== transitionDuration ? transitionDuration : this.config.transitionDuration)
.attrTween(‘transform’, function() {
var pointerValue = value * 1;
if (pointerValue > self.config.max) {
pointerValue = self.config.max + 0.02 * self.config.range;
} else if (pointerValue < self.config.min) {
pointerValue = self.config.min – 0.02 * self.config.range;
}
var targetRotation = (self.valueToDegrees(pointerValue) – 90);
var currentRotation = self._currentRotation || targetRotation;
self._currentRotation = targetRotation;
return function(step) {
var rotation = currentRotation + (targetRotation – currentRotation) * step;
return 'translate(' + self.config.cx + ', ' + self.config.cy + ') rotate(' + rotation + ')';
};
});
};

this.valueToDegrees = function(value) {
return value / this.config.range * 270 – (this.config.min / this.config.range * 270 + 45);
};

this.valueToRadians = function(value) {
return this.valueToDegrees(value) * Math.PI / 180;
};

this.valueToPoint = function(value, factor) {
return {
x: this.config.cx – this.config.radius * factor * Math.cos(this.valueToRadians(value)),
y: this.config.cy – this.config.radius * factor * Math.sin(this.valueToRadians(value))
};
};

// initialization
this.configure(configuration);
}

function newDial(name, value, marker, marker2, min, max, percentages, rsp) {

var config = {
size: 100,
name: name.replace(/s+/g, '-').toLowerCase(),
label: name,
rsp: rsp,
value: value,
markerPosition: marker,
markerPosition2: marker2,
min: undefined !== min ? min : 0,
max: undefined !== max ? max : 100,
percentages: percentages
};

var range = config.max – config.min;
config.primaryZones = [{
from: config.min,
to: config.min + range * config.percentages[0]
}];
config.secondaryZones = [{
from: config.min + range * config.percentages[0],
to: config.min + range * config.percentages[1]
}];

var createDial = new Gauge(config.name, config);
createDial.render();
createDial.redraw(config.value);
}

function createGauges() {
Array.prototype.forEach.call(dials, function(dial) {
var data = dial.dataset;
var percent = data.percentages.split(',').map(Number);
newDial(data.name, data.value, data.marker, data.marker2, data.min, data.max, percent, data.rsp);
});
}

function initialize() {
createGauges();
}

initialize();
jQuery(‘a[data-toggle=”tab”]’).on(‘hide.bs.tab’, function(e) {
var $old_tab = jQuery(jQuery(e.target).attr(“href”));
var $new_tab = jQuery(jQuery(e.relatedTarget).attr(“href”));

if ($new_tab.index() $old_tab.index()) {
$new_tab.css(‘position’, ‘relative’).css(“right”, “-2500px”);
$new_tab.animate({
“right”: “0”
}, 250);
} else {
$new_tab.css(‘position’, ‘relative’).css(“left”, “-2500px”);
$new_tab.animate({
“left”: “0”
}, 250);
}
});

jQuery(‘a[data-toggle=”tab”]’).on(‘shown.bs.tab’, function(e) {});
jQuery(‘#dials_container .nav-tabs>li:nth-child(1)>a’).on(‘click’, function(e) {
jQuery(“div.dial-tooltip”).removeClass(“upload vbusy”);
jQuery(“#dials_explain.explain-rich”).removeClass(“upload vbusy”);
});
jQuery(‘#dials_container .nav-tabs>li:nth-child(2)>a’).on(‘click’, function(e) {
jQuery(“div.dial-tooltip”).addClass(“vbusy”).removeClass(“upload”);
jQuery(“#dials_explain.explain-rich”).addClass(“vbusy”).removeClass(“upload”);
});
jQuery(‘#dials_container .nav-tabs>li:nth-child(3)>a’).on(‘click’, function(e) {
jQuery(“div.dial-tooltip”).addClass(“upload”).removeClass(“vbusy”);
jQuery(“#dials_explain.explain-rich”).addClass(“upload”).removeClass(“vbusy”);
});