git ssb

2+

mixmix / ticktack



Commit 2e6dc4c90652f68f6fc799235fb4a887ecef021f

Browse Files

working scrolling graph and likes / comments switcing for stats graph

mix irving committed on 4/23/2018, 8:53:03 AM
Parent: e2016e7e072aaa1539f05778a0610bd68e812782

Files changed

app/page/statsShow.jschanged
app/page/statsShow.jsView
@@ -13,8 +13,12 @@
1313 'sbot.obs.connection': 'first',
1414 'history.sync.push': 'first'
1515 })
1616
17+const COMMENTS = 'comments'
18+const LIKES = 'likes'
19+const DAY = 24 * 60 * 60 * 1000
20+
1721 exports.create = (api) => {
1822 return nest('app.page.statsShow', statsShow)
1923
2024 function statsShow (location) {
@@ -22,71 +26,53 @@
2226 blogs: MutantArray([]),
2327 comments: Dict(),
2428 likes: Dict()
2529 })
26- onceTrue(api.sbot.obs.connection, server => {
27- fetchBlogs({ server, store })
28- })
30+ onceTrue(api.sbot.obs.connection, server => fetchBlogs({ server, store }))
2931
3032 var howFarBack = Value(0)
3133 // stats show a moving window of 30 days
32- const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000
33-
34- const COMMENTS = 'comments'
35- const LIKES = 'likes'
3634 var context = Struct({
3735 focus: Value(COMMENTS),
3836 blog: Value(),
3937 range: computed([howFarBack], howFarBack => {
4038 const now = Date.now()
39+ const endOfDay = (Math.floor(now / DAY) + 1) * DAY
4140 return {
42- upper: now - howFarBack * THIRTY_DAYS,
43- lower: now - (howFarBack + 1) * THIRTY_DAYS
41+ upper: endOfDay - howFarBack * 30 * DAY,
42+ lower: endOfDay - (howFarBack + 1) * 30 * DAY
4443 }
4544 })
4645 })
4746
48- var commentsAll = computed(throttle(dictToCollection(store.comments), 1000), (msgs) => {
49- return msgs
50- .map(c => c.value)
51- .reduce((n, sofar) => [...n, ...sofar], [])
47+ var foci = Struct({
48+ [COMMENTS]: computed([throttle(store.comments, 1000)], (msgs) => {
49+ return flatMap(msgs, (val, key) => val)
50+ }),
51+ [LIKES]: computed([throttle(store.likes, 1000)], (msgs) => {
52+ return flatMap(msgs, (val, key) => val)
53+ })
54+
5255 })
53- // var commentsAll = computed([throttle(store.comments, 1000)], (msgs) => {
54- // return flatMap(msgs, (val, key) => {
55- // console.log(key, val)
56- // return val
57- // })
58- // })
5956
60- var visibleCommentsCount = computed([commentsAll, context.range], (msgs, range) => {
57+ var visibleCommentsCount = computed([foci.comments, context.range], (msgs, range) => {
6158 return msgs
6259 .filter(msg => {
6360 const ts = msg.value.timestamp
64- return ts >= range.lower && ts <= range.upper
61+ return ts > range.lower && ts <= range.upper
6562 })
6663 .length
6764 })
6865
69- var likesAll = computed(throttle(dictToCollection(store.likes), 1000), (msgs) => {
66+ var visibleLikesCount = computed([foci.likes, context.range], (msgs, range) => {
7067 return msgs
71- .map(c => c.value)
72- .reduce((n, sofar) => [...n, ...sofar], [])
73- })
74-
75- var visibleLikesCount = computed([likesAll, context.range], (msgs, range) => {
76- return msgs
7768 .filter(msg => {
7869 const ts = msg.value.timestamp
79- return ts >= range.lower && ts <= range.upper
70+ return ts > range.lower && ts <= range.upper
8071 })
8172 .length
8273 })
8374
84- var focused = Struct({
85- [LIKES]: commentsAll,
86- [COMMENTS]: likesAll
87- })
88-
8975 const canvas = h('canvas', { height: 200, width: 600, style: { height: '200px', width: '600px' } })
9076
9177 const displayComments = () => context.focus.set(COMMENTS)
9278 const displayLikes = () => context.focus.set(LIKES)
@@ -169,10 +155,8 @@
169155 ])
170156
171157 var chart = new Chart(canvas.getContext('2d'), chartConfig({ context, chartData: [] }))
172158
173- const toDay = ts => Math.floor(ts / (24 * 60 * 60 * 1000))
174-
175159 // HACK - if the focus has changed, then zero the data
176160 // this prevents the graph from showing some confusing animations when transforming between foci
177161 var lastFocus = context.focus()
178162 const zeroGraphOnFocusChange = (focus) => {
@@ -181,17 +165,18 @@
181165 chart.update()
182166 lastFocus = focus
183167 }
184168 }
185- const chartData = computed([context.focus, focused], (focus, focused) => {
169+ const toDay = ts => Math.floor(ts / DAY)
170+ const chartData = computed([context.focus, foci], (focus, foci) => {
186171 zeroGraphOnFocusChange(focus)
187- const msgs = focused[focus]
172+ const msgs = foci[focus]
188173 const grouped = groupBy(msgs, m => toDay(m.value.timestamp))
189174
190175 var data = Object.keys(grouped)
191176 .map(day => {
192177 return {
193- t: day * 24 * 60 * 60 * 1000,
178+ t: day * DAY,
194179 y: grouped[day].length
195180 }
196181 })
197182 return data
@@ -202,29 +187,37 @@
202187
203188 chart.update()
204189 })
205190
206- const graphHeight = computed([chartData, context.range], (data, range) => {
191+ watchAll([chartData, context.range], (data, range) => {
192+ // const graphHeight = computed([chartData, context.range], (data, range) => {
207193 const { lower, upper } = range
208194 const slice = data
209- .filter(d => d.t >= lower && d.t <= upper)
195+ .filter(d => d.t > lower && d.t <= upper)
210196 .map(d => d.y)
211197 .sort((a, b) => a < b)
212- const localMax = slice[0] ? Math.max(slice[0], 10) : 10
213198
214- return localMax + (5 - localMax % 5)
215- })
216- graphHeight(h => {
199+ var h = slice[0]
200+ if (!h || h < 10) h = 10
201+ else h = h + (5 - h % 5)
202+
217203 chart.options.scales.yAxes[0].ticks.max = h
218204
219205 chart.update()
220206 })
207+ // graphHeight(h => {
208+ // chart.options.scales.yAxes[0].ticks.max = h
209+ // console.log('listen', h)
221210
211+ // chart.update()
212+ // })
213+
222214 context.range(range => {
223215 const { lower, upper } = range
224216
225- chart.options.scales.xAxes[0].time.min = new Date(lower)
226- chart.options.scales.xAxes[0].time.max = new Date(upper)
217+ chart.options.scales.xAxes[0].time.min = new Date(lower + DAY / 2)
218+ chart.options.scales.xAxes[0].time.max = new Date(upper - DAY / 2)
219+ // the squeezing in by DAY/2 is to stop data outside range from half showing
227220
228221 chart.update()
229222 })
230223
@@ -279,26 +272,20 @@
279272 })
280273 )
281274 }
282275
283-function chartConfig ({ context, chartData }) {
276+// TODO rm chartData and other overly smart things which didn't work from here
277+function chartConfig ({ context }) {
284278 const { lower, upper } = resolve(context.range)
285279
286- const data = resolve(chartData) || []
287- const slice = data
288- .filter(d => d.t >= lower && d.t <= upper)
289- .map(d => d.y)
290- .sort((a, b) => a < b)
291- const localMax = slice[0] ? Math.max(slice[0], 10) : 10
292-
293280 return {
294281 type: 'bar',
295282 data: {
296283 datasets: [{
297284 backgroundColor: 'hsla(215, 57%, 60%, 1)',
298285 // Ticktack Primary color:'hsla(215, 57%, 43%, 1)',
299286 borderColor: 'hsla(215, 57%, 60%, 1)',
300- data
287+ data: []
301288 }]
302289 },
303290 options: {
304291 legend: {

Built with git-ssb-web