31:[] 2f:{"title":"W3DM PMF Dashboard - Rafael Test","cells":[{"id":0,"value":"md`# W3DM PMF Dashboard - Rafael Test\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"ipfsContainer = html`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"filecoinContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`## Transitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"html`

Ipfs

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"ipfsTransitions","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"html`

Filecoin

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"filecoinTransitions","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"ipfsGraphs = [{graph: ipfsOverallUsers}, { graph: ipfsHighValueUsersDelta }, { graph: ipfsLowValueUsersDelta }, { graph: ipfsFirstTimeUsersDelta }, { graph: ipfsInactiveUsersDelta }]","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"filecoinGraphs = [{graph: filecoinOverallUsers}, { graph: filecoinHighValueUsersDelta }, { graph: filecoinLowValueUsersDelta }, { graph: filecoinFirstTimeUsersDelta }, { graph: filecoinInactiveUsersDelta }]","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"{\n ipfsContainer.innerHTML = ipfsGraphs.map(_ => '

').join('')\n ipfsGraphs.forEach((data, index) => {\n const { graph } = data;\n const childEl = ipfsContainer.children[index]\n childEl.appendChild(graph)\n })\n \n filecoinContainer.innerHTML = filecoinGraphs.map(_ => '

').join('')\n filecoinGraphs.forEach((data, index) => {\n const { graph } = data;\n const childEl = filecoinContainer.children[index]\n childEl.appendChild(graph)\n })\n return md`Added: ${ipfsGraphs.length + filecoinGraphs.length} graphs`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`## Example of grouping graphs with html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"window.replaceGraph = (oldGraph, newGraph, ev) => {\n ev.stopPropagation()\n const container = oldGraph.parentNode\n container.style.position = 'relative'\n oldGraph.remove()\n \n container.appendChild(newGraph)\n container.appendChild(backArrow)\n backArrow.addEventListener('click', (ev) => window.replaceGraph(newGraph, oldGraph, ev))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"graphs = [{ graph: newUsersGraph }, { graph: newLowValueGraph, onClick: (ev) => {\n const clicked = newLowValueGraph.getAttribute('data-clicked')\n if(!clicked) return\n window.replaceGraph(newLowValueGraph, lowchart, ev)\n}}]\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"{\n container.innerHTML = graphs.map(_ => '

').join('')\n graphs.forEach((data, index) => {\n const { graph, onClick } = data;\n const childEl = container.children[index]\n childEl.appendChild(graph)\n onClick && childEl.addEventListener('click', onClick)\n })\n return md`Added: ${graphs.length} graphs`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"backArrow = html`

⬅️

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"import { chart as newLowValueGraph } from '@rafaelramalho19/new-low-value-users'\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"import { chart as newUsersGraph } from '@rafaelramalho19/new-users-graph'","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"import {lowchart} from '@lanzafame-pl/active-collabs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"import { ipfsLowValueUsersDelta, filecoinLowValueUsersDelta } from '@protocol/low-value-users'","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"import { ipfsHighValueUsersDelta, filecoinHighValueUsersDelta } from '@protocol/high-value-users'","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"import { ipfsFirstTimeUsersDelta, filecoinFirstTimeUsersDelta } from '@protocol/first-time-users'","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"import { ipfsInactiveUsersDelta, filecoinInactiveUsersDelta } from '@protocol/inactive-users'","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"import { ipfsOverallUsers, filecoinOverallUsers } from '@protocol/overall-view'","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"import { ipfsTransitions, filecoinTransitions } from '@protocol/transitions'","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}