Commit 3641823ab81be8b64bfe575a2635cbbd6a5bb05d
/network : fix graph updating
mixmix committed on 12/2/2018, 7:44:19 AMParent: 545298571be66be4f361b65df10a9ddbd073c492
Files changed
app/page/network.js | changed |
app/page/network.js | |||
---|---|---|---|
@@ -1,6 +1,6 @@ | |||
1 | 1 … | const nest = require('depnest') | |
2 | -const { h, Value, Dict, onceTrue, computed, watchAll, throttle } = require('mutant') | ||
2 … | +const { h, Value, Dict, onceTrue, computed, watch, watchAll, throttle } = require('mutant') | ||
3 | 3 … | const Chart = require('chart.js') | |
4 | 4 … | const pull = require('pull-stream') | |
5 | 5 … | ||
6 | 6 … | const MINUTE = 60 * 1000 | |
@@ -44,11 +44,10 @@ | |||
44 | 44 … | ||
45 | 45 … | const latest = Value(toTimeBlock(Date.now(), minsPerStep)) | |
46 | 46 … | // start of the most recent bar | |
47 | 47 … | setInterval(() => { | |
48 | - console.log('boop') | ||
49 | 48 … | latest.set(toTimeBlock(Date.now(), minsPerStep)) | |
50 | - }, 2 * MINUTE) | ||
49 … | + }, minsPerStep / 4 * MINUTE) | ||
51 | 50 … | ||
52 | 51 … | const range = computed([latest], (latest) => { | |
53 | 52 … | return { | |
54 | 53 … | upper: latest + minsPerStep * MINUTE, | |
@@ -108,49 +107,41 @@ | |||
108 | 107 … | ||
109 | 108 … | function initialiseChart ({ canvas, data, range }) { | |
110 | 109 … | var chart = new Chart(canvas.getContext('2d'), chartConfig(range)) | |
111 | 110 … | ||
112 | - const chartData = computed([throttle(data, 300), range], (data, range) => { | ||
113 | - return Object.keys(data) | ||
114 | - .filter(ts => ts >= range.lower && ts < range.upper) | ||
111 … | + watch(range, ({ lower, upper }) => { | ||
112 … | + // set horizontal scale | ||
113 … | + chart.options.scales.xAxes[0].time.min = lower | ||
114 … | + chart.options.scales.xAxes[0].time.max = upper | ||
115 … | + chart.update() | ||
116 … | + }) | ||
117 … | + | ||
118 … | + watchAll([throttle(data, 300), range], (data, { lower, upper }) => { | ||
119 … | + const _data = Object.keys(data) | ||
120 … | + .sort((a, b) => a < b ? -1 : +1) | ||
115 | 121 … | .map(ts => { | |
116 | 122 … | return { | |
117 | 123 … | t: Number(ts), // NOTE - might need to offset by a half-step ? | |
118 | 124 … | y: data[ts] | |
119 | 125 … | } | |
120 | 126 … | }) | |
121 | - }) | ||
122 | - chartData(data => { | ||
123 | - chart.data.datasets[0].data = data | ||
124 | - chart.update() | ||
125 | - }) | ||
126 | 127 … | ||
127 | - // Scales the height of the graph (to the visible data)! | ||
128 | - watchAll([chartData, range], (chartData, range) => { | ||
129 | - const { lower, upper } = range | ||
130 | - const slice = chartData | ||
131 | - .filter(d => d.t >= lower && d.t < upper) // unnecessary ?? | ||
128 … | + // update chard data | ||
129 … | + chart.data.datasets[0].data = _data | ||
130 … | + | ||
131 … | + // scales the height of the graph (to the visible data)! | ||
132 … | + const slice = _data | ||
133 … | + .filter(d => d.t >= lower && d.t < upper) | ||
132 | 134 … | .map(d => d.y) | |
133 | 135 … | .sort((a, b) => a > b ? -1 : +1) | |
134 | 136 … | ||
135 | 137 … | var h = slice[0] | |
136 | 138 … | if (!h || h < GRAPH_Y_MIN) h = GRAPH_Y_MIN // min-height | |
137 | 139 … | else h = h + (GRAPH_Y_STEP - h % GRAPH_Y_STEP) // round height to multiples of GRAPH_Y_STEP | |
138 | - | ||
139 | 140 … | chart.options.scales.yAxes[0].ticks.max = h | |
140 | 141 … | ||
141 | 142 … | chart.update() | |
142 | 143 … | }) | |
143 | - | ||
144 | - // Update the x-axes bounds of the graph! | ||
145 | - range(range => { | ||
146 | - const { lower, upper } = range | ||
147 | - | ||
148 | - chart.options.scales.xAxes[0].time.min = lower | ||
149 | - chart.options.scales.xAxes[0].time.max = upper | ||
150 | - | ||
151 | - chart.update() | ||
152 | - }) | ||
153 | 144 … | } | |
154 | 145 … | ||
155 | 146 … | // ///// HELPERS ///// | |
156 | 147 … |
Built with git-ssb-web