forked from polastre/analytics.example.org
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.ejs
193 lines (158 loc) · 5.89 KB
/
index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="../css/public_analytics.css">
<%- include('partials/header', {}); %>
<!--[if lte IE 9]>
<script src="js/vendor/aight.v2.min.js"></script>
<![endif]-->
<script src="/js/vendor/d3.v3.min.js"></script>
<script src="/js/vendor/q.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/civ2cfm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){console.log(e)}</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<%- include('partials/page-header', {}); %>
<div class="container">
<!--
JavaScript block hooks look for any element with both data-block and
data-source attributes:
<section data-block="users" data-source="path/to/data.json">
The "loading", "loaded", and "error" classes are set on this element
the data-source URL is loaded. Then the renderer is called on the first
child of the block with the "data" class:
<div class="data">
</div>
Some renderers expect to be called on HTML tables, in which
case you would use:
<table class="data">
</table>
</section>
-->
<div id="main_data">
<section id="realtime"
data-block="realtime"
data-source="/data/live/realtime.json"
data-refresh="15">
<h2 id="current_visitors" class="data">...</h2>
<div class="chart_subtitle">
visitors right now
</div>
</section>
<section class="section_headline visits_today">
<h3>Last 24 Hours</h3>
<h4>Local Time</h4>
</section>
<section id="time_series"
data-block="today"
data-source="/data/live/last-48-hours.json"
data-refresh="15">
<svg class="data time-series">
</svg>
</section>
<section class="section_subheadline">
There were <span id="total_visitors" class="data">...</span> visits over the past 90 days.
</section>
<section id="devices" class="three_column"
data-block="devices"
data-source="/data/live/devices.json">
<h4>Devices</h4>
<figure id="chart_device_types">
<div class="data bar-chart">
</div>
</figure>
</section>
<section id="browsers" class="three_column">
<h4>Browsers</h4>
<figure id="chart_browsers"
data-block="browsers"
data-source="/data/live/browsers.json">
<div class="data bar-chart">
</div>
</figure>
<figure id="chart_ie"
data-block="ie"
data-source="/data/live/ie.json">
<h4>Internet Explorer</h4>
<div class="data bar-chart">
</div>
</figure>
</section>
<section id="operating_systems" class="three_column">
<h4>Operating Systems</h4>
<figure id="chart_os"
data-block="os"
data-source="/data/live/os.json">
<div class="data bar-chart">
</div>
</figure>
<figure id="chart_windows"
data-block="windows"
data-source="/data/live/windows.json">
<h4>Windows</h4>
<div class="data bar-chart">
</div>
</figure>
</section>
</div>
<div id="secondary_data">
<section id="top_100_table">
<!-- see: http://heydonworks.com/practical_aria_examples/ -->
<h3>Top 20</h3>
<ul class="pills" role="tablist">
<li><a role="tab" aria-selected="true" href="#top-pages-realtime">Now</a></li>
<li><a role="tab" href="#top-pages-7-days">7 Days</a></li>
<li><a role="tab" href="#top-pages-30-days">30 Days</a></li>
</ul>
<figure class="top-pages" id="top-pages-realtime" role="tabpanel"
data-block="top-pages"
data-source="/data/live/top-pages-realtime.json"
data-refresh="15">
<h5><strong>Pages</strong><br/>
<em>People on a single, specific page now.</em></h5>
<div class="data bar-chart">
</div>
</figure>
<figure class="top-pages" id="top-pages-7-days" role="tabpanel"
data-block="top-pages"
data-source="/data/live/top-pages-7-days.json">
<h5><strong>Domains</strong><br/>
<em>Total visits over the last week.</em></h5>
<div class="data bar-chart">
</div>
</figure>
<figure class="top-pages" id="top-pages-30-days" role="tabpanel"
data-block="top-pages"
data-source="/data/live/top-pages-30-days.json">
<h5><strong>Domains</strong><br/>
<em>Total visits over the last month.</em></h5>
<div class="data bar-chart">
</div>
</figure>
</section>
</div>
<%- include('partials/page-footer', {}); %>
</div>
</body>
<!--
IE detection, used to guide console formatting in subsequent include
-->
<script type="text/javascript">window._ie9 = false;</script>
<!--[if IE 9 ]>
<script type="text/javascript">window._ie9 = true;</script>
<![endif]-->
<!--
IE10 JS targeting: http://stackoverflow.com/a/17099988
IE11 JS targeting: http://stackoverflow.com/a/17447695
-->
<script type="text/javascript">
window._ie10 = ("onpropertychange" in document && !!window.matchMedia);
window._ie11 = !!navigator.userAgent.match(/Trident\/7.0; rv 11/);
window._ie = window._ie9 || window._ie10 || window._ie11;
</script>
<script src="../js/index.js"></script>
<%- include('partials/footer-js', {}); %>
</html>