2d:null 2e:["$","title",null,{"children":"Minimal Few Fiewer By Id | 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":"da7c785ef9156cfc","slug":"minimal-few-fiewer-by-id","title":"Minimal Few Fiewer By Id","thumbnail":"47c4fafd68aff9b14f634e098924838fb883f1d43a4f75cd1c5e7775d9586d17","access_level":"public","create_time":"$D2021-09-12T16:00:57.558Z","update_time":"$D2021-09-15T01:11:51.910Z","view_time":null,"first_public_time":"$D2021-09-12T17:37:12.367Z","has_unpublished_edits":null,"fork":{"id":"4df3e3ce675f5caa","slug":"minimal-few-fiewer","title":"Minimal Few Fiewer","owner":{"id":"8b31cd29cbaba14d","login":"jobez","name":"johann bestowrous"}},"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":572,"publish_version":572,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Minimal Few Fiewer By Id","cells":[{"id":0,"value":"md`# Minimal Few Fiewer By Id\n\nThis is some simple logic that lets you see, in tabular form, whatever list of fewids that you want. Only works with url params for now, but will iterate and make a bidirectional form that updates the fewview and the url for easy sharing (if time permits, feel free to fork and tinker with it yrself if so inspired)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"table(_.filter(fewson, function(few) { return _.contains(params.getAll(\"fewid\"), few[\"ID\"])}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"fewsonById = _.groupBy(fewson, function(few) {return few[\"ID\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"fewson = fetch('https://gist.githubusercontent.com/jobez/f436719c5eb0da2ce2f5f78a2c0a62ef/raw/ec8dceeb06bbf067e94c92589a97bb1770dc0e6b/fews_gen0.json').then(d => d.json()).then(d => d.map(constructStarsColumn))","pinned":false,"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":450,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"urlIds = params.getAll(\"fewid\").join(\" \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"params = new URLSearchParams(location.search)","pinned":true,"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"