29:null 2a:["$","title",null,{"children":"Fun Fun Forum Active Users Dashboard (version 3) | Mattias Petter Johansson | Observable"}] 2f:[] 2d:{"id":"a148827c6c923065","slug":"fun-fun-forum-active-users-dashboard-version-3","title":"Fun Fun Forum Active Users Dashboard (version 3)","thumbnail":"fd8e88bfebd47763f7337bfce27578057ddda4b18701f2877d8c38005ae7dba3","access_level":"public","create_time":"$D2018-05-15T08:44:34.823Z","update_time":"$D2018-05-23T13:00:01.883Z","view_time":null,"first_public_time":"$D2018-05-15T08:51:47.316Z","has_unpublished_edits":null,"fork":{"id":"23abc69ba5f54454","slug":"fun-fun-forum-active-users-dashboard/2","title":"Fun Fun Forum Active Users Dashboard","owner":{"id":"77f8f91dd827c0ee","login":"mpj","name":"Mattias Petter Johansson"}},"stars":0,"starred":false,"owner":{"type":"team","id":"77f8f91dd827c0ee","login":"mpj","name":"Mattias Petter Johansson","avatar_url":"https://avatars-next.observableusercontent.com/88c8df3c78fc076dbcfd1a46b75a5a345a1403ce19dd2336aaaf8c2443c43f3b","tier":"starter_2024"},"version":1437,"publish_version":1437,"role":null,"authored":false,"authors":[{"type":"individual","id":"6ca36ebf1e28b2b2","login":"mpj","name":"Mattias Petter Johansson","avatar_url":"https://avatars-next.observableusercontent.com/88c8df3c78fc076dbcfd1a46b75a5a345a1403ce19dd2336aaaf8c2443c43f3b","tier":null}],"members":[{"type":"individual","id":"6ca36ebf1e28b2b2","login":"mpj","name":"Mattias Petter Johansson","avatar_url":"https://avatars-next.observableusercontent.com/88c8df3c78fc076dbcfd1a46b75a5a345a1403ce19dd2336aaaf8c2443c43f3b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Fun Fun Forum Active Users Dashboard (version 3)","cells":[{"id":660,"value":"md`# Fun Fun Forum Active Users Dashboard (version 3)\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 monday of the week in question.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"md`# Data extraction\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"md`# Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"PREVIOUS_PERIOD_LENGTH = 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"WEEK_SPAN = 32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"md`# Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"DateInfo = require('https://wzrd.in/standalone/date-info')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"leftpad = browserify('leftpad')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"R = require('ramda')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"d3 = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"c3 = require(\"https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"qs = browserify('qs')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"