@domoinc/multiline-chart/bower_components/utilities/js/Avatar.js

MultiLineChart - Domo Widget

//**********************************************************************************
// Domo Fallback Images for avatars
// This function can be called on an image (d3 selection) and it will check to see
// if the user image has loaded. If it has not, it will display a gray box with the
// user's initials appended to the center of it.
//
// Example Usage:
// var image = d3.select('svg').append('image').attr({
//     x: 0,
//     y: 0,
//     width: '50px',
//     height: '50px'
// })
// .call(d3.avatar, '//s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg', 'John Doe');
//
// Note: I'm using SVG's 'getBBox()' method to determine the size of the image so this function will
// break in firefox if you image is hidden while this function is run.
//**********************************************************************************

d3.avatar = function (rawImage, url, name, initialsSize) {
	// Setup Variables
	var node = rawImage.node(),
		image = d3.select(node),
		bb = node.getBBox(),
		textSize;

	if (typeof initialsSize === 'number') {
		textSize = initialsSize + 'px';
	} else if (typeof initialsSize === 'string') {
		textSize = initialsSize;
	} else {
		textSize = '14px';
	}

	// Parent Element **EACH IMAGE MUST HAVE ITS OWN PARENT**
	var parent = d3.select(node.parentNode);

	// Background Rect
	var rect = parent.selectAll('rect.imageCover').data([name]);
	rect.enter().append("rect")
		.attr({
			class: "imageCover",
			x: bb.x,
			y: bb.y,
			width: bb.width,
			height: bb.height
		})
			.style({
			fill: "#e4e5e5"
		});

	rect.attr({
		x: bb.x,
		y: bb.y,
		width: bb.width,
		height: bb.height
	});

	// User initials.
	var init = parent.selectAll('text.nameInitials').data([name]);
	init.enter().append('text')
		.text(toInit(name))
		.style({
			"fill": "#8a8d8f",
			"font-size": textSize,
			"font-weight": 400,
			"font-family": "Open Sans",
			"text-anchor": "middle",
			"pointer-events": "none",
		})
		.attr({
			class: "nameInitials",
			x: (bb.x + bb.width / 2),
			y: (bb.y + bb.height / 2),
			dy: function(d) {
				return parseInt(d3.select(this).style('font-size'), 10) * 0.35;
			}
		});

	init.attr({
			x: (bb.x + bb.width / 2),
			y: (bb.y + bb.height / 2),
		})
		.text(function(d){
			return toInit(d);
		});

	if (rawImage.tween) {
		rawImage.tween('size', function() {
			var fontSize = init.style('font-size');
			var i = d3.interpolate(fontSize, textSize);
			return function(t) {
				var bb = node.getBBox();
				rect.attr(bb);
				init.style({
					"font-size": i(t)
				})
					.attr({
						x: (bb.x + bb.width / 2),
						y: (bb.y + bb.height / 2),
						dy: function(d) {
							return parseInt(d3.select(this)
								.style('font-size'), 10) * 0.35;
						}
					});
			}
		});
	}

	function onLoad() {
		image.style('opacity', 1);
		init.style('opacity', 0);
		rect.style('opacity', 0);
	}

	function onError() {
		image.style('opacity', 0);
		init.style('opacity', 1);
		rect.style('opacity', 1);
	}

	var newImage = new Image();
	newImage.addEventListener('load', onLoad, false);
	newImage.addEventListener('error', onError, false);
	newImage.src = url;

	image.attr("xlink:href", newImage.src);


	/**
	 * Converts a Full name to initials
	 * @param  {string} fullName The full name
	 * @return {string}          The initials of the full name.
	 */
	function toInit(fullName) {
		return fullName.split(' ')
			.map(function (s) {
				return s.charAt(0);
			})
			.join('')
			.toUpperCase();
	}

	return this;
}