index.htmlView |
---|
11 | 11 … | <h2>Daily active users</h2> |
12 | 12 … | <img id=graph src=day.png alt="Graph of daily active feeds"> |
13 | 13 … | </div> |
14 | 14 … | |
| 15 … | +<div id="day-info" style="float:right; text-align:right; visibility:hidden"> |
| 16 … | + <div><ins id="day"> </ins></div> |
| 17 … | + <div><ins id="day-users"> </ins> users</div> |
| 18 … | +</div> |
| 19 … | + |
15 | 20 … | <div id="user-info" style="visibility:hidden"> |
16 | 21 … | <div>User: <a id="user-link"><code id="user-id"> </code></a></div> |
17 | 22 … | </div> |
18 | 23 … | |
24 | 29 … | var width, height |
25 | 30 … | var userInfo = document.getElementById('user-info') |
26 | 31 … | var userLink = document.getElementById('user-link') |
27 | 32 … | var userIdText = document.getElementById('user-id').firstChild |
| 33 … | +var dayInfo = document.getElementById('day-info') |
| 34 … | +var dayText = document.getElementById('day').firstChild |
| 35 … | +var dayUsersText = document.getElementById('day-users').firstChild |
28 | 36 … | |
29 | 37 … | var colors = { |
30 | 38 … | yellow: [255, 255, 0, 255], |
31 | 39 … | red: [255, 0, 0, 255], |
135 | 143 … | function pointEquals(a, b) { |
136 | 144 … | return a ? b && a[0] === b[0] && a[1] === b[1] : !b |
137 | 145 … | } |
138 | 146 … | |
| 147 … | +function dayStr(day) { |
| 148 … | + return isNaN(day) ? '' : |
| 149 … | + new Date(common.startTime + day * 86400000).toDateString() |
| 150 … | +} |
| 151 … | + |
| 152 … | +var usersAtInterval = {} |
| 153 … | +function countUsersAtInterval(x) { |
| 154 … | + var count = usersAtInterval[x] |
| 155 … | + if (typeof count !== 'undefined') return count |
| 156 … | + count = 0 |
| 157 … | + for (var y = height-1; y > 0; y--) { |
| 158 … | + var color = getPixel(x, y) |
| 159 … | + if (colorEquals(color, colors.bg)) break |
| 160 … | + count++ |
| 161 … | + } |
| 162 … | + return usersAtInterval[x] = count |
| 163 … | +} |
| 164 … | + |
139 | 165 … | var hoverColor, hoverPoint |
140 | 166 … | var clickedColor, clickedPoint |
141 | 167 … | |
142 | 168 … | function highlight(color, point) { |
145 | 171 … | if (hoverColor) replaceColor(hoverColor, hoverColor) |
146 | 172 … | ctx.putImageData(imgData, 0, 0) |
147 | 173 … | hoverColor = null |
148 | 174 … | userInfo.style.visibility = 'hidden' |
| 175 … | + dayInfo.style.visibility = 'hidden' |
149 | 176 … | return |
150 | 177 … | } |
| 178 … | + |
| 179 … | + if (!point) { |
| 180 … | + dayInfo.style.visibility = 'hidden' |
| 181 … | + } else { |
| 182 … | + dayInfo.style.visibility = 'visible' |
| 183 … | + dayText.nodeValue = dayStr(point[0]) |
| 184 … | + dayUsersText.nodeValue = countUsersAtInterval(point[0]) |
| 185 … | + } |
| 186 … | + |
151 | 187 … | if (colorEquals(color, colors.black)) return |
152 | 188 … | if (colorEquals(color, colors.bg)) return |
153 | 189 … | if (hoverColor) replaceColor(hoverColor, hoverColor) |
154 | 190 … | replaceColor(color, colors.highlight) |
156 | 192 … | ctx.putImageData(imgData, 0, 0) |
157 | 193 … | var id = idsByColor[color] |
158 | 194 … | if (!id) { |
159 | 195 … | userInfo.style.visibility = 'hidden' |
160 | | - return |
| 196 … | + } else { |
| 197 … | + userIdText.nodeValue = id |
| 198 … | + userLink.href = feedBase + encodeURIComponent(id) |
| 199 … | + userInfo.style.visibility = 'visible' |
161 | 200 … | } |
162 | | - userIdText.nodeValue = id |
163 | | - userLink.href = feedBase + encodeURIComponent(id) |
164 | | - userInfo.style.visibility = 'visible' |
| 201 … | + |
165 | 202 … | } |
166 | 203 … | |
167 | 204 … | function clearHoverPoint() { |
168 | 205 … | highlight(clickedColor, clickedPoint) |