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