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