30:T17f5,emoji = (weeksAgo, data, states, options) => { const container = html`

first time low value inactive high value

${options?.legend ? `

Numbers within states and by transitions show user volume
Percentages beneath transition user volume show volume change from last period
Hover over transition volumes to see transition percentages
Colors represent type of value to the ecosystem (green good, red bad)

`: ''}

`; const latestTransitions = Object.entries(data[data.length - weeksAgo].transitions).reduce((prev, curr) => transformIntoEmojies(prev, curr), {}) const previousTransition = Object.entries(data[data.length - weeksAgo - 1].transitions).reduce((prev, curr) => transformIntoEmojies(prev, curr), {}) const latestTopValues = { new: latestTransitions['🎯'].value + latestTransitions['👍'].value + latestTransitions['👎'].value, low: latestTransitions['🏳'].value + latestTransitions['😍'].value + latestTransitions['🙂'].value, high: latestTransitions['💀'].value + latestTransitions['🤔'].value + latestTransitions['🏆'].value, inactive: latestTransitions['😘'].value + latestTransitions['🚀'].value } const previousTopValues = { new: previousTransition['🎯'].value + previousTransition['👍'].value + previousTransition['👎'].value, low: previousTransition['🏳'].value + previousTransition['😍'].value + previousTransition['🙂'].value, high: previousTransition['💀'].value + previousTransition['🤔'].value + previousTransition['🏆'].value, inactive: previousTransition['😘'].value + previousTransition['🚀'].value } const getPercentage = (transition, value, topValues) => { if(transition === '🎯' || transition === '👍' || transition === '👎') return value / topValues.new * 100; if(transition === '🏳' || transition === '😍' || transition === '🙂') return value / topValues.low * 100; if(transition === '💀' || transition === '🤔' || transition === '🏆') return value / topValues.high * 100; if(transition === '😘' || transition === '🚀') return value / topValues.inactive * 100; if(transition === '🐕') return null; } const emojies = Array.from(container.querySelectorAll('span')) Object.keys(latestTransitions).forEach(transition => { const el = emojies.find(x => x.parentNode.getAttribute('data-id') === transition) if(!el) return console.error(transition) const currentValue = latestTransitions[transition].value const lastValue = previousTransition[transition].value const changePercentage = parseFloat(((currentValue - lastValue) / (lastValue || 1)) * 100).toFixed(0) el.innerHTML = `${latestTransitions[transition].value}
[${changePercentage > 0 ? '+' : ''}${changePercentage}%]` el.querySelector('i').className = changePercentage >= 0 ? 'positive' : 'negative' const percentage = parseFloat(getPercentage(transition, latestTransitions[transition].value, latestTopValues)).toFixed(0); const previousPercentage = parseFloat(getPercentage(transition, previousTransition[transition].value, previousTopValues)).toFixed(0); const thickness = percentage < 10 ? 5 : percentage < 20 ? 7 : percentage < 50 ? 8 : 9 el.parentNode.style.setProperty('--thickness', `${thickness}px`); if(isNaN(percentage)) return; const tooltip = document.createElement('div') tooltip.className = 'tooltip' tooltip.innerHTML = `

${percentage}% of outflow

${percentage - previousPercentage}pp from previous period

`; el.appendChild(tooltip) }); container.querySelectorAll('arrow').forEach(a => { const rotation = a.getAttribute('angle'); if(!rotation) return; a.style.transform = `rotate(${rotation}deg)`; a.querySelector('span').style.transform = `rotate(${rotation * -1}deg)`; }) container.querySelectorAll('circle').forEach(circle => { const indicator = document.createElement('div'); indicator.textContent = states[states.length - weeksAgo].states[circle.textContent.split(' ')[0].trim()] circle.appendChild(indicator) }) return container; }31:T122a,graphStyle = { return html` ` }32:[{"id":"409589c2e81520615634848139a7ed4eb21cf77344f67b4789f4844d754dd1e9163f8e3704359cee1b45fe6c815aa22cebaef8a207b0fac5774923f52eec9abb","href":"https://static.observableusercontent.com/files/409589c2e81520615634848139a7ed4eb21cf77344f67b4789f4844d754dd1e9163f8e3704359cee1b45fe6c815aa22cebaef8a207b0fac5774923f52eec9abb","name":"image.png","type":"image/png","lastModified":1613411840777.591,"size":92207}] 2e:{"title":"Transitions v2","cells":[{"id":0,"value":"md`# Transitions v2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"emoji(weeksAgo, ipfsData, ipfsStates, { legend })","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"viewof legend = Toggle({label: 'Show Legend', value: true});","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"viewof weeksAgo = Range([1, ipfsData.length - 1], {value: 0, label: \"weeks ago\", step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"transformIntoEmojies = function (prev, curr, totalValue) {\n const [index, value] = curr;\n let newIndex;\n if (index === 'First Time') newIndex = '👋';\n if (index === 'Bounced') newIndex = '👎';\n if (index === 'New Low-Value') newIndex = '👍';\n if (index === 'New High-Value') newIndex = '🎯';\n if (index === 'Reactivated Low-Value') newIndex = '😘';\n if (index === 'Low to High-Value') newIndex = '😍';\n if (index === 'High to Low-Value') newIndex = '🤔';\n if (index === 'Lapsed Low-Value') newIndex = '🏳';\n if (index === 'Reactivated High-Value') newIndex = '🚀';\n if (index === 'Lapsed High-Value') newIndex = '💀';\n if (index === 'High-Value') newIndex = '🏆';\n if (index === 'Low-Value') newIndex = '🙂';\n if (index === 'Inactive') newIndex = '🐕';\n prev[newIndex] = { value } ;\n return prev;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"startDate = new Date((new Date()).setDate(new Date().getDate() - (7 * 9)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"ipfsData = (await fetch(`${ipfsGetTransitionsUrl}?start_date=${startDate}`)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"ipfsStates = (await fetch(`${ipfsGetStatesUrl}?start_date=${startDate}`)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":920,"value":"filecoinStates = (await fetch(`${ipfsGetStatesUrl}?start_date=${startDate}`)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"filecoinData = (await fetch(`${filecoinGetTransitionsUrl}?start_date=${startDate}`)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"import { ipfsGetTransitionsUrl, ipfsGetStatesUrl, filecoinGetTransitionsUrl, filecoinGetStatesUrl } from \"@protocol/pmf-endpoints\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"import {Range, Toggle} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}