Commit dd67652a2a492f8668f29984959b814c9e3cfe6d
/network: tidy it up
mixmix committed on 12/1/2018, 9:08:31 AMParent: bc574122903c7ef4a0abf0fb4918a12a4e96a977
Files changed
| app/page/network.js | changed |
| app/page/network.mcss | added |
| app/page/network.js | |||
|---|---|---|---|
| @@ -30,13 +30,17 @@ | |||
| 30 | 30 … | }, '/network') | |
| 31 | 31 … | } | |
| 32 | 32 … | ||
| 33 | 33 … | function networkPage (location) { | |
| 34 | - const minsPerStep = 5 | ||
| 34 … | + const minsPerStep = 20 | ||
| 35 … | + const scale = 7 * DAY | ||
| 35 | 36 … | ||
| 36 | - const data = Dict() | ||
| 37 … | + const data = Dict({ | ||
| 38 … | + [toTimeBlock(Date.now(), minsPerStep) + minsPerStep * MINUTE]: 0, | ||
| 39 … | + [toTimeBlock(Date.now(), minsPerStep) + minsPerStep * MINUTE - scale]: 0 | ||
| 40 … | + }) | ||
| 37 | 41 … | onceTrue(api.sbot.obs.connection, server => { | |
| 38 | - getData({ data, server, minsPerStep }) | ||
| 42 … | + getData({ data, server, minsPerStep, scale }) | ||
| 39 | 43 … | }) | |
| 40 | 44 … | ||
| 41 | 45 … | const latest = Value(toTimeBlock(Date.now(), minsPerStep)) | |
| 42 | 46 … | // start of the most recent bar | |
| @@ -47,18 +51,19 @@ | |||
| 47 | 51 … | ||
| 48 | 52 … | const range = computed([latest], (latest) => { | |
| 49 | 53 … | return { | |
| 50 | 54 … | upper: latest + minsPerStep * MINUTE, | |
| 51 | - lower: latest + minsPerStep * MINUTE - DAY | ||
| 55 … | + lower: latest + minsPerStep * MINUTE - scale | ||
| 52 | 56 … | } | |
| 53 | 57 … | }) | |
| 54 | 58 … | ||
| 55 | 59 … | // | |
| 56 | 60 … | ||
| 57 | - const canvas = h('canvas', { height: 300, width: 1200, style: { height: '300px', width: '1200px' } }) | ||
| 61 … | + const canvas = h('canvas', { height: 500, width: 1200, style: { height: '500px', width: '1200px' } }) | ||
| 58 | 62 … | const page = h('NetworkPage', { title: '/network' }, [ | |
| 59 | 63 … | h('div.container', [ | |
| 60 | 64 … | h('h1', 'Network'), | |
| 65 … | + h('header', `Messages received per 20-minute block over the last ${scale / DAY} days`), | ||
| 61 | 66 … | canvas | |
| 62 | 67 … | ]) | |
| 63 | 68 … | ]) | |
| 64 | 69 … | ||
| @@ -67,15 +72,24 @@ | |||
| 67 | 72 … | return page | |
| 68 | 73 … | } | |
| 69 | 74 … | } | |
| 70 | 75 … | ||
| 71 | -function getData ({ data, server, minsPerStep }) { | ||
| 76 … | +function getData ({ data, server, minsPerStep, scale }) { | ||
| 77 … | + const upperEnd = toTimeBlock(Date.now(), minsPerStep) + minsPerStep * MINUTE | ||
| 78 … | + const lowerBound = upperEnd - scale | ||
| 79 … | + | ||
| 72 | 80 … | const query = [ | |
| 73 | 81 … | { | |
| 74 | 82 … | $filter: { | |
| 75 | - timestamp: { $gte: toTimeBlock(Date.now(), minsPerStep) + minsPerStep * MINUTE - DAY } | ||
| 83 … | + timestamp: { $gte: lowerBound } | ||
| 76 | 84 … | } | |
| 77 | 85 … | }, { | |
| 86 … | + $filter: { | ||
| 87 … | + value: { | ||
| 88 … | + author: { $ne: server.id } | ||
| 89 … | + } | ||
| 90 … | + } | ||
| 91 … | + }, { | ||
| 78 | 92 … | $map: { | |
| 79 | 93 … | ts: ['timestamp'] | |
| 80 | 94 … | } | |
| 81 | 95 … | } | |
| @@ -173,17 +187,18 @@ | |||
| 173 | 187 … | unit: 'minute', | |
| 174 | 188 … | min: lower, | |
| 175 | 189 … | max: upper, | |
| 176 | 190 … | tooltipFormat: 'HH:mm', | |
| 177 | - stepSize: 240 | ||
| 191 … | + stepSize: 4 * 60 | ||
| 192 … | + // stepSize: 240 | ||
| 178 | 193 … | }, | |
| 179 | 194 … | bounds: 'ticks', | |
| 180 | 195 … | ticks: { | |
| 181 | 196 … | // maxTicksLimit: 4 // already disabled | |
| 182 | 197 … | }, | |
| 183 | 198 … | gridLines: { | |
| 184 | 199 … | display: false | |
| 185 | - }, | ||
| 200 … | + } | ||
| 186 | 201 … | // maxBarThickness: 2 | |
| 187 | 202 … | }], | |
| 188 | 203 … | ||
| 189 | 204 … | yAxes: [{ | |
Built with git-ssb-web