<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="project-docs.html">
</head>
<body unresolved is="project-docs">

	<h1>Header and Footer Templates</h1>

	Using <code>headerTemplate</code> should not break sort. Using <code>cellTemplate</code> and <code>footerTemplate</code> should work when a cell <code>formula</code> is specified.

	<p>

	<em style="color:red"><code>headerTemplate</code>s don't seem to work correctly in browsers with native support, and are really slow in Firefox.</em>

	<p>

	<template id="tableTemplate" bind>
		<sortable-table class="default" data="{{data}}" columns="{{columns}}" sortColumn="p50" sortDescending="false" headerTemplate="blueHeaderTemplate">
			<template id="summaryTemplate">
				<td style="border:1px solid {{value <= 1000 ? 'blue' : 'red'}};color:{{value <= 1000 ? 'blue' : 'red'}}">
					max: {{value}}, min: {{row.minimum}}
				</td>
			</template>
			<template id="blueHeaderTemplate">
				<th style="background-color:navy;font-size:larger;">{{!(column.title) ? column.name : column.title}}
					<img style="position:absolute;margin:3px 0 0 5px;" hidden?="{{!(sortColumn==column.name && sortDescending)}}" alt="up" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAADXElEQVQ4y22Ty09cVQCHf+ecO5fLDAwF5gHtDAwMttAWcAq0Pjcm2Bhj44ZqjDHRmO5cuDAxMTFx4X9ADOrCxMa9GxN1UdtYbIEmgNrg1GFm6MwwDMMwrzv3nvs6x53Bx2/3S758u4/gX1t/cNc3FI33QlNGLctWFcqoqqkH7Xr5yGx6ndSleXGSJydPMZ+dsnoCUxVXid8rNEYbHGMq8dqJga7d+SF/Vuu09wOsay1y+oz+H0E6n3nRVvtHvvqjfG1T117xfAMQxIUUAHMdRLym+fp0+KPztH7UDXl7bPxc4W/B5sPtBRKOzi6vH97IuP4FED8UzrF4NoCdA44s94EqChTels9G5fL1UWXDrde+nX1yrk13dn7r8w9EJm/+vPdq2ehZ8Ite+Mw6roSBd2YG8e7FfgR5HbnDA9zPNsnKavW9n/J8StGCKQCglLEL6ZoZKjb9LzPHBtMNDFOOty6GEJQEc7FuxEgblXQVtiVQswi+Xs0tWpSOVVt6gOode/jXnDfrSB8024LaKuK1uRji4V4o0gCEg4+XruC5CCAaDRBuo6qLxG7d6CnkiwnKHc9v6W1/j+SQuoWr03E8PRICPAkBCiZ9CHgCn779DIaJBaJzeC4NtUwZKOX2pCKFgOa6jDVVeD6Km3fy+PK73/HGCwncWDyPwpGO91duo8y7YTgOBLdhwZFUOC6YwxQpXPOUijRzhSxUjslm8RBdQqJyPAwCCdt1sFOsoWD1QTo2KKPokq1Sr7TM+OmQR6Ww9lJJbRdmvZPOliFsAak70GwOIiQECKjhgOoCjLvw6W1MnqKZPmJ0YrEzLu3V+krtRstOXYos01YVxHDh2C4EoWAKg58pIKYNz6pDGG2MKBV88Obz36gMrcFwLMtWPv/M2NzeDgV7BJcGq2QzrXlPuGgc69jYKuOHu2k8fFyDMCViTLe/+GTpw+LOg+ZEIrEWjQ7VCQAYhhW8c+v7q6YlglslJXrr/sFSrtSY5txhXYoPAb+2mzoX3rr+UvxHs5Y1JyefSC9cfmr9Hy1U9ovde6W9a/d+WVVdqdKp6cusf2AQju3hcfYRyWa2nZmZaTlzYfbR+ERy7X9rBIDjw+pMYb+Y/DOT6e7oHcYUhkhk0BkfS5aSE2c3CCH8JP8Xg821f89i9ooAAAAASUVORK5CYII=" />
					<img style="position:absolute;margin:3px 0 0 5px;" hidden?="{{!(sortColumn==column.name && !sortDescending)}}" alt="down" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAADYklEQVQ4y2WTTWibZQDH/8/zfiRpk3XJsth3W5ttTRo314+FWSrbRb1oqSBMByKIp0EZKHjwspsXTyIKHvQmCIIHP1CZ4hR0tOuaqmtit2VNWtvmo22apO+bvH0/n+fxJtX9b3/48bv9CP63crEQCIQiIVkNJ1umGQzKCo2EgtW2vr0bAHWT6Yx/kCcHz8pa+QmpN5zZk9TYrXWzv2HREVCmn47wjQntcDls7ulUspcGj2eqjwgeloqT/NDR9GfLxlOLbX+mG+iFzAOwFQfUczHguN2XxuPXx5TdFkx7dvjsyNq/gj+XFs/Tx5JjHy1sXV5j0WnP52JygJKpwSj2BccH8zW48hHIvInzfeyTV0/1zsYC4rvjx0625NVi4Vg32HPu26Xd8bqlTkPikJhFNCWIC1oPTMahCoF79Sp0k2DRNa6GIO1cPtF9zubGDWoxf4BFEnhQM98kPhOyzxFyBCIegQwB2/OxmCuiWt+H0XHR2VdxI787ZboBda1U6ZM5gtqtXHnY9VQoQhAqDLhMhmEa8AD4gsBzAeLbgOSCSEB9q5t1IynaqBQ12WXCbux0JFVEodgOBrQoYG0hDhUKPEQIwYtpGTpRMfu3g7puoy3ZaLEeRDw/TH3uCYX6FI4J1+dYuFvAtRcu4MozWVCPoY8yfDwzhdefHoLdbkDyGAIOQw93AMOmVPHsaEbra8LSUV7fxp2Sibc+/BFdzweEAKEydnzg6rtfo21KYI6FEO/qstcUjModCpebZ5PaFnEdq1bdg2nZ+Op2Bd/89BBEVeAQgZff/hyVNkAsB0pXx5im3twqLvOhzKBNYwlt+a/cz2L6Yua6u90UsiuBMxlvvP8Dbt/X8d4XOczfb0DyZFDLFnFrG1cupn9JJvr5qVSiQBjzA3cW5qbWKzvhm0vWxJe/1mc6NCQRShGlDJ5EsO/4YFxBv9rAp++8dk2v5zvnxs/khlOPPyAAYHQ7sdzvc9nmnqetVln6+9n6pY2afsnxVEWVOCj189kzJ/KvPH96jpub3fTQ4Hr2ycnf/tPCRrUi1zZrz+bvFhIto0NGsxNyJJ4glAlsrpbYRvkeH04NitHx0VJcO/rHod6Y80iNAGAa5smV1dLIxvrK4eZuB4oiIRY/4qdTw61UOjVPCNEP8v8ATS63iWo+zsgAAAAASUVORK5CYII=" />
				</th>
			</template>
			<template id="hiTemplate">
				<td style="background-color:#EC691B;font-size:larger;text-align:center;color:white;">
					hi!
				</td>
			</template>
			<template id="sumTemplate">
				<td class="sortable-table-header" style="text-align:right;">
					{{values | sum}}
				</td>
			</template>
		</sortable-table>
	</template>
	<script>
	var ostrichMetrics = {
		"getQuery_01_msec" : {
			"average" : 388,
			"count" : 4,
			"maximum" : 1283,
			"minimum" : 95,
			"p50" : 105,
			"p90" : 1283,
			"p95" : 1283,
			"p99" : 1283,
			"p999" : 1283,
			"p9999" : 1283,
			"sum" : 1553
		},
		"getQuery_02_msec" : {
			"average" : 8739,
			"count" : 12,
			"maximum" : 31568,
			"minimum" : 576,
			"p50" : 2858,
			"p90" : 31568,
			"p95" : 31568,
			"p99" : 31568,
			"p999" : 31568,
			"p9999" : 31568,
			"sum" : 104876
		},
		"getQuery_03_msec" : {
			"average" : 502,
			"count" : 1,
			"maximum" : 521,
			"minimum" : 521,
			"p50" : 521,
			"p90" : 521,
			"p95" : 521,
			"p99" : 521,
			"p999" : 521,
			"p9999" : 521,
			"sum" : 502
		},
		"getQuery_04_msec" : {
			"average" : 7492,
			"count" : 6,
			"maximum" : 19138,
			"minimum" : 1051,
			"p50" : 3491,
			"p90" : 19138,
			"p95" : 19138,
			"p99" : 19138,
			"p999" : 19138,
			"p9999" : 19138,
			"sum" : 44955
		},
		"getQuery_05_msec" : {
			"average" : 6583,
			"count" : 13,
			"maximum" : 19138,
			"minimum" : 950,
			"p50" : 5210,
			"p90" : 12825,
			"p95" : 19138,
			"p99" : 19138,
			"p999" : 19138,
			"p9999" : 19138,
			"sum" : 85587
		},
		"getQuery_06_msec" : {
			"average" : 448,
			"count" : 4,
			"maximum" : 637,
			"minimum" : 212,
			"p50" : 349,
			"p90" : 637,
			"p95" : 637,
			"p99" : 637,
			"p999" : 637,
			"p9999" : 637,
			"sum" : 1793
		},
		"getQuery_07_msec" : {
			"average" : 287,
			"count" : 1,
			"maximum" : 286,
			"minimum" : 286,
			"p50" : 286,
			"p90" : 286,
			"p95" : 286,
			"p99" : 286,
			"p999" : 286,
			"p9999" : 286,
			"sum" : 287
		},
		"getQuery_08_msec" : {
			"average" : 138,
			"count" : 3,
			"maximum" : 173,
			"minimum" : 105,
			"p50" : 128,
			"p90" : 173,
			"p95" : 173,
			"p99" : 173,
			"p999" : 173,
			"p9999" : 173,
			"sum" : 416
		},
		"getQuery_09_msec" : {
			"average" : 310,
			"count" : 12,
			"maximum" : 3158,
			"minimum" : 26,
			"p50" : 35,
			"p90" : 116,
			"p95" : 3158,
			"p99" : 3158,
			"p999" : 3158,
			"p9999" : 3158,
			"sum" : 3728
		},
		"getQuery_10_msec" : {
			"average" : 1762,
			"count" : 5,
			"maximum" : 5210,
			"minimum" : 427,
			"p50" : 1051,
			"p90" : 5210,
			"p95" : 5210,
			"p99" : 5210,
			"p999" : 5210,
			"p9999" : 5210,
			"sum" : 8814
		},
		"getQuery_11_msec" : {
			"average" : 1640,
			"count" : 4,
			"maximum" : 4714,
			"minimum" : 316,
			"p50" : 704,
			"p90" : 4714,
			"p95" : 4714,
			"p99" : 4714,
			"p999" : 4714,
			"p9999" : 4714,
			"sum" : 6561
		},
		"getQuery_12_msec" : {
			"average" : 1019,
			"count" : 4,
			"maximum" : 2339,
			"minimum" : 286,
			"p50" : 472,
			"p90" : 2339,
			"p95" : 2339,
			"p99" : 2339,
			"p999" : 2339,
			"p9999" : 2339,
			"sum" : 4077
		},
		"getQuery_13_msec" : {
			"average" : 89,
			"count" : 1,
			"maximum" : 86,
			"minimum" : 86,
			"p50" : 86,
			"p90" : 86,
			"p95" : 86,
			"p99" : 86,
			"p999" : 86,
			"p9999" : 86,
			"sum" : 89
		},
		"getQuery_14_msec" : {
			"average" : 257,
			"count" : 12,
			"maximum" : 2858,
			"minimum" : 10,
			"p50" : 26,
			"p90" : 95,
			"p95" : 2858,
			"p99" : 2858,
			"p999" : 2858,
			"p9999" : 2858,
			"sum" : 3095
		}
	};
	var ostrichMetricsArray = [];
	var names = Object.getOwnPropertyNames(ostrichMetrics);
	for (var i = 0; i < names.length; i++) {
		var name = names[i];
		var data = ostrichMetrics[name];
		data.name = name;
		ostrichMetricsArray.push(data);
	}

	function bindData(){
		var columns = null;
		if(window.innerWidth < 550){
			columns = [
				{name:'name', title:'service call'},
				{name:'average'},
				{name:'count'}
			];
		}else if(window.innerWidth < 1000){
			columns = [
				{name:'name', title:'service call'},
				{name:'average'},
				{name:'count'},
				{name:'maximum'},
				{name:'minimum'}
			];
		}else{
			columns = [
				{name:'name', title:'service call'},
				{name:'average'},
				{name:'count'},
				{name:'maximum', cellTemplate: 'summaryTemplate', footerTemplate: 'hiTemplate' },
				{name:'minimum', footerTemplate: 'hiTemplate' },
				{name:'p50'},
				{name:'p90'},
				{name:'p95'},
				{name:'p99'},
				{name:'p999'},
				{name:'p9999'},
				{name:'sum', footerTemplate: 'sumTemplate' },
				{name:'comp', formula: function(row){ return row.average * row.count; }, footerTemplate: 'sumTemplate'}
			];
		}
		return columns;
	}

	window.addEventListener('polymer-ready', function(){
		PolymerExpressions.prototype.sum = function(arr) {
			return Math.round(arr.reduce(function(a, b) { return +a + +b; }, 0));
		}
		document.getElementById('tableTemplate').model = {
			data: ostrichMetricsArray,
			columns: bindData()
		};
	});
	//TODO: use window.matchMedia
	window.addEventListener('resize', function(){
		document.getElementById('tableTemplate').model.columns = bindData();
	});
	</script>
</body>
</html>