netdata/web/gui/dashboard/lib/d3pie-0.2.1-netdata-3.js

/*!
 * d3pie
 * @author Ben Keen
 * @version 0.1.9
 * @date June 17th, 2015
 * @repo http://github.com/benkeen/d3pie
 * SPDX-License-Identifier: MIT
 */

// UMD pattern from https://github.com/umdjs/umd/blob/master/returnExports.js
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module
    define([], factory);
  } else if (typeof exports === 'object') {
    // Node. Does not work with strict CommonJS, but only CommonJS-like environments that support module.exports,
    // like Node
    module.exports = factory();
  } else {
    // browser globals (root is window)
    root.d3pie = factory(root);
  }
}(this, function() {

    var _scriptName = "d3pie";
    var _version = "0.2.1";

    // used to uniquely generate IDs and classes, ensuring no conflict between multiple pies on the same page
    var _uniqueIDCounter = 0;


    // this section includes all helper libs on the d3pie object. They're populated via grunt-template. Note: to keep
    // the syntax highlighting from getting all messed up, I commented out each line. That REQUIRES each of the files
    // to have an empty first line. Crumby, yes, but acceptable.
    //// --------- _default-settings.js -----------/**
/**
 * Contains the out-the-box settings for the script. Any of these settings that aren't explicitly overridden for the
 * d3pie instance will inherit from these. This is also included on the main website for use in the generation script.
 */
var defaultSettings = {
    header: {
        title: {
            text:     "",
            color:    "#333333",
            fontSize: 18,
            fontWeight: "bold",
            font:     "arial"
        },
        subtitle: {
            text:     "",
            color:    "#666666",
            fontSize: 14,
            fontWeight: "bold",
            font:     "arial"
        },
        location: "top-center",
        titleSubtitlePadding: 8
    },
    footer: {
        text: 	  "",
        color:    "#666666",
        fontSize: 14,
        fontWeight: "bold",
        font:     "arial",
        location: "left"
    },
    size: {
        canvasHeight: 500,
        canvasWidth: 500,
        pieInnerRadius: "0%",
        pieOuterRadius: null
    },
    data: {
        sortOrder: "none",
        ignoreSmallSegments: {
            enabled: false,
            valueType: "percentage",
            value: null
        },
        smallSegmentGrouping: {
            enabled: false,
            value: 1,
            valueType: "percentage",
            label: "Other",
            color: "#cccccc"
        },
        content: []
    },
    labels: {
        outer: {
            format: "label",
            hideWhenLessThanPercentage: null,
            pieDistance: 30
        },
        inner: {
            format: "percentage",
            hideWhenLessThanPercentage: null
        },
        mainLabel: {
            color: "#333333",
            font: "arial",
            fontWeight: "normal",
            fontSize: 10
        },
        percentage: {
            color: "#dddddd",
            font: "arial",
            fontWeight: "bold",
            fontSize: 10,
            decimalPlaces: 0
        },
        value: {
            color: "#cccc44",
            fontWeight: "bold",
            font: "arial",
            fontSize: 10
        },
        lines: {
            enabled: true,
            style: "curved",
            color: "segment"
        },
        truncation: {
            enabled: false,
            truncateLength: 30
        },
    formatter: null
    },
    effects: {
        load: {
            effect: "none", // "default", commented in the code
            speed: 1000
        },
        pullOutSegmentOnClick: {
            effect: "none", // "bounce", commented in the code
            speed: 300,
            size: 10
        },
        highlightSegmentOnMouseover: false,
        highlightLuminosity: -0.2
    },
    tooltips: {
        enabled: false,
        type: "placeholder", // caption|placeholder
        string: "",
        placeholderParser: null,
        styles: {
        fadeInSpeed: 250,
        backgroundColor: "#000000",
        backgroundOpacity: 0.5,
        color: "#efefef",
        borderRadius: 2,
        font: "arial",
        fontWeight: "bold",
        fontSize: 10,
        padding: 4
        }
    },
    misc: {
        colors: {
            background: null,
            segments: [
                "#2484c1", "#65a620", "#7b6888", "#a05d56", "#961a1a", "#d8d23a", "#e98125", "#d0743c", "#635222", "#6ada6a",
                "#0c6197", "#7d9058", "#207f33", "#44b9b0", "#bca44a", "#e4a14b", "#a3acb2", "#8cc3e9", "#69a6f9", "#5b388f",
                "#546e91", "#8bde95", "#d2ab58", "#273c71", "#98bf6e", "#4daa4b", "#98abc5", "#cc1010", "#31383b", "#006391",
                "#c2643f", "#b0a474", "#a5a39c", "#a9c2bc", "#22af8c", "#7fcecf", "#987ac6", "#3d3b87", "#b77b1c", "#c9c2b6",
                "#807ece", "#8db27c", "#be66a2", "#9ed3c6", "#00644b", "#005064", "#77979f", "#77e079", "#9c73ab", "#1f79a7"
            ],
            segmentStroke: "#ffffff"
        },
        gradient: {
            enabled: false,
            percentage: 95,
            color: "#000000"
        },
        canvasPadding: {
            top: 5,
            right: 5,
            bottom: 5,
            left: 5
        },
        pieCenterOffset: {
            x: 0,
            y: 0
        },
        cssPrefix: null
    },
    callbacks: {
        onload: null,
        onMouseoverSegment: null,
        onMouseoutSegment: null,
        onClickSegment: null
    }
};

    //// --------- validate.js -----------
var validate = {

    // called whenever a new pie chart is created
    initialCheck: function(pie) {
        var cssPrefix = pie.cssPrefix;
        var element = pie.element;
        var options = pie.options;

        // confirm d3 is available [check minimum version]
        if (!window.d3 || !window.d3.hasOwnProperty("version")) {
            console.error("d3pie error: d3 is not available");
            return false;
        }

        // confirm element is either a DOM element or a valid string for a DOM element
        if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
            console.error("d3pie error: the first d3pie() param must be a valid DOM element (not jQuery) or a ID string.");
            return false;
        }

        // confirm the CSS prefix is valid. It has to start with a-Z and contain nothing but a-Z0-9_-
        if (!(/[a-zA-Z][a-zA-Z0-9_-]*$/.test(cssPrefix))) {
            console.error("d3pie error: invalid options.misc.cssPrefix");
            return false;
        }

        // confirm some data has been supplied
        if (!helpers.isArray(options.data.content)) {
            console.error("d3pie error: invalid config structure: missing data.content property.");
            return false;
        }
        if (options.data.content.length === 0) {
            console.error("d3pie error: no data supplied.");
            return false;
        }

        // clear out any invalid data. Each data row needs a valid positive number and a label
        var data = [];
        for (var i=0; i<options.data.content.length; i++) {
            if (typeof options.data.content[i].value !== "number" || isNaN(options.data.content[i].value)) {
                console.log("not valid: ", options.data.content[i]);
                continue;
            }
            if (options.data.content[i].value <= 0) {
                console.log("not valid - should have positive value: ", options.data.content[i]);
                continue;
            }
            data.push(options.data.content[i]);
        }
        pie.options.data.content = data;

        // labels.outer.hideWhenLessThanPercentage - 1-100
        // labels.inner.hideWhenLessThanPercentage - 1-100

        return true;
    }
};

    //// --------- helpers.js -----------
var helpers = {

    // creates the SVG element
    addSVGSpace: function(pie) {
        var element = pie.element;
        var canvasWidth = pie.options.size.canvasWidth;
        var canvasHeight = pie.options.size.canvasHeight;
        var backgroundColor = pie.options.misc.colors.background;

        var svg = d3.select(element).append("svg:svg")
            .attr("width", canvasWidth)
            .attr("height", canvasHeight);

        if (backgroundColor !== "transparent") {
            svg.style("background-color", function() { return backgroundColor; });
        }

        return svg;
    },

    shuffleArray: function(array) {
        var currentIndex = array.length, tmpVal, randomIndex;

        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            // and swap it with the current element
            tmpVal = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = tmpVal;
        }
        return array;
    },

    processObj: function(obj, is, value) {
        if (typeof is === 'string') {
            return helpers.processObj(obj, is.split('.'), value);
        } else if (is.length === 1 && value !== undefined) {
            obj[is[0]] = value;
            return obj[is[0]];
        } else if (is.length === 0) {
            return obj;
        } else {
            return helpers.processObj(obj[is[0]], is.slice(1), value);
        }
    },

    getDimensions: function(el) {
        if(typeof el === 'string')
            el = document.getElementById(el);

        var w = 0, h = 0;
        if (el) {
            var dimensions = el.getBBox();
            w = dimensions.width;
            h = dimensions.height;
        }
        else {
            console.log("error: getDimensions() " + id + " not found.");
        }

        return { w: w, h: h };
    },

    /**
     * This is based on the SVG coordinate system, where top-left is 0,0 and bottom right is n-n.
     * @param r1
     * @param r2
     * @returns {boolean}
     */
    rectIntersect: function(r1, r2) {
        var returnVal = (
            // r2.left > r1.right
            (r2.x > (r1.x + r1.w)) ||

            // r2.right < r1.left
            ((r2.x + r2.w) < r1.x) ||

            // r2.top < r1.bottom
            ((r2.y + r2.h) < r1.y) ||

            // r2.bottom > r1.top
            (r2.y > (r1.y + r1.h))
        );

        return !returnVal;
    },

    /**
     * Returns a lighter/darker shade of a hex value, based on a luminance value passed.
     * @param hex a hex color value such as “#abc” or “#123456″ (the hash is optional)
     * @param lum the luminosity factor: -0.1 is 10% darker, 0.2 is 20% lighter, etc.
     * @returns {string}
     */
    getColorShade: function(hex, lum) {

        // validate hex string
        hex = String(hex).replace(/[^0-9a-f]/gi, '');
        if (hex.length < 6) {
            hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
        }
        lum = lum || 0;

        // convert to decimal and change luminosity
        var newHex = "#";
        for (var i=0; i<3; i++) {
            var c = parseInt(hex.substr(i * 2, 2), 16);
            c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
            newHex += ("00" + c).substr(c.length);
        }

        return newHex;
    },

    /**
     * Users can choose to specify segment colors in three ways (in order of precedence):
     * 	1. include a "color" attribute for each row in data.content
     * 	2. include a misc.colors.segments property which contains an array of hex codes
     * 	3. specify nothing at all and rely on this lib provide some reasonable defaults
     *
     * This function sees what's included and populates this.options.colors with whatever's required
     * for this pie chart.
     * @param data
     */
    initSegmentColors: function(pie) {
        var data   = pie.options.data.content;
        var colors = pie.options.misc.colors.segments;

        // TODO this needs a ton of error handling

        var finalColors = [];
        for (var i=0; i<data.length; i++) {
            if (data[i].hasOwnProperty("color")) {
                finalColors.push(data[i].color);
            } else {
                finalColors.push(colors[i]);
            }
        }

        return finalColors;
    },

    applySmallSegmentGrouping: function(data, smallSegmentGrouping) {
        var totalSize;
        if (smallSegmentGrouping.valueType === "percentage") {
            totalSize = math.getTotalPieSize(data);
        }

        // loop through each data item
        var newData = [];
        var groupedData = [];
        var totalGroupedData = 0;
        for (var i=0; i<data.length; i++) {
            if (smallSegmentGrouping.valueType === "percentage") {
                var dataPercent = (data[i].value / totalSize) * 100;
                if (dataPercent <= smallSegmentGrouping.value) {
                    groupedData.push(data[i]);
                    totalGroupedData += data[i].value;
                    continue;
                }
                data[i].isGrouped = false;
                newData.push(data[i]);
            } else {
                if (data[i].value <= smallSegmentGrouping.value) {
                    groupedData.push(data[i]);
                    totalGroupedData += data[i].value;
                    continue;
                }
                data[i].isGrouped = false;
                newData.push(data[i]);
            }
        }

        // we're done! See if there's any small segment groups to add
        if (groupedData.length) {
            newData.push({
                color: smallSegmentGrouping.color,
                label: smallSegmentGrouping.label,
                value: totalGroupedData,
                isGrouped: true,
                groupedData: groupedData
            });
        }

        return newData;
    },

    // for debugging
    showPoint: function(svg, x, y) {
        svg.append("circle").attr("cx", x).attr("cy", y).attr("r", 2).style("fill", "black");
    },

    isFunction: function(functionToCheck) {
        var getType = {};
        return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
    },

    isArray: function(o) {
        return Object.prototype.toString.call(o) === '[object Array]';
    }
};


// taken from jQuery
var extend = function() {
    var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false,
        toString = Object.prototype.toString,
        hasOwn = Object.prototype.hasOwnProperty,
        class2type = {
            "[object Boolean]": "boolean",
            "[object Number]": "number",
            "[object String]": "string",
            "[object Function]": "function",
            "[object Array]": "array",
            "[object Date]": "date",
            "[object RegExp]": "regexp",
            "[object Object]": "object"
        },

        jQuery = {
            isFunction: function (obj) {
                return jQuery.type(obj) === "function";
            },
            isArray: Array.isArray ||
                function (obj) {
                    return jQuery.type(obj) === "array";
                },
            isWindow: function (obj) {
                return obj !== null && obj === obj.window;
            },
            isNumeric: function (obj) {
                return !isNaN(parseFloat(obj)) && isFinite(obj);
            },
            type: function (obj) {
                return obj === null ? String(obj) : class2type[toString.call(obj)] || "object";
            },
            isPlainObject: function (obj) {
                if (!obj || jQuery.type(obj) !== "object" || obj.nodeType) {
                    return false;
                }
                try {
                    if (obj.constructor && !hasOwn.call(obj, "constructor") && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
                        return false;
                    }
                } catch (e) {
                    return false;
                }
                var key;
                for (key in obj) {}
                return key === undefined || hasOwn.call(obj, key);
            }
        };
    if (typeof target === "boolean") {
        deep = target;
        target = arguments[1] || {};
        i = 2;
    }
    if (typeof target !== "object" && !jQuery.isFunction(target)) {
        target = {};
    }
    if (length === i) {
        target = this;
        --i;
    }
    for (i; i < length; i++) {
        if ((options = arguments[i]) !== null) {
            for (name in options) {
                src = target[name];
                copy = options[name];
                if (target === copy) {
                    continue;
                }
                if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
                    if (copyIsArray) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];
                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }
                    // WARNING: RECURSION
                    target[name] = extend(deep, clone, copy);
                } else if (copy !== undefined) {
                    target[name] = copy;
                }
            }
        }
    }
    return target;
};
    //// --------- math.js -----------
var math = {

    toRadians: function(degrees) {
        return degrees * (Math.PI / 180);
    },

    toDegrees: function(radians) {
        return radians * (180 / Math.PI);
    },

    computePieRadius: function(pie) {
        var size = pie.options.size;
        var canvasPadding = pie.options.misc.canvasPadding;

        // outer radius is either specified (e.g. through the generator), or omitted altogether
        // and calculated based on the canvas dimensions. Right now the estimated version isn't great - it should
        // be possible to calculate it to precisely generate the maximum sized pie, but it's fussy as heck. Something
        // for the next release.

        // first, calculate the default _outerRadius
        var w = size.canvasWidth - canvasPadding.left - canvasPadding.right;
        var h = size.canvasHeight - canvasPadding.top - canvasPadding.bottom;

        // now factor in the footer, title & subtitle
        if (pie.options.header.location !== "pie-center") {
            h -= pie.textComponents.headerHeight;
        }

        if (pie.textComponents.footer.exists) {
            h -= pie.textComponents.footer.h;
        }

        // for really teeny pies, h may be < 0. Adjust it back
        h = (h < 0) ? 0 : h;

        var outerRadius = ((w < h) ? w : h) / 3;
        var innerRadius, percent;

        // if the user specified something, use that instead
        if (size.pieOuterRadius !== null) {
            if (/%/.test(size.pieOuterRadius)) {
                percent = parseInt(size.pieOuterRadius.replace(/[\D]/, ""), 10);
                percent = (percent > 99) ? 99 : percent;
                percent = (percent < 0) ? 0 : percent;

                var smallestDimension = (w < h) ? w : h;

                // now factor in the label line size
                if (pie.options.labels.outer.format !== "none") {
                    var pieDistanceSpace = parseInt(pie.options.labels.outer.pieDistance, 10) * 2;
                    if (smallestDimension - pieDistanceSpace > 0) {
                        smallestDimension -= pieDistanceSpace;
                    }
                }

                outerRadius = Math.floor((smallestDimension / 100) * percent) / 2;
            } else {
                outerRadius = parseInt(size.pieOuterRadius, 10);
            }
        }

        // inner radius
        if (/%/.test(size.pieInnerRadius)) {
            percent = parseInt(size.pieInnerRadius.replace(/[\D]/, ""), 10);
            percent = (percent > 99) ? 99 : percent;
            percent = (percent < 0) ? 0 : percent;
            innerRadius = Math.floor((outerRadius / 100) * percent);
        } else {
            innerRadius = parseInt(size.pieInnerRadius, 10);
        }

        pie.innerRadius = innerRadius;
        pie.outerRadius = outerRadius;
    },

    getTotalPieSize: function(data) {
        var totalSize = 0;
        for (var i=0; i<data.length; i++) {
            totalSize += data[i].value;
        }
        return totalSize;
    },

    sortPieData: function(pie) {
        var data                 = pie.options.data.content;
        var sortOrder            = pie.options.data.sortOrder;

        switch (sortOrder) {
            case "none":
                // do nothing
                break;
            case "random":
                data = helpers.shuffleArray(data);
                break;
            case "value-asc":
                data.sort(function(a, b) { return (a.value < b.value) ? -1 : 1; });
                break;
            case "value-desc":
                data.sort(function(a, b) { return (a.value < b.value) ? 1 : -1; });
                break;
            case "label-asc":
                data.sort(function(a, b) { return (a.label.toLowerCase() > b.label.toLowerCase()) ? 1 : -1; });
                break;
            case "label-desc":
                data.sort(function(a, b) { return (a.label.toLowerCase() < b.label.toLowerCase()) ? 1 : -1; });
                break;
        }

        return data;
    },

    // var pieCenter = math.getPieCenter();
    getPieTranslateCenter: function(pieCenter) {
        return "translate(" + pieCenter.x + "," + pieCenter.y + ")";
    },

    /**
     * Used to determine where on the canvas the center of the pie chart should be. It takes into account the
     * height and position of the title, subtitle and footer, and the various paddings.
     * @private
     */
    calculatePieCenter: function(pie) {
        var pieCenterOffset = pie.options.misc.pieCenterOffset;
        var hasTopTitle    = (pie.textComponents.title.exists && pie.options.header.location !== "pie-center");
        var hasTopSubtitle = (pie.textComponents.subtitle.exists && pie.options.header.location !== "pie-center");

        var headerOffset = pie.options.misc.canvasPadding.top;
        if (hasTopTitle && hasTopSubtitle) {
            headerOffset += pie.textComponents.title.h + pie.options.header.titleSubtitlePadding + pie.textComponents.subtitle.h;
        } else if (hasTopTitle) {
            headerOffset += pie.textComponents.title.h;
        } else if (hasTopSubtitle) {
            headerOffset += pie.textComponents.subtitle.h;
        }

        var footerOffset = 0;
        if (pie.textComponents.footer.exists) {
            footerOffset = pie.textComponents.footer.h + pie.options.misc.canvasPadding.bottom;
        }

        var x = ((pie.options.size.canvasWidth - pie.options.misc.canvasPadding.left - pie.options.misc.canvasPadding.right) / 2) + pie.options.misc.canvasPadding.left;
        var y = ((pie.options.size.canvasHeight - footerOffset - headerOffset) / 2) + headerOffset;

        x += pieCenterOffset.x;
        y += pieCenterOffset.y;

        pie.pieCenter = { x: x, y: y };
    },


    /**
     * Rotates a point (x, y) around an axis (xm, ym) by degrees (a).
     * @param x
     * @param y
     * @param xm
     * @param ym
     * @param a angle in degrees
     * @returns {Array}
     */
    rotate: function(x, y, xm, ym, a) {

        a = a * Math.PI / 180; // convert to radians

        var cos = Math.cos,
            sin = Math.sin,
        // subtract midpoints, so that midpoint is translated to origin and add it in the end again
        xr = (x - xm) * cos(a) - (y - ym) * sin(a) + xm,
        yr = (x - xm) * sin(a) + (y - ym) * cos(a) + ym;

        return { x: xr, y: yr };
    },

    /**
     * Translates a point x, y by distance d, and by angle a.
     * @param x
     * @param y
     * @param dist
     * @param a angle in degrees
     */
    translate: function(x, y, d, a) {
        var rads = math.toRadians(a);
        return {
            x: x + d * Math.sin(rads),
            y: y - d * Math.cos(rads)
        };
    },

    // from: http://stackoverflow.com/questions/19792552/d3-put-arc-labels-in-a-pie-chart-if-there-is-enough-space
    pointIsInArc: function(pt, ptData, d3Arc) {
        // Center of the arc is assumed to be 0,0
        // (pt.x, pt.y) are assumed to be relative to the center
        var r1 = d3Arc.innerRadius()(ptData), // Note: Using the innerRadius
            r2 = d3Arc.outerRadius()(ptData),
            theta1 = d3Arc.startAngle()(ptData),
            theta2 = d3Arc.endAngle()(ptData);

        var dist = pt.x * pt.x + pt.y * pt.y,
            angle = Math.atan2(pt.x, -pt.y); // Note: different coordinate system

        angle = (angle < 0) ? (angle + Math.PI * 2) : angle;

        return (r1 * r1 <= dist) && (dist <= r2 * r2) &&
            (theta1 <= angle) && (angle <= theta2);
    }
};

    //// --------- labels.js -----------
var labels = {

    /**
     * Adds the labels to the pie chart, but doesn't position them. There are two locations for the
     * labels: inside (center) of the segments, or outside the segments on the edge.
     * @param section "inner" or "outer"
     * @param sectionDisplayType "percentage", "value", "label", "label-value1", etc.
     * @param pie
     */
    add: function(pie, section, sectionDisplayType) {
        var include = labels.getIncludes(sectionDisplayType);
        var settings = pie.options.labels;

        // group the label groups (label, percentage, value) into a single element for simpler positioning
        var outerLabel = pie.svg.insert("g", "." + pie.cssPrefix + "labels-" + section)
            .attr("class", pie.cssPrefix + "labels-" + section);

        var labelGroup = pie.__labels[section] = outerLabel.selectAll("." + pie.cssPrefix + "labelGroup-" + section)
            .data(pie.options.data.content)
            .enter()
            .append("g")
            .attr("id", function(d, i) { return pie.cssPrefix + "labelGroup" + i + "-" + section; })
            .attr("data-index", function(d, i) { return i; })
            .attr("class", pie.cssPrefix + "labelGroup-" + section)
            .style("opacity", 0);

        var formatterContext = { section: section, sectionDisplayType: sectionDisplayType };

        // 1. Add the main label
        if (include.mainLabel) {
            labelGroup.append("text")
                .attr("id", function(d, i) { return pie.cssPrefix + "segmentMainLabel" + i + "-" + section; })
                .attr("class", pie.cssPrefix + "segmentMainLabel-" + section)
                .text(function(d, i) {
                    var str = d.label;

                    // if a custom formatter has been defined, pass it the raw label string - it can do whatever it wants with it.
                    // we only apply truncation if it's not defined
                    if (settings.formatter) {
                        formatterContext.index = i;
                        formatterContext.part = 'mainLabel';
                        formatterContext.value = d.value;
                        formatterContext.label = str;
                        str = settings.formatter(formatterContext);
                    } else if (settings.truncation.enabled && d.label.length > settings.truncation.truncateLength) {
                        str = d.label.substring(0, settings.truncation.truncateLength) + "...";
                    }
                    return str;
                })
                .style("font-size", settings.mainLabel.fontSize + "px")
                .style("font-family", settings.mainLabel.font)
                .style("font-weight", settings.mainLabel.fontWeight)
                .style("fill", function(d, i) {
                    return (settings.mainLabel.color === "segment") ? pie.options.colors[i] : settings.mainLabel.color;
                });
        }

        // 2. Add the percentage label
        if (include.percentage) {
            labelGroup.append("text")
                .attr("id", function(d, i) { return pie.cssPrefix + "segmentPercentage" + i + "-" + section; })
                .attr("class", pie.cssPrefix + "segmentPercentage-" + section)
                .text(function(d, i) {
                    var percentage = d.percentage;
                    if (settings.formatter) {
                        formatterContext.index = i;
                        formatterContext.part = "percentage";
                        formatterContext.value = d.value;
                        formatterContext.label = d.percentage;
                        percentage = settings.formatter(formatterContext);
                    } else {
                        percentage += "%";
                    }
                    return percentage;
                })
                .style("font-size", settings.percentage.fontSize + "px")
                .style("font-family", settings.percentage.font)
                .style("font-weight", settings.percentage.fontWeight)
                .style("fill", settings.percentage.color);
        }

        // 3. Add the value label
        if (include.value) {
            labelGroup.append("text")
                .attr("id", function(d, i) { return pie.cssPrefix +  "segmentValue" + i + "-" + section; })
                .attr("class", pie.cssPrefix + "segmentValue-" + section)
                .text(function(d, i) {
                    formatterContext.index = i;
                    formatterContext.part = "value";
                    formatterContext.value = d.value;
                    formatterContext.label = d.value;
                    return settings.formatter ? settings.formatter(formatterContext, d.value) : d.value;
                })
                .style("font-size", settings.value.fontSize + "px")
                .style("font-family", settings.value.font)
                .style("font-weight", settings.value.fontWeight)
                .style("fill", settings.value.color);
        }
    },

    /**
     * @param section "inner" / "outer"
     */
    positionLabelElements: function(pie, section, sectionDisplayType) {
        labels["dimensions-" + section] = [];

        // get the latest widths, heights
        var labelGroups = pie.__labels[section];
        labelGroups.each(function(d, i) {
            var mainLabel  = d3.select(this).selectAll("." + pie.cssPrefix + "segmentMainLabel-" + section);
            var percentage = d3.select(this).selectAll("." + pie.cssPrefix + "segmentPercentage-" + section);
            var value      = d3.select(this).selectAll("." + pie.cssPrefix + "segmentValue-" + section);

            labels["dimensions-" + section].push({
                mainLabel:  (mainLabel.node() !== null) ? mainLabel.node().getBBox() : null,
                percentage: (percentage.node() !== null) ? percentage.node().getBBox() : null,
                value:      (value.node() !== null) ? value.node().getBBox() : null
            });
        });

        var singleLinePad = 5;
        var dims = labels["dimensions-" + section];
        switch (sectionDisplayType) {
            case "label-value1":
                pie.svg.selectAll("." + pie.cssPrefix + "segmentValue-" + section)
                    .attr("dx", function(d, i) { return dims[i].mainLabel.width + singleLinePad; });
                break;
            case "label-value2":
                pie.svg.selectAll("." + pie.cssPrefix + "segmentValue-" + section)
                    .attr("dy", function(d, i) { return dims[i].mainLabel.height; });
                break;
            case "label-percentage1":
                pie.svg.selectAll("." + pie.cssPrefix + "segmentPercentage-" + section)
                    .attr("dx", function(d, i) { return dims[i].mainLabel.width + singleLinePad; });
                break;
            case "label-percentage2":
                pie.svg.selectAll("." + pie.cssPrefix + "segmentPercentage-" + section)
                    .attr("dx", function(d, i) { return (dims[i].mainLabel.width / 2) - (dims[i].percentage.width / 2); })
                    .attr("dy", function(d, i) { return dims[i].mainLabel.height; });
                break;
        }
    },

    computeLabelLinePositions: function(pie) {
        pie.lineCoordGroups = [];
        pie.__labels.outer
            .each(function(d, i) { return labels.computeLinePosition(pie, i); });
    },

    computeLinePosition: function(pie, i) {
        var angle = segments.getSegmentAngle(i, pie.options.data.content, pie.totalSize, { midpoint: true });
        var originCoords = math.rotate(pie.pieCenter.x, pie.pieCenter.y - pie.outerRadius, pie.pieCenter.x, pie.pieCenter.y, angle);
        var heightOffset = pie.outerLabelGroupData[i].h / 5; // TODO check
        var labelXMargin = 6; // the x-distance of the label from the end of the line [TODO configurable]

        var quarter = Math.floor(angle / 90);
        var midPoint = 4;
        var x2, y2, x3, y3;

        // this resolves an issue when the
        if (quarter === 2 && angle === 180) {
            quarter = 1;
        }

        switch (quarter) {
            case 0:
                x2 = pie.outerLabelGroupData[i].x - labelXMargin - ((pie.outerLabelGroupData[i].x - labelXMargin - originCoords.x) / 2);
                y2 = pie.outerLabelGroupData[i].y + ((originCoords.y - pie.outerLabelGroupData[i].y) / midPoint);
                x3 = pie.outerLabelGroupData[i].x - labelXMargin;
                y3 = pie.outerLabelGroupData[i].y - heightOffset;
                break;
            case 1:
                x2 = originCoords.x + (pie.outerLabelGroupData[i].x - originCoords.x) / midPoint;
                y2 = originCoords.y + (pie.outerLabelGroupData[i].y - originCoords.y) / midPoint;
                x3 = pie.outerLabelGroupData[i].x - labelXMargin;
                y3 = pie.outerLabelGroupData[i].y - heightOffset;
                break;
            case 2:
                var startOfLabelX = pie.outerLabelGroupData[i].x + pie.outerLabelGroupData[i].w + labelXMargin;
                x2 = originCoords.x - (originCoords.x - startOfLabelX) / midPoint;
                y2 = originCoords.y + (pie.outerLabelGroupData[i].y - originCoords.y) / midPoint;
                x3 = pie.outerLabelGroupData[i].x + pie.outerLabelGroupData[i].w + labelXMargin;
                y3 = pie.outerLabelGroupData[i].y - heightOffset;
                break;
            case 3:
                var startOfLabel = pie.outerLabelGroupData[i].x + pie.outerLabelGroupData[i].w + labelXMargin;
                x2 = startOfLabel + ((originCoords.x - startOfLabel) / midPoint);
                y2 = pie.outerLabelGroupData[i].y + (originCoords.y - pie.outerLabelGroupData[i].y) / midPoint;
                x3 = pie.outerLabelGroupData[i].x + pie.outerLabelGroupData[i].w + labelXMargin;
                y3 = pie.outerLabelGroupData[i].y - heightOffset;
                break;
        }

        /*
         * x1 / y1: the x/y coords of the start of the line, at the mid point of the segments arc on the pie circumference
         * x2 / y2: if "curved" line style is being used, this is the midpoint of the line. Other
         * x3 / y3: the end of the line; closest point to the label
         */
        if (pie.options.labels.lines.style === "straight") {
            pie.lineCoordGroups[i] = [
                { x: originCoords.x, y: originCoords.y },
                { x: x3, y: y3 }
            ];
        } else {
            pie.lineCoordGroups[i] = [
                { x: originCoords.x, y: originCoords.y },
                { x: x2, y: y2 },
                { x: x3, y: y3 }
            ];
        }
    },

    addLabelLines: function(pie) {
        var lineGroups = pie.svg.insert("g", "." + pie.cssPrefix + "pieChart") // meaning, BEFORE .pieChart
            .attr("class", pie.cssPrefix + "lineGroups")
            .style("opacity", 1);

        var lineGroup = lineGroups.selectAll("." + pie.cssPrefix + "lineGroup")
            .data(pie.lineCoordGroups)
            .enter()
            .append("g")
            .attr("class", pie.cssPrefix + "lineGroup");

        var lineFunction = d3.line()
            .curve(d3.curveBasis)
            .x(function(d) { return d.x; })
            .y(function(d) { return d.y; });

        lineGroup.append("path")
            .attr("d", lineFunction)
            .attr("stroke", function(d, i) {
                return (pie.options.labels.lines.color === "segment") ? pie.options.colors[i] : pie.options.labels.lines.color;
            })
            .attr("stroke-width", 1)
            .attr("fill", "none")
            .style("opacity", function(d, i) {
                var percentage = pie.options.labels.outer.hideWhenLessThanPercentage;
                var isHidden = (percentage !== null && d.percentage < percentage) || pie.options.data.content[i].label === "";
                return isHidden ? 0 : 1;
            });
    },

    positionLabelGroups: function(pie, section) {
        if (pie.options.labels[section].format === "none")
            return;

        pie.__labels[section]
            .style("opacity", function(d, i) {
                var percentage = pie.options.labels[section].hideWhenLessThanPercentage;
                return (percentage !== null && d.percentage < percentage) ? 0 : 1;
            })
            .attr("transform", function(d, i) {
                var x, y;
                if (section === "outer") {
                    x = pie.outerLabelGroupData[i].x;
                    y = pie.outerLabelGroupData[i].y;
                } else {
                    var pieCenterCopy = extend(true, {}, pie.pieCenter);

                    // now recompute the "center" based on the current _innerRadius
                    if (pie.innerRadius > 0) {
                        var angle = segments.getSegmentAngle(i, pie.options.data.content, pie.totalSize, { midpoint: true });
                        var newCoords = math.translate(pie.pieCenter.x, pie.pieCenter.y, pie.innerRadius, angle);
                        pieCenterCopy.x = newCoords.x;
                        pieCenterCopy.y = newCoords.y;
                    }

                    var dims = helpers.getDimensions(pie.cssPrefix + "labelGroup" + i + "-inner");
                    var xOffset = dims.w / 2;
                    var yOffset = dims.h / 4; // confusing! Why 4? should be 2, but it doesn't look right

                    x = pieCenterCopy.x + (pie.lineCoordGroups[i][0].x - pieCenterCopy.x) / 1.8;
                    y = pieCenterCopy.y + (pie.lineCoordGroups[i][0].y - pieCenterCopy.y) / 1.8;

                    x = x - xOffset;
                    y = y + yOffset;
                }

                return "translate(" + x + "," + y + ")";
            });
    },


    getIncludes: function(val) {
        var addMainLabel  = false;
        var addValue      = false;
        var addPercentage = false;

        switch (val) {
            case "label":
                addMainLabel = true;
                break;
            case "value":
                addValue = true;
                break;
            case "percentage":
                addPercentage = true;
                break;
            case "label-value1":
            case "label-value2":
                addMainLabel = true;
                addValue = true;
                break;
            case "label-percentage1":
            case "label-percentage2":
                addMainLabel = true;
                addPercentage = true;
                break;
        }
        return {
            mainLabel: addMainLabel,
            value: addValue,
            percentage: addPercentage
        };
    },


    /**
     * This does the heavy-lifting to compute the actual coordinates for the outer label groups. It does two things:
     * 1. Make a first pass and position them in the ideal positions, based on the pie sizes
     * 2. Do some basic collision avoidance.
     */
    computeOuterLabelCoords: function(pie) {

        // 1. figure out the ideal positions for the outer labels
        pie.__labels.outer
            .each(function(d, i) {
                return labels.getIdealOuterLabelPositions(pie, i);
            });

        // 2. now adjust those positions to try to accommodate conflicts
        labels.resolveOuterLabelCollisions(pie);
    },

    /**
     * This attempts to resolve label positioning collisions.
     */
    resolveOuterLabelCollisions: function(pie) {
    if (pie.options.labels.outer.format === "none") {
      return;
    }

        var size = pie.options.data.content.length;
        labels.checkConflict(pie, 0, "clockwise", size);
        labels.checkConflict(pie, size-1, "anticlockwise", size);
    },

    checkConflict: function(pie, currIndex, direction, size) {
    var i, curr;

        if (size <= 1) {
            return;
        }

        var currIndexHemisphere = pie.outerLabelGroupData[currIndex].hs;
        if (direction === "clockwise" && currIndexHemisphere !== "right") {
            return;
        }
        if (direction === "anticlockwise" && currIndexHemisphere !== "left") {
            return;
        }
        var nextIndex = (direction === "clockwise") ? currIndex+1 : currIndex-1;

        // this is the current label group being looked at. We KNOW it's positioned properly (the first item
        // is always correct)
        var currLabelGroup = pie.outerLabelGroupData[currIndex];

        // this one we don't know about. That's the one we're going to look at and move if necessary
        var examinedLabelGroup = pie.outerLabelGroupData[nextIndex];

        var info = {
            labelHeights: pie.outerLabelGroupData[0].h,
            center: pie.pieCenter,
            lineLength: (pie.outerRadius + pie.options.labels.outer.pieDistance),
            heightChange: pie.outerLabelGroupData[0].h + 1 // 1 = padding
        };

        // loop through *ALL* label groups examined so far to check for conflicts. This is because when they're
        // very tightly fitted, a later label group may still appear high up on the page
        if (direction === "clockwise") {
      i = 0;
            for (; i<=currIndex; i++) {
                curr = pie.outerLabelGroupData[i];

                // if there's a conflict with this label group, shift the label to be AFTER the last known
                // one that's been properly placed
                if (!labels.isLabelHidden(pie, i) && helpers.rectIntersect(curr, examinedLabelGroup)) {
                    labels.adjustLabelPos(pie, nextIndex, currLabelGroup, info);
                    break;
                }
            }
        } else {
      i = size - 1;
            for (; i >= currIndex; i--) {
                curr = pie.outerLabelGroupData[i];

                // if there's a conflict with this label group, shift the label to be AFTER the last known
                // one that's been properly placed
                if (!labels.isLabelHidden(pie, i) && helpers.rectIntersect(curr, examinedLabelGroup)) {
                    labels.adjustLabelPos(pie, nextIndex, currLabelGroup, info);
                    break;
                }
            }
        }
        labels.checkConflict(pie, nextIndex, direction, size);
    },

    isLabelHidden: function(pie, index) {
        var percentage = pie.options.labels.outer.hideWhenLessThanPercentage;
        return (percentage !== null && d.percentage < percentage) || pie.options.data.content[index].label === "";
    },

    // does a little math to shift a label into a new position based on the last properly placed one
    adjustLabelPos: function(pie, nextIndex, lastCorrectlyPositionedLabel, info) {
        var xDiff, yDiff, newXPos, newYPos;
        newYPos = lastCorrectlyPositionedLabel.y + info.heightChange;
        yDiff = info.center.y - newYPos;

        if (Math.abs(info.lineLength) > Math.abs(yDiff)) {
            xDiff = Math.sqrt((info.lineLength * info.lineLength) - (yDiff * yDiff));
        } else {
            xDiff = Math.sqrt((yDiff * yDiff) - (info.lineLength * info.lineLength));
        }

        if (lastCorrectlyPositionedLabel.hs === "right") {
            newXPos = info.center.x + xDiff;
        } else {
            newXPos = info.center.x - xDiff - pie.outerLabelGroupData[nextIndex].w;
        }

        pie.outerLabelGroupData[nextIndex].x = newXPos;
        pie.outerLabelGroupData[nextIndex].y = newYPos;
    },

    /**
     * @param i 0-N where N is the dataset size - 1.
     */
    getIdealOuterLabelPositions: function(pie, i) {
        var labelGroupNode = pie.svg.select("#" + pie.cssPrefix + "labelGroup" + i + "-outer").node();
        if (!labelGroupNode) return;

        var labelGroupDims = labelGroupNode.getBBox();
        var angle = segments.getSegmentAngle(i, pie.options.data.content, pie.totalSize, { midpoint: true });

        var originalX = pie.pieCenter.x;
        var originalY = pie.pieCenter.y - (pie.outerRadius + pie.options.labels.outer.pieDistance);
        var newCoords = math.rotate(originalX, originalY, pie.pieCenter.x, pie.pieCenter.y, angle);

        // if the label is on the left half of the pie, adjust the values
        var hemisphere = "right"; // hemisphere
        if (angle > 180) {
            newCoords.x -= (labelGroupDims.width + 8);
            hemisphere = "left";
        } else {
            newCoords.x += 8;
        }

        pie.outerLabelGroupData[i] = {
            x: newCoords.x,
            y: newCoords.y,
            w: labelGroupDims.width,
            h: labelGroupDims.height,
            hs: hemisphere
        };
    }
};

    //// --------- segments.js -----------
var segments = {

    effectMap: {
        "none": d3.easeLinear,
        "bounce": d3.easeBounce,
        "linear": d3.easeLinear,
        "sin": d3.easeSin,
        "elastic": d3.easeElastic,
        "back": d3.easeBack,
        "quad": d3.easeQuad,
        "circle": d3.easeCircle,
        "exp": d3.easeExp
    },

    /**
     * Creates the pie chart segments and displays them according to the desired load effect.
     * @private
     */
    create: function(pie) {
        var pieCenter = pie.pieCenter;
        var colors = pie.options.colors;
        var loadEffects = pie.options.effects.load;
        var segmentStroke = pie.options.misc.colors.segmentStroke;

        // we insert the pie chart BEFORE the title, to ensure the title overlaps the pie
        var pieChartElement = pie.svg.insert("g", "#" + pie.cssPrefix + "title")
            .attr("transform", function() { return math.getPieTranslateCenter(pieCenter); })
            .attr("class", pie.cssPrefix + "pieChart");

        var arc = d3.arc()
            .innerRadius(pie.innerRadius)
            .outerRadius(pie.outerRadius)
            .startAngle(0)
            .endAngle(function(d) {
                return (d.value / pie.totalSize) * 2 * Math.PI;
            });

        var g = pieChartElement.selectAll("." + pie.cssPrefix + "arc")
            .data(pie.options.data.content)
            .enter()
            .append("g")
            .attr("class", pie.cssPrefix + "arc");

        // if we're not fading in the pie, just set the load speed to 0
        //var loadSpeed = loadEffects.speed;
        //if (loadEffects.effect === "none") {
        //	loadSpeed = 0;
        //}

        g.append("path")
            .attr("id", function(d, i) { return pie.cssPrefix + "segment" + i; })
            .attr("fill", function(d, i) {
                var color = colors[i];
                if (pie.options.misc.gradient.enabled) {
                    color = "url(#" + pie.cssPrefix + "grad" + i + ")";
                }
                return color;
            })
            .style("stroke", segmentStroke)
            .style("stroke-width", 1)
            //.transition()
            //.ease(d3.easeCubicInOut)
            //.duration(loadSpeed)
            .attr("data-index", function(d, i) { return i; })
            .attr("d", arc);
/*
            .attrTween("d", function(b) {
                var i = d3.interpolate({ value: 0 }, b);
                return function(t) {
                    var ret = pie.arc(i(t));
                    console.log(ret);
                    return ret;
                };
            });
*/
        pie.svg.selectAll("g." + pie.cssPrefix + "arc")
            .attr("transform",
            function(d, i) {
                var angle = 0;
                if (i > 0) {
                    angle = segments.getSegmentAngle(i-1, pie.options.data.content, pie.totalSize);
                }
                return "rotate(" + angle + ")";
            }
        );
        pie.arc = arc;
    },

    addGradients: function(pie) {
        var grads = pie.svg.append("defs")
            .selectAll("radialGradient")
            .data(pie.options.data.content)
            .enter().append("radialGradient")
            .attr("gradientUnits", "userSpaceOnUse")
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", "120%")
            .attr("id", function(d, i) { return pie.cssPrefix + "grad" + i; });

        grads.append("stop").attr("offset", "0%").style("stop-color", function(d, i) { return pie.options.colors[i]; });
        grads.append("stop").attr("offset", pie.options.misc.gradient.percentage + "%").style("stop-color", pie.options.misc.gradient.color);
    },

    addSegmentEventHandlers: function(pie) {
        var arc = pie.svg.selectAll("." + pie.cssPrefix + "arc");
        arc = arc.merge(pie.__labels.inner.merge(pie.__labels.outer));

        arc.on("click", function() {
            var currentEl = d3.select(this);
            var segment;

            // mouseover works on both the segments AND the segment labels, hence the following
            if (currentEl.attr("class") === pie.cssPrefix + "arc") {
                segment = currentEl.select("path");
            } else {
                var index = currentEl.attr("data-index");
                segment = d3.select("#" + pie.cssPrefix + "segment" + index);
            }

            var isExpanded = segment.attr("class") === pie.cssPrefix + "expanded";
            segments.onSegmentEvent(pie, pie.options.callbacks.onClickSegment, segment, isExpanded);
            if (pie.options.effects.pullOutSegmentOnClick.effect !== "none") {
                if (isExpanded) {
                    segments.closeSegment(pie, segment.node());
                } else {
                    segments.openSegment(pie, segment.node());
                }
            }
        });

        arc.on("mouseover", function() {
            var currentEl = d3.select(this);
            var segment, index;

            if (currentEl.attr("class") === pie.cssPrefix + "arc") {
                segment = currentEl.select("path");
            } else {
                index = currentEl.attr("data-index");
                segment = d3.select("#" + pie.cssPrefix + "segment" + index);
            }

            if (pie.options.effects.highlightSegmentOnMouseover) {
                index = segment.attr("data-index");
                var segColor = pie.options.colors[index];
                segment.style("fill", helpers.getColorShade(segColor, pie.options.effects.highlightLuminosity));
            }

            if (pie.options.tooltips.enabled) {
                index = segment.attr("data-index");
                tt.showTooltip(pie, index);
            }

            var isExpanded = segment.attr("class") === pie.cssPrefix + "expanded";
            segments.onSegmentEvent(pie, pie.options.callbacks.onMouseoverSegment, segment, isExpanded);
        });

        arc.on("mousemove", function() {
            tt.moveTooltip(pie);
        });

        arc.on("mouseout", function() {
            var currentEl = d3.select(this);
            var segment, index;

            if (currentEl.attr("class") === pie.cssPrefix + "arc") {
                segment = currentEl.select("path");
            } else {
                index = currentEl.attr("data-index");
                segment = d3.select("#" + pie.cssPrefix + "segment" + index);
            }

            if (pie.options.effects.highlightSegmentOnMouseover) {
                index = segment.attr("data-index");
                var color = pie.options.colors[index];
                if (pie.options.misc.gradient.enabled) {
                    color = "url(#" + pie.cssPrefix + "grad" + index + ")";
                }
                segment.style("fill", color);
            }

            if (pie.options.tooltips.enabled) {
                index = segment.attr("data-index");
                tt.hideTooltip(pie, index);
            }

            var isExpanded = segment.attr("class") === pie.cssPrefix + "expanded";
            segments.onSegmentEvent(pie, pie.options.callbacks.onMouseoutSegment, segment, isExpanded);
        });
    },

    // helper function used to call the click, mouseover, mouseout segment callback functions
    onSegmentEvent: function(pie, func, segment, isExpanded) {
        if (!helpers.isFunction(func)) {
            return;
        }
        var index = parseInt(segment.attr("data-index"), 10);
        func({
            segment: segment.node(),
            index: index,
            expanded: isExpanded,
            data: pie.options.data.content[index]
        });
    },

    openSegment: function(pie, segment) {
        if (pie.isOpeningSegment) {
            return;
        }
        pie.isOpeningSegment = true;

        segments.maybeCloseOpenSegment(pie);

        d3.select(segment)
            .transition()
            .ease(segments.effectMap[pie.options.effects.pullOutSegmentOnClick.effect])
            .duration(pie.options.effects.pullOutSegmentOnClick.speed)
            .attr("transform", function(d, i) {
                var c = pie.arc.centroid(d),
                    x = c[0],
                    y = c[1],
                    h = Math.sqrt(x*x + y*y),
                    pullOutSize = parseInt(pie.options.effects.pullOutSegmentOnClick.size, 10);

                return "translate(" + ((x/h) * pullOutSize) + ',' + ((y/h) * pullOutSize) + ")";
            })
            .on("end", function(d, i) {
                pie.currentlyOpenSegment = segment;
                pie.isOpeningSegment = false;
                d3.select(segment).attr("class", pie.cssPrefix + "expanded");
            });
    },

    maybeCloseOpenSegment: function(pie) {
        if (typeof pie !== 'undefined' && pie.svg.selectAll("." + pie.cssPrefix + "expanded").size() > 0) {
            segments.closeSegment(pie, pie.svg.select("." + pie.cssPrefix + "expanded").node());
        }
    },

    closeSegment: function(pie, segment) {
        d3.select(segment)
            .transition()
            .duration(400)
            .attr("transform", "translate(0,0)")
            .on("end", function(d, i) {
                d3.select(segment).attr("class", "");
                pie.currentlyOpenSegment = null;
            });
    },

    getCentroid: function(el) {
        var bbox = el.getBBox();
        return {
            x: bbox.x + bbox.width / 2,
            y: bbox.y + bbox.height / 2
        };
    },

    /**
     * General helper function to return a segment's angle, in various different ways.
     * @param index
     * @param opts optional object for fine-tuning exactly what you want.
     */
    getSegmentAngle: function(index, data, totalSize, opts) {
        var options = extend({
            // if true, this returns the full angle from the origin. Otherwise it returns the single segment angle
            compounded: true,

            // optionally returns the midpoint of the angle instead of the full angle
            midpoint: false
        }, opts);

        var currValue = data[index].value;
        var fullValue;
        if (options.compounded) {
            fullValue = 0;

            // get all values up to and including the specified index
            for (var i=0; i<=index; i++) {
                fullValue += data[i].value;
            }
        }

        if (typeof fullValue === 'undefined') {
            fullValue = currValue;
        }

        // now convert the full value to an angle
        var angle = (fullValue / totalSize) * 360;

        // lastly, if we want the midpoint, factor that sucker in
        if (options.midpoint) {
            var currAngle = (currValue / totalSize) * 360;
            angle -= (currAngle / 2);
        }

        return angle;
    }

};

    //// --------- text.js -----------
var text = {
    offscreenCoord: -10000,

    addTitle: function(pie) {
        pie.__title = pie.svg.selectAll("." + pie.cssPrefix + "title")
            .data([pie.options.header.title])
            .enter()
            .append("text")
            .text(function(d) { return d.text; })
            .attr("id", pie.cssPrefix + "title")
            .attr("class", pie.cssPrefix + "title")
            .attr("x", text.offscreenCoord)
            .attr("y", text.offscreenCoord)
            .attr("text-anchor", function() {
                var location;
                if (pie.options.header.location === "top-center" || pie.options.header.location === "pie-center") {
                    location = "middle";
                } else {
                    location = "left";
                }
                return location;
            })
            .attr("fill", function(d) { return d.color; })
            .style("font-size", function(d) { return d.fontSize + "px"; })
            .style("font-weight", function(d) { return d.fontWeight; })
            .style("font-family", function(d) { return d.font; });
    },

    positionTitle: function(pie) {
        var textComponents = pie.textComponents;
        var headerLocation = pie.options.header.location;
        var canvasPadding = pie.options.misc.canvasPadding;
        var canvasWidth = pie.options.size.canvasWidth;
        var titleSubtitlePadding = pie.options.header.titleSubtitlePadding;

        var x;
        if (headerLocation === "top-left") {
            x = canvasPadding.left;
        } else {
            x = ((canvasWidth - canvasPadding.right) / 2) + canvasPadding.left;
        }

        // add whatever offset has been added by user
        x += pie.options.misc.pieCenterOffset.x;

        var y = canvasPadding.top + textComponents.title.h;

        if (headerLocation === "pie-center") {
            y = pie.pieCenter.y;

            // still not fully correct
            if (textComponents.subtitle.exists) {
                var totalTitleHeight = textComponents.title.h + titleSubtitlePadding + textComponents.subtitle.h;
                y = y - (totalTitleHeight / 2) + textComponents.title.h;
            } else {
                y += (textComponents.title.h / 4);
            }
        }

        pie.__title
            .attr("x", x)
            .attr("y", y);
    },

    addSubtitle: function(pie) {
        var headerLocation = pie.options.header.location;

        pie.__subtitle = pie.svg.selectAll("." + pie.cssPrefix + "subtitle")
            .data([pie.options.header.subtitle])
            .enter()
            .append("text")
            .text(function(d) { return d.text; })
            .attr("x", text.offscreenCoord)
            .attr("y", text.offscreenCoord)
            .attr("id", pie.cssPrefix + "subtitle")
            .attr("class", pie.cssPrefix + "subtitle")
            .attr("text-anchor", function() {
                var location;
                if (headerLocation === "top-center" || headerLocation === "pie-center") {
                    location = "middle";
                } else {
                    location = "left";
                }
                return location;
            })
            .attr("fill", function(d) { return d.color; })
            .style("font-size", function(d) { return d.fontSize + "px"; })
            .style("font-weight", function(d) { return d.fontWeight; })
            .style("font-family", function(d) { return d.font; });
    },

    positionSubtitle: function(pie) {
        var canvasPadding = pie.options.misc.canvasPadding;
        var canvasWidth = pie.options.size.canvasWidth;

        var x;
        if (pie.options.header.location === "top-left") {
            x = canvasPadding.left;
        } else {
            x = ((canvasWidth - canvasPadding.right) / 2) + canvasPadding.left;
        }

        // add whatever offset has been added by user
        x += pie.options.misc.pieCenterOffset.x;

        var y = text.getHeaderHeight(pie);

        pie.__subtitle
            .attr("x", x)
            .attr("y", y);
    },

    addFooter: function(pie) {
        pie.__footer = pie.svg.selectAll("." + pie.cssPrefix + "footer")
            .data([pie.options.footer])
            .enter()
            .append("text")
            .text(function(d) { return d.text; })
            .attr("x", text.offscreenCoord)
            .attr("y", text.offscreenCoord)
            .attr("id", pie.cssPrefix + "footer")
            .attr("class", pie.cssPrefix + "footer")
            .attr("text-anchor", function() {
                var location = "left";
                if (pie.options.footer.location === "bottom-center") {
                    location = "middle";
                } else if (pie.options.footer.location === "bottom-right") {
                    location = "left"; // on purpose. We have to change the x-coord to make it properly right-aligned
                }
                return location;
            })
            .attr("fill", function(d) { return d.color; })
            .style("font-size", function(d) { return d.fontSize + "px"; })
            .style("font-weight", function(d) { return d.fontWeight; })
            .style("font-family", function(d) { return d.font; });
    },

    positionFooter: function(pie) {
        var footerLocation = pie.options.footer.location;
        var footerWidth = pie.textComponents.footer.w;
        var canvasWidth = pie.options.size.canvasWidth;
        var canvasHeight = pie.options.size.canvasHeight;
        var canvasPadding = pie.options.misc.canvasPadding;

        var x;
        if (footerLocation === "bottom-left") {
            x = canvasPadding.left;
        } else if (footerLocation === "bottom-right") {
            x = canvasWidth - footerWidth - canvasPadding.right;
        } else {
            x = canvasWidth / 2; // TODO - shouldn't this also take into account padding?
        }

        pie.__footer
            .attr("x", x)
            .attr("y", canvasHeight - canvasPadding.bottom);
    },

    getHeaderHeight: function(pie) {
        var h;
        if (pie.textComponents.title.exists) {

            // if the subtitle isn't defined, it'll be set to 0
            var totalTitleHeight = pie.textComponents.title.h + pie.options.header.titleSubtitlePadding + pie.textComponents.subtitle.h;
            if (pie.options.header.location === "pie-center") {
                h = pie.pieCenter.y - (totalTitleHeight / 2) + totalTitleHeight;
            } else {
                h = totalTitleHeight + pie.options.misc.canvasPadding.top;
            }
        } else {
            if (pie.options.header.location === "pie-center") {
                var footerPlusPadding = pie.options.misc.canvasPadding.bottom + pie.textComponents.footer.h;
                h = ((pie.options.size.canvasHeight - footerPlusPadding) / 2) + pie.options.misc.canvasPadding.top + (pie.textComponents.subtitle.h / 2);
            } else {
                h = pie.options.misc.canvasPadding.top + pie.textComponents.subtitle.h;
            }
        }
        return h;
    }
};

    //// --------- validate.js -----------
var tt = {
    addTooltips: function(pie) {

    // group the label groups (label, percentage, value) into a single element for simpler positioning
    var tooltips = pie.svg.insert("g")
        .attr("class", pie.cssPrefix + "tooltips");

    tooltips.selectAll("." + pie.cssPrefix + "tooltip")
        .data(pie.options.data.content)
        .enter()
        .append("g")
        .attr("class", pie.cssPrefix + "tooltip")
        .attr("id", function(d, i) { return pie.cssPrefix + "tooltip" + i; })
        .style("opacity", 0)
        .append("rect")
        .attr("rx", pie.options.tooltips.styles.borderRadius)
        .attr("ry", pie.options.tooltips.styles.borderRadius)
        .attr("x", -pie.options.tooltips.styles.padding)
        .attr("opacity", pie.options.tooltips.styles.backgroundOpacity)
        .style("fill", pie.options.tooltips.styles.backgroundColor);

    tooltips.selectAll("." + pie.cssPrefix + "tooltip")
        .data(pie.options.data.content)
        .append("text")
        .attr("fill", function(d) { return pie.options.tooltips.styles.color; })
        .style("font-size", function(d) { return pie.options.tooltips.styles.fontSize; })
        .style("font-weight", function(d) { return pie.options.tooltips.styles.fontWeight; })
        .style("font-family", function(d) { return pie.options.tooltips.styles.font; })
        .text(function(d, i) {
            var caption = pie.options.tooltips.string;
            if (pie.options.tooltips.type === "caption") {
                caption = d.caption;
            }
            return tt.replacePlaceholders(pie, caption, i, {
                label: d.label,
                value: d.value,
                percentage: d.percentage
            });
        });

        tooltips.selectAll("." + pie.cssPrefix + "tooltip rect")
            .attr("width", function (d, i) {
                var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i);
                return dims.w + (2 * pie.options.tooltips.styles.padding);
            })
            .attr("height", function (d, i) {
                var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i);
                return dims.h + (2 * pie.options.tooltips.styles.padding);
            })
            .attr("y", function (d, i) {
                var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i);
                return -(dims.h / 2) + 1;
            });
    },

    showTooltip: function(pie, index) {
        var fadeInSpeed = pie.options.tooltips.styles.fadeInSpeed;
        if (tt.currentTooltip === index) {
            fadeInSpeed = 1;
        }

        tt.currentTooltip = index;
        d3.select("#" + pie.cssPrefix + "tooltip" + index)
            .transition()
            .duration(fadeInSpeed)
            .style("opacity", function() { return 1; });

        tt.moveTooltip(pie);
    },

    moveTooltip: function(pie) {
        d3.selectAll("#" + pie.cssPrefix + "tooltip" + tt.currentTooltip)
            .attr("transform", function(d) {
                var mouseCoords = d3.mouse(this.parentNode);
                var x = mouseCoords[0] + pie.options.tooltips.styles.padding + 2;
                var y = mouseCoords[1] - (2 * pie.options.tooltips.styles.padding) - 2;
                    return "translate(" + x + "," + y + ")";
                });
    },

    hideTooltip: function(pie, index) {
        d3.select("#" + pie.cssPrefix + "tooltip" + index)
            .style("opacity", function() { return 0; });

        // move the tooltip offscreen. This ensures that when the user next mouseovers the segment the hidden
        // element won't interfere
        d3.select("#" + pie.cssPrefix + "tooltip" + tt.currentTooltip)
            .attr("transform", function(d, i) {
                // klutzy, but it accounts for tooltip padding which could push it onscreen
                var x = pie.options.size.canvasWidth + 1000;
                var y = pie.options.size.canvasHeight + 1000;
                return "translate(" + x + "," + y + ")";
            });
    },

    replacePlaceholders: function(pie, str, index, replacements) {

        // if the user has defined a placeholderParser function, call it before doing the replacements
        if (helpers.isFunction(pie.options.tooltips.placeholderParser)) {
            pie.options.tooltips.placeholderParser(index, replacements);
        }

        var replacer = function()  {
            return function(match) {
                var placeholder = arguments[1];
                if (replacements.hasOwnProperty(placeholder)) {
                    return replacements[arguments[1]];
                } else {
                    return arguments[0];
                }
            };
        };
        return str.replace(/\{(\w+)\}/g, replacer(replacements));
    }
};


    // --------------------------------------------------------------------------------------------

    // our constructor
    var d3pie = function(element, options) {

        // element can be an ID or DOM element
        this.element = element;
        if (typeof element === "string") {
            var el = element.replace(/^#/, ""); // replace any jQuery-like ID hash char
            this.element = document.getElementById(el);
        }

        var opts = {};
        extend(true, opts, defaultSettings, options);
        this.options = opts;

        // if the user specified a custom CSS element prefix (ID, class), use it
        if (this.options.misc.cssPrefix !== null) {
            this.cssPrefix = this.options.misc.cssPrefix;
        } else {
            this.cssPrefix = "p" + _uniqueIDCounter + "_";
            _uniqueIDCounter++;
        }


        // now run some validation on the user-defined info
        if (!validate.initialCheck(this)) {
            return;
        }

        // add a data-role to the DOM node to let anyone know that it contains a d3pie instance, and the d3pie version
        d3.select(this.element).attr(_scriptName, _version);

        // things that are done once
        _setupData.call(this);
        _init.call(this);
    };

    d3pie.prototype.recreate = function() {
        // now run some validation on the user-defined info
        if (!validate.initialCheck(this)) {
            return;
        }

        _setupData.call(this);
        _init.call(this);
    };

    d3pie.prototype.redraw = function() {
        this.element.innerHTML = "";
        _init.call(this);
    };

    d3pie.prototype.destroy = function() {
        this.element.innerHTML = ""; // clear out the SVG
        d3.select(this.element).attr(_scriptName, null); // remove the data attr
    };

    /**
     * Returns all pertinent info about the current open info. Returns null if nothing's open, or if one is, an object of
     * the following form:
     * 	{
     * 	  element: DOM NODE,
     * 	  index: N,
     * 	  data: {}
     * 	}
     */
    d3pie.prototype.getOpenSegment = function() {
        var segment = this.currentlyOpenSegment;
        if (segment !== null && typeof segment !== "undefined") {
            var index = parseInt(d3.select(segment).attr("data-index"), 10);
            return {
                element: segment,
                index: index,
                data: this.options.data.content[index]
            };
        } else {
            return null;
        }
    };

    d3pie.prototype.openSegment = function(index) {
        index = parseInt(index, 10);
        if (index < 0 || index > this.options.data.content.length-1) {
            return;
        }
        segments.openSegment(this, d3.select("#" + this.cssPrefix + "segment" + index).node());
    };

    d3pie.prototype.closeSegment = function() {
        segments.maybeCloseOpenSegment(this);
    };

    // this let's the user dynamically update aspects of the pie chart without causing a complete redraw. It
    // intelligently re-renders only the part of the pie that the user specifies. Some things cause a repaint, others
    // just redraw the single element
    d3pie.prototype.updateProp = function(propKey, value) {
        switch (propKey) {
            case "header.title.text":
                var oldVal = helpers.processObj(this.options, propKey);
                helpers.processObj(this.options, propKey, value);
                d3.select("#" + this.cssPrefix + "title").html(value);
                if ((oldVal === "" && value !== "") || (oldVal !== "" && value === "")) {
                    this.redraw();
                }
                break;

            case "header.subtitle.text":
                var oldValue = helpers.processObj(this.options, propKey);
                helpers.processObj(this.options, propKey, value);
                d3.select("#" + this.cssPrefix + "subtitle").html(value);
                if ((oldValue === "" && value !== "") || (oldValue !== "" && value === "")) {
                    this.redraw();
                }
                break;

            case "callbacks.onload":
            case "callbacks.onMouseoverSegment":
            case "callbacks.onMouseoutSegment":
            case "callbacks.onClickSegment":
            case "effects.pullOutSegmentOnClick.effect":
            case "effects.pullOutSegmentOnClick.speed":
            case "effects.pullOutSegmentOnClick.size":
            case "effects.highlightSegmentOnMouseover":
            case "effects.highlightLuminosity":
                helpers.processObj(this.options, propKey, value);
                break;

            // everything else, attempt to update it & do a repaint
            default:
                helpers.processObj(this.options, propKey, value);

                this.destroy();
                this.recreate();
                break;
        }
    };


    // ------------------------------------------------------------------------------------------------

    var _setupData = function () {
        this.options.data.content = math.sortPieData(this);
        if (this.options.data.smallSegmentGrouping.enabled) {
            this.options.data.content = helpers.applySmallSegmentGrouping(this.options.data.content, this.options.data.smallSegmentGrouping);
        }


        this.options.colors = helpers.initSegmentColors(this);
        this.totalSize      = math.getTotalPieSize(this.options.data.content);

        var dp = this.options.labels.percentage.decimalPlaces;

        // add in percentage data to content
        for (var i=0; i<this.options.data.content.length; i++) {
            this.options.data.content[i].percentage = _getPercentage(this.options.data.content[i].value, this.totalSize, dp);
        }

        // adjust the final item to ensure the percentage always adds up to precisely 100%. This is necessary
        var totalPercentage = 0;
        for (var j=0; j<this.options.data.content.length; j++) {
            if (j === this.options.data.content.length - 1) {
                this.options.data.content[j].percentage = (100 - totalPercentage).toFixed(dp);
            }
            totalPercentage += parseFloat(this.options.data.content[j].percentage);
        }
    };

    var _init = function() {

        // prep-work
        this.svg = helpers.addSVGSpace(this);

        // store info about the main text components as part of the d3pie object instance
        this.textComponents = {
            headerHeight: 0,
            title: {
                exists: this.options.header.title.text !== "",
                h: 0,
                w: 0
            },
            subtitle: {
                exists: this.options.header.subtitle.text !== "",
                h: 0,
                w: 0
            },
            footer: {
                exists: this.options.footer.text !== "",
                h: 0,
                w: 0
            }
        };

        this.outerLabelGroupData = [];

        // add the key text components offscreen (title, subtitle, footer). We need to know their widths/heights for later computation
        if (this.textComponents.title.exists) text.addTitle(this);
        if (this.textComponents.subtitle.exists) text.addSubtitle(this);
        text.addFooter(this);

        // console.log(this);

        // the footer never moves. Put it in place now
        var self = this;
        text.positionFooter(self);
        var d3 = helpers.getDimensions(self.__footer.node());
        self.textComponents.footer.h = d3.h;
        self.textComponents.footer.w = d3.w;

        if (self.textComponents.title.exists) {
            var d1 = helpers.getDimensions(self.__title.node());
            self.textComponents.title.h = d1.h;
            self.textComponents.title.w = d1.w;
        }

        if (self.textComponents.subtitle.exists) {
            var d2 = helpers.getDimensions(self.__subtitle.node());
            self.textComponents.subtitle.h = d2.h;
            self.textComponents.subtitle.w = d2.w;
        }

        // now compute the full header height
        if (self.textComponents.title.exists || self.textComponents.subtitle.exists) {
            var headerHeight = 0;
            if (self.textComponents.title.exists) {
                headerHeight += self.textComponents.title.h;
                if (self.textComponents.subtitle.exists) {
                    headerHeight += self.options.header.titleSubtitlePadding;
                }
            }
            if (self.textComponents.subtitle.exists) {
                headerHeight += self.textComponents.subtitle.h;
            }
            self.textComponents.headerHeight = headerHeight;
        }

        // at this point, all main text component dimensions have been calculated
        math.computePieRadius(self);

        // this value is used all over the place for placing things and calculating locations. We figure it out ONCE
        // and store it as part of the object
        math.calculatePieCenter(self);

        // position the title and subtitle
        text.positionTitle(self);
        text.positionSubtitle(self);

        // now create the pie chart segments, and gradients if the user desired
        if (self.options.misc.gradient.enabled) {
            segments.addGradients(self);
        }
        segments.create(self); // also creates this.arc

        self.__labels = {};
        labels.add(self, "inner", self.options.labels.inner.format);
        labels.add(self, "outer", self.options.labels.outer.format);

        // position the label elements relatively within their individual group (label, percentage, value)
        labels.positionLabelElements(self, "inner", self.options.labels.inner.format);
        labels.positionLabelElements(self, "outer", self.options.labels.outer.format);
        labels.computeOuterLabelCoords(self);

        // this is (and should be) dumb. It just places the outer groups at their calculated, collision-free positions
        labels.positionLabelGroups(self, "outer");

        // we use the label line positions for many other calculations, so ALWAYS compute them
        labels.computeLabelLinePositions(self);

        // only add them if they're actually enabled
        if (self.options.labels.lines.enabled && self.options.labels.outer.format !== "none") {
            labels.addLabelLines(self);
        }

        labels.positionLabelGroups(self, "inner");

        if (helpers.isFunction(self.options.callbacks.onload)) {
            try {
                self.options.callbacks.onload();
            } catch (e) { }
        }

        // add and position the tooltips
        if (self.options.tooltips.enabled) {
            tt.addTooltips(self);
        }

        segments.addSegmentEventHandlers(self);
    };

    var _getPercentage = function(value, total, decimalPlaces) {
        var relativeAmount = value / total;
        if (decimalPlaces <= 0) {
            return Math.round(relativeAmount * 100);
        } else {
            return (relativeAmount * 100).toFixed(decimalPlaces);
        }
    };

    return d3pie;
}));