{% extends "layout.html" %}
{% block head %}{{ super() }}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="{{ url_for('.static', filename='jqplot/jquery.jqplot.min.css') }}" />
<script type="text/javascript" src="{{ url_for('.static', filename='jqplot/jquery.jqplot.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('.static', filename='jqplot/jqplot.pieRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('.static', filename='jqplot/jqplot.barRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('.static', filename='jqplot/jqplot.highlighter.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('.static', filename='jqplot/jqplot.categoryAxisRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('.static', filename='jqplot/jqplot.pointLabels.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('.static', filename='jqplot/jqplot.cursor.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
	// We set the width/height/margin here, so that with
	// the <noscript>, there aren't massive gaps which look bad.
	$('div#chr-stats .stat').css({
		"height": '225px',
		"width": '275px',
		"margin-bottom": '10px'
	});
	$('div#stats-bar-visits').css('width', '100%');

	var pie_visits_values = [
		['Unique ({{ stats.hits.unique }})', {{ stats.hits.unique }}],
		['Repeat ({{ stats.hits.return }})', {{ stats.hits.return }}]
	];
	var pie_visits = $.jqplot('stats-pie-visits', [pie_visits_values], {
		animate: !$.jqplot.use_excanvas,
		seriesDefaults: {
			renderer: $.jqplot.PieRenderer,
			rendererOptions: {
				showDataLabels: true,
				dataLabelFormatString: null
			}
		},
		legend: {
			show: true
		},
		title: {
			text: 'Visitors ({{ stats.hits.all }})',
			show: true
		}
	});

	var pie_systems_values = [{% for k,v in stats.clicks.platforms.items() %}
		["{{ k }}", {{ v }}],
	{% endfor %}];
	var pie_systems = $.jqplot('stats-pie-systems', [pie_systems_values], {
		animate: !$.jqplot.use_excanvas,
		seriesDefaults: {
			renderer: $.jqplot.PieRenderer,
			rendererOptions: {
				showDataLabels: true,
				dataLabels: 'value'
			}
		},
		legend: {
			show: true
		},
		title: {
			text: 'Systems',
			show: true
		}
	});

	var pie_browsers_values = [{% for k,v in stats.clicks.browsers.items() %}
		["{{ k }}", {{ v }}],
	{% endfor %}];
	var pie_browsers = $.jqplot('stats-pie-browsers', [pie_browsers_values], {
		animate: !$.jqplot.use_excanvas,
		seriesDefaults: {
			renderer: $.jqplot.PieRenderer,
			rendererOptions: {
				showDataLabels: true,
				dataLabels: 'value'
			}
		},
		legend: {
			show: true
		},
		title: {
			text: 'Browsers',
			show: true
		}
	});

	var bar_visits_values = [{% for k,v in sorted(stats.clicks.pd.items()) %}
		{{ v }},
	{% endfor %}];
	var bar_visits_rows = [{% for k,v in sorted(stats.clicks.pd.items()) %}
		{% if v == 0 %}''{% else %}'{{ date_strip_day(k) }}'{% endif %},
	{% endfor %}];
	var bar_visits = $.jqplot('stats-bar-visits', [bar_visits_values], {
		animate: !$.jqplot.use_excanvas,
		seriesDefaults: {
			renderer: $.jqplot.BarRenderer,
			pointLabels: { show: true }
		},
		axes: {
			xaxis: {
				renderer: $.jqplot.CategoryAxisRenderer,
				ticks: bar_visits_rows
			}
		},
		highlighter: { show: false },
		title: {
			text: 'Clicks (last {{ len(stats.clicks.pd.keys()) }} days)',
			show: true
		},
		cursor: {
			show: false,
			showTooltip: false
		}
	});
});
</script>
<style type="text/css">
</style>
{% endblock %}
{% block title %}chr - url stats{% endblock %}
{% block content %}
<h1 class="chr-header">chr url shortener - stats</h1>
<noscript>
	<span class="chr-noscript"><b>Without JavaScript, you can't get the most out of the url stats! :(<b></span>
</noscript>
<div id="chr-stats">
	<p>
		Stats for <b>{{ stats.short_url }}</b><br />
		<b><a href="{{ stats.long }}">{{ stats.long_clip }}</a></b>
	</p>
	<div id="stats-bar-visits" class="stat">
		<noscript>
			<h2 class="chr-header">Visits / day</h2>
			<p>
				{% for k,v in sorted(stats.clicks.pd.items()) %}
					{% if v != 0 %}
						{{ k }}: <b>{{ v }}</b><br />
					{% endif %}
				{% endfor %}
			</p>
		</noscript>
	</div>
	<div id="stats-pie-visits" class="stat">
		<noscript>
			<h2 class="chr-header">Visits</h2>
			<p>
				Unique: <b>{{ stats.hits.unique }}</b><br />
				Return: <b>{{ stats.hits.return }}</b><br />
				<b>{{ stats.hits.ratio }}</b>% of visitors only come once.
			</p>
		</noscript>
	</div>
	<div id="stats-pie-systems" class="stat">
		<noscript>
			<h2 class="chr-header">Systems</h2>
			<p>
			{% for k,v in stats.clicks.platforms.items() %}
				{{ k }}: <b>{{ v }}</b><br />
			{% endfor %}
			</p>
		</noscript>
	</div>
	<div id="stats-pie-browsers" class="stat">
		<noscript>
			<h2 class="chr-header">Browsers</h2>
			<p>
			{% for k,v in stats.clicks.browsers.items() %}
				{{ k }}: <b>{{ v }}</b><br />
			{% endfor %}
			</p>
		</noscript>
	</div>
</div>
{% endblock %}