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