CanGrow/playground/html/root/gauge.js

function Gauge(el) {

var element,      // Containing element for the info component
    data,         // `.gauge__data` element
    needle,       // `.gauge__needle` element
    value = 0.0,  // Current gauge value from 0 to 1
    prop,         // Style for transform
    valueLabel;   // `.gauge__label--spacer` element

var setElement = function(el) {
    // Keep a reference to the various elements and sub-elements
    element = el;
    data = element.querySelector('.gauge__data');
    //needle = element.querySelector('.gauge__needle');
    valueLabel = element.querySelector('.gauge__label--spacer');
    
};

var setValue = function(x, max, unit) {
    percentage = x * 100 / max;
    value = percentage / 100; 
    var turns = -0.5 + (value * 0.5);
    data.style[prop] = 'rotate(' + turns + 'turn)';
    //needle.style[prop] = 'rotate(' + turns + 'turn)';
    valueLabel.textContent = x + unit;

};

function exports() { };

exports.element = function(el) {
    if (!arguments.length) { return element; }
    setElement(el);
    return this;
};

exports.value = function(x, max=100, unit='%') {
    if (!arguments.length) { return value; }
    setValue(x, max, unit);
    return this;
};

var body = document.getElementsByTagName('body')[0];
['webkitTransform', 'mozTransform', 'msTransform', 'oTransform', 'transform'].
    forEach(function(p) {
        if (typeof body.style[p] !== 'undefined') { prop = p; }
    }
);

if (arguments.length) {
    setElement(el);
}

return exports;

};