tcg-heatmap.html

<!--
@element tcg-heatmap
@author designbyraychou
@homepage https://github.com/the-control-group/tcg-heatmap

**This element is compatible with Polymer 0.5.**

copied this guy: http://bl.ocks.org/tjdecke/5558084

__Example:__

```
	<tcg-heatmap
		yAxisLabels="{{ yAxisLabels }}"
		xAxisLabels="{{ xAxisLabels }}"
		bgColors="{{ bgColors }}"
		textColors="{{ textColors }}"
		data="{{ data }}"></tcg-heatmap>
```
# Attributes

#### `margin`

Object to set margin around the heatmap. This will leave space for the axis labels and color key.

#### `duration`

Number in milliseconds for the animation time

#### `legendClassName`

String for the class name

#### `cellBackgroundClassName`

String for the class name

#### `cellTextClassName`

String for the class name

#### `xAxisLabelClassName`

String for the class name

#### `yAxisLabelClassName`

String for the class name

#### `xAxisLabels`

Array of strings for the x axis labels

#### `yAxisLabels`

Array of strings for the y axis labels

#### `bgColors`

Array of strings for the heatmap cell colors. Ordered by smallest value to largest value

#### `textColors`

Array of strings for the heatmap text colors. Ordered by smallest value to largest value

#### `data`

Array: Example [{x: 0, y: 0, value: 20}]

-->
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="tcg-heatmap" attributes="margin duration legendClassName cellBackgroundClassName cellTextClassName xAxisLabelClassName yAxisLabelClassName xAxisLabels yAxisLabels bgColors textColors data min max formatLegend">
	<template>
		<style>
		::host,
		#chart {
			display: -webkit-flex;
			display: flex;
			width: 100%;
			height: 100%;
		}
		</style>
		<div id="chart"></div>
	</template>
	<script src="../d3/d3.js"></script>
	<script src="../lodash/lodash.js"></script>
	<script>
		Polymer({
			publish: {
				margin: {
					top: 50,
					right: 0,
					left: 30,
					bottom: 100
				},
				duration: 1000,
				legendClassName: 'legend',
				cellBackgroundClassName: 'cell',
				cellTextClassName: 'text',
				xAxisLabelClassName: 'xAxisLabel',
				yAxisLabelClassName: 'yAxisLabel',
				xAxisLabels: [],
				yAxisLabels: [],
				bgColors: [],
				textColors: [],
				data: [],
				min: null,
				max: null,
				_svg: null,
			},
			observe: {
				'xAxisLabels yAxisLabels data': 'reDrawGraph',
			},
			ready: function() {
				var poly = this;
				var resizeTimeout;
				this._onResize = function() {
					if ( !resizeTimeout ) {
						resizeTimeout = setTimeout(function() {
							resizeTimeout = null;
							poly.drawGraph();
						}, 60);
					}
				};
				window.addEventListener('resize',this._onResize);
				this.async(function() {
					this.reDrawGraph();
				});
			},
			detached: function() {
				window.removeEventListener('resize',this._onResize);
			},
			reDrawGraph: function() {
				this._isNew = true;
				this.drawGraph();
			},
			drawGraph: function() {
				this.job('drawGraph',function(){
					this.setDimensions();
					if( this.xAxisLabels.length && this.yAxisLabels.length ) {
						this.setSVG();
						this.setLabels();
					}
					if( this._svg != null ) {
						this.setColors();
						this.setLegend();
						this.setCells();
					}
					this.fire('done');
				},60);
			},
			formatLegend: function(data) {
				return '≥ ' + data.toFixed(2);
			},
			setDimensions: function() {
				var rect = this.getBoundingClientRect();
				this._width = rect.width;
				this._height = rect.height;
			},
			setSVG: function() {
				this._gridSize = {
					x: Math.floor((this._width - this.margin.left - this.margin.right) / this.xAxisLabels.length),
					y: Math.floor((this._height - this.margin.top - this.margin.bottom) / this.yAxisLabels.length)
				};

				var svg = d3.select(this.$.chart).selectAll('svg');
				if( svg.length ) {
					svg.remove();
				}
				this._svg = d3.select(this.$.chart).append('svg')
					.attr('width', this._width)
					.attr('height', this._height)
					.append('g')
					.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
			},
			setColors: function() {
				var max = this.max ? Number(this.max) : d3.max(this.data, function (d) {
					return Number(d.value);
				});
				var min = this.min ? Number(this.min) : d3.min(this.data, function (d) {
					return Number(d.value);
				});
				this._bgColorScale = d3.scale.quantile()
					.domain([min, max])
					.range(this.bgColors);

				this._textColorScale = d3.scale.quantile()
					.domain([min, max])
					.range(this.textColors);
			},
			setLabels: function() {
				var poly = this;
				if( this.xAxisLabels.length && this.yAxisLabels.length ) {
					this._svg.selectAll('.'+poly.yAxisLabelClassName)
						.data(this.yAxisLabels)
						.enter().append('text')
							.text(function (d) {
								return d;
							})
							.attr('x', -10)
							.attr('y', function (d, i) {
								return ((i+1) * poly._gridSize.y) - (poly._gridSize.y/2);
							})
							.style('text-anchor', 'end')
							.style('alignment-baseline','middle')
							.attr('class', function (d, i) {
								var count = i+1;
								return poly.yAxisLabelClassName + ' y'+count;
							});

					this._svg.selectAll('.'+poly.xAxisLabelClassName)
						.data(this.xAxisLabels)
						.enter().append('text')
							.text(function(d) {
								return d;
							})
							.attr('x', function(d, i) {
								return ((i+1) * poly._gridSize.x) - (poly._gridSize.x/2);
							})
							.attr('y', -10)
							.style('text-anchor', 'middle')
							.attr('class', function(d, i) {
								var count = i+1;
								return poly.xAxisLabelClassName + ' x'+count;
							});
				}
			},
			setLegend: function() {
				var poly = this;
				var height = this._height - this.margin.top - this.margin.bottom;
				var legendWidth = (this._width - this.margin.left - this.margin.right )/ this.bgColors.length;
				var legendHeight = 10;

				var legend = this._svg.selectAll('.'+poly.legendClassName)
					.data([0].concat(this._bgColorScale.quantiles()), function(d) {
						return d;
					})
					.enter().append('g')
						.attr('class', poly.legendClassName);
				legend.append('rect')
					.attr('x', function(d, i) {
						return legendWidth * i;
					})
					.attr('y', height - legendHeight + (poly.margin.bottom / 3) )
					.attr('width', legendWidth)
					.attr('height', legendHeight)
					.style('fill', function(d, i) {
						return poly.bgColors[i];
					});

				legend.append('text')
					.text(function(d) {
						return poly.formatLegend(d);
					})
					.style('alignment-baseline','top')
					.attr('x', function(d, i) {
						return legendWidth * i;
					})
					.attr('y', height + 15 + (poly.margin.bottom / 3) );
			},
			setCells: function(oldValue,newValue) {
				var poly = this;
				var height = this._height - this.margin.top - this.margin.bottom;

				var cellBackgrounds = this._svg.selectAll('.'+poly.cellBackgroundClassName)
					.data( poly.data )
					.enter().append('rect')
						.attr('x', function(d) {
							return (d.x - 1) * poly._gridSize.x;
						})
						.attr('y', function(d) {
							return (d.y - 1) * poly._gridSize.y;
						})
						.attr('class', function(d, i) {
							return poly.cellBackgroundClassName + ' y'+d.y + ' x'+d.x;
						})
						.attr('width', poly._gridSize.x)
						.attr('height', poly._gridSize.y)
						.style('fill',poly.bgColors[0]);

				var cellTexts = this._svg.selectAll('.'+poly.cellTextClassName)
					.data( poly.data )
					.enter().append('text')
						.attr('x', function(d) {
							return ((d.x - 1) * poly._gridSize.x) + (poly._gridSize.x/2);
						})
						.attr('y', function(d) {
							return ((d.y - 1) * poly._gridSize.y) + (poly._gridSize.y/2);
						})
						.style('text-anchor', 'middle')
						.style('alignment-baseline','middle')
						.attr('class', function(d, i) {
							return poly.cellTextClassName + ' y'+d.y + ' x'+d.x;
						})
						.text(function(d) {
							return d.value;
						})
						.style('fill',poly.textColors[0]);

				if( this._isNew ) {
					cellBackgrounds
						.transition().duration(poly.duration).style('fill',function(d) {
							return poly._bgColorScale(d.value);
						});
					cellTexts
						.transition().duration(poly.duration*1.25).style('fill',function(d) {
							return poly._textColorScale(d.value);
						});
				} else {
					cellTexts
						.style('fill',function(d) {
							return poly._textColorScale(d.value);
						});
					cellBackgrounds
						.style('fill',function(d) {
							return poly._bgColorScale(d.value);
						});
				}
				this._isNew = false;
			},
		});
	</script>
</polymer-element>