2d:null 2e:["$","title",null,{"children":"Minimal Few Fiewer | johann bestowrous | Observable"}] 33:T1630,table = async function*(dataPromise, options = {}) { yield loader; const dataO = await Promise.resolve(dataPromise); let filter = () => true; const data = Array.isArray(dataO) ? dataO : Object.entries(dataO).map(([key, v]) => Object.assign({ key }, v)); function mdTable(data) { console.log(data); let lines = []; for (let [key, value] of Object.entries(data)) { if (typeof value === 'object') { lines.push(`${key}|${mdTable(value).outerHTML}`); } else { lines.push(`${key}|${value}`); } } // beware of the hack: https://stackoverflow.com/questions/17536216/create-a-table-without-a-header-in-markdown return md` []() | ---|--- ${lines.join('\n')} `; } let { humanize, nully, limit, columns, enableFilter, enableCSVDownload } = Object.assign( { humanize: defaultHumanize, nully: () => '-', limit: 250, columns: Object.keys(data[0]), enableFilter: data.length > 50, enableCSVDownload: true }, options || {} ); columns = columns.map(column => { let key; if (typeof column == 'string') { key = column; column = { key }; } else { key = column.key; } const decimalNumber = data.reduce((memo, d) => { if (typeof d[key] === 'number') { let frac = (d[key] || '').toString().split('.')[1]; if (frac) return Math.max(memo, frac.length); } return memo; }, 0); return Object.assign( { name: humanize(key), type: typeof data[0][key], render: val => { if (decimalNumber && typeof val === 'number') { return val.toFixed(decimalNumber); } else if (val == null || val == undefined) { return nully(val); } else if (typeof val === 'object') { return mdTable(val).outerHTML; // return JSON.stringify(val); } return val; } }, column ); }); const renderTable = () => { return `${data .filter(filter) .slice(0, limit) .map( (datum, idx) => ` ${columns .map(c => { let val = datum[c.key]; return `${c.render(val)}`; }) .join('')} ` ) .join('')}`; }; const output = html`

${columns .map( c => `` ) .join('')} ${renderTable(data)}

${c.name}

${ data.filter(filter).length > limit ? `

This table has been truncated from ${data.length} rows to ${limit}

` : '' }

${ enableFilter ? '

🔎

' : '' }

`; output.value = dataO; yield output; output.querySelectorAll('th').forEach(th => th.addEventListener('click', () => { const key = th.dataset.key; const order = th.dataset.order === 'ascending' ? -1 : 1; data.sort((a, b) => a[key] > b[key] ? order : b[key] > a[key] ? -order : 0 ); output.querySelector('tbody').innerHTML = renderTable(data); th.dataset.order = order === -1 ? 'descending' : 'ascending'; }) ); if (enableFilter) { const search = output.querySelector('input[type=search]'); search.addEventListener('input', e => { filter = parseQuery(search.value, columns); output.querySelector('tbody').innerHTML = renderTable(data); }); } if (enableCSVDownload) { output.appendChild( DOM.download( new Blob( [ CSV(data, { fields: columns.map(c => ({ label: c.name, value: c.key })) }) ], { type: "application/json" } ), 'data.csv', '📥' ) ); } }34:T745,loader = html` Loading...`35:[] 31:{"id":"4df3e3ce675f5caa","slug":"minimal-few-fiewer","title":"Minimal Few Fiewer","thumbnail":"ed07e19fe921c4d8aab85a6e4f3dda93272dc03a707b775c5abcb02c13fd3beb","access_level":"public","create_time":"$D2021-09-11T03:52:49.099Z","update_time":"$D2021-09-15T01:09:38.166Z","view_time":null,"first_public_time":"$D2021-09-11T04:03:21.063Z","has_unpublished_edits":null,"fork":{"id":"28d99bd25984bfd9","slug":"fancy-table","title":"Fancy-Table³","owner":{"id":"f133cd64bec97972","login":"henrythasler","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"8b31cd29cbaba14d","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":"starter_2024"},"version":451,"publish_version":451,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7770cd334a447f3","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":null}],"members":[{"type":"individual","id":"b7770cd334a447f3","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Minimal Few Fiewer","cells":[{"id":0,"value":"md`# Minimal Few Fiewer\n\nI show you how to access the zeroeth gen fews in a reasonably interactive programming environment, you speculate on the very nature of what it means to be a fewman and share it with fellow foos. Deal?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"table(fewson)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"fewson = fetch('https://gist.githubusercontent.com/jobez/f436719c5eb0da2ce2f5f78a2c0a62ef/raw/d9b6b4ed90128783b2907eab0f9e1a2d9e789da3/fews_gen0.json').then(d => d.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"defaultHumanize = str => str.replace(/[-_]/g, ' ')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"CSV = require('json2csv@4.0.0').then(a => a.parse)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"parseQuery = (q, headers) => {\n if (q == '') {\n return () => true;\n } else if (q.match(/[=<>]/)) {\n try {\n const code = headers.reduce((q, {key, name}) => q.replace(new RegExp(`\\\\b(${key}|${name})\\\\b`, 'g'), `data['${key}']`), q).replace(/([^=<>!])=([^=<>!]|$)/g, '$1===$2');\n return new Function('data', `try { return ${code} } catch(e) { return false; }` );\n } catch (e) {\n return () => true;\n }\n } else {\n const re = new RegExp(q, 'i');\n \treturn data => headers.some(({key}) => (data[key] || '').toString().match(re))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"_ = (await import(\"https://unpkg.com/underscore@1.10.1/modules/index-all.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"constructStarsColumn = few => { let stars = _.reduce(_.values(few),(acc,val) => { \n if (_.isString(val)) { return acc } else { return acc + parseInt(val.rarity[7]) }}, 0) \n few[\"Stars\"] = stars \nreturn few\n } \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"