2a:[] 29:{"title":"Fun Fun Forum Active Users Dashboard","cells":[{"id":660,"value":"md`# Fun Fun Forum Active Users Dashboard\nActive user = User that made at least one post.\n\n## Weekly active users\nEach point on the graph represents the number of active users per week. The date refers to the first day of that week (a monday). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"{\n const deltaPercent = Math.floor((lastWeekReportData.delta-1) * 1000) / 10\n const isPositiveChange = deltaPercent > 0\n const color = isPositiveChange ? 'green' : 'red'\n const prefix = isPositiveChange ? '+' : '-'\n return html`\n

Last week

${lastWeekReportData.lastWeekWau}

Average (Prior ${PREVIOUS_PERIOD_LENGTH} weeks)

${Math.floor(lastWeekReportData.avgWau)}

Last week compared to average

${prefix}${deltaPercent}%

`\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"wau_chart = timeSeriesChart([\n ['x'].concat(wau.map(x => x.date)),\n ['date'].concat(wau.map(x => x.value))\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"md`## Lurkers weekly\n**We consistently have 4 lurkers for every active member**. I pulled up a report of how big % of the audience is visiting the forum (reading at least one post) but not posting, but it doesn't seem to fluctuate in any interesting way. It stays between 75% and 85% no matter what. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"lurker_chart = timeSeriesChart([\n ['x'].concat(lurker_rate.map(x => x.date)),\n ['date'].concat(lurker_rate.map(x => x.value))\n], {yOpts: { min: 0, max: 1} })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1420,"value":"md`### Weekly visitors\nThis graph shows the number of visitors visiting and reading at least one post. It follows WAU very closely, but it's pretty motivational to know that over 250 people use the forum every week. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"visitors_by_week_chart = timeSeriesChart([\n ['x'].concat(visitors_by_week.map(x => x.date)),\n ['date'].concat(visitors_by_week.map(x => x.value))\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"mau_md = md`## Monthly active users\nEach point on the graph represents the number of active users per month. The date refers to the first day of that month.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"mau_chart = timeSeriesChart([\n ['x'].concat(mau.map(x => x.date)),\n ['date'].concat(mau.map(x => x.value))\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"md`# Daily active users (last week)\nShows active users per day in the week prior to the current one.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"dau_chart = timeSeriesChart([\n ['x'].concat(dau.map(x => x.date)),\n ['date'].concat(dau.map(x => x.value))\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1348,"value":"lurker_rate = visitors_by_week.map((x) => {\n const active = wau.find(y => y.date === x.date)\n if (!active) {\n return { date: x.date, value: 0 } \n }\n return {date: x.date, value: 1-(active.value / x.value)}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"md`# Data extraction\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"lastWeekReportData = {\n const previousPeriodPlusThisWeek = R.slice(0, PREVIOUS_PERIOD_LENGTH + 1)(R.reverse(wau))\n const lastWeekWau = R.head(previousPeriodPlusThisWeek).value\n const previousPeiod = R.tail(previousPeriodPlusThisWeek)\n const avgWau = previousPeiod.reduce((sum, x) => x.value + sum,0) / previousPeiod.length\n const delta = lastWeekWau / avgWau \n return {\n lastWeekWau,\n avgWau,\n delta\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"dau = {\n function addDays(date, days) {\n var dat = new Date(date.valueOf())\n \tdat.setDate(dat.getDate() + days)\n \treturn dat\n }\n function dateIso8601(date) {\n return `${date.getFullYear()}-${leftpad(date.getMonth()+1,2)}-${leftpad(date.getDate(),2)}`\n }\n \n const lastSunday = addDays(new Date(), -(new Date()).getDay())\n const aWeekAgo = addDays(lastSunday, -6)\n const url = `https://funfunautomator.herokuapp.com/dau?start=${dateIso8601(aWeekAgo)}&end=${dateIso8601(lastSunday)}`\n return fetch(url)\n\t.then(response => response.json())\n\t.then(arr => arr.map(x => ({date: x[1], value: x[0]})))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"visitors_by_week = { \n const lastSunday = addDays(new Date(), -(new Date()).getDay())\n const threeMonthsAgo = addDays(lastSunday, (-7 * WEEK_SPAN) + 1)\n const url = `https://funfunautomator.herokuapp.com/visitors_by_week?start=${dateIso8601(threeMonthsAgo)}&end=${dateIso8601(lastSunday)}`\n return fetch(url)\n\t.then(response => response.json())\n\t.then(rows => rows.map(row => ({value: row[0], year: row[1], week: row[2] })))\n\t.then(weeks => weeks.reduce((weekMap, week) => {\n\t const key =firstDateOfWeekISO8601(week.year, week.week)\n weekMap[key] = weekMap[key] ? weekMap[key] + week.value : week.value\n return weekMap\n }, {}))\n .then(weekMap => Object.keys(weekMap).map(key => ({\n date: key,\n value: weekMap[key]\n })))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"wau = {\n const lastSunday = addDays(new Date(), -(new Date()).getDay())\n const threeMonthsAgo = addDays(lastSunday, (-7 * WEEK_SPAN) + 1)\n const url = `https://funfunautomator.herokuapp.com/wau?start=${dateIso8601(threeMonthsAgo)}&end=${dateIso8601(lastSunday)}`\n return fetch(url)\n\t.then(response => response.json())\n\t.then(rows => rows.map(row => ({value: row[0], year: row[1], week: row[2] })))\n\t.then(weeks => weeks.reduce((weekMap, week) => {\n\t const key =firstDateOfWeekISO8601(week.year, week.week)\n weekMap[key] = weekMap[key] ? weekMap[key] + week.value : week.value\n return weekMap\n }, {}))\n .then(weekMap => Object.keys(weekMap).map(key => ({\n date: key,\n value: weekMap[key]\n })))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"mau = {\n function addDays(date, days) {\n var dat = new Date(date.valueOf())\n \tdat.setDate(dat.getDate() + days)\n \treturn dat\n }\n function dateIso8601(date) {\n return `${date.getFullYear()}-${leftpad(date.getMonth()+1,2)}-${leftpad(date.getDate(),2)}`\n }\n \n const lastDayLastMonth = new Date((new Date()).getFullYear(),(new Date()).getMonth(), 0)\n const threeMonthsAgo = addDays(lastDayLastMonth, (-7 * WEEK_SPAN) + 1)\n const url = `https://funfunautomator.herokuapp.com/mau?start=${dateIso8601(threeMonthsAgo)}&end=${dateIso8601(lastDayLastMonth)}`\n return fetch(url)\n\t.then(response => response.json())\n\t.then(rows => rows.map(row => ({\n value: row[0], \n date: row[1]+'-'+leftpad(row[2],2)+'-01' \n })))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"md`# Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"PREVIOUS_PERIOD_LENGTH = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"WEEK_SPAN = 32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"md`# Helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"function dateIso8601(date) {\n return `${date.getFullYear()}-${leftpad(date.getMonth()+1,2)}-${leftpad(date.getDate(),2)}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"function addDays(date, days) {\n var dat = new Date(date.valueOf())\n dat.setDate(dat.getDate() + days)\n return dat\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"function firstDateOfWeekISO8601(year, week) {\n const day = DateInfo.week(year, week).days.get(0)\n return `${day.year}-${leftpad(day.month,2)}-${leftpad(day.date,2)}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"// Shows a graph of a given time series. Accepts C3 columns as argument\ntimeSeriesChart = {\n // force dependencies\n d3;\n css;\n return async function* (columns, {yOpts} = {}) { \n const divId = 'tsg' + Math.floor(Math.random()*100000000)\n const div = html`

`\n yield div\n \n c3.generate({\n bindto: '#' + divId,\n data: {\n x: 'x',\n columns\n },\n axis: {\n x: {\n type: 'timeseries',\n tick: { format: '%Y-%m-%d' }\n },\n y: {\n label: {\n text:'WAU'\n },\n ...yOpts\n }\n }\n })\n\t}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1048,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"DateInfo = require('https://wzrd.in/standalone/date-info')","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"leftpad = browserify('leftpad')","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"R = require('ramda')","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"d3 = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"c3 = require(\"https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"css = {\n var link = document.createElement(\"link\");\n link.type = \"text/css\";\n link.rel = \"stylesheet\";\n link.href = \"https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css\";\n return document.getElementsByTagName(\"head\")[0].appendChild(link); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"// use browserify-cdn to browserify commonjs dependencies\nbrowserify = dep => require('https://funfunbrowserify.herokuapp.com/standalone/' + dep)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"qs = browserify('qs')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2a","stdlib":"1","titling":"auto"}