Commit 60bb192e4fd7cd1d216e02babf4182c884bf1b29
Show days active
cel committed on 11/18/2019, 12:59:55 AMParent: a3b6e67a79ab15e9e37b77d0493be9a811e5862e
Files changed
| index.html | changed |
| index.html | |||
|---|---|---|---|
| @@ -18,8 +18,10 @@ | |||
| 18 | 18 … | </div> | |
| 19 | 19 … | ||
| 20 | 20 … | <div id="user-info" style="visibility:hidden"> | |
| 21 | 21 … | <div>User: <a id="user-link"><code id="user-id"> </code></a></div> | |
| 22 … | + <div>Days active: <ins id="days-active"> </ins></div> | ||
| 23 … | + <div><ins id="first"> </ins> - <ins id="last"> </ins></div> | ||
| 22 | 24 … | </div> | |
| 23 | 25 … | ||
| 24 | 26 … | <script> | |
| 25 | 27 … | var feedBase = 'https://viewer.scuttlebot.io/' | |
| @@ -32,8 +34,11 @@ | |||
| 32 | 34 … | var userIdText = document.getElementById('user-id').firstChild | |
| 33 | 35 … | var dayInfo = document.getElementById('day-info') | |
| 34 | 36 … | var dayText = document.getElementById('day').firstChild | |
| 35 | 37 … | var dayUsersText = document.getElementById('day-users').firstChild | |
| 38 … | +var daysActiveText = document.getElementById('days-active').firstChild | ||
| 39 … | +var firstText = document.getElementById('first').firstChild | ||
| 40 … | +var lastText = document.getElementById('last').firstChild | ||
| 36 | 41 … | ||
| 37 | 42 … | var colors = { | |
| 38 | 43 … | yellow: [255, 255, 0, 255], | |
| 39 | 44 … | red: [255, 0, 0, 255], | |
| @@ -169,8 +174,33 @@ | |||
| 169 | 174 … | } | |
| 170 | 175 … | return usersAtInterval[x] = count | |
| 171 | 176 … | } | |
| 172 | 177 … | ||
| 178 … | +var extents = {} | ||
| 179 … | +function getUserExtent(id) { | ||
| 180 … | + var extent = extents[id] | ||
| 181 … | + if (extent) return extent | ||
| 182 … | + extent = extents[id] = { | ||
| 183 … | + days: 0 | ||
| 184 … | + } | ||
| 185 … | + var color = idColors[id] | ||
| 186 … | + if (color) { | ||
| 187 … | + for (var x = 0; x < width; x++) { | ||
| 188 … | + for (var y = height-1; y > 0; y--) { | ||
| 189 … | + var c = getPixel(x, y) | ||
| 190 … | + if (colorEquals(c, colors.bg)) break | ||
| 191 … | + if (colorEquals(c, color)) { | ||
| 192 … | + extent.days++ | ||
| 193 … | + if (!extent.first) extent.first = x | ||
| 194 … | + extent.last = x | ||
| 195 … | + break | ||
| 196 … | + } | ||
| 197 … | + } | ||
| 198 … | + } | ||
| 199 … | + } | ||
| 200 … | + return extent | ||
| 201 … | +} | ||
| 202 … | + | ||
| 173 | 203 … | var hoverColor, hoverPoint | |
| 174 | 204 … | var clickedColor, clickedPoint | |
| 175 | 205 … | ||
| 176 | 206 … | function highlight(point) { | |
| @@ -204,8 +234,12 @@ | |||
| 204 | 234 … | userInfo.style.visibility = 'hidden' | |
| 205 | 235 … | } else { | |
| 206 | 236 … | userIdText.nodeValue = id | |
| 207 | 237 … | userLink.href = feedBase + encodeURIComponent(id) | |
| 238 … | + var extent = getUserExtent(id) | ||
| 239 … | + daysActiveText.nodeValue = extent.days | ||
| 240 … | + firstText.nodeValue = dayStr(extent.first) | ||
| 241 … | + lastText.nodeValue = dayStr(extent.last) | ||
| 208 | 242 … | userInfo.style.visibility = 'visible' | |
| 209 | 243 … | } | |
| 210 | 244 … | ||
| 211 | 245 … | ctx.putImageData(imgData, 0, 0) | |
Built with git-ssb-web