{{template "header.html" . }}
<div class="colstack panel_stack">
{{template "panel-menu.html" . }}
	<main id="panel_dashboard_right" class="colstack_right">
		<form id="timeRangeForm" name="timeRangeForm" action="/panel/analytics/route/{{.Route}}" method="get">
			<div class="colstack_item colstack_head">
				<div class="rowitem">
					<a>{{.Route}} Views</a>
					<select class="timeRangeSelector to_right" name="timeRange">
						<option val="one-day"{{if eq .TimeRange "one-day"}} selected{{end}}>1 day</option>
						<option val="twelve-hours"{{if eq .TimeRange "twelve-hours"}} selected{{end}}>12 hours</option>
						<option val="six-hours"{{if eq .TimeRange "six-hours"}} selected{{end}}>6 hours</option>
					</select>
				</div>
			</div>
		</form>
		<div id="panel_analytics_views" class="colstack_graph_holder">
			<div class="ct-chart"></div>
		</div>
	</main>
</div>
<script>
let labels = [];
let rawLabels = [{{range .PrimaryGraph.Labels}}
{{.}},{{end}}
];
for(const i in rawLabels) {
	let date = new Date(rawLabels[i]*1000);
	console.log("date: ", date);
	let minutes = "0" + date.getMinutes();
	let label = date.getHours() + ":" + minutes.substr(-2);
	console.log("label:", label);
	labels.push(label);
}
labels = labels.reverse()

let seriesData = [{{range .PrimaryGraph.Series}}
{{.}},{{end}}
];
seriesData = seriesData.reverse();

Chartist.Line('.ct-chart', {
  labels: labels,
  series: [seriesData],
}, {
  height: '250px',
});
</script>
{{template "footer.html" . }}