git ssb - wip · mixmix/ticktack@e2016e7e

Commit e2016e7e072aaa1539f05778a0610bd68e812782

wip

mix irving committed on 4/23/2018, 8:05:50 AM
Parent: 0d44fc79a12ebf427d26a10693fcfce4fa2e7451

Files changed

app/page/statsShow.js	changed
app/page/statsShow.mcss	changed

app/page/statsShow.jsView
		@@ -1,11 +1,12 @@
1	1	const nest = require('depnest')
2		-const { h, resolve, when, Value, Struct, Array: MutantArray, Dict, onceTrue, map, computed, dictToCollection, throttle } = require('mutant')
	2	+const { h, resolve, when, Value, Struct, Array: MutantArray, Dict, onceTrue, map, computed, dictToCollection, throttle, watchAll } = require('mutant')
3	3	const pull = require('pull-stream')
4	4	const marksum = require('markdown-summary')
5	5	const Chart = require('chart.js')
6	6	const groupBy = require('lodash/groupBy')
7		-const merge = require('lodash/merge')
	7	+const mergeWith = require('lodash/mergeWith')
	8	+const flatMap = require('lodash/flatMap')
8	9
9	10	exports.gives = nest('app.page.statsShow')
10	11
11	12	exports.needs = nest({
		@@ -21,80 +22,111 @@
21	22	blogs: MutantArray([]),
22	23	comments: Dict(),
23	24	likes: Dict()
24	25	})
	26	+ onceTrue(api.sbot.obs.connection, server => {
	27	+ fetchBlogs({ server, store })
	28	+ })
25	29
26	30	var howFarBack = Value(0)
27	31	// stats show a moving window of 30 days
28	32	const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000
29	33
30		- // TODO
31		- var range = computed([howFarBack], howFarBack => {
32		- const now = Date.now()
33		- return {
34		- upper: now - howFarBack * THIRTY_DAYS,
35		- lower: now - (howFarBack + 1) * THIRTY_DAYS
36		- }
	34	+ const COMMENTS = 'comments'
	35	+ const LIKES = 'likes'
	36	+ var context = Struct({
	37	+ focus: Value(COMMENTS),
	38	+ blog: Value(),
	39	+ range: computed([howFarBack], howFarBack => {
	40	+ const now = Date.now()
	41	+ return {
	42	+ upper: now - howFarBack * THIRTY_DAYS,
	43	+ lower: now - (howFarBack + 1) * THIRTY_DAYS
	44	+ }
	45	+ })
37	46	})
38	47
39		- var commentsAll = computed(throttle(dictToCollection(store.comments), 1000), (comments) => {
40		- return comments
	48	+ var commentsAll = computed(throttle(dictToCollection(store.comments), 1000), (msgs) => {
	49	+ return msgs
41	50	.map(c => c.value)
42	51	.reduce((n, sofar) => [...n, ...sofar], [])
43	52	})
	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	+ // })
44	59
45		- // this should perhaps be reduced to just return commentsContextCount
46		- var visibleComments = computed([commentsAll, range], (comments, range) => {
47		- return comments
	60	+ var visibleCommentsCount = computed([commentsAll, context.range], (msgs, range) => {
	61	+ return msgs
48	62	.filter(msg => {
49	63	const ts = msg.value.timestamp
50	64	return ts >= range.lower && ts <= range.upper
51	65	})
	66	+ .length
52	67	})
53	68
54		- var rangeLikes = computed([throttle(dictToCollection(store.likes), 1000), range], (likes, range) => {
55		- return likes
	69	+ var likesAll = computed(throttle(dictToCollection(store.likes), 1000), (msgs) => {
	70	+ return msgs
56	71	.map(c => c.value)
57	72	.reduce((n, sofar) => [...n, ...sofar], [])
58		- // .filter(msg => {
59		- // const ts = msg.value.timestamp
60		- // return ts >= range.lower && ts <= range.upper
61		- // })
62	73	})
63	74
64		- onceTrue(api.sbot.obs.connection, server => {
65		- fetchBlogs({ server, store })
	75	+ var visibleLikesCount = computed([likesAll, context.range], (msgs, range) => {
	76	+ return msgs
	77	+ .filter(msg => {
	78	+ const ts = msg.value.timestamp
	79	+ return ts >= range.lower && ts <= range.upper
	80	+ })
	81	+ .length
	82	+ })
66	83
67		- // const query = {
68		- // gt: ['C', null, range().lower],
69		- // lt: ['C', undefined, range().upper],
70		- // reverse: true,
71		- // values: true,
72		- // keys: false,
73		- // seqs: false
74		- // }
75		- // console.log('test query', query)
76		- // pull(server.blogStats.read(query), pull.log(() => console.log('DONE')))
	84	+ var focused = Struct({
	85	+ [LIKES]: commentsAll,
	86	+ [COMMENTS]: likesAll
77	87	})
	88	+
78	89	const canvas = h('canvas', { height: 200, width: 600, style: { height: '200px', width: '600px' } })
79	90
	91	+ const displayComments = () => context.focus.set(COMMENTS)
	92	+ const displayLikes = () => context.focus.set(LIKES)
	93	+
80	94	const page = h('Page -statsShow', [
81	95	h('Scroller.content', [
82		- h('div.content', [
	96	+ h('div.content', [
83	97	h('h1', 'Stats'),
84	98	h('section.totals', [
85		- h('div.comments', [
86		- h('div.count', computed(visibleComments, msgs => msgs.length)),
87		- h('strong', 'Comments'),
88		- '(30 days)'
89		- ]),
90		- h('div.likes', [
91		- h('div.count', computed(rangeLikes, msgs => msgs.length)),
92		- h('strong', 'Likes'),
93		- '(30 days)'
94		- ]),
95		- h('div.shares', [
96		- ])
	99	+ h('div.comments',
	100	+ {
	101	+ className: computed(context.focus, focus => focus === COMMENTS ? '-selected' : ''),
	102	+ 'ev-click': displayComments
	103	+ }, [
	104	+ h('div.count', visibleCommentsCount),
	105	+ h('strong', 'Comments'),
	106	+ '(30 days)'
	107	+ ]),
	108	+ h('div.likes',
	109	+ {
	110	+ className: computed(context.focus, focus => focus === LIKES ? '-selected' : ''),
	111	+ 'ev-click': displayLikes
	112	+ }, [
	113	+ h('div.count', visibleLikesCount),
	114	+ h('strong', 'Likes'),
	115	+ '(30 days)'
	116	+ ]
	117	+ ),
	118	+ h('div.shares',
	119	+ {
	120	+ className: when(context.shares, '-selected')
	121	+ // 'ev-click': displayShares
	122	+ }, [
	123	+ // h('div.count', computed(rangeLikes, msgs => msgs.length)),
	124	+ h('div.count', '--'),
	125	+ h('strong', 'Shares'),
	126	+ '(30 days)'
	127	+ ]
	128	+ )
97	129	]),
98	130	h('section.graph', [
99	131	canvas,
100	132	h('div.changeRange', [
		@@ -135,17 +167,25 @@
135	167	])
136	168	])
137	169	])
138	170
139		- // Chart.scaleService.updateScaleDefaults('linear', {
140		- // ticks: { min: 0 }
141		- // })
142		- var chart = new Chart(canvas.getContext('2d'), chartConfig({ range, chartData: [] }))
	171	+ var chart = new Chart(canvas.getContext('2d'), chartConfig({ context, chartData: [] }))
143	172
144	173	const toDay = ts => Math.floor(ts / (24 * 60 * 60 * 1000))
145	174
146		- // TODO take in context (comments/ likes / shares)
147		- const chartData = computed(commentsAll, msgs => {
	175	+ // HACK - if the focus has changed, then zero the data
	176	+ // this prevents the graph from showing some confusing animations when transforming between foci
	177	+ var lastFocus = context.focus()
	178	+ const zeroGraphOnFocusChange = (focus) => {
	179	+ if (focus !== lastFocus) {
	180	+ chart.data.datasets[0].data = []
	181	+ chart.update()
	182	+ lastFocus = focus
	183	+ }
	184	+ }
	185	+ const chartData = computed([context.focus, focused], (focus, focused) => {
	186	+ zeroGraphOnFocusChange(focus)
	187	+ const msgs = focused[focus]
148	188	const grouped = groupBy(msgs, m => toDay(m.value.timestamp))
149	189
150	190	var data = Object.keys(grouped)
151	191	.map(day => {
		@@ -156,18 +196,39 @@
156	196	})
157	197	return data
158	198	})
159	199
160		- chartData(() => {
161		- chart = merge(chart, chartConfig({ range, chartData }))
	200	+ chartData(data => {
	201	+ chart.data.datasets[0].data = data
	202	+
162	203	chart.update()
163	204	})
164	205
165		- range(() => {
166		- chart = merge(chart, chartConfig({ range, chartData }))
	206	+ const graphHeight = computed([chartData, context.range], (data, range) => {
	207	+ const { lower, upper } = range
	208	+ const slice = data
	209	+ .filter(d => d.t >= lower && d.t <= upper)
	210	+ .map(d => d.y)
	211	+ .sort((a, b) => a < b)
	212	+ const localMax = slice[0] ? Math.max(slice[0], 10) : 10
	213	+
	214	+ return localMax + (5 - localMax % 5)
	215	+ })
	216	+ graphHeight(h => {
	217	+ chart.options.scales.yAxes[0].ticks.max = h
	218	+
167	219	chart.update()
168	220	})
169	221
	222	+ context.range(range => {
	223	+ const { lower, upper } = range
	224	+
	225	+ chart.options.scales.xAxes[0].time.min = new Date(lower)
	226	+ chart.options.scales.xAxes[0].time.max = new Date(upper)
	227	+
	228	+ chart.update()
	229	+ })
	230	+
170	231	return page
171	232	}
172	233
173	234	function viewBlog (blog) {
		@@ -218,10 +279,10 @@
218	279	})
219	280	)
220	281	}
221	282
222		-function chartConfig ({ range, chartData }) {
223		- const { lower, upper } = resolve(range)
	283	+function chartConfig ({ context, chartData }) {
	284	+ const { lower, upper } = resolve(context.range)
224	285
225	286	const data = resolve(chartData) \|\| []
226	287	const slice = data
227	288	.filter(d => d.t >= lower && d.t <= upper)
		@@ -232,12 +293,11 @@
232	293	return {
233	294	type: 'bar',
234	295	data: {
235	296	datasets: [{
236		- // label: 'My First dataset',
237		- backgroundColor: 'hsla(215, 57%, 60%, 1)', // 'hsla(215, 57%, 43%, 1)',
	297	+ backgroundColor: 'hsla(215, 57%, 60%, 1)',
	298	+ // Ticktack Primary color:'hsla(215, 57%, 43%, 1)',
238	299	borderColor: 'hsla(215, 57%, 60%, 1)',
239		- // TODO set initial data as empty to make a good range
240	300	data
241	301	}]
242	302	},
243	303	options: {
		@@ -267,15 +327,16 @@
267	327
268	328	yAxes: [{
269	329	ticks: {
270	330	min: 0,
271		- max: Math.max(localMax, 10),
	331	+ suggestedMax: 10,
	332	+ // max: Math.max(localMax, 10),
272	333	stepSize: 5
273	334	}
274	335	}]
275	336	},
276	337	animation: {
277		- // duration: 300
	338	+ // duration: 300
278	339	}
279	340	}
280	341	}
281	342	}

app/page/statsShow.mcssView
		@@ -15,11 +15,30 @@
15	15	}
16	16
17	17	section.totals {
18	18	display: flex
19		- justify-content: space-between
20	19
21	20	div {
	21	+ flex-grow: 1
	22	+
	23	+ cursor: pointer
	24	+ padding: 0 0 .5rem .5rem
	25	+ $colorFontSubtle
	26	+ padding: 0 0 .5rem .5rem
	27	+ border-bottom: 1px solid gainsboro
	28	+ border-right: 1px solid gainsboro
	29	+
	30	+ transition: all ease-out .5s
	31	+ :hover {
	32	+ $colorFontBasic
	33	+ transition: all ease-out .5s
	34	+ }
	35	+
	36	+ -selected {
	37	+ $colorFontBasic
	38	+ border-bottom: 1px solid #fff
	39	+ }
	40	+
22	41	div.count {
23	42	font-size: 3rem
24	43	font-weight: 600
25	44	margin-right: .5rem
		@@ -27,8 +46,13 @@
27	46	strong {
28	47	margin-right: .5rem
29	48	}
30	49	}
	50	+
	51	+
	52	+ div.shares {
	53	+ border-right: none
	54	+ }
31	55	}
32	56
33	57	section.graph {
34	58	display: flex

Built with git-ssb-web

mixmix / ticktack

Commit e2016e7e072aaa1539f05778a0610bd68e812782

wip

Files changed