| 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) |