Diff #4 - trunk/ext/public/themes/limitless/js/demo_pages/dashboard.js
132,054 bytes
|
|
January 20, 2025 at 08:20
|
Diff
Index: dashboard.js
--- dashboard.js (nonexistent)
+++ dashboard.js (revision 4)
@@ -0,0 +1,3812 @@
+/* ------------------------------------------------------------------------------
+ *
+ * # 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 d3-axis-solid')
+ .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 d3-axis-solid')
+ .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 d3-axis-solid')
+ .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(
+ '
- ' +
+ '
- ' + '' + d.key + '' + ' ' +
+ '
- ' + 'Visits: ' + "" + pro + '' + ' ' + + '
- ' + 'Time: ' + '' + formatDate(d.values[mousedate].date) + '' + ' ' + + '
' + ) + .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 '
- ' +
+ '
- ' + '' + d.name + ' app' + '' + ' ' +
+ '
- ' + 'Sales: ' + '' + d.value + '' + ' ' + + '
- ' + 'Revenue: ' + '' + '$' + (d.value * 25).toFixed(2) + '' + ' ' + + '
';
+ });
+
+ // Format date
+ var parseDate = d3.time.format('%Y/%m/%d').parse,
+ formatDate = d3.time.format('%b %d, %y');
+
+ // Line colors
+ var scale = ['#4CAF50', '#FF5722', '#5C6BC0'],
+ 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
+ // ------------------------------
+
+ // Menu
+ var menu = $('#select_date').multiselect({
+ buttonClass: 'text-default font-weight-semibold bg-transparent border-0 cursor-pointer outline-0 py-0 pl-0',
+ enableHTML: true,
+ dropRight: $('html').attr('dir') == 'rtl' ? false : true,
+ onChange: function() {
+ change();
+ },
+ buttonText: function (options, element) {
+ var selected = '';
+ options.each(function() {
+ selected += $(this).html() + ', ';
+ });
+ return '' + selected.substr(0, selected.length -2);
+ }
+ });
+
+
+
+ // 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.val();
+
+ // 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 d3-axis-solid')
+ .attr('transform', 'translate(0,' + height + ')');
+
+ // Vertical
+ svg.append('g')
+ .attr('class', 'd3-axis d3-axis-vertical d3-axis-transparent');
+
+
+
+ // Append lines
+ // ------------------------------
+
+ // Bind the data
+ var lines = svg.selectAll('.lines')
+ .data(linedata)
+
+ // Append a group tag for each line
+ var lineGroup = lines
+ .enter()
+ .append('g')
+ .attr('class', '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('fill', '#fff')
+ .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', 4);
+ })
+ .on('mouseout', function (d) {
+ tooltip.direction('n').hide(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).on('resize', appSalesResize);
+
+ // Call function on sidebar width change
+ $(document).on('click', '.sidebar-control', 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 d3-axis-solid')
+ .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')
+ .attr('class', 'd3-crosshair-line')
+ .style('display', 'none');
+
+ // Line element
+ focusLine.append('line')
+ .attr('class', 'vertical-crosshair')
+ .attr('y1', 0)
+ .attr('y2', -maxY)
+ .style('stroke', '#e5e5e5')
+ .style('shape-rendering', 'crispEdges')
+
+
+ //
+ // Pointer
+ //
+
+ // Pointer group
+ var focusPointer = svg.append('g')
+ .attr('class', 'd3-crosshair-pointer')
+ .style('display', 'none');
+
+ // Pointer element
+ focusPointer.append('circle')
+ .attr('r', 3)
+ .style('fill', '#fff')
+ .style('stroke', color)
+ .style('stroke-width', 1)
+
+
+ //
+ // Text
+ //
+
+ // Text group
+ var focusText = svg.append('g')
+ .attr('class', 'd3-crosshair-text')
+ .style('display', 'none');
+
+ // Text element
+ focusText.append('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).on('resize', monthlySalesAreaResize);
+
+ // Call function on sidebar width change
+ $(document).on('click', '.sidebar-control', 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 = ['#DCEDC8','#C5E1A5','#9CCC65','#7CB342','#558B2F'];
+
+
+
+ // 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', 'app-label')
+ .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')
+ .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')
+ .attr('width', gridSize)
+ .attr('height', gridSize)
+ .style('fill', '#fff')
+ .style('stroke', '#fff')
+ .style('cursor', 'pointer')
+ .style('shape-rendering', 'crispEdges');
+
+ // 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')
+ .attr('x', function(d, i) { return gridSize * i; })
+ .attr('y', -8)
+ .attr('width', gridSize)
+ .attr('height', 5)
+ .style('stroke', '#fff')
+ .style('shape-rendering', 'crispEdges')
+ .style('fill', function(d, i) { return colors[i]; });
+
+ // Add min value text label
+ legendGroup.append('text')
+ .attr('class', 'min-legend-value')
+ .attr('x', -10)
+ .attr('y', -2)
+ .style('text-anchor', 'end')
+ .style('font-size', 11)
+ .style('fill', '#999')
+ .text(minValue);
+
+ // Add max value text label
+ legendGroup.append('text')
+ .attr('class', 'max-legend-value')
+ .attr('x', (buckets * gridSize) + 10)
+ .attr('y', -2)
+ .style('font-size', 11)
+ .style('fill', '#999')
+ .text(maxValue);
+
+
+
+ // Resize chart
+ // ------------------------------
+
+ // Call function on window resize
+ $(window).on('resize', resizeHeatmap);
+
+ // Call function on sidebar width change
+ $(document).on('click', '.sidebar-control', 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;
+
+
+ // 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]);
+
+
+ // 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
+ //
+
+ // Add area path
+ svg.append('path')
+ .datum(data)
+ .attr('class', 'd3-area')
+ .style('fill', color)
+ .attr('d', area)
+ .transition() // begin animation
+ .duration(1000)
+ .attrTween('d', function() {
+ var interpolator = d3.interpolateArray(startData, data);
+ return function (t) {
+ return area(interpolator (t));
+ }
+ });
+
+
+ // Resize chart
+ // ------------------------------
+
+ // Call function on window resize
+ $(window).on('resize', messagesAreaResize);
+
+ // Call function on sidebar width change
+ $(document).on('click', '.sidebar-control', messagesAreaResize);
+
+ // 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 messagesAreaResize() {
+
+ // 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);
+
+ // Horizontal range
+ x.range([0, width]);
+
+
+ // Chart elements
+ // -------------------------
+
+ // Area path
+ svg.selectAll('.d3-area').datum( data ).attr('d', area);
+ }
+ });
+ }
+ };
+
+ // Sparklines chart
+ var _chartSparkline = function(element, chartType, qty, height, interpolation, duration, interval, 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;
+
+
+ // Generate random data (for demo only)
+ var data = [];
+ for (var i=0; i < qty; i++) {
+ data.push(Math.floor(Math.random() * qty) + 5)
+ }
+
+
+ // Construct scales
+ // ------------------------------
+
+ // Horizontal
+ var x = d3.scale.linear().range([0, width]);
+
+ // Vertical
+ var y = d3.scale.linear().range([height - 5, 5]);
+
+
+ // Set input domains
+ // ------------------------------
+
+ // Horizontal
+ x.domain([1, qty - 3])
+
+ // Vertical
+ y.domain([0, qty])
+
+
+
+ // Construct chart layout
+ // ------------------------------
+
+ // Line
+ var line = d3.svg.line()
+ .interpolate(interpolation)
+ .x(function(d, i) { return x(i); })
+ .y(function(d, i) { return y(d); });
+
+ // Area
+ var area = d3.svg.area()
+ .interpolate(interpolation)
+ .x(function(d, i) {
+ return x(i);
+ })
+ .y0(height)
+ .y1(function(d) {
+ return y(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 + ')');
+
+
+
+ // Add mask for animation
+ // ------------------------------
+
+ // Add clip path
+ var clip = svg.append('defs')
+ .append('clipPath')
+ .attr('id', function(d, i) { return 'load-clip-' + element.substring(1) })
+
+ // Add clip shape
+ var clips = clip.append('rect')
+ .attr('class', 'load-clip')
+ .attr('width', 0)
+ .attr('height', height);
+
+ // Animate mask
+ clips
+ .transition()
+ .duration(1000)
+ .ease('linear')
+ .attr('width', width);
+
+
+
+ //
+ // Append chart elements
+ //
+
+ // Main path
+ var path = svg.append('g')
+ .attr('clip-path', function(d, i) { return 'url(#load-clip-' + element.substring(1) + ')'})
+ .append('path')
+ .datum(data)
+ .attr('transform', 'translate(' + x(0) + ',0)');
+
+ // Add path based on chart type
+ if(chartType == 'area') {
+ path.attr('d', area).attr('class', 'd3-area').style('fill', color); // area
+ }
+ else {
+ path.attr('d', line).attr('class', 'd3-line d3-line-medium').style('stroke', color); // line
+ }
+
+ // Animate path
+ path
+ .style('opacity', 0)
+ .transition()
+ .duration(750)
+ .style('opacity', 1);
+
+
+
+ // Set update interval. For demo only
+ // ------------------------------
+
+ setInterval(function() {
+
+ // push a new data point onto the back
+ data.push(Math.floor(Math.random() * qty) + 5);
+
+ // pop the old data point off the front
+ data.shift();
+
+ update();
+
+ }, interval);
+
+
+
+ // Update random data. For demo only
+ // ------------------------------
+
+ function update() {
+
+ // Redraw the path and slide it to the left
+ path
+ .attr('transform', null)
+ .transition()
+ .duration(duration)
+ .ease('linear')
+ .attr('transform', 'translate(' + x(0) + ',0)');
+
+ // Update path type
+ if(chartType == 'area') {
+ path.attr('d', area).attr('class', 'd3-area').style('fill', color)
+ }
+ else {
+ path.attr('d', line).attr('class', 'd3-line d3-line-medium').style('stroke', color);
+ }
+ }
+
+
+
+ // Resize chart
+ // ------------------------------
+
+ // Call function on window resize
+ $(window).on('resize', resizeSparklines);
+
+ // Call function on sidebar width change
+ $(document).on('click', '.sidebar-control', resizeSparklines);
+
+ // 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 resizeSparklines() {
+
+ // 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);
+
+ // Horizontal range
+ x.range([0, width]);
+
+
+ // Chart elements
+ // -------------------------
+
+ // Clip mask
+ clips.attr('width', width);
+
+ // Line
+ svg.select('.d3-line').attr('d', line);
+
+ // Area
+ svg.select('.d3-area').attr('d', area);
+ }
+ }
+ };
+
+ // Daily revenue line chart
+ var _DailyRevenueLineChart = 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
+ // ------------------------------
+
+ // Add data set
+ var dataset = [
+ {
+ 'date': '04/13/14',
+ 'alpha': '60'
+ }, {
+ 'date': '04/14/14',
+ 'alpha': '35'
+ }, {
+ 'date': '04/15/14',
+ 'alpha': '65'
+ }, {
+ 'date': '04/16/14',
+ 'alpha': '50'
+ }, {
+ 'date': '04/17/14',
+ 'alpha': '65'
+ }, {
+ 'date': '04/18/14',
+ 'alpha': '20'
+ }, {
+ 'date': '04/19/14',
+ 'alpha': '60'
+ }
+ ];
+
+ // 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,
+ padding = 20;
+
+ // Format date
+ var parseDate = d3.time.format('%m/%d/%y').parse,
+ formatDate = d3.time.format('%a, %B %e');
+
+
+
+ // Add tooltip
+ // ------------------------------
+
+ var tooltip = d3.tip()
+ .attr('class', 'd3-tip')
+ .html(function (d) {
+ return '
- ' +
+ '
- ' + '' + formatDate(d.date) + '' + ' ' +
+ '
- ' + 'Sales: ' + '' + d.alpha + '' + ' ' + + '
- ' + 'Revenue: ' + '' + '$' + (d.alpha * 25).toFixed(2) + '' + ' ' + + '
'; + }); + + + + // Create chart + // ------------------------------ + + // Add svg element + var container = d3Container.append('svg'); + + // Add SVG group + 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); + + + + // Load data + // ------------------------------ + + dataset.forEach(function (d) { + d.date = parseDate(d.date); + d.alpha = +d.alpha; + }); + + + + // Construct scales + // ------------------------------ + + // Horizontal + var x = d3.time.scale() + .range([padding, width - padding]); + + // Vertical + var y = d3.scale.linear() + .range([height, 5]); + + + + // Set input domains + // ------------------------------ + + // Horizontal + x.domain(d3.extent(dataset, function (d) { + return d.date; + })); + + // Vertical + y.domain([0, d3.max(dataset, function (d) { + return Math.max(d.alpha); + })]); + + + + // Construct chart layout + // ------------------------------ + + // Line + var line = d3.svg.line() + .x(function(d) { + return x(d.date); + }) + .y(function(d) { + return y(d.alpha) + }); + + + + // + // Append chart elements + // + + // Add mask for animation + // ------------------------------ + + // Add clip path + var clip = svg.append('defs') + .append('clipPath') + .attr('id', 'clip-line-small'); + + // Add clip shape + var clipRect = clip.append('rect') + .attr('class', 'clip') + .attr('width', 0) + .attr('height', height); + + // Animate mask + clipRect + .transition() + .duration(1000) + .ease('linear') + .attr('width', width); + + + + // Line + // ------------------------------ + + // Path + var path = svg.append('path') + .attr({ + 'd': line(dataset), + 'clip-path': 'url(#clip-line-small)', + 'class': 'd3-line d3-line-medium' + }) + .style('stroke', '#fff'); + + // Animate path + svg.select('.line-tickets') + .transition() + .duration(1000) + .ease('linear'); + + + + // Add vertical guide lines + // ------------------------------ + + // Bind data + var guide = svg.append('g') + .selectAll('.d3-line-guides-group') + .data(dataset); + + // Append lines + guide + .enter() + .append('line') + .attr('class', 'd3-line-guides') + .attr('x1', function (d, i) { + return x(d.date); + }) + .attr('y1', function (d, i) { + return height; + }) + .attr('x2', function (d, i) { + return x(d.date); + }) + .attr('y2', function (d, i) { + return height; + }) + .style('stroke', 'rgba(255,255,255,0.3)') + .style('stroke-dasharray', '4,2') + .style('shape-rendering', 'crispEdges'); + + // Animate guide lines + guide + .transition() + .duration(1000) + .delay(function(d, i) { return i * 150; }) + .attr('y2', function (d, i) { + return y(d.alpha); + }); + + + + // Alpha app points + // ------------------------------ + + // Add points + var points = svg.insert('g') + .selectAll('.d3-line-circle') + .data(dataset) + .enter() + .append('circle') + .attr('class', 'd3-line-circle d3-line-circle-medium') + .attr('cx', line.x()) + .attr('cy', line.y()) + .attr('r', 3) + .style('stroke', '#fff') + .style('fill', '#29B6F6'); + + + + // Animate points on page load + points + .style('opacity', 0) + .transition() + .duration(250) + .ease('linear') + .delay(1000) + .style('opacity', 1); + + + // Add user interaction + points + .on('mouseover', function (d) { + tooltip.offset([-10, 0]).show(d); + + // Animate circle radius + d3.select(this).transition().duration(250).attr('r', 4); + }) + + // Hide tooltip + .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 + d3.select(points[0][0]) + .on('mouseover', function (d) { + tooltip.offset([0, 10]).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 + d3.select(points[0][points.size() - 1]) + .on('mouseover', function (d) { + tooltip.offset([0, -10]).direction('w').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); + }) + + + + // Resize chart + // ------------------------------ + + // Call function on window resize + $(window).on('resize', revenueResize); + + // Call function on sidebar width change + $(document).on('click', '.sidebar-control', revenueResize); + + // 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 revenueResize() { + + // 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); + + // Horizontal range + x.range([padding, width - padding]); + + + // Chart elements + // ------------------------- + + // Mask + clipRect.attr('width', width); + + // Line path + svg.selectAll('.d3-line').attr('d', line(dataset)); + + // Circles + svg.selectAll('.d3-line-circle').attr('cx', line.x()); + + // Guide lines + svg.selectAll('.d3-line-guides') + .attr('x1', function (d, i) { + return x(d.date); + }) + .attr('x2', function (d, i) { + return x(d.date); + }); + } + } + }; + + // Small progress pie chart + var _ProgressPieChart = function(element, width, 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 + // ------------------------------ + + // Main variables + var d3Container = d3.select(element), + border = 2, + radius = Math.min(width / 2, height / 2) - border, + twoPi = 2 * Math.PI, + progress = $(element).data('progress'), + total = 100; + + + + // Construct chart layout + // ------------------------------ + + // Arc + var arc = d3.svg.arc() + .startAngle(0) + .innerRadius(0) + .outerRadius(radius) + .endAngle(function(d) { + return (d.value / d.size) * 2 * Math.PI; + }) + + + + // Create chart + // ------------------------------ + + // Add svg element + var container = d3Container.append('svg'); + + // Add SVG group + var svg = container + .attr('width', width) + .attr('height', height) + .append('g') + .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); + + + + // + // Append chart elements + // + + // Progress group + var meter = svg.append('g') + .attr('class', 'progress-meter'); + + // Background + meter.append('path') + .attr('d', arc.endAngle(twoPi)) + .style('fill', '#fff') + .style('stroke', color) + .style('stroke-width', 1.5); + + // Foreground + var foreground = meter.append('path') + .style('fill', color); + + // Animate foreground path + foreground + .transition() + .ease('cubic-out') + .duration(2500) + .attrTween('d', arcTween); + + + // Tween arcs + function arcTween() { + var i = d3.interpolate(0, progress); + return function(t) { + var currentProgress = progress / (100/t); + var endAngle = arc.endAngle(twoPi * (currentProgress)); + return arc(i(endAngle)); + }; + } + } + }; + + // 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, + "color" : "#66BB6A" + }, { + "browser": "Social media", + "icon": "", + "value": 2948, + "color": "#9575CD" + }, { + "browser": "Youtube video", + "icon": "", + "value": 3909, + "color": "#FF7043" + } + ]; + + // 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; }); + + + + // Tooltip + // ------------------------------ + + var tip = d3.tip() + .attr('class', 'd3-tip') + .offset([-10, 0]) + .direction('e') + .html(function (d) { + return '
- ' +
+ '
- ' + '' + d.data.icon + d.data.browser + '' + ' ' +
+ '
- ' + 'Visits: ' + '' + d.value + '' + ' ' + + '
- ' + 'Share: ' + '' + (100 / (sum / d.value)).toFixed(2) + '%' + '' + ' ' + + '
';
+ });
+
+
+ // 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);
+
+
+
+ //
+ // Append chart elements
+ //
+
+ // Group chart elements
+ var arcGroup = svg.selectAll('.d3-arc')
+ .data(pie(data))
+ .enter()
+ .append('g')
+ .attr('class', 'd3-arc')
+ .style('stroke', '#fff')
+ .style('cursor', 'pointer');
+
+ // Append path
+ var arcPath = arcGroup
+ .append('path')
+ .style('fill', function (d) { return d.data.color; });
+
+ // 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,
+ "color": "#29B6F6"
+ }, {
+ "status": "Closed campaigns",
+ "icon": "",
+ "value": 290,
+ "color": "#EF5350"
+ }, {
+ "status": "Pending campaigns",
+ "icon": "",
+ "value": 190,
+ "color": "#81C784"
+ }, {
+ "status": "Campaigns on hold",
+ "icon": "",
+ "value": 148,
+ "color": "#999"
+ }
+ ];
+
+ // 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; })
+
+
+
+ // Tooltip
+ // ------------------------------
+
+ var tip = d3.tip()
+ .attr('class', 'd3-tip')
+ .offset([-10, 0])
+ .direction('e')
+ .html(function (d) {
+ return '
- ' +
+ '
- ' + '' + d.data.icon + d.data.status + '' + ' ' +
+ '
- ' + 'Total: ' + '' + d.value + '' + ' ' + + '
- ' + 'Share: ' + '' + (100 / (sum / d.value)).toFixed(2) + '%' + '' + ' ' + + '
';
+ });
+
+
+
+ // 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);
+
+
+
+ //
+ // Append chart elements
+ //
+
+ // Group chart elements
+ var arcGroup = svg.selectAll('.d3-arc')
+ .data(pie(data))
+ .enter()
+ .append('g')
+ .attr('class', 'd3-arc')
+ .style('stroke', '#fff')
+ .style('cursor', 'pointer');
+
+ // Append path
+ var arcPath = arcGroup
+ .append('path')
+ .style('fill', function (d) { return d.data.color; });
+
+ // 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);
+ };
+ });
+ }
+ };
+
+ // 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,
+ "color": "#29B6F6"
+ }, {
+ "status": "Resolved tickets",
+ "icon": "",
+ "value": 189,
+ "color": "#66BB6A"
+ }, {
+ "status": "Closed tickets",
+ "icon": "",
+ "value": 277,
+ "color": "#EF5350"
+ }
+ ];
+
+ // 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; })
+
+
+
+ // Tooltip
+ // ------------------------------
+
+ var tip = d3.tip()
+ .attr('class', 'd3-tip')
+ .offset([-10, 0])
+ .direction('e')
+ .html(function (d) {
+ return '
- ' +
+ '
- ' + '' + d.data.icon + d.data.status + '' + ' ' +
+ '
- ' + 'Total: ' + '' + d.value + '' + ' ' + + '
- ' + 'Share: ' + '' + (100 / (sum / d.value)).toFixed(2) + '%' + '' + ' ' + + '
';
+ })
+
+
+
+ // 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);
+
+
+
+ //
+ // Append chart elements
+ //
+
+ // Group chart elements
+ var arcGroup = svg.selectAll('.d3-arc')
+ .data(pie(data))
+ .enter()
+ .append('g')
+ .attr('class', 'd3-arc')
+ .style('stroke', '#fff')
+ .style('cursor', 'pointer');
+
+ // Append path
+ var arcPath = arcGroup
+ .append('path')
+ .style('fill', function (d) { return d.data.color; });
+
+ // 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);
+ };
+ });
+ }
+ };
+
+ // Bar charts
+ var _BarChart = function(element, barQty, height, animate, easing, duration, delay, color, tooltip) {
+ 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 bardata = [];
+ for (var i=0; i < barQty; i++) {
+ bardata.push(Math.round(Math.random()*10) + 10);
+ }
+
+ // Main variables
+ var d3Container = d3.select(element),
+ width = d3Container.node().getBoundingClientRect().width;
+
+
+
+ // Construct scales
+ // ------------------------------
+
+ // Horizontal
+ var x = d3.scale.ordinal()
+ .rangeBands([0, width], 0.3);
+
+ // Vertical
+ var y = d3.scale.linear()
+ .range([0, height]);
+
+
+
+ // Set input domains
+ // ------------------------------
+
+ // Horizontal
+ x.domain(d3.range(0, bardata.length));
+
+ // Vertical
+ y.domain([0, d3.max(bardata)]);
+
+
+
+ // Create chart
+ // ------------------------------
+
+ // Add svg element
+ var container = d3Container.append('svg');
+
+ // Add SVG group
+ var svg = container
+ .attr('width', width)
+ .attr('height', height)
+ .append('g');
+
+
+
+ //
+ // Append chart elements
+ //
+
+ // Bars
+ var bars = svg.selectAll('rect')
+ .data(bardata)
+ .enter()
+ .append('rect')
+ .attr('class', 'd3-random-bars')
+ .attr('width', x.rangeBand())
+ .attr('x', function(d,i) {
+ return x(i);
+ })
+ .style('fill', color);
+
+
+
+ // Tooltip
+ // ------------------------------
+
+ var tip = d3.tip()
+ .attr('class', 'd3-tip')
+ .offset([-10, 0]);
+
+ // Show and hide
+ if(tooltip == 'hours' || tooltip == 'goal' || tooltip == 'members') {
+ bars.call(tip)
+ .on('mouseover', tip.show)
+ .on('mouseout', tip.hide);
+ }
+
+ // Daily meetings tooltip content
+ if(tooltip == 'hours') {
+ tip.html(function (d, i) {
+ return '
' + d + '
' + + 'meetings' + + '' + }); + } + + // Statements tooltip content + if(tooltip == 'goal') { + tip.html(function (d, i) { + return '
' + d + '
' + + 'statements' + + '' + }); + } + + // Online members tooltip content + if(tooltip == 'members') { + tip.html(function (d, i) { + return '
' + d + '0' + '
' + + 'members' + + '' + }); + } + + + + // Bar loading animation + // ------------------------------ + + // Choose between animated or static + if(animate) { + withAnimation(); + } else { + withoutAnimation(); + } + + // Animate on load + function withAnimation() { + bars + .attr('height', 0) + .attr('y', height) + .transition() + .attr('height', function(d) { + return y(d); + }) + .attr('y', function(d) { + return height - y(d); + }) + .delay(function(d, i) { + return i * delay; + }) + .duration(duration) + .ease(easing); + } + + // Load without animateion + function withoutAnimation() { + bars + .attr('height', function(d) { + return y(d); + }) + .attr('y', function(d) { + return height - y(d); + }) + } + + + + // Resize chart + // ------------------------------ + + // Call function on window resize + $(window).on('resize', barsResize); + + // Call function on sidebar width change + $(document).on('click', '.sidebar-control', barsResize); + + // 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 barsResize() { + + // Layout variables + width = d3Container.node().getBoundingClientRect().width; + + + // Layout + // ------------------------- + + // Main svg width + container.attr('width', width); + + // Width of appended group + svg.attr('width', width); + + // Horizontal range + x.rangeBands([0, width], 0.3); + + + // Chart elements + // ------------------------- + + // Bars + svg.selectAll('.d3-random-bars') + .attr('width', x.rangeBand()) + .attr('x', function(d,i) { + return x(i); + }); + } + } + }; + + // Rounded progress charts + var _RoundedProgressChart = function(element, radius, border, color, end, iconClass, textTitle, textAverage) { + 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 + // ------------------------------ + + // Main variables + var d3Container = d3.select(element), + startPercent = 0, + iconSize = 32, + endPercent = end, + twoPi = Math.PI * 2, + formatPercent = d3.format('.0%'), + boxSize = radius * 2; + + // Values count + var count = Math.abs((endPercent - startPercent) / 0.01); + + // Values step + var step = endPercent < startPercent ? -0.01 : 0.01; + + + + // Create chart + // ------------------------------ + + // Add SVG element + var container = d3Container.append('svg'); + + // Add SVG group + var svg = container + .attr('width', boxSize) + .attr('height', boxSize) + .append('g') + .attr('transform', 'translate(' + (boxSize / 2) + ',' + (boxSize / 2) + ')'); + + + + // Construct chart layout + // ------------------------------ + + // Arc + var arc = d3.svg.arc() + .startAngle(0) + .innerRadius(radius) + .outerRadius(radius - border); + + + + // + // Append chart elements + // + + // Paths + // ------------------------------ + + // Background path + svg.append('path') + .attr('class', 'd3-progress-background') + .attr('d', arc.endAngle(twoPi)) + .style('fill', '#eee'); + + // Foreground path + var foreground = svg.append('path') + .attr('class', 'd3-progress-foreground') + .attr('filter', 'url(#blur)') + .style('fill', color) + .style('stroke', color); + + // Front path + var front = svg.append('path') + .attr('class', 'd3-progress-front') + .style('fill', color) + .style('fill-opacity', 1); + + + + // Text + // ------------------------------ + + // Percentage text value + var numberText = d3.select(element) + .append('h2') + .attr('class', 'pt-1 mt-2 mb-1') + + // Icon + d3.select(element) + .append('i') + .attr('class', iconClass + ' counter-icon') + .attr('style', 'top: ' + ((boxSize - iconSize) / 2) + 'px'); + + // Title + d3.select(element) + .append('div') + .text(textTitle); + + // Subtitle + d3.select(element) + .append('div') + .attr('class', 'font-size-sm text-muted mb-3') + .text(textAverage); + + + + // Animation + // ------------------------------ + + // Animate path + function updateProgress(progress) { + foreground.attr('d', arc.endAngle(twoPi * progress)); + front.attr('d', arc.endAngle(twoPi * progress)); + numberText.text(formatPercent(progress)); + } + + // Animate text + var progress = startPercent; + (function loops() { + updateProgress(progress); + if (count > 0) { + count--; + progress += step; + setTimeout(loops, 10); + } + })(); + } + }; + + // Bullet chart + var _BulletChart = 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) { + + + // Bullet chart core + // ------------------------------ + + function bulletCore() { + + // Construct + d3.bullet = function() { + + // Default layout variables + var orient = 'left', + reverse = false, + duration = 750, + ranges = bulletRanges, + markers = bulletMarkers, + measures = bulletMeasures, + height = 30, + tickFormat = null; + + // For each small multiple… + function bullet(g) { + g.each(function(d, i) { + + // Define variables + var rangez = ranges.call(this, d, i).slice().sort(d3.descending), + markerz = markers.call(this, d, i).slice().sort(d3.descending), + measurez = measures.call(this, d, i).slice().sort(d3.descending), + g = d3.select(this); + + // Compute the new x-scale. + var x1 = d3.scale.linear() + .domain([0, Math.max(rangez[0], markerz[0], measurez[0])]) + .range(reverse ? [width, 0] : [0, width]); + + // Retrieve the old x-scale, if this is an update. + var x0 = this.chart || d3.scale.linear() + .domain([0, Infinity]) + .range(x1.range()); + + // Stash the new scale. + this.chart = x1; + + // Derive width-scales from the x-scales. + var w0 = bulletWidth(x0), + w1 = bulletWidth(x1); + + + + // Setup range + // ------------------------------ + + // Update the range rects + var range = g.selectAll('.bullet-range') + .data(rangez); + + // Append range rect + range.enter() + .append('rect') + .attr('class', function(d, i) { return 'bullet-range bullet-range-' + (i + 1); }) + .attr('width', w0) + .attr('height', height) + .attr('rx', 2) + .attr('x', reverse ? x0 : 0) + + // Add loading animation + .transition() + .duration(duration) + .attr('width', w1) + .attr('x', reverse ? x1 : 0); + + // Add update animation + range.transition() + .duration(duration) + .attr('x', reverse ? x1 : 0) + .attr('width', w1) + .attr('height', height); + + + + // Setup measures + // ------------------------------ + + // Update the measure rects + var measure = g.selectAll('.bullet-measure') + .data(measurez); + + // Append measure rect + measure.enter() + .append('rect') + .attr('class', function(d, i) { return 'bullet-measure bullet-measure-' + (i + 1); }) + .attr('width', w0) + .attr('height', height / 5) + .attr('x', reverse ? x0 : 0) + .attr('y', height / 2.5) + .style('shape-rendering', 'crispEdges'); + + // Add loading animation + measure.transition() + .duration(duration) + .attr('width', w1) + .attr('x', reverse ? x1 : 0); + + // Add update animation + measure.transition() + .duration(duration) + .attr('width', w1) + .attr('height', height / 5) + .attr('x', reverse ? x1 : 0) + .attr('y', height / 2.5); + + + + // Setup markers + // ------------------------------ + + // Update the marker lines + var marker = g.selectAll('.bullet-marker') + .data(markerz); + + // Append marker line + marker.enter() + .append('line') + .attr('class', function(d, i) { return 'bullet-marker bullet-marker-' + (i + 1); }) + .attr('x1', x0) + .attr('x2', x0) + .attr('y1', height / 6) + .attr('y2', height * 5 / 6); + + // Add loading animation + marker.transition() + .duration(duration) + .attr('x1', x1) + .attr('x2', x1); + + // Add update animation + marker.transition() + .duration(duration) + .attr('x1', x1) + .attr('x2', x1) + .attr('y1', height / 6) + .attr('y2', height * 5 / 6); + + + + // Setup axes + // ------------------------------ + + // Compute the tick format. + var format = tickFormat || x1.tickFormat(8); + + // Update the tick groups. + var tick = g.selectAll('.bullet-tick') + .data(x1.ticks(8), function(d) { + return this.textContent || format(d); + }); + + // Initialize the ticks with the old scale, x0. + var tickEnter = tick.enter() + .append('g') + .attr('class', 'bullet-tick') + .attr('transform', bulletTranslate(x0)) + .style('opacity', 1e-6); + + // Append line + tickEnter.append('line') + .attr('y1', height) + .attr('y2', (height * 7 / 6) + 3); + + // Append text + tickEnter.append('text') + .attr('text-anchor', 'middle') + .attr('dy', '1em') + .attr('y', (height * 7 / 6) + 4) + .text(format); + + // Transition the entering ticks to the new scale, x1. + tickEnter.transition() + .duration(duration) + .attr('transform', bulletTranslate(x1)) + .style('opacity', 1); + + // Transition the updating ticks to the new scale, x1. + var tickUpdate = tick.transition() + .duration(duration) + .attr('transform', bulletTranslate(x1)) + .style('opacity', 1); + + // Update tick line + tickUpdate.select('line') + .attr('y1', height + 3) + .attr('y2', (height * 7 / 6) + 3); + + // Update tick text + tickUpdate.select('text') + .attr('y', (height * 7 / 6) + 4); + + // Transition the exiting ticks to the new scale, x1. + tick.exit() + .transition() + .duration(duration) + .attr('transform', bulletTranslate(x1)) + .style('opacity', 1e-6) + .remove(); + + + + // Resize chart + // ------------------------------ + + // Call function on window resize + $(window).on('resize', resizeBulletsCore); + + // Call function on sidebar width change + $(document).on('click', '.sidebar-control', resizeBulletsCore); + + // 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 resizeBulletsCore() { + + // Layout variables + width = d3.select('#bullets').node().getBoundingClientRect().width - margin.left - margin.right; + w1 = bulletWidth(x1); + + + // Layout + // ------------------------- + + // Horizontal range + x1.range(reverse ? [width, 0] : [0, width]); + + + // Chart elements + // ------------------------- + + // Measures + g.selectAll('.bullet-measure').attr('width', w1).attr('x', reverse ? x1 : 0); + + // Ranges + g.selectAll('.bullet-range').attr('width', w1).attr('x', reverse ? x1 : 0); + + // Markers + g.selectAll('.bullet-marker').attr('x1', x1).attr('x2', x1) + + // Ticks + g.selectAll('.bullet-tick').attr('transform', bulletTranslate(x1)) + } + }); + + d3.timer.flush(); + } + + + // Constructor functions + // ------------------------------ + + // Left, right, top, bottom + bullet.orient = function(x) { + if (!arguments.length) return orient; + orient = x; + reverse = orient == 'right' || orient == 'bottom'; + return bullet; + }; + + // Ranges (bad, satisfactory, good) + bullet.ranges = function(x) { + if (!arguments.length) return ranges; + ranges = x; + return bullet; + }; + + // Markers (previous, goal) + bullet.markers = function(x) { + if (!arguments.length) return markers; + markers = x; + return bullet; + }; + + // Measures (actual, forecast) + bullet.measures = function(x) { + if (!arguments.length) return measures; + measures = x; + return bullet; + }; + + // Width + bullet.width = function(x) { + if (!arguments.length) return width; + width = x; + return bullet; + }; + + // Height + bullet.height = function(x) { + if (!arguments.length) return height; + height = x; + return bullet; + }; + + // Axex tick format + bullet.tickFormat = function(x) { + if (!arguments.length) return tickFormat; + tickFormat = x; + return bullet; + }; + + // Transition duration + bullet.duration = function(x) { + if (!arguments.length) return duration; + duration = x; + return bullet; + }; + + return bullet; + }; + + // Ranges + function bulletRanges(d) { + return d.ranges; + } + + // Markers + function bulletMarkers(d) { + return d.markers; + } + + // Measures + function bulletMeasures(d) { + return d.measures; + } + + // Positioning + function bulletTranslate(x) { + return function(d) { + return 'translate(' + x(d) + ',0)'; + }; + } + + // Width + function bulletWidth(x) { + var x0 = x(0); + return function(d) { + return Math.abs(x(d) - x0); + }; + } + } + bulletCore(); + + + + // Basic setup + // ------------------------------ + + // Main variables + var d3Container = d3.select(element), + margin = {top: 20, right: 10, bottom: 35, left: 10}, + width = width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right, + height = height - margin.top - margin.bottom; + + + + // Construct chart layout + // ------------------------------ + + var chart = d3.bullet() + .width(width) + .height(height); + + + + // Load data + // ------------------------------ + + d3.json('../../../../global_assets/demo_data/dashboard/bullets.json', function(error, data) { + + // Show what's wrong if error + if (error) return console.error(error); + + + // Create SVG + // ------------------------------ + + // SVG container + var container = d3Container.selectAll('svg') + .data(data) + .enter() + .append('svg'); + + // SVG group + var svg = container + .attr('class', function(d, i) { return 'bullet-' + (i + 1); }) + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') + .call(chart); + + + + // Add title + // ------------------------------ + + // Title group + var title = svg.append('g') + .style('text-anchor', 'start'); + + // Bullet title text + title.append('text') + .attr('class', 'bullet-title') + .attr('y', -10) + .text(function(d) { return d.title; }); + + // Bullet subtitle text + title.append('text') + .attr('class', 'bullet-subtitle') + .attr('x', width) + .attr('y', -10) + .style('text-anchor', 'end') + .text(function(d) { return d.subtitle; }) + .style('opacity', 0) + .transition() + .duration(500) + .delay(500) + .style('opacity', 1); + + + + // Add random transition for demo + // ------------------------------ + + // Bind data + var interval = function() { + svg.datum(randomize).call(chart.duration(750)); + } + + // Set interval + var intervalIds = []; + intervalIds.push( + setInterval(function() { + interval() + }, 5000) + ); + + // Enable or disable real time update + document.getElementById('realtime').onchange = function() { + if(realtime.checked) { + intervalIds.push(setInterval(function() { interval() }, 5000)); + } + else { + for (var i=0; i < intervalIds.length; i++) { + clearInterval(intervalIds[i]); + } + } + }; + + + + // Resize chart + // ------------------------------ + + // Call function on window resize + $(window).on('resize', bulletResize); + + // Call function on sidebar width change + $(document).on('click', '.sidebar-control', bulletResize); + + // 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 bulletResize() { + + // 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); + + + // Chart elements + // ------------------------- + + // Subtitle + svg.selectAll('.bullet-subtitle').attr('x', width); + } + }); + + + + // Randomizers + // ------------------------------ + + function randomize(d) { + if (!d.randomizer) d.randomizer = randomizer(d); + d.ranges = d.ranges.map(d.randomizer); + d.markers = d.markers.map(d.randomizer); + d.measures = d.measures.map(d.randomizer); + return d; + } + function randomizer(d) { + var k = d3.max(d.ranges) * .2; + return function(d) { + return Math.max(0, d + k * (Math.random() - .5)); + }; + } + } + }; + + + // + // Return objects assigned to module + // + + return { + initComponents: function() { + _componentSwitchery(); + _componentDaterange(); + _componentIconLetter(); + }, + initCharts: function() { + + // Sparklines + _chartSparkline('#new-visitors', 'line', 30, 35, 'basis', 750, 2000, '#26A69A'); + _chartSparkline('#new-sessions', 'line', 30, 35, 'basis', 750, 2000, '#FF7043'); + _chartSparkline('#total-online', 'line', 30, 35, 'basis', 750, 2000, '#5C6BC0'); + _chartSparkline('#server-load', 'area', 30, 50, 'basis', 750, 2000, 'rgba(255,255,255,0.5)'); + + // Streamgraph + _TrafficSourcesStreamChart('#traffic-sources', 330); + + // Line charts + _AppSalesLinesChart('#app_sales', 255); + _DailyRevenueLineChart('#today-revenue', 50); + + // Area charts + _MonthlySalesAreaChart('#monthly-sales-stats', 100, '#4DB6AC'); + _MessagesAreaChart('#messages-stats', 40, '#5C6BC0'); + + // Progress charts + _ProgressPieChart('#today-progress', 20, 20, '#7986CB'); + _ProgressPieChart('#yesterday-progress', 20, 20, '#7986CB'); + _RoundedProgressChart('#hours-available-progress', 38, 2, '#F06292', 0.68, 'icon-watch text-pink-400', 'Hours available', '64% average'); + _RoundedProgressChart('#goal-progress', 38, 2, '#5C6BC0', 0.82, 'icon-trophy3 text-indigo-400', 'Productivity goal', '87% average'); + + // Donut charts + _MarketingCampaignsDonutChart('#campaigns-donut', 42); + _CampaignStatusDonutChart('#campaign-status-pie', 42); + _TicketStatusDonutChart('#tickets-status', 42); + + // Bar charts + _BarChart('#hours-available-bars', 24, 40, true, 'elastic', 1200, 50, '#EC407A', 'hours'); + _BarChart('#goal-bars', 24, 40, true, 'elastic', 1200, 50, '#5C6BC0', 'goal'); + _BarChart('#members-online', 24, 50, true, 'elastic', 1200, 50, 'rgba(255,255,255,0.5)', 'members'); + + // Heatmap + _AppSalesHeatmap('#sales-heatmap'); + + // Bullet charts + _BulletChart("#bullets", 80); + } + } +}(); + + +// Initialize module +// ------------------------------ + +document.addEventListener('DOMContentLoaded', function() { + Dashboard.initComponents(); + Dashboard.initCharts(); +});
Full Code
/* ------------------------------------------------------------------------------ * * # 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 d3-axis-solid')
.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 d3-axis-solid')
.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 d3-axis-solid')
.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: ' + "<span class='font-weight-semibold float-right'>" + pro + '</span>' + '</li>' +
'<li>' + 'Time: ' + '<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: ' + '<span class="font-weight-semibold float-right">' + d.value + '</span>' + '</li>' +
'<li>' + 'Revenue: ' + '<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 = ['#4CAF50', '#FF5722', '#5C6BC0'],
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
// ------------------------------
// Menu
var menu = $('#select_date').multiselect({
buttonClass: 'text-default font-weight-semibold bg-transparent border-0 cursor-pointer outline-0 py-0 pl-0',
enableHTML: true,
dropRight: $('html').attr('dir') == 'rtl' ? false : true,
onChange: function() {
change();
},
buttonText: function (options, element) {
var selected = '';
options.each(function() {
selected += $(this).html() + ', ';
});
return '<span class="badge badge-mark border-warning mr-2"></span>' + selected.substr(0, selected.length -2);
}
});
// 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.val();
// 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 d3-axis-solid')
.attr('transform', 'translate(0,' + height + ')');
// Vertical
svg.append('g')
.attr('class', 'd3-axis d3-axis-vertical d3-axis-transparent');
// Append lines
// ------------------------------
// Bind the data
var lines = svg.selectAll('.lines')
.data(linedata)
// Append a group tag for each line
var lineGroup = lines
.enter()
.append('g')
.attr('class', '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('fill', '#fff')
.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', 4);
})
.on('mouseout', function (d) {
tooltip.direction('n').hide(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).on('resize', appSalesResize);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', 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 d3-axis-solid')
.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')
.attr('class', 'd3-crosshair-line')
.style('display', 'none');
// Line element
focusLine.append('line')
.attr('class', 'vertical-crosshair')
.attr('y1', 0)
.attr('y2', -maxY)
.style('stroke', '#e5e5e5')
.style('shape-rendering', 'crispEdges')
//
// Pointer
//
// Pointer group
var focusPointer = svg.append('g')
.attr('class', 'd3-crosshair-pointer')
.style('display', 'none');
// Pointer element
focusPointer.append('circle')
.attr('r', 3)
.style('fill', '#fff')
.style('stroke', color)
.style('stroke-width', 1)
//
// Text
//
// Text group
var focusText = svg.append('g')
.attr('class', 'd3-crosshair-text')
.style('display', 'none');
// Text element
focusText.append('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).on('resize', monthlySalesAreaResize);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', 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 = ['#DCEDC8','#C5E1A5','#9CCC65','#7CB342','#558B2F'];
// 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', 'app-label')
.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')
.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')
.attr('width', gridSize)
.attr('height', gridSize)
.style('fill', '#fff')
.style('stroke', '#fff')
.style('cursor', 'pointer')
.style('shape-rendering', 'crispEdges');
// 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')
.attr('x', function(d, i) { return gridSize * i; })
.attr('y', -8)
.attr('width', gridSize)
.attr('height', 5)
.style('stroke', '#fff')
.style('shape-rendering', 'crispEdges')
.style('fill', function(d, i) { return colors[i]; });
// Add min value text label
legendGroup.append('text')
.attr('class', 'min-legend-value')
.attr('x', -10)
.attr('y', -2)
.style('text-anchor', 'end')
.style('font-size', 11)
.style('fill', '#999')
.text(minValue);
// Add max value text label
legendGroup.append('text')
.attr('class', 'max-legend-value')
.attr('x', (buckets * gridSize) + 10)
.attr('y', -2)
.style('font-size', 11)
.style('fill', '#999')
.text(maxValue);
// Resize chart
// ------------------------------
// Call function on window resize
$(window).on('resize', resizeHeatmap);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', 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;
// 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]);
// 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
//
// Add area path
svg.append('path')
.datum(data)
.attr('class', 'd3-area')
.style('fill', color)
.attr('d', area)
.transition() // begin animation
.duration(1000)
.attrTween('d', function() {
var interpolator = d3.interpolateArray(startData, data);
return function (t) {
return area(interpolator (t));
}
});
// Resize chart
// ------------------------------
// Call function on window resize
$(window).on('resize', messagesAreaResize);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', messagesAreaResize);
// 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 messagesAreaResize() {
// 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);
// Horizontal range
x.range([0, width]);
// Chart elements
// -------------------------
// Area path
svg.selectAll('.d3-area').datum( data ).attr('d', area);
}
});
}
};
// Sparklines chart
var _chartSparkline = function(element, chartType, qty, height, interpolation, duration, interval, 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;
// Generate random data (for demo only)
var data = [];
for (var i=0; i < qty; i++) {
data.push(Math.floor(Math.random() * qty) + 5)
}
// Construct scales
// ------------------------------
// Horizontal
var x = d3.scale.linear().range([0, width]);
// Vertical
var y = d3.scale.linear().range([height - 5, 5]);
// Set input domains
// ------------------------------
// Horizontal
x.domain([1, qty - 3])
// Vertical
y.domain([0, qty])
// Construct chart layout
// ------------------------------
// Line
var line = d3.svg.line()
.interpolate(interpolation)
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
// Area
var area = d3.svg.area()
.interpolate(interpolation)
.x(function(d, i) {
return x(i);
})
.y0(height)
.y1(function(d) {
return y(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 + ')');
// Add mask for animation
// ------------------------------
// Add clip path
var clip = svg.append('defs')
.append('clipPath')
.attr('id', function(d, i) { return 'load-clip-' + element.substring(1) })
// Add clip shape
var clips = clip.append('rect')
.attr('class', 'load-clip')
.attr('width', 0)
.attr('height', height);
// Animate mask
clips
.transition()
.duration(1000)
.ease('linear')
.attr('width', width);
//
// Append chart elements
//
// Main path
var path = svg.append('g')
.attr('clip-path', function(d, i) { return 'url(#load-clip-' + element.substring(1) + ')'})
.append('path')
.datum(data)
.attr('transform', 'translate(' + x(0) + ',0)');
// Add path based on chart type
if(chartType == 'area') {
path.attr('d', area).attr('class', 'd3-area').style('fill', color); // area
}
else {
path.attr('d', line).attr('class', 'd3-line d3-line-medium').style('stroke', color); // line
}
// Animate path
path
.style('opacity', 0)
.transition()
.duration(750)
.style('opacity', 1);
// Set update interval. For demo only
// ------------------------------
setInterval(function() {
// push a new data point onto the back
data.push(Math.floor(Math.random() * qty) + 5);
// pop the old data point off the front
data.shift();
update();
}, interval);
// Update random data. For demo only
// ------------------------------
function update() {
// Redraw the path and slide it to the left
path
.attr('transform', null)
.transition()
.duration(duration)
.ease('linear')
.attr('transform', 'translate(' + x(0) + ',0)');
// Update path type
if(chartType == 'area') {
path.attr('d', area).attr('class', 'd3-area').style('fill', color)
}
else {
path.attr('d', line).attr('class', 'd3-line d3-line-medium').style('stroke', color);
}
}
// Resize chart
// ------------------------------
// Call function on window resize
$(window).on('resize', resizeSparklines);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', resizeSparklines);
// 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 resizeSparklines() {
// 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);
// Horizontal range
x.range([0, width]);
// Chart elements
// -------------------------
// Clip mask
clips.attr('width', width);
// Line
svg.select('.d3-line').attr('d', line);
// Area
svg.select('.d3-area').attr('d', area);
}
}
};
// Daily revenue line chart
var _DailyRevenueLineChart = 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
// ------------------------------
// Add data set
var dataset = [
{
'date': '04/13/14',
'alpha': '60'
}, {
'date': '04/14/14',
'alpha': '35'
}, {
'date': '04/15/14',
'alpha': '65'
}, {
'date': '04/16/14',
'alpha': '50'
}, {
'date': '04/17/14',
'alpha': '65'
}, {
'date': '04/18/14',
'alpha': '20'
}, {
'date': '04/19/14',
'alpha': '60'
}
];
// 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,
padding = 20;
// Format date
var parseDate = d3.time.format('%m/%d/%y').parse,
formatDate = d3.time.format('%a, %B %e');
// Add 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-check2 mr-2"></i>' + formatDate(d.date) + '</div>' + '</li>' +
'<li>' + 'Sales: ' + '<span class="font-weight-semibold float-right">' + d.alpha + '</span>' + '</li>' +
'<li>' + 'Revenue: ' + '<span class="font-weight-semibold float-right">' + '$' + (d.alpha * 25).toFixed(2) + '</span>' + '</li>' +
'</ul>';
});
// Create chart
// ------------------------------
// Add svg element
var container = d3Container.append('svg');
// Add SVG group
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);
// Load data
// ------------------------------
dataset.forEach(function (d) {
d.date = parseDate(d.date);
d.alpha = +d.alpha;
});
// Construct scales
// ------------------------------
// Horizontal
var x = d3.time.scale()
.range([padding, width - padding]);
// Vertical
var y = d3.scale.linear()
.range([height, 5]);
// Set input domains
// ------------------------------
// Horizontal
x.domain(d3.extent(dataset, function (d) {
return d.date;
}));
// Vertical
y.domain([0, d3.max(dataset, function (d) {
return Math.max(d.alpha);
})]);
// Construct chart layout
// ------------------------------
// Line
var line = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.alpha)
});
//
// Append chart elements
//
// Add mask for animation
// ------------------------------
// Add clip path
var clip = svg.append('defs')
.append('clipPath')
.attr('id', 'clip-line-small');
// Add clip shape
var clipRect = clip.append('rect')
.attr('class', 'clip')
.attr('width', 0)
.attr('height', height);
// Animate mask
clipRect
.transition()
.duration(1000)
.ease('linear')
.attr('width', width);
// Line
// ------------------------------
// Path
var path = svg.append('path')
.attr({
'd': line(dataset),
'clip-path': 'url(#clip-line-small)',
'class': 'd3-line d3-line-medium'
})
.style('stroke', '#fff');
// Animate path
svg.select('.line-tickets')
.transition()
.duration(1000)
.ease('linear');
// Add vertical guide lines
// ------------------------------
// Bind data
var guide = svg.append('g')
.selectAll('.d3-line-guides-group')
.data(dataset);
// Append lines
guide
.enter()
.append('line')
.attr('class', 'd3-line-guides')
.attr('x1', function (d, i) {
return x(d.date);
})
.attr('y1', function (d, i) {
return height;
})
.attr('x2', function (d, i) {
return x(d.date);
})
.attr('y2', function (d, i) {
return height;
})
.style('stroke', 'rgba(255,255,255,0.3)')
.style('stroke-dasharray', '4,2')
.style('shape-rendering', 'crispEdges');
// Animate guide lines
guide
.transition()
.duration(1000)
.delay(function(d, i) { return i * 150; })
.attr('y2', function (d, i) {
return y(d.alpha);
});
// Alpha app points
// ------------------------------
// Add points
var points = svg.insert('g')
.selectAll('.d3-line-circle')
.data(dataset)
.enter()
.append('circle')
.attr('class', 'd3-line-circle d3-line-circle-medium')
.attr('cx', line.x())
.attr('cy', line.y())
.attr('r', 3)
.style('stroke', '#fff')
.style('fill', '#29B6F6');
// Animate points on page load
points
.style('opacity', 0)
.transition()
.duration(250)
.ease('linear')
.delay(1000)
.style('opacity', 1);
// Add user interaction
points
.on('mouseover', function (d) {
tooltip.offset([-10, 0]).show(d);
// Animate circle radius
d3.select(this).transition().duration(250).attr('r', 4);
})
// Hide tooltip
.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
d3.select(points[0][0])
.on('mouseover', function (d) {
tooltip.offset([0, 10]).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
d3.select(points[0][points.size() - 1])
.on('mouseover', function (d) {
tooltip.offset([0, -10]).direction('w').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);
})
// Resize chart
// ------------------------------
// Call function on window resize
$(window).on('resize', revenueResize);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', revenueResize);
// 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 revenueResize() {
// 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);
// Horizontal range
x.range([padding, width - padding]);
// Chart elements
// -------------------------
// Mask
clipRect.attr('width', width);
// Line path
svg.selectAll('.d3-line').attr('d', line(dataset));
// Circles
svg.selectAll('.d3-line-circle').attr('cx', line.x());
// Guide lines
svg.selectAll('.d3-line-guides')
.attr('x1', function (d, i) {
return x(d.date);
})
.attr('x2', function (d, i) {
return x(d.date);
});
}
}
};
// Small progress pie chart
var _ProgressPieChart = function(element, width, 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
// ------------------------------
// Main variables
var d3Container = d3.select(element),
border = 2,
radius = Math.min(width / 2, height / 2) - border,
twoPi = 2 * Math.PI,
progress = $(element).data('progress'),
total = 100;
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(0)
.outerRadius(radius)
.endAngle(function(d) {
return (d.value / d.size) * 2 * Math.PI;
})
// Create chart
// ------------------------------
// Add svg element
var container = d3Container.append('svg');
// Add SVG group
var svg = container
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
//
// Append chart elements
//
// Progress group
var meter = svg.append('g')
.attr('class', 'progress-meter');
// Background
meter.append('path')
.attr('d', arc.endAngle(twoPi))
.style('fill', '#fff')
.style('stroke', color)
.style('stroke-width', 1.5);
// Foreground
var foreground = meter.append('path')
.style('fill', color);
// Animate foreground path
foreground
.transition()
.ease('cubic-out')
.duration(2500)
.attrTween('d', arcTween);
// Tween arcs
function arcTween() {
var i = d3.interpolate(0, progress);
return function(t) {
var currentProgress = progress / (100/t);
var endAngle = arc.endAngle(twoPi * (currentProgress));
return arc(i(endAngle));
};
}
}
};
// 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": "<i class='icon-google mr-2'></i>",
"value": 1047,
"color" : "#66BB6A"
}, {
"browser": "Social media",
"icon": "<i class='icon-share4 mr-2'></i>",
"value": 2948,
"color": "#9575CD"
}, {
"browser": "Youtube video",
"icon": "<i class='icon-youtube mr-2'></i>",
"value": 3909,
"color": "#FF7043"
}
];
// 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; });
// 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: ' + '<span class="font-weight-semibold float-right">' + d.value + '</span>' + '</li>' +
'<li>' + 'Share: ' + '<span class="font-weight-semibold float-right">' + (100 / (sum / d.value)).toFixed(2) + '%' + '</span>' + '</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);
//
// Append chart elements
//
// Group chart elements
var arcGroup = svg.selectAll('.d3-arc')
.data(pie(data))
.enter()
.append('g')
.attr('class', 'd3-arc')
.style('stroke', '#fff')
.style('cursor', 'pointer');
// Append path
var arcPath = arcGroup
.append('path')
.style('fill', function (d) { return d.data.color; });
// 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": "<span class='status-mark border-blue-300 mr-2'></span>",
"value": 439,
"color": "#29B6F6"
}, {
"status": "Closed campaigns",
"icon": "<span class='status-mark border-danger-300 mr-2'></span>",
"value": 290,
"color": "#EF5350"
}, {
"status": "Pending campaigns",
"icon": "<span class='status-mark border-success-300 mr-2'></span>",
"value": 190,
"color": "#81C784"
}, {
"status": "Campaigns on hold",
"icon": "<span class='status-mark border-grey-300 mr-2'></span>",
"value": 148,
"color": "#999"
}
];
// 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; })
// 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: ' + '<span class="font-weight-semibold float-right">' + d.value + '</span>' + '</li>' +
'<li>' + 'Share: ' + '<span class="font-weight-semibold float-right">' + (100 / (sum / d.value)).toFixed(2) + '%' + '</span>' + '</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);
//
// Append chart elements
//
// Group chart elements
var arcGroup = svg.selectAll('.d3-arc')
.data(pie(data))
.enter()
.append('g')
.attr('class', 'd3-arc')
.style('stroke', '#fff')
.style('cursor', 'pointer');
// Append path
var arcPath = arcGroup
.append('path')
.style('fill', function (d) { return d.data.color; });
// 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);
};
});
}
};
// 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": "<i class='status-mark border-blue-300 mr-2'></i>",
"value": 295,
"color": "#29B6F6"
}, {
"status": "Resolved tickets",
"icon": "<i class='status-mark border-success-300 mr-2'></i>",
"value": 189,
"color": "#66BB6A"
}, {
"status": "Closed tickets",
"icon": "<i class='status-mark border-danger-300 mr-2'></i>",
"value": 277,
"color": "#EF5350"
}
];
// 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; })
// 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: ' + '<span class="font-weight-semibold float-right">' + d.value + '</span>' + '</li>' +
'<li>' + 'Share: ' + '<span class="font-weight-semibold float-right">' + (100 / (sum / d.value)).toFixed(2) + '%' + '</span>' + '</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);
//
// Append chart elements
//
// Group chart elements
var arcGroup = svg.selectAll('.d3-arc')
.data(pie(data))
.enter()
.append('g')
.attr('class', 'd3-arc')
.style('stroke', '#fff')
.style('cursor', 'pointer');
// Append path
var arcPath = arcGroup
.append('path')
.style('fill', function (d) { return d.data.color; });
// 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);
};
});
}
};
// Bar charts
var _BarChart = function(element, barQty, height, animate, easing, duration, delay, color, tooltip) {
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 bardata = [];
for (var i=0; i < barQty; i++) {
bardata.push(Math.round(Math.random()*10) + 10);
}
// Main variables
var d3Container = d3.select(element),
width = d3Container.node().getBoundingClientRect().width;
// Construct scales
// ------------------------------
// Horizontal
var x = d3.scale.ordinal()
.rangeBands([0, width], 0.3);
// Vertical
var y = d3.scale.linear()
.range([0, height]);
// Set input domains
// ------------------------------
// Horizontal
x.domain(d3.range(0, bardata.length));
// Vertical
y.domain([0, d3.max(bardata)]);
// Create chart
// ------------------------------
// Add svg element
var container = d3Container.append('svg');
// Add SVG group
var svg = container
.attr('width', width)
.attr('height', height)
.append('g');
//
// Append chart elements
//
// Bars
var bars = svg.selectAll('rect')
.data(bardata)
.enter()
.append('rect')
.attr('class', 'd3-random-bars')
.attr('width', x.rangeBand())
.attr('x', function(d,i) {
return x(i);
})
.style('fill', color);
// Tooltip
// ------------------------------
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0]);
// Show and hide
if(tooltip == 'hours' || tooltip == 'goal' || tooltip == 'members') {
bars.call(tip)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
}
// Daily meetings tooltip content
if(tooltip == 'hours') {
tip.html(function (d, i) {
return '<div class="text-center">' +
'<h6 class="m-0">' + d + '</h6>' +
'<span class="font-size-sm">meetings</span>' +
'<div class="font-size-sm">' + i + ':00' + '</div>' +
'</div>'
});
}
// Statements tooltip content
if(tooltip == 'goal') {
tip.html(function (d, i) {
return '<div class="text-center">' +
'<h6 class="m-0">' + d + '</h6>' +
'<span class="font-size-sm">statements</span>' +
'<div class="font-size-sm">' + i + ':00' + '</div>' +
'</div>'
});
}
// Online members tooltip content
if(tooltip == 'members') {
tip.html(function (d, i) {
return '<div class="text-center">' +
'<h6 class="m-0">' + d + '0' + '</h6>' +
'<span class="font-size-sm">members</span>' +
'<div class="font-size-sm">' + i + ':00' + '</div>' +
'</div>'
});
}
// Bar loading animation
// ------------------------------
// Choose between animated or static
if(animate) {
withAnimation();
} else {
withoutAnimation();
}
// Animate on load
function withAnimation() {
bars
.attr('height', 0)
.attr('y', height)
.transition()
.attr('height', function(d) {
return y(d);
})
.attr('y', function(d) {
return height - y(d);
})
.delay(function(d, i) {
return i * delay;
})
.duration(duration)
.ease(easing);
}
// Load without animateion
function withoutAnimation() {
bars
.attr('height', function(d) {
return y(d);
})
.attr('y', function(d) {
return height - y(d);
})
}
// Resize chart
// ------------------------------
// Call function on window resize
$(window).on('resize', barsResize);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', barsResize);
// 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 barsResize() {
// Layout variables
width = d3Container.node().getBoundingClientRect().width;
// Layout
// -------------------------
// Main svg width
container.attr('width', width);
// Width of appended group
svg.attr('width', width);
// Horizontal range
x.rangeBands([0, width], 0.3);
// Chart elements
// -------------------------
// Bars
svg.selectAll('.d3-random-bars')
.attr('width', x.rangeBand())
.attr('x', function(d,i) {
return x(i);
});
}
}
};
// Rounded progress charts
var _RoundedProgressChart = function(element, radius, border, color, end, iconClass, textTitle, textAverage) {
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
// ------------------------------
// Main variables
var d3Container = d3.select(element),
startPercent = 0,
iconSize = 32,
endPercent = end,
twoPi = Math.PI * 2,
formatPercent = d3.format('.0%'),
boxSize = radius * 2;
// Values count
var count = Math.abs((endPercent - startPercent) / 0.01);
// Values step
var step = endPercent < startPercent ? -0.01 : 0.01;
// Create chart
// ------------------------------
// Add SVG element
var container = d3Container.append('svg');
// Add SVG group
var svg = container
.attr('width', boxSize)
.attr('height', boxSize)
.append('g')
.attr('transform', 'translate(' + (boxSize / 2) + ',' + (boxSize / 2) + ')');
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(radius)
.outerRadius(radius - border);
//
// Append chart elements
//
// Paths
// ------------------------------
// Background path
svg.append('path')
.attr('class', 'd3-progress-background')
.attr('d', arc.endAngle(twoPi))
.style('fill', '#eee');
// Foreground path
var foreground = svg.append('path')
.attr('class', 'd3-progress-foreground')
.attr('filter', 'url(#blur)')
.style('fill', color)
.style('stroke', color);
// Front path
var front = svg.append('path')
.attr('class', 'd3-progress-front')
.style('fill', color)
.style('fill-opacity', 1);
// Text
// ------------------------------
// Percentage text value
var numberText = d3.select(element)
.append('h2')
.attr('class', 'pt-1 mt-2 mb-1')
// Icon
d3.select(element)
.append('i')
.attr('class', iconClass + ' counter-icon')
.attr('style', 'top: ' + ((boxSize - iconSize) / 2) + 'px');
// Title
d3.select(element)
.append('div')
.text(textTitle);
// Subtitle
d3.select(element)
.append('div')
.attr('class', 'font-size-sm text-muted mb-3')
.text(textAverage);
// Animation
// ------------------------------
// Animate path
function updateProgress(progress) {
foreground.attr('d', arc.endAngle(twoPi * progress));
front.attr('d', arc.endAngle(twoPi * progress));
numberText.text(formatPercent(progress));
}
// Animate text
var progress = startPercent;
(function loops() {
updateProgress(progress);
if (count > 0) {
count--;
progress += step;
setTimeout(loops, 10);
}
})();
}
};
// Bullet chart
var _BulletChart = 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) {
// Bullet chart core
// ------------------------------
function bulletCore() {
// Construct
d3.bullet = function() {
// Default layout variables
var orient = 'left',
reverse = false,
duration = 750,
ranges = bulletRanges,
markers = bulletMarkers,
measures = bulletMeasures,
height = 30,
tickFormat = null;
// For each small multiple…
function bullet(g) {
g.each(function(d, i) {
// Define variables
var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
markerz = markers.call(this, d, i).slice().sort(d3.descending),
measurez = measures.call(this, d, i).slice().sort(d3.descending),
g = d3.select(this);
// Compute the new x-scale.
var x1 = d3.scale.linear()
.domain([0, Math.max(rangez[0], markerz[0], measurez[0])])
.range(reverse ? [width, 0] : [0, width]);
// Retrieve the old x-scale, if this is an update.
var x0 = this.__chart__ || d3.scale.linear()
.domain([0, Infinity])
.range(x1.range());
// Stash the new scale.
this.__chart__ = x1;
// Derive width-scales from the x-scales.
var w0 = bulletWidth(x0),
w1 = bulletWidth(x1);
// Setup range
// ------------------------------
// Update the range rects
var range = g.selectAll('.bullet-range')
.data(rangez);
// Append range rect
range.enter()
.append('rect')
.attr('class', function(d, i) { return 'bullet-range bullet-range-' + (i + 1); })
.attr('width', w0)
.attr('height', height)
.attr('rx', 2)
.attr('x', reverse ? x0 : 0)
// Add loading animation
.transition()
.duration(duration)
.attr('width', w1)
.attr('x', reverse ? x1 : 0);
// Add update animation
range.transition()
.duration(duration)
.attr('x', reverse ? x1 : 0)
.attr('width', w1)
.attr('height', height);
// Setup measures
// ------------------------------
// Update the measure rects
var measure = g.selectAll('.bullet-measure')
.data(measurez);
// Append measure rect
measure.enter()
.append('rect')
.attr('class', function(d, i) { return 'bullet-measure bullet-measure-' + (i + 1); })
.attr('width', w0)
.attr('height', height / 5)
.attr('x', reverse ? x0 : 0)
.attr('y', height / 2.5)
.style('shape-rendering', 'crispEdges');
// Add loading animation
measure.transition()
.duration(duration)
.attr('width', w1)
.attr('x', reverse ? x1 : 0);
// Add update animation
measure.transition()
.duration(duration)
.attr('width', w1)
.attr('height', height / 5)
.attr('x', reverse ? x1 : 0)
.attr('y', height / 2.5);
// Setup markers
// ------------------------------
// Update the marker lines
var marker = g.selectAll('.bullet-marker')
.data(markerz);
// Append marker line
marker.enter()
.append('line')
.attr('class', function(d, i) { return 'bullet-marker bullet-marker-' + (i + 1); })
.attr('x1', x0)
.attr('x2', x0)
.attr('y1', height / 6)
.attr('y2', height * 5 / 6);
// Add loading animation
marker.transition()
.duration(duration)
.attr('x1', x1)
.attr('x2', x1);
// Add update animation
marker.transition()
.duration(duration)
.attr('x1', x1)
.attr('x2', x1)
.attr('y1', height / 6)
.attr('y2', height * 5 / 6);
// Setup axes
// ------------------------------
// Compute the tick format.
var format = tickFormat || x1.tickFormat(8);
// Update the tick groups.
var tick = g.selectAll('.bullet-tick')
.data(x1.ticks(8), function(d) {
return this.textContent || format(d);
});
// Initialize the ticks with the old scale, x0.
var tickEnter = tick.enter()
.append('g')
.attr('class', 'bullet-tick')
.attr('transform', bulletTranslate(x0))
.style('opacity', 1e-6);
// Append line
tickEnter.append('line')
.attr('y1', height)
.attr('y2', (height * 7 / 6) + 3);
// Append text
tickEnter.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '1em')
.attr('y', (height * 7 / 6) + 4)
.text(format);
// Transition the entering ticks to the new scale, x1.
tickEnter.transition()
.duration(duration)
.attr('transform', bulletTranslate(x1))
.style('opacity', 1);
// Transition the updating ticks to the new scale, x1.
var tickUpdate = tick.transition()
.duration(duration)
.attr('transform', bulletTranslate(x1))
.style('opacity', 1);
// Update tick line
tickUpdate.select('line')
.attr('y1', height + 3)
.attr('y2', (height * 7 / 6) + 3);
// Update tick text
tickUpdate.select('text')
.attr('y', (height * 7 / 6) + 4);
// Transition the exiting ticks to the new scale, x1.
tick.exit()
.transition()
.duration(duration)
.attr('transform', bulletTranslate(x1))
.style('opacity', 1e-6)
.remove();
// Resize chart
// ------------------------------
// Call function on window resize
$(window).on('resize', resizeBulletsCore);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', resizeBulletsCore);
// 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 resizeBulletsCore() {
// Layout variables
width = d3.select('#bullets').node().getBoundingClientRect().width - margin.left - margin.right;
w1 = bulletWidth(x1);
// Layout
// -------------------------
// Horizontal range
x1.range(reverse ? [width, 0] : [0, width]);
// Chart elements
// -------------------------
// Measures
g.selectAll('.bullet-measure').attr('width', w1).attr('x', reverse ? x1 : 0);
// Ranges
g.selectAll('.bullet-range').attr('width', w1).attr('x', reverse ? x1 : 0);
// Markers
g.selectAll('.bullet-marker').attr('x1', x1).attr('x2', x1)
// Ticks
g.selectAll('.bullet-tick').attr('transform', bulletTranslate(x1))
}
});
d3.timer.flush();
}
// Constructor functions
// ------------------------------
// Left, right, top, bottom
bullet.orient = function(x) {
if (!arguments.length) return orient;
orient = x;
reverse = orient == 'right' || orient == 'bottom';
return bullet;
};
// Ranges (bad, satisfactory, good)
bullet.ranges = function(x) {
if (!arguments.length) return ranges;
ranges = x;
return bullet;
};
// Markers (previous, goal)
bullet.markers = function(x) {
if (!arguments.length) return markers;
markers = x;
return bullet;
};
// Measures (actual, forecast)
bullet.measures = function(x) {
if (!arguments.length) return measures;
measures = x;
return bullet;
};
// Width
bullet.width = function(x) {
if (!arguments.length) return width;
width = x;
return bullet;
};
// Height
bullet.height = function(x) {
if (!arguments.length) return height;
height = x;
return bullet;
};
// Axex tick format
bullet.tickFormat = function(x) {
if (!arguments.length) return tickFormat;
tickFormat = x;
return bullet;
};
// Transition duration
bullet.duration = function(x) {
if (!arguments.length) return duration;
duration = x;
return bullet;
};
return bullet;
};
// Ranges
function bulletRanges(d) {
return d.ranges;
}
// Markers
function bulletMarkers(d) {
return d.markers;
}
// Measures
function bulletMeasures(d) {
return d.measures;
}
// Positioning
function bulletTranslate(x) {
return function(d) {
return 'translate(' + x(d) + ',0)';
};
}
// Width
function bulletWidth(x) {
var x0 = x(0);
return function(d) {
return Math.abs(x(d) - x0);
};
}
}
bulletCore();
// Basic setup
// ------------------------------
// Main variables
var d3Container = d3.select(element),
margin = {top: 20, right: 10, bottom: 35, left: 10},
width = width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
height = height - margin.top - margin.bottom;
// Construct chart layout
// ------------------------------
var chart = d3.bullet()
.width(width)
.height(height);
// Load data
// ------------------------------
d3.json('../../../../global_assets/demo_data/dashboard/bullets.json', function(error, data) {
// Show what's wrong if error
if (error) return console.error(error);
// Create SVG
// ------------------------------
// SVG container
var container = d3Container.selectAll('svg')
.data(data)
.enter()
.append('svg');
// SVG group
var svg = container
.attr('class', function(d, i) { return 'bullet-' + (i + 1); })
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.call(chart);
// Add title
// ------------------------------
// Title group
var title = svg.append('g')
.style('text-anchor', 'start');
// Bullet title text
title.append('text')
.attr('class', 'bullet-title')
.attr('y', -10)
.text(function(d) { return d.title; });
// Bullet subtitle text
title.append('text')
.attr('class', 'bullet-subtitle')
.attr('x', width)
.attr('y', -10)
.style('text-anchor', 'end')
.text(function(d) { return d.subtitle; })
.style('opacity', 0)
.transition()
.duration(500)
.delay(500)
.style('opacity', 1);
// Add random transition for demo
// ------------------------------
// Bind data
var interval = function() {
svg.datum(randomize).call(chart.duration(750));
}
// Set interval
var intervalIds = [];
intervalIds.push(
setInterval(function() {
interval()
}, 5000)
);
// Enable or disable real time update
document.getElementById('realtime').onchange = function() {
if(realtime.checked) {
intervalIds.push(setInterval(function() { interval() }, 5000));
}
else {
for (var i=0; i < intervalIds.length; i++) {
clearInterval(intervalIds[i]);
}
}
};
// Resize chart
// ------------------------------
// Call function on window resize
$(window).on('resize', bulletResize);
// Call function on sidebar width change
$(document).on('click', '.sidebar-control', bulletResize);
// 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 bulletResize() {
// 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);
// Chart elements
// -------------------------
// Subtitle
svg.selectAll('.bullet-subtitle').attr('x', width);
}
});
// Randomizers
// ------------------------------
function randomize(d) {
if (!d.randomizer) d.randomizer = randomizer(d);
d.ranges = d.ranges.map(d.randomizer);
d.markers = d.markers.map(d.randomizer);
d.measures = d.measures.map(d.randomizer);
return d;
}
function randomizer(d) {
var k = d3.max(d.ranges) * .2;
return function(d) {
return Math.max(0, d + k * (Math.random() - .5));
};
}
}
};
//
// Return objects assigned to module
//
return {
initComponents: function() {
_componentSwitchery();
_componentDaterange();
_componentIconLetter();
},
initCharts: function() {
// Sparklines
_chartSparkline('#new-visitors', 'line', 30, 35, 'basis', 750, 2000, '#26A69A');
_chartSparkline('#new-sessions', 'line', 30, 35, 'basis', 750, 2000, '#FF7043');
_chartSparkline('#total-online', 'line', 30, 35, 'basis', 750, 2000, '#5C6BC0');
_chartSparkline('#server-load', 'area', 30, 50, 'basis', 750, 2000, 'rgba(255,255,255,0.5)');
// Streamgraph
_TrafficSourcesStreamChart('#traffic-sources', 330);
// Line charts
_AppSalesLinesChart('#app_sales', 255);
_DailyRevenueLineChart('#today-revenue', 50);
// Area charts
_MonthlySalesAreaChart('#monthly-sales-stats', 100, '#4DB6AC');
_MessagesAreaChart('#messages-stats', 40, '#5C6BC0');
// Progress charts
_ProgressPieChart('#today-progress', 20, 20, '#7986CB');
_ProgressPieChart('#yesterday-progress', 20, 20, '#7986CB');
_RoundedProgressChart('#hours-available-progress', 38, 2, '#F06292', 0.68, 'icon-watch text-pink-400', 'Hours available', '64% average');
_RoundedProgressChart('#goal-progress', 38, 2, '#5C6BC0', 0.82, 'icon-trophy3 text-indigo-400', 'Productivity goal', '87% average');
// Donut charts
_MarketingCampaignsDonutChart('#campaigns-donut', 42);
_CampaignStatusDonutChart('#campaign-status-pie', 42);
_TicketStatusDonutChart('#tickets-status', 42);
// Bar charts
_BarChart('#hours-available-bars', 24, 40, true, 'elastic', 1200, 50, '#EC407A', 'hours');
_BarChart('#goal-bars', 24, 40, true, 'elastic', 1200, 50, '#5C6BC0', 'goal');
_BarChart('#members-online', 24, 50, true, 'elastic', 1200, 50, 'rgba(255,255,255,0.5)', 'members');
// Heatmap
_AppSalesHeatmap('#sales-heatmap');
// Bullet charts
_BulletChart("#bullets", 80);
}
}
}();
// Initialize module // ------------------------------
document.addEventListener('DOMContentLoaded', function() { Dashboard.initComponents(); Dashboard.initCharts(); });