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