{% extends "analytics/_layouts/tests" %}
{% import "_includes/forms" as forms %}

{% set selectedTab = 'formatting' %}

{% set content %}

	<h2>JS Formatting Tests</h2>

	<p>Analytics.Utils.formatByType()</p>

	<table id="formatByType" class="data fullwidth formatting-tests">
		<thead>
		<tr>
			<th>Type</th>
			<th>Value</th>
			<th>Ouput</th>
		</tr>
		</thead>
	</table>

	{% includejs %}
		var formats = Analytics.formats;
		var tests = [
			{
				type: 'string',
				value: "Hello world!",
			},
			{
				type: 'percent',
				value: 36.7869,
			},
			{
				type: 'integer',
				value: 367869,
			},
			{
				type: 'time',
				value: 3200,
			},
			{
				type: 'time',
				value: 36786,
			},
			{
				type: 'currency',
				value: 36786,
			},
			{
				type: 'float',
				value: 36.7869,
			},
			{
				type: 'date',
				value: '201601',
			},
			{
				type: 'date',
				value: '20160203',
			},
		];

		$tests = $('#formatByType');
		$.each(tests, function(key, test) {
			var output = Analytics.Utils.formatByType(test.type, test.value);
			$test = $('<tr></tr>');
			$('<td>'+ test.type +'</td>').appendTo($test);
			$('<td>'+ test.value +'</td>').appendTo($test);
			$('<td>'+ output +'</td>').appendTo($test);
			$test.appendTo($tests);
		});

	{% endincludejs %}

	<h2>D3 Number formatting</h2>

	<table id="d3NumberFormatting" class="data fullwidth formatting-tests">
		<thead>
		<tr>
			<th>Format</th>
			<th>Value</th>
			<th>Formatted Value</th>
		</tr>
		</thead>
	</table>

	{% includejs %}

	var localeDefinition = window['d3_locale'];
	var locale = d3.locale(localeDefinition);

	var tests = [
		{
			label: "percentFormat",
			value: 19.345,
			valueModifier: function(value)
			{
				return value / 100;
			},
			format: formats.percentFormat,
		},
		{
			label: "currencyFormat",
			value: 19.34,
			format: formats.currencyFormat,
		},
		{
			label: "currencyFormat",
			value: 1902345.34,
			format: formats.currencyFormat,
		},
		{
			label: "decimalFormat",
			value: 1902345.3412344,
			format: formats.decimalFormat,
		}
	];

	$table = $('#d3NumberFormatting');

	$.each(tests, function(key, test)
	{
		var value = test.value;

		if(typeof(test.valueModifier) != 'undefined')
		{
			value = test.valueModifier(value);
		}

		var formattedValue = locale.numberFormat(test.format)(value);

		$tr = $('<tr></tr>');
		$('<td>'+ test.label +'</td>').appendTo($tr);
		$('<td>'+ test.format +'</td>').appendTo($tr);
		$('<td>'+ test.value +'</td>').appendTo($tr);
		$('<td>'+ formattedValue +'</td>').appendTo($tr);
		$tr.appendTo($table);
	});

	{% endincludejs %}

	<h2>Currency for the selected view</h2>

	<p>{{ currency }}</p>

{% endset %}