| app/page/statsShow.jsView |
|---|
| 4 | 4 | const marksum = require('markdown-summary') |
| 5 | 5 | const Chart = require('chart.js') |
| 6 | 6 | const groupBy = require('lodash/groupBy') |
| 7 | 7 | const flatMap = require('lodash/flatMap') |
| 8 | +const get = require('lodash/get') |
| 8 | 9 | |
| 9 | 10 | exports.gives = nest('app.page.statsShow') |
| 10 | 11 | |
| 11 | 12 | exports.needs = nest({ |
| 18 | 19 | const LIKES = 'likes' |
| 19 | 20 | const SHARES = 'shares' |
| 20 | 21 | const DAY = 24 * 60 * 60 * 1000 |
| 21 | 22 | |
| 23 | +const getRoot = { |
| 24 | + [COMMENTS]: (msg) => get(msg, 'value.content.root'), |
| 25 | + [LIKES]: (msg) => get(msg, 'value.content.vote.link') |
| 26 | +} |
| 27 | + |
| 22 | 28 | exports.create = (api) => { |
| 23 | 29 | return nest('app.page.statsShow', statsShow) |
| 24 | 30 | |
| 25 | 31 | function statsShow (location) { |
| 56 | 62 | }) |
| 57 | 63 | }) |
| 58 | 64 | |
| 59 | 65 | function totalOnscreenData (focus) { |
| 60 | | - return computed([foci[focus], context.range], (msgs, range) => { |
| 66 | + return computed([foci[focus], context], (msgs, context) => { |
| 67 | + const { range, blog } = context |
| 61 | 68 | return msgs |
| 62 | 69 | .filter(msg => { |
| 70 | + if (blog && getRoot[focus](msg) !== blog) return false |
| 71 | + |
| 63 | 72 | const ts = msg.value.timestamp |
| 64 | 73 | return ts > range.lower && ts <= range.upper |
| 65 | 74 | }) |
| 66 | 75 | .length |
| 112 | 121 | ]) |
| 113 | 122 | ]) |
| 114 | 123 | |
| 115 | 124 | function BlogRow (blog) { |
| 116 | | - return h('tr.blog', { id: blog.key }, [ |
| 125 | + const className = computed(context.blog, b => { |
| 126 | + if (!b) return '' |
| 127 | + if (b !== blog.key) return '-background' |
| 128 | + }) |
| 129 | + |
| 130 | + return h('tr.blog', { id: blog.key, className }, [ |
| 117 | 131 | h('td.details', [ |
| 118 | | - h('div.title', {}, getTitle({ blog, mdRenderer: api.message.html.markdown })), |
| 119 | | - h('a', |
| 120 | | - { |
| 121 | | - href: '#', |
| 122 | | - 'ev-click': ev => { |
| 123 | | - ev.stopPropagation() |
| 124 | | - api.history.sync.push(blog) |
| 125 | | - } |
| 126 | | - }, |
| 127 | | - 'View blog' |
| 128 | | - ) |
| 132 | + h('div.title', { |
| 133 | + 'ev-click': () => { |
| 134 | + if (context.blog() === blog.key) context.blog.set('') |
| 135 | + else context.blog.set(blog.key) |
| 136 | + } |
| 137 | + }, getTitle({ blog, mdRenderer: api.message.html.markdown })), |
| 138 | + h('a', { |
| 139 | + href: '#', |
| 140 | + 'ev-click': ev => { |
| 141 | + ev.stopPropagation() |
| 142 | + api.history.sync.push(blog) |
| 143 | + } |
| 144 | + }, 'View blog') |
| 129 | 145 | ]), |
| 130 | 146 | h('td.comments', computed(store.comments.get(blog.key), msgs => msgs ? msgs.length : 0)), |
| 131 | 147 | h('td.likes', computed(store.likes.get(blog.key), msgs => msgs ? msgs.length : 0)), |
| 132 | 148 | h('td.shares', computed(store.shares.get(blog.key), msgs => msgs ? msgs.length : 0)) |
| 189 | 205 | |
| 190 | 206 | function initialiseChart ({ canvas, context, foci }) { |
| 191 | 207 | var chart = new Chart(canvas.getContext('2d'), chartConfig({ context })) |
| 192 | 208 | |
| 193 | | - const chartData = computed([context.focus, foci], (focus, foci) => { |
| 194 | | - zeroGraphOnFocusChange(focus) |
| 195 | | - const msgs = foci[focus] |
| 209 | + const chartData = computed([context, foci], (context, foci) => { |
| 210 | + fixAnimationWhenNeeded(context) |
| 211 | + |
| 212 | + const msgs = foci[context.focus] |
| 213 | + .filter(msg => { |
| 214 | + if (!context.blog) return true |
| 215 | + |
| 216 | + return context.blog === getRoot[context.focus](msg) |
| 217 | + }) |
| 196 | 218 | const grouped = groupBy(msgs, m => toDay(m.value.timestamp)) |
| 197 | 219 | |
| 198 | 220 | return Object.keys(grouped) |
| 199 | 221 | .map(day => { |
| 240 | 262 | |
| 241 | 263 | |
| 242 | 264 | |
| 243 | 265 | |
| 244 | | - |
| 245 | | - var lastFocus = context.focus() |
| 246 | | - function zeroGraphOnFocusChange (focus) { |
| 247 | | - if (focus !== lastFocus) { |
| 266 | + |
| 267 | + var prevFocus = context.focus() |
| 268 | + var prevBlog = context.blog() |
| 269 | + function fixAnimationWhenNeeded (context) { |
| 270 | + if (context.focus !== prevFocus || context.blog !== prevBlog) { |
| 248 | 271 | chart.data.datasets[0].data = [] |
| 249 | 272 | chart.update() |
| 250 | | - lastFocus = focus |
| 273 | + prevFocus = context.focus |
| 274 | + prevBlog = context.blog |
| 251 | 275 | } |
| 252 | 276 | } |
| 253 | 277 | function toDay (ts) { return Math.floor(ts / DAY) } |
| 254 | 278 | } |