Backups Created:
/home/japatmex/public_html/wp-content/edit-wolf.php

SavvyWolf - MANAGER

Edit File: donuts.js

/* ------------------------------------------------------------------------------
 *
 *  # D3.js - horizontal bar chart
 *
 *  Demo d3.js horizontal bar chart setup with .csv data source
 *
 * ---------------------------------------------------------------------------- */

// Setup module
// ------------------------------

var DashboardDonuts = function() {

//
    // Setup module components
    //

// Marketing campaigns donut chart
    var _MarketingCampaignsDonutChart = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

// Initialize chart only if element exsists in the DOM
        if($(element).length > 0) {

// Basic setup
            // ------------------------------

// Add data set
 var data = [
 {
 "browser": "Google Adwords",
 "icon": "",
 "value": 1047
 }, {
 "browser": "Social media",
 "icon": "",
 "value": 2948
 }, {
 "browser": "Youtube video",
 "icon": "",
 "value": 3909
 }
 ];

// Main variables
            var d3Container = d3.select(element),
                distance = 2, // reserve 2px space for mouseover arc moving
                radius = (size/2) - distance,
                sum = d3.sum(data, function(d) { return d.value; });

// Colors
            var colorrange = ['#66bb6a','#5ab1ef','#ffb980'];

// Tooltip
            // ------------------------------

var tip = d3.tip()
 .attr('class', 'd3-tip')
 .offset([-10, 0])
 .direction('e')
 .html(function (d) {
 return '<ul class="list-unstyled mb-1">' +
 '<li>' + '<div class="font-size-base mb-1 mt-1">' + d.data.icon + d.data.browser + '</div>' + '</li>' +
 '<li>' + 'Visits: &nbsp;' + '' + d.value + '' + '</li>' +
 '<li>' + 'Share: &nbsp;' + '' + (100 / (sum / d.value)).toFixed(2) + '%' + '' + '</li>' +
 '</ul>';
 });

// Create chart
            // ------------------------------

// Add svg element
            var container = d3Container.append('svg').call(tip);
            
            // Add SVG group
            var svg = container
                .attr('width', size)
                .attr('height', size)
                .append('g')
                    .attr('transform', 'translate(' + (size / 2) + ',' + (size / 2) + ')');

// Construct chart layout
            // ------------------------------

// Pie
            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(Math.PI)
                .endAngle(3 * Math.PI)
                .value(function (d) { 
                    return d.value;
                });

// Arc
            var arc = d3.svg.arc()
                .outerRadius(radius)
                .innerRadius(radius / 2);

// Colors
            var colors = d3.scale.ordinal().range(colorrange);

//
            // Append chart elements
            //

// Group chart elements
            var arcGroup = svg.selectAll('.d3-arc')
                .data(pie(data))
                .enter()
                .append('g') 
                    .attr('class', 'd3-arc d3-slice-border')
                    .style('cursor', 'pointer');
            
            // Append path
            var arcPath = arcGroup
                .append('path')
                .style('fill', function (d) { return colors(d.data.value); });

// Add tooltip
            arcPath
                .on('mouseover', function (d, i) {

// Transition on mouseover
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('elastic')
                        .attr('transform', function (d) {
                            d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
                            var x = Math.sin(d.midAngle) * distance;
                            var y = -Math.cos(d.midAngle) * distance;
                            return 'translate(' + x + ',' + y + ')';
                        });
                })

.on('mousemove', function (d) {
                    
                    // Show tooltip on mousemove
                    tip.show(d)
                        .style('top', (d3.event.pageY - 40) + 'px')
                        .style('left', (d3.event.pageX + 30) + 'px');
                })

.on('mouseout', function (d, i) {

// Mouseout transition
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('bounce')
                        .attr('transform', 'translate(0,0)');

// Hide tooltip
                    tip.hide(d);
                });

// Animate chart on load
            arcPath
                .transition()
                    .delay(function(d, i) { return i * 500; })
                    .duration(500)
                    .attrTween('d', function(d) {
                        var interpolate = d3.interpolate(d.startAngle,d.endAngle);
                        return function(t) {
                            d.endAngle = interpolate(t);
                            return arc(d);  
                        }; 
                    });
        }
    };

// Campaign status donut chart
    var _CampaignStatusDonutChart = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

// Initialize chart only if element exsists in the DOM
        if($(element).length > 0) {

// Basic setup
            // ------------------------------

// Add data set
 var data = [
 {
 "status": "Active campaigns",
 "icon": "",
 "value": 439
 }, {
 "status": "Closed campaigns",
 "icon": "",
 "value": 290
 }, {
 "status": "Pending campaigns",
 "icon": "",
 "value": 190
 }, {
 "status": "Campaigns on hold",
 "icon": "",
 "value": 148
 }
 ];

// Colors
            var colorrange = ['#5ab1ef', '#ffb980', '#d87a80', '#8d98b3'];

// Tooltip
            // ------------------------------

var tip = d3.tip()
 .attr('class', 'd3-tip')
 .offset([-10, 0])
 .direction('e')
 .html(function (d) {
 return '<ul class="list-unstyled mb-1">' +
 '<li>' + '<div class="font-size-base mb-1 mt-1">' + d.data.icon + d.data.status + '</div>' + '</li>' +
 '<li>' + 'Total: &nbsp;' + '' + d.value + '' + '</li>' +
 '<li>' + 'Share: &nbsp;' + '' + (100 / (sum / d.value)).toFixed(2) + '%' + '' + '</li>' +
 '</ul>';
 });

// Create chart
            // ------------------------------

// Construct chart layout
            // ------------------------------

// Arc
            var arc = d3.svg.arc()
                .outerRadius(radius)
                .innerRadius(radius / 2);

// Colors
            var colors = d3.scale.ordinal().range(colorrange);

//
            // Append chart elements
            //

// Add tooltip
            arcPath
                .on('mouseover', function (d, i) {

.on('mouseout', function (d, i) {

// Hide tooltip
                    tip.hide(d);
                });

// Tickets status donut chart
    var _TicketStatusDonutChart = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

// Initialize chart only if element exsists in the DOM
        if($(element).length > 0) {

// Basic setup
            // ------------------------------

// Add data set
 var data = [
 {
 "status": "Pending tickets",
 "icon": "",
 "value": 295
 }, {
 "status": "Resolved tickets",
 "icon": "",
 "value": 189
 }, {
 "status": "Closed tickets",
 "icon": "",
 "value": 277
 }
 ];

// Colors
            var colorrange = ['#66bb6a','#5ab1ef','#ffb980'];

// Tooltip
            // ------------------------------

var tip = d3.tip()
 .attr('class', 'd3-tip')
 .offset([-10, 0])
 .direction('e')
 .html(function (d) {
 return '<ul class="list-unstyled mb-1">' +
 '<li>' + '<div class="font-size-base mb-1 mt-1">' + d.data.icon + d.data.status + '</div>' + '</li>' +
 '<li>' + 'Total: &nbsp;' + '' + d.value + '' + '</li>' +
 '<li>' + 'Share: &nbsp;' + '' + (100 / (sum / d.value)).toFixed(2) + '%' + '' + '</li>' +
 '</ul>';
 });

// Create chart
            // ------------------------------

// Construct chart layout
            // ------------------------------

// Arc
            var arc = d3.svg.arc()
                .outerRadius(radius)
                .innerRadius(radius / 2);

// Colors
            var colors = d3.scale.ordinal().range(colorrange);

//
            // Append chart elements
            //

// Add tooltip
            arcPath
                .on('mouseover', function (d, i) {

.on('mouseout', function (d, i) {

// Hide tooltip
                    tip.hide(d);
                });

//
    // Return objects assigned to module
    //

return {
        init: function() {
            _MarketingCampaignsDonutChart('#campaigns-donut', 42);
            _CampaignStatusDonutChart('#campaign-status-pie', 42);
            _TicketStatusDonutChart('#tickets-status', 42);
        }
    }
}();

// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    DashboardDonuts.init();
});