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