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

SavvyWolf - MANAGER

Edit File: dashboard.js

/* ------------------------------------------------------------------------------
 *
 *  # Dashboard configuration
 *
 *  Demo dashboard configuration. Contains charts and plugin initializations
 *
 * ---------------------------------------------------------------------------- */

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

var Dashboard = function () {

//
    // Setup module components
    //

// Setup Switchery
    var _componentSwitchery = function() {
        if (typeof Switchery == 'undefined') {
            console.warn('Warning - switchery.min.js is not loaded.');
            return;
        }

// Initialize multiple switches
        var switches = Array.prototype.slice.call(document.querySelectorAll('.form-input-switchery'));
        switches.forEach(function(html) {
            var switchery = new Switchery(html);
        });
    };

// Setup Daterangepicker
    var _componentDaterange = function() {
        if (!$().daterangepicker) {
            console.warn('Warning - daterangepicker.js is not loaded.');
            return;
        }

// Initialize
        $('.daterange-ranges').daterangepicker(
            {
                startDate: moment().subtract(29, 'days'),
                endDate: moment(),
                minDate: '01/01/2015',
                maxDate: '12/31/2019',
                dateLimit: { days: 60 },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                opens: $('html').attr('dir') == 'rtl' ? 'right' : 'left',
                applyClass: 'btn-sm bg-slate-600 btn-block',
                cancelClass: 'btn-sm btn-light btn-block',
                locale: {
                    format: 'MM/DD/YYYY',
                    direction: $('html').attr('dir') == 'rtl' ? 'rtl' : 'ltr'
                }
            },
            function(start, end) {
                $('.daterange-ranges span').html(start.format('MMMM D') + ' - ' + end.format('MMMM D'));
            }
        );
        $('.daterange-ranges span').html(moment().subtract(29, 'days').format('MMMM D') + ' - ' + moment().format('MMMM D'));
    };

// Use first letter as an icon
    var _componentIconLetter = function() {

// Grab first letter and insert to the icon
        $('.table tr').each(function() {

// Title
            var $title = $(this).find('.letter-icon-title'),
                letter = $title.eq(0).text().charAt(0).toUpperCase();

// Icon
            var $icon = $(this).find('.letter-icon');
                $icon.eq(0).text(letter);
        });
    };

//
    // Charts configs
    //

// Traffic sources stream chart
    // var _TrafficSourcesStreamChart = function(element, height) {
    //     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
    //         // ------------------------------

//         // Define main variables
    //         var d3Container = d3.select(element),
    //             margin = {top: 5, right: 50, bottom: 40, left: 50},
    //             width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
    //             height = height - margin.top - margin.bottom,
    //             tooltipOffset = 30;

//         // Tooltip
    //         var tooltip = d3Container
    //             .append('div')
    //             .attr('class', 'd3-tip e')
    //             .style('display', 'none')

//         // Format date
    //         var format = d3.time.format('%m/%d/%y %H:%M');
    //         var formatDate = d3.time.format('%H:%M');

//         // Colors
    //         var colorrange = ['#03A9F4', '#29B6F6', '#4FC3F7', '#81D4FA', '#B3E5FC', '#E1F5FE'];

//         // Construct scales
    //         // ------------------------------

//         // Horizontal
    //         var x = d3.time.scale().range([0, width]);

//         // Vertical
    //         var y = d3.scale.linear().range([height, 0]);

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

//         // Create axes
    //         // ------------------------------

//         // Horizontal
    //         var xAxis = d3.svg.axis()
    //             .scale(x)
    //             .orient('bottom')
    //             .ticks(d3.time.hours, 4)
    //             .innerTickSize(4)
    //             .tickPadding(8)
    //             .tickFormat(d3.time.format('%H:%M')); // Display hours and minutes in 24h format

//         // Left vertical
    //         var yAxis = d3.svg.axis()
    //             .scale(y)
    //             .ticks(6)
    //             .innerTickSize(4)
    //             .outerTickSize(0)
    //             .tickPadding(8)
    //             .tickFormat(function (d) { return (d/1000) + 'k'; });

//         // Right vertical
    //         var yAxis2 = yAxis;

//         // Dash lines
    //         var gridAxis = d3.svg.axis()
    //             .scale(y)
    //             .orient('left')
    //             .ticks(6)
    //             .tickPadding(8)
    //             .tickFormat('')
    //             .tickSize(-width, 0, 0);

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

//         // Container
    //         var container = d3Container.append('svg')

//         // SVG element
    //         var svg = container
    //             .attr('width', width + margin.left + margin.right)
    //             .attr('height', height + margin.top + margin.bottom)
    //                 .append('g')
    //                 .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

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

//         // Stack
    //         var stack = d3.layout.stack()
    //             .offset('silhouette')
    //             .values(function(d) { return d.values; })
    //             .x(function(d) { return d.date; })
    //             .y(function(d) { return d.value; });

//         // Nest
    //         var nest = d3.nest()
    //             .key(function(d) { return d.key; });

//         // Area
    //         var area = d3.svg.area()
    //             .interpolate('cardinal')
    //             .x(function(d) { return x(d.date); })
    //             .y0(function(d) { return y(d.y0); })
    //             .y1(function(d) { return y(d.y0 + d.y); });

//         // Load data
    //         // ------------------------------

//         d3.csv('../../../../global_assets/demo_data/dashboard/traffic_sources.csv', function (error, data) {

//             // Pull out values
    //             data.forEach(function (d) {
    //                 d.date = format.parse(d.date);
    //                 d.value = +d.value;
    //             });

//             // Stack and nest layers
    //             var layers = stack(nest.entries(data));

//             // Set input domains
    //             // ------------------------------

//             // Horizontal
    //             x.domain(d3.extent(data, function(d, i) { return d.date; }));

//             // Vertical
    //             y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

//             // Add grid
    //             // ------------------------------

//             // Horizontal grid. Must be before the group
    //             svg.append('g')
    //                 .attr('class', 'd3-grid-dashed')
    //                 .call(gridAxis);

//             //
    //             // Append chart elements
    //             //

//             // Stream layers
    //             // ------------------------------

//             // Create group
    //             var group = svg.append('g')
    //                 .attr('class', 'streamgraph-layers-group');

//             // And append paths to this group
    //             var layer = group.selectAll('.streamgraph-layer')
    //                 .data(layers)
    //                 .enter()
    //                     .append('path')
    //                     .attr('class', 'streamgraph-layer')
    //                     .attr('d', function(d) { return area(d.values); })                    
    //                     .style('stroke', '#fff')
    //                     .style('stroke-width', 0.5)
    //                     .style('fill', function(d, i) { return z(i); });

//             // Add transition
    //             var layerTransition = layer
    //                 .style('opacity', 0)
    //                 .transition()
    //                     .duration(750)
    //                     .delay(function(d, i) { return i * 50; })
    //                     .style('opacity', 1)

//             // Append axes
    //             // ------------------------------

//             //
    //             // Left vertical
    //             //

//             svg.append('g')
    //                 .attr('class', 'd3-axis d3-axis-left')
    //                 .call(yAxis.orient('left'));

//             // Hide first tick
    //             d3.select(svg.selectAll('.d3-axis-left .tick text')[0][0])
    //                 .style('visibility', 'hidden');

//             //
    //             // Right vertical
    //             //

//             svg.append('g')
    //                 .attr('class', 'd3-axis d3-axis-right')
    //                 .attr('transform', 'translate(' + width + ', 0)')
    //                 .call(yAxis2.orient('right'));

//             // Hide first tick
    //             d3.select(svg.selectAll('.d3-axis-right .tick text')[0][0])
    //                 .style('visibility', 'hidden');

//             //
    //             // Horizontal
    //             //

//             var xaxisg = svg.append('g')
    //                 .attr('class', 'd3-axis d3-axis-horizontal')
    //                 .attr('transform', 'translate(0,' + height + ')')
    //                 .call(xAxis);

//             // Add extra subticks for hidden hours
    //             xaxisg.selectAll('.d3-axis-subticks')
    //                 .data(x.ticks(d3.time.hours), function(d) { return d; })
    //                 .enter()
    //                 .append('line')
    //                 .attr('class', 'd3-axis-subticks')
    //                 .attr('y1', 0)
    //                 .attr('y2', 4)
    //                 .attr('x1', x)
    //                 .attr('x2', x);

//             // Add hover line and pointer
    //             // ------------------------------

//             // Append group to the group of paths to prevent appearance outside chart area
    //             var hoverLineGroup = group.append('g')
    //                 .attr('class', 'hover-line');

//             // Add line
    //             var hoverLine = hoverLineGroup
    //                 .append('line')
    //                 .attr('y1', 0)
    //                 .attr('y2', height)
    //                 .style('fill', 'none')
    //                 .style('stroke', '#fff')
    //                 .style('stroke-width', 1)
    //                 .style('pointer-events', 'none')
    //                 .style('shape-rendering', 'crispEdges')
    //                 .style('opacity', 0);

//             // Add pointer
    //             var hoverPointer = hoverLineGroup
    //                 .append('rect')
    //                 .attr('x', 2)
    //                 .attr('y', 2)
    //                 .attr('width', 6)
    //                 .attr('height', 6)
    //                 .style('fill', '#03A9F4')
    //                 .style('stroke', '#fff')
    //                 .style('stroke-width', 1)
    //                 .style('shape-rendering', 'crispEdges')
    //                 .style('pointer-events', 'none')
    //                 .style('opacity', 0);

//             // Append events to the layers group
    //             // ------------------------------

//             layerTransition.each('end', function() {
    //                 layer
    //                     .on('mouseover', function (d, i) {
    //                         svg.selectAll('.streamgraph-layer')
    //                             .transition()
    //                             .duration(250)
    //                             .style('opacity', function (d, j) {
    //                                 return j != i ? 0.75 : 1; // Mute all except hovered
    //                             });
    //                     })

//                     .on('mousemove', function (d, i) {
    //                         mouse = d3.mouse(this);
    //                         mousex = mouse[0];
    //                         mousey = mouse[1];
    //                         datearray = [];
    //                         var invertedx = x.invert(mousex);
    //                         invertedx = invertedx.getHours();
    //                         var selected = (d.values);
    //                         for (var k = 0; k < selected.length; k++) {
    //                             datearray[k] = selected[k].date
    //                             datearray[k] = datearray[k].getHours();
    //                         }
    //                         mousedate = datearray.indexOf(invertedx);
    //                         pro = d.values[mousedate].value;

//                         // Display mouse pointer
    //                         hoverPointer
    //                             .attr('x', mousex - 3)
    //                             .attr('y', mousey - 6)
    //                             .style('opacity', 1);

//                         hoverLine
    //                             .attr('x1', mousex)
    //                             .attr('x2', mousex)
    //                             .style('opacity', 1);

//                         //
    //                         // Tooltip
    //                         //

//                         // Tooltip data
    //                         tooltip.html(
    //                             '<ul class="list-unstyled mb-1">' +
    //                                 '<li>' + '<div class="font-size-base my-1"><i class="icon-circle-left2 mr-2"></i>' + d.key + '</div>' + '</li>' +
    //                                 '<li>' + 'Visits: &nbsp;' + "<span class='font-weight-semibold float-right'>" + pro + '</span>' + '</li>' +
    //                                 '<li>' + 'Time: &nbsp; ' + '<span class="font-weight-semibold float-right">' + formatDate(d.values[mousedate].date) + '</span>' + '</li>' + 
    //                             '</ul>'
    //                         )
    //                         .style('display', 'block');

//                         // Tooltip arrow
    //                         tooltip.append('div').attr('class', 'd3-tip-arrow');
    //                     })

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

//                         // Revert full opacity to all paths
    //                         svg.selectAll('.streamgraph-layer')
    //                             .transition()
    //                             .duration(250)
    //                             .style('opacity', 1);

//                         // Hide cursor pointer
    //                         hoverPointer.style('opacity', 0);

//                         // Hide tooltip
    //                         tooltip.style('display', 'none');

//                         hoverLine.style('opacity', 0);
    //                     });
    //                 });

//             // Append events to the chart container
    //             // ------------------------------

//             d3Container
    //                 .on('mousemove', function (d, i) {
    //                     mouse = d3.mouse(this);
    //                     mousex = mouse[0];
    //                     mousey = mouse[1];

//                     // Move tooltip vertically
    //                     tooltip.style('top', (mousey - ($('.d3-tip').outerHeight() / 2)) - 2 + 'px') // Half tooltip height - half arrow width

//                     // Move tooltip horizontally
    //                     if(mousex >= ($(element).outerWidth() - $('.d3-tip').outerWidth() - margin.right - (tooltipOffset * 2))) {
    //                         tooltip
    //                             .style('left', (mousex - $('.d3-tip').outerWidth() - tooltipOffset) + 'px') // Change tooltip direction from right to left to keep it inside graph area
    //                             .attr('class', 'd3-tip w');
    //                     }
    //                     else {
    //                         tooltip
    //                             .style('left', (mousex + tooltipOffset) + 'px' )
    //                             .attr('class', 'd3-tip e');
    //                     }
    //                 });
    //         });

//         // Resize chart
    //         // ------------------------------

//         // Call function on window resize
    //         $(window).on('resize', resizeStream);

//         // Call function on sidebar width change
    //         $(document).on('click', '.sidebar-control', resizeStream);

//         // Resize function
    //         // 
    //         // Since D3 doesn't support SVG resize by default,
    //         // we need to manually specify parts of the graph that need to 
    //         // be updated on window resize
    //         function resizeStream() {

//             // Layout
    //             // -------------------------

//             // Define width
    //             width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;

//             // Main svg width
    //             container.attr('width', width + margin.left + margin.right);

//             // Width of appended group
    //             svg.attr('width', width + margin.left + margin.right);

//             // Horizontal range
    //             x.range([0, width]);

//             // Chart elements
    //             // -------------------------

//             // Horizontal axis
    //             svg.selectAll('.d3-axis-horizontal').call(xAxis);

//             // Horizontal axis subticks
    //             svg.selectAll('.d3-axis-subticks').attr('x1', x).attr('x2', x);

//             // Grid lines width
    //             svg.selectAll('.d3-grid-dashed').call(gridAxis.tickSize(-width, 0, 0))

//             // Right vertical axis
    //             svg.selectAll('.d3-axis-right').attr('transform', 'translate(' + width + ', 0)');

//             // Area paths
    //             svg.selectAll('.streamgraph-layer').attr('d', function(d) { return area(d.values); });
    //         }
    //     }
    // };

// App sales line chart
    // var _AppSalesLinesChart = function(element, height) {
    //     if (typeof d3 == 'undefined' || typeof d3.tip == '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
    //         // ------------------------------

//         // Define main variables
    //         var d3Container = d3.select(element),
    //             margin = {top: 5, right: 30, bottom: 30, left: 50},
    //             width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
    //             height = height - margin.top - margin.bottom;

//         // Tooltip
    //         var tooltip = d3.tip()
    //             .attr('class', 'd3-tip')
    //             .html(function (d) {
    //                 return '<ul class="list-unstyled mb-1">' +
    //                     '<li>' + '<div class="font-size-base my-1"><i class="icon-circle-left2 mr-2"></i>' + d.name + ' app' + '</div>' + '</li>' +
    //                     '<li>' + 'Sales: &nbsp;' + '<span class="font-weight-semibold float-right">' + d.value + '</span>' + '</li>' +
    //                     '<li>' + 'Revenue: &nbsp; ' + '<span class="font-weight-semibold float-right">' + '$' + (d.value * 25).toFixed(2) + '</span>' + '</li>' + 
    //                 '</ul>';
    //             });

//         // Format date
    //         var parseDate = d3.time.format('%Y/%m/%d').parse,
    //             formatDate = d3.time.format('%b %d, %y');

//         // Line colors
    //         var scale = ['#66bb6a', '#ffb97f', '#5ab1ef'],
    //             color = d3.scale.ordinal().range(scale);

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

//         // Container
    //         var container = d3Container.append('svg');

//         // SVG element
    //         var svg = container
    //             .attr('width', width + margin.left + margin.right)
    //             .attr('height', height + margin.top + margin.bottom)
    //             .append('g')
    //                 .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    //                 .call(tooltip);

//         // Add date range switcher
    //         // ------------------------------

//         var menu = document.getElementById('select_date');
    //         menu.addEventListener('change', change);

//         // Load data
    //         // ------------------------------

//         d3.csv('../../../../global_assets/demo_data/dashboard/app_sales.csv', function(error, data) {
    //             formatted = data;
    //             redraw();
    //         });

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

//         // Add events
    //         var altKey;
    //         d3.select(window)
    //             .on('keydown', function() { altKey = d3.event.altKey; })
    //             .on('keyup', function() { altKey = false; });
        
    //         // Set terms of transition on date change   
    //         function change() {
    //           d3.transition()
    //               .duration(altKey ? 7500 : 500)
    //               .each(redraw);
    //         }

//         // Main chart drawing function
    //         // ------------------------------

//         function redraw() {

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

//             // Create data nests
    //             var nested = d3.nest()
    //                 .key(function(d) { return d.type; })
    //                 .map(formatted)
                
    //             // Get value from menu selection
    //             // the option values correspond
    //             //to the [type] value we used to nest the data  
    //             var series = menu.value;
                
    //             // Only retrieve data from the selected series using nest
    //             var data = nested[series];
                
    //             // For object constancy we will need to set 'keys', one for each type of data (column name) exclude all others.
    //             color.domain(d3.keys(data[0]).filter(function(key) { return (key !== 'date' && key !== 'type'); }));

//             // Setting up color map
    //             var linedata = color.domain().map(function(name) {
    //                 return {
    //                             name: name,
    //                             values: data.map(function(d) {
    //                                 return {name: name, date: parseDate(d.date), value: parseFloat(d[name], 10)};
    //                             })
    //                         };
    //                     });

//             // Draw the line
    //             var line = d3.svg.line()
    //                 .x(function(d) { return x(d.date); })
    //                 .y(function(d) { return y(d.value); })
    //                 .interpolate('cardinal');

//             // Construct scales
    //             // ------------------------------

//             // Horizontal
    //             var x = d3.time.scale()
    //                 .domain([
    //                     d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.date; }); }),
    //                     d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.date; }); })
    //                 ])
    //                 .range([0, width]);

//             // Vertical
    //             var y = d3.scale.linear()
    //                 .domain([
    //                     d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
    //                     d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
    //                 ])
    //                 .range([height, 0]);

//             // Create axes
    //             // ------------------------------

//             // Horizontal
    //             var xAxis = d3.svg.axis()
    //                 .scale(x)
    //                 .orient('bottom')
    //                 .tickPadding(8)
    //                 .ticks(d3.time.days)
    //                 .innerTickSize(4)
    //                 .tickFormat(d3.time.format('%a')); // Display hours and minutes in 24h format

//             // Vertical
    //             var yAxis = d3.svg.axis()
    //                 .scale(y)
    //                 .orient('left')
    //                 .ticks(6)
    //                 .tickSize(0 -width)
    //                 .tickPadding(8);

//             //
    //             // Append chart elements
    //             //

//             // Append axes
    //             // ------------------------------

//             // Horizontal
    //             svg.append('g')
    //                 .attr('class', 'd3-axis d3-axis-horizontal')
    //                 .attr('transform', 'translate(0,' + height + ')');

//             // Vertical
    //             svg.append('g')
    //                 .attr('class', 'd3-axis d3-axis-vertical d3-axis-transparent d3-grid d3-grid-dashed');

//             // Append lines
    //             // ------------------------------

//             // Bind the data
    //             var lines = svg.selectAll('.app-sales-lines')
    //                 .data(linedata)
             
    //             // Append a group tag for each line
    //             var lineGroup = lines
    //                 .enter()
    //                 .append('g')
    //                     .attr('class', 'app-sales-lines')
    //                     .attr('id', function(d){ return d.name + '-line'; });

//             // Append the line to the graph
    //             lineGroup.append('path')
    //                 .attr('class', 'd3-line d3-line-medium')
    //                 .style('stroke', function(d) { return color(d.name); })
    //                 .style('opacity', 0)
    //                 .attr('d', function(d) { return line(d.values[0]); })
    //                 .transition()
    //                     .duration(500)
    //                     .delay(function(d, i) { return i * 200; })
    //                     .style('opacity', 1);

//             // Append circles
    //             // ------------------------------

//             var circles = lines.selectAll('circle')
    //                 .data(function(d) { return d.values; })
    //                 .enter()
    //                 .append('circle')
    //                     .attr('class', 'd3-line-circle d3-line-circle-medium')
    //                     .attr('cx', function(d,i){return x(d.date)})
    //                     .attr('cy',function(d,i){return y(d.value)})
    //                     .attr('r', 3)
    //                     .style('stroke', function(d) { return color(d.name); });

//             // Add transition
    //             circles
    //                 .style('opacity', 0)
    //                 .transition()
    //                     .duration(500)
    //                     .delay(500)
    //                     .style('opacity', 1);

//             // Append tooltip
    //             // ------------------------------

//             // Add tooltip on circle hover
    //             circles
    //                 .on('mouseover', function (d) {
    //                     tooltip.offset([-15, 0]).show(d);

//                     // Animate circle radius
    //                     d3.select(this).transition().duration(250).attr('r', 4);
    //                 })
    //                 .on('mouseout', function (d) {
    //                     tooltip.hide(d);

//                     // Animate circle radius
    //                     d3.select(this).transition().duration(250).attr('r', 3);
    //                 });

//             // Change tooltip direction of first point
    //             // to always keep it inside chart, useful on mobiles
    //             lines.each(function (d) { 
    //                 d3.select(d3.select(this).selectAll('circle')[0][0])
    //                     .on('mouseover', function (d) {
    //                         tooltip.offset([0, 15]).direction('e').show(d);

//                         // Animate circle radius
    //                         d3.select(this).transition().duration(250).attr('r', 4);
    //                     })
    //                     .on('mouseout', function (d) {
    //                         tooltip.direction('n').hide(d);

//                         // Animate circle radius
    //                         d3.select(this).transition().duration(250).attr('r', 3);
    //                     });
    //             })

//             // Change tooltip direction of last point
    //             // to always keep it inside chart, useful on mobiles
    //             lines.each(function (d) { 
    //                 d3.select(d3.select(this).selectAll('circle')[0][d3.select(this).selectAll('circle').size() - 1])
    //                     .on('mouseover', function (d) {
    //                         tooltip.offset([0, -15]).direction('w').show(d);

//                         // Animate circle radius
    //                         d3.select(this).transition().duration(250).attr('r', 3);
    //                     })
    //             })

//             // Update chart on date change
    //             // ------------------------------

//             // Set variable for updating visualization
    //             var lineUpdate = d3.transition(lines);
                
    //             // Update lines
    //             lineUpdate.select('path')
    //                 .attr('d', function(d, i) { return line(d.values); });

//             // Update circles
    //             lineUpdate.selectAll('circle')
    //                 .attr('cy',function(d,i){return y(d.value)})
    //                 .attr('cx', function(d,i){return x(d.date)});

//             // Update vertical axes
    //             d3.transition(svg)
    //                 .select('.d3-axis-vertical')
    //                 .call(yAxis);

//             // Update horizontal axes
    //             d3.transition(svg)
    //                 .select('.d3-axis-horizontal')
    //                 .attr('transform', 'translate(0,' + height + ')')
    //                 .call(xAxis);

//             // Resize chart
    //             // ------------------------------

//             // Call function on window resize
    //             window.addEventListener('resize', appSalesResize);

//             // Call function on sidebar width change
    //             document.querySelector('.sidebar-control').addEventListener('click', appSalesResize);

//             // Resize function
    //             // 
    //             // Since D3 doesn't support SVG resize by default,
    //             // we need to manually specify parts of the graph that need to 
    //             // be updated on window resize
    //             function appSalesResize() {

//                 // Layout
    //                 // -------------------------

//                 // Define width
    //                 width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;

//                 // Main svg width
    //                 container.attr('width', width + margin.left + margin.right);

//                 // Width of appended group
    //                 svg.attr('width', width + margin.left + margin.right);

//                 // Horizontal range
    //                 x.range([0, width]);

//                 // Vertical range
    //                 y.range([height, 0]);

//                 // Chart elements
    //                 // -------------------------

//                 // Horizontal axis
    //                 svg.select('.d3-axis-horizontal').call(xAxis);

//                 // Vertical axis
    //                 svg.select('.d3-axis-vertical').call(yAxis.tickSize(0-width));

//                 // Lines
    //                 svg.selectAll('.d3-line').attr('d', function(d, i) { return line(d.values); });

//                 // Circles
    //                 svg.selectAll('.d3-line-circle').attr('cx', function(d,i){return x(d.date)})
    //             }
    //         }
    //     }
    // };

// Monthly sales area chart
    // var _MonthlySalesAreaChart = function(element, height, color) {
    //     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
    //         // ------------------------------

//         // Define main variables
    //         var d3Container = d3.select(element),
    //             margin = {top: 20, right: 35, bottom: 40, left: 35},
    //             width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
    //             height = height - margin.top - margin.bottom;

//         // Date and time format
    //         var parseDate = d3.time.format('%Y-%m-%d').parse,
    //             bisectDate = d3.bisector(function(d) { return d.date; }).left,
    //             formatDate = d3.time.format('%b %d');

//         // Create SVG
    //         // ------------------------------

//         // Container
    //         var container = d3Container.append('svg');

//         // SVG element
    //         var svg = container
    //             .attr('width', width + margin.left + margin.right)
    //             .attr('height', height + margin.top + margin.bottom)
    //             .append('g')
    //                 .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

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

//         // Area
    //         var area = d3.svg.area()
    //             .x(function(d) { return x(d.date); })
    //             .y0(height)
    //             .y1(function(d) { return y(d.value); })
    //             .interpolate('monotone')

//         // Construct scales
    //         // ------------------------------

//         // Horizontal
    //         var x = d3.time.scale().range([0, width ]);

//         // Vertical
    //         var y = d3.scale.linear().range([height, 0]);

//         // Create axes
    //         // ------------------------------

//         // Horizontal
    //         var xAxis = d3.svg.axis()
    //             .scale(x)
    //             .orient('bottom')
    //             .ticks(d3.time.days, 6)
    //             .innerTickSize(4)
    //             .tickPadding(8)
    //             .tickFormat(d3.time.format('%b %d'));

//         // Load data
    //         // ------------------------------

//         d3.json('../../../../global_assets/demo_data/dashboard/monthly_sales.json', function (error, data) {

//             // Show what's wrong if error
    //             if (error) return console.error(error);

//             // Pull out values
    //             data.forEach(function (d) {
    //                 d.date = parseDate(d.date);
    //                 d.value = +d.value;
    //             });

//             // Get the maximum value in the given array
    //             var maxY = d3.max(data, function(d) { return d.value; });

//             // Reset start data for animation
    //             var startData = data.map(function(datum) {
    //                 return {
    //                     date: datum.date,
    //                     value: 0
    //                 };
    //             });

//             // Set input domains
    //             // ------------------------------

//             // Horizontal
    //             x.domain(d3.extent(data, function(d, i) { return d.date; }));

//             // Vertical
    //             y.domain([0, d3.max( data, function(d) { return d.value; })]);

//             //
    //             // Append chart elements
    //             //

//             // Append axes
    //             // -------------------------

//             // Horizontal
    //             var horizontalAxis = svg.append('g')
    //                 .attr('class', 'd3-axis d3-axis-horizontal')
    //                 .attr('transform', 'translate(0,' + height + ')')
    //                 .call(xAxis);

//             // Add extra subticks for hidden hours
    //             horizontalAxis.selectAll('.d3-axis-subticks')
    //                 .data(x.ticks(d3.time.days), function(d) { return d; })
    //                 .enter()
    //                     .append('line')
    //                     .attr('class', 'd3-axis-subticks')
    //                     .attr('y1', 0)
    //                     .attr('y2', 4)
    //                     .attr('x1', x)
    //                     .attr('x2', x);

//             // Append area
    //             // -------------------------

//             // Add area path
    //             svg.append('path')
    //                 .datum(data)
    //                 .attr('class', 'd3-area')
    //                 .attr('d', area)
    //                 .style('fill', color)
    //                 .transition() // begin animation
    //                     .duration(1000)
    //                     .attrTween('d', function() {
    //                         var interpolator = d3.interpolateArray(startData, data);
    //                         return function (t) {
    //                             return area(interpolator (t));
    //                         }
    //                     });

//             // Append crosshair and tooltip
    //             // -------------------------

//             //
    //             // Line
    //             //

//             // Line group
    //             var focusLine = svg.append('g')
    //                 .style('display', 'none');

//             // Line element
    //             focusLine.append('line')
    //                 .attr('class', 'vertical-crosshair d3-crosshair-line')
    //                 .attr('y1', 0)
    //                 .attr('y2', -maxY);

//             //
    //             // Pointer
    //             //

//             // Pointer group
    //             var focusPointer = svg.append('g')
    //                 .attr('class', 'd3-crosshair-pointer')
    //                 .style('display', 'none');

//             // Pointer element
    //             focusPointer.append('circle')
    //                 .attr('class', 'd3-line-circle')
    //                 .attr('r', 3)
    //                 .style('stroke', color)
    //                 .style('stroke-width', 1.5);

//             //
    //             // Text
    //             //

//             // Text group
    //             var focusText = svg.append('g')
    //                 .attr('class', 'd3-crosshair-text')
    //                 .style('display', 'none');

//             // Text element
    //             focusText.append('text')
    //                 .attr('class', 'd3-text')
    //                 .attr('dy', -10)
    //                 .style('font-size', 12);

//             //
    //             // Overlay with events
    //             //

//             svg.append('rect')
    //                 .attr('class', 'd3-crosshair-overlay')
    //                 .style('fill', 'none')
    //                 .style('pointer-events', 'all')
    //                 .attr('width', width)
    //                 .attr('height', height)
    //                     .on('mouseover', function() {
    //                         focusPointer.style('display', null);        
    //                         focusLine.style('display', null)
    //                         focusText.style('display', null);
    //                     })
    //                     .on('mouseout', function() {
    //                         focusPointer.style('display', 'none'); 
    //                         focusLine.style('display', 'none');
    //                         focusText.style('display', 'none');
    //                     })
    //                     .on('mousemove', mousemove);

//             // Display tooltip on mousemove
    //             function mousemove() {

//                 // Define main variables
    //                 var mouse = d3.mouse(this),
    //                     mousex = mouse[0],
    //                     mousey = mouse[1],
    //                     x0 = x.invert(mousex),
    //                     i = bisectDate(data, x0),
    //                     d0 = data[i - 1],
    //                     d1 = data[i],
    //                     d = x0 - d0.date > d1.date - x0 ? d1 : d0;

//                 // Move line
    //                 focusLine.attr('transform', 'translate(' + x(d.date) + ',' + height + ')');

//                 // Move pointer
    //                 focusPointer.attr('transform', 'translate(' + x(d.date) + ',' + y(d.value) + ')');

//                 // Reverse tooltip at the end point
    //                 if(mousex >= (d3Container.node().getBoundingClientRect().width - focusText.select('text').node().getBoundingClientRect().width - margin.right - margin.left)) {
    //                     focusText.select('text').attr('text-anchor', 'end').attr('x', function () { return (x(d.date) - 15) + 'px' }).text(formatDate(d.date) + ' - ' + d.value + ' sales');
    //                 }
    //                 else {
    //                     focusText.select('text').attr('text-anchor', 'start').attr('x', function () { return (x(d.date) + 15) + 'px' }).text(formatDate(d.date) + ' - ' + d.value + ' sales');
    //                 }
    //             }

//             // Resize chart
    //             // ------------------------------

//             // Call function on window resize
    //             window.addEventListener('resize', monthlySalesAreaResize);

//             // Call function on sidebar width change
    //             document.querySelector('.sidebar-control').addEventListener('click', monthlySalesAreaResize);

//             // Resize function
    //             // 
    //             // Since D3 doesn't support SVG resize by default,
    //             // we need to manually specify parts of the graph that need to 
    //             // be updated on window resize
    //             function monthlySalesAreaResize() {

//                 // Layout variables
    //                 width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;

//                 // Layout
    //                 // -------------------------

//                 // Main svg width
    //                 container.attr('width', width + margin.left + margin.right);

//                 // Width of appended group
    //                 svg.attr('width', width + margin.left + margin.right);

//                 // Axes
    //                 // -------------------------

//                 // Horizontal range
    //                 x.range([0, width]);

//                 // Horizontal axis
    //                 svg.selectAll('.d3-axis-horizontal').call(xAxis);

//                 // Horizontal axis subticks
    //                 svg.selectAll('.d3-axis-subticks').attr('x1', x).attr('x2', x);

//                 // Chart elements
    //                 // -------------------------

//                 // Area path
    //                 svg.selectAll('.d3-area').datum(data).attr('d', area);

//                 // Crosshair
    //                 svg.selectAll('.d3-crosshair-overlay').attr('width', width);
    //             }
    //         });
    //     }
    // };

// Daily sales heatmap
    // var _AppSalesHeatmap = function(element) {
    //     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) {

//         // Load data
    //         d3.csv('../../../../global_assets/demo_data/dashboard/app_sales_heatmap.csv', function(error, data) {

//             // Bind data
    //             // ------------------------------

//             // Nest data
    //             var nested_data = d3.nest().key(function(d) { return d.app; }),
    //                 nest = nested_data.entries(data);

//             // Format date
    //             var format = d3.time.format('%Y/%m/%d %H:%M'),
    //                 formatTime = d3.time.format('%H:%M');

//             // Pull out values
    //             data.forEach(function(d, i) { 
    //                 d.date = format.parse(d.date),
    //                 d.value = +d.value
    //             });

//             // Layout setup
    //             // ------------------------------

//             // Define main variables
    //             var d3Container = d3.select(element);
    //                 margin = { top: 20, right: 0, bottom: 30, left: 0 },
    //                 width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
    //                 gridSize = width / new Date(data[data.length - 1].date).getHours(), // dynamically set grid size
    //                 rowGap = 40, // vertical gap between rows
    //                 height = (rowGap + gridSize) * (d3.max(nest, function(d,i) {return i+1})) - margin.top,
    //                 buckets = 5, // number of colors in range
    //                 colors = ['#e9d8fa','#d2b5ef','#b990e1','#9f6bd3','#8548c3'];

//             // Construct scales
    //             // ------------------------------

//             // Horizontal
    //             var x = d3.time.scale().range([0, width]);

//             // Vertical
    //             var y = d3.scale.linear().range([height, 0]);

//             // Colors
    //             var colorScale = d3.scale.quantile()
    //                 .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
    //                 .range(colors);

//             // Set input domains
    //             // ------------------------------

//             // Horizontal
    //             x.domain([new Date(data[0].date), d3.time.hour.offset(new Date(data[data.length - 1].date), 1)]);

//             // Vertical
    //             y.domain([0, d3.max(data, function(d) { return d.app; })]);

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

//             // Container
    //             var container = d3Container.append('svg');

//             // SVG element
    //             var svg = container
    //                 .attr('width', width + margin.left + margin.right)
    //                 .attr('height', height + margin.bottom)
    //                 .append('g')
    //                     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

//             //
    //             // Append chart elements
    //             //

//             // App groups
    //             // ------------------------------

//             // Add groups for each app
    //             var hourGroup = svg.selectAll('.hour-group')
    //                 .data(nest)
    //                 .enter()
    //                 .append('g')
    //                     .attr('class', 'hour-group')
    //                     .attr('transform', function(d, i) { return 'translate(0, ' + ((gridSize + rowGap) * i) +')'; });

//             // Add app name
    //             hourGroup
    //                 .append('text')
    //                     .attr('class', 'd3-text')
    //                     .attr('x', 0)
    //                     .attr('y', -(margin.top/2))
    //                     .text(function (d, i) { return d.key; });

//             // Sales count text
    //             hourGroup
    //                 .append('text')
    //                     .attr('class', 'sales-count d3-text')
    //                     .attr('x', width)
    //                     .attr('y', -(margin.top/2))
    //                     .style('text-anchor', 'end')
    //                     .text(function (d, i) { return d3.sum(d.values, function(d) { return d.value; }) + ' sales today' });

//             // Add map elements
    //             // ------------------------------

//             // Add map squares
    //             var heatMap = hourGroup.selectAll('.heatmap-hour')
    //                 .data(function(d) {return d.values})
    //                 .enter()
    //                 .append('rect')
    //                     .attr('x', function(d,i) { return x(d.date); })
    //                     .attr('y', 0)
    //                     .attr('class', 'heatmap-hour d3-slice-border d3-bg')
    //                     .attr('width', gridSize)
    //                     .attr('height', gridSize)
    //                     .style('cursor', 'pointer');

//             // Add loading transition    
    //             heatMap.transition()
    //                 .duration(250)
    //                 .delay(function(d, i) { return i * 20; })
    //                 .style('fill', function(d) { return colorScale(d.value); })

//             // Add user interaction
    //             hourGroup.each(function(d) {
    //                 heatMap
    //                     .on('mouseover', function (d, i) {
    //                         d3.select(this).style('opacity', 0.75);
    //                         d3.select(this.parentNode).select('.sales-count').text(function(d) { return d.values[i].value + ' sales at ' + formatTime(d.values[i].date); })
    //                     })
    //                     .on('mouseout', function (d, i) {
    //                         d3.select(this).style('opacity', 1);
    //                         d3.select(this.parentNode).select('.sales-count').text(function (d, i) { return d3.sum(d.values, function(d) { return d.value; }) + ' sales today' })
    //                     })
    //             })

//             // Add legend
    //             // ------------------------------

//             // Get min and max values
    //             var minValue, maxValue;
    //             data.forEach(function(d, i) { 
    //                 maxValue = d3.max(data, function (d) { return d.value; });
    //                 minValue = d3.min(data, function (d) { return d.value; });
    //             });

//             // Place legend inside separate group
    //             var legendGroup = svg.append('g')
    //                 .attr('class', 'legend-group')
    //                 .attr('width', width)
    //                 .attr('transform', 'translate(' + ((width/2) - ((buckets * gridSize))/2) + ',' + (height + (margin.bottom - margin.top)) + ')');

//             // Then group legend elements
    //             var legend = legendGroup.selectAll('.heatmap-legend')
    //                 .data([0].concat(colorScale.quantiles()), function(d) { return d; })
    //                 .enter()
    //                 .append('g')
    //                     .attr('class', 'heatmap-legend');

//             // Add legend items
    //             legend.append('rect')
    //                 .attr('class', 'heatmap-legend-item d3-slice-border')
    //                 .attr('x', function(d, i) { return gridSize * i; })
    //                 .attr('y', -8)
    //                 .attr('width', gridSize)
    //                 .attr('height', 5)
    //                 .style('stroke-width', 1)
    //                 .style('fill', function(d, i) { return colors[i]; });

//             // Add min value text label
    //             legendGroup.append('text')
    //                 .attr('class', 'min-legend-value d3-text')
    //                 .attr('x', -10)
    //                 .attr('y', -2)
    //                 .style('text-anchor', 'end')
    //                 .style('font-size', 11)
    //                 .text(minValue);

//             // Add max value text label
    //             legendGroup.append('text')
    //                 .attr('class', 'max-legend-value d3-text')
    //                 .attr('x', (buckets * gridSize) + 10)
    //                 .attr('y', -2)
    //                 .style('font-size', 11)
    //                 .text(maxValue);

//             // Resize chart
    //             // ------------------------------

//             // Call function on window resize
    //             window.addEventListener('resize', resizeHeatmap);

//             // Call function on sidebar width change
    //             document.querySelector('.sidebar-control').addEventListener('click', resizeHeatmap);

//             // Resize function
    //             // 
    //             // Since D3 doesn't support SVG resize by default,
    //             // we need to manually specify parts of the graph that need to 
    //             // be updated on window resize
    //             function resizeHeatmap() {

//                 // Layout
    //                 // -------------------------

//                 // Width
    //                 width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,

//                 // Grid size
    //                 gridSize = width / new Date(data[data.length - 1].date).getHours(),

//                 // Height
    //                 height = (rowGap + gridSize) * (d3.max(nest, function(d,i) {return i+1})) - margin.top,

//                 // Main svg width
    //                 container.attr('width', width + margin.left + margin.right).attr('height', height + margin.bottom);

//                 // Width of appended group
    //                 svg.attr('width', width + margin.left + margin.right).attr('height', height + margin.bottom);

//                 // Horizontal range
    //                 x.range([0, width]);

//                 // Chart elements
    //                 // -------------------------

//                 // Groups for each app
    //                 svg.selectAll('.hour-group')
    //                     .attr('transform', function(d, i) { return 'translate(0, ' + ((gridSize + rowGap) * i) +')'; });

//                 // Map squares
    //                 svg.selectAll('.heatmap-hour')
    //                     .attr('width', gridSize)
    //                     .attr('height', gridSize)
    //                     .attr('x', function(d,i) { return x(d.date); });

//                 // Legend group
    //                 svg.selectAll('.legend-group')
    //                     .attr('transform', 'translate(' + ((width/2) - ((buckets * gridSize))/2) + ',' + (height + margin.bottom - margin.top) + ')');

//                 // Sales count text
    //                 svg.selectAll('.sales-count')
    //                     .attr('x', width);

//                 // Legend item
    //                 svg.selectAll('.heatmap-legend-item')
    //                     .attr('width', gridSize)
    //                     .attr('x', function(d, i) { return gridSize * i; });

//                 // Max value text label
    //                 svg.selectAll('.max-legend-value')
    //                     .attr('x', (buckets * gridSize) + 10);
    //             }
    //         });
    //     }
    // };

// Messages area chart
    // var _MessagesAreaChart = function(element, height, color) {
    //     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
    //         // ------------------------------

//         // Define main variables
    //         var d3Container = d3.select(element),
    //             margin = {top: 0, right: 0, bottom: 0, left: 0},
    //             width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
    //             height = height - margin.top - margin.bottom;

//         // Date and time format
    //         var parseDate = d3.time.format('%Y-%m-%d').parse;