<%+header%>

<!--[if IE]><script type="text/javascript" src="<%=resource%>/livestats/ExCanvas.js"></script><![endif]-->
<script type="text/javascript" src="<%=resource%>/livestats/MochiKit.js"></script>
<script type="text/javascript" src="<%=resource%>/livestats/JsonRpc.js"></script>
<script type="text/javascript" src="<%=resource%>/livestats/PlotKit.js"></script>
<script type="text/javascript" src="<%=resource%>/livestats/GraphRPC.js"></script>
<script type="text/javascript" src="<%=resource%>/livestats/Legend.js"></script>

<%
	local interfaces = { }
	local ifnames = {}
	local uci = luci.model.uci.cursor_state()

	uci:foreach("network", "interface",
		function(s)
			if s.ifname ~= "lo" then
				table.insert( interfaces,
					"'" .. ( s.ifname or s['.name'] ) .. "'"
				)
				ifnames[s.ifname or s['.name']] = s['.name']
			end
		end
	)
-%>

<script type="text/javascript">
	function initGraphs() {
		var rpc = new GraphRPC(
			document.getElementById('live_graphs'),
			'<%=luci.dispatcher.build_url('rpc', 'sys')%>', 'net.deviceinfo',
			2000,

			// Data sources
			[ "0", "<%:livestats_incoming%> (kiB/s)", "8", "<%:livestats_outgoing%> (kiB/s)" ],

			// Graph layout options
			{ 
			shouldFill: false, 
			drawBackground: false, 
			strokeColor: null,
			title: '<%:livestats_traffic%> %s',
			strokeWidth: 2.5, height: 140,
			padding: { left: 70, right: 10, top: 10, bottom: 20 },
			instances: [ <%=table.concat(interfaces, ", ") %> ],
			instanceNames: {
				<%- for iface, network in pairs(ifnames) do %>
					<%-="%q:%q," % {iface, network}-%>
				<% end %>
				"0": ""
			}},

			// transform function
			function (cur, last) {
				return (cur - last) / 2048;
			},
			'live_graphs'
		);
	}

	MochiKit.DOM.addLoadEvent(initGraphs);
</script>

<div id="live_graphs"></div>

<%+footer%>
