2b:null 2c:["$","title",null,{"children":"Helpers | Albert Nazander | Observable"}] 31:T80c,saveFactory = (localStorageKey, getConfig, setConfig) => { if (this) return this const container = html`

` const getCurrent = () => JSON.parse(localStorage.getItem(localStorageKey) || '{}') const options = Object.keys(getCurrent()) const save = text({ title: 'Save by name:', submit: 'Save' }) const loadFactory = (options, value) => { const elem = select({ title: 'Load from storage', options, value, submit: 'Load', }) elem.style = 'display: inline-block;' elem.onsubmit = e => { e.preventDefault() const name = e.target.input.value const config = getCurrent()[name] setConfig(config) save.input.value = name } return elem } let load = loadFactory(options) const loadRow = html`

` loadRow.appendChild(load) // const update = html`` loadRow.appendChild(remove) container.appendChild(loadRow) container.appendChild(html`

`.appendChild(save)) const saveConfig = (name, configs) => { localStorage.setItem(localStorageKey, JSON.stringify(configs)) const options = Object.keys(configs) const newLoad = loadFactory(options, name) load.onsubmit = undefined load.replaceWith(newLoad) load = newLoad } save.onsubmit = e => { e.preventDefault() const name = e.target.input.value const configs = Object.assign({}, getCurrent(), { [name]: getConfig(), }) saveConfig(name, configs) } remove.onclick = e => { e.preventDefault() const name = load.input.value const configs = getCurrent() delete configs[name] saveConfig(name, configs) } // update.onclick = e => { // e.preventDefault() // const name = load.input.value // const configs = Object.assign({}, getCurrent(), { // [name]: getConfig(), // }) // saveConfig(name, configs) // } return container }32:T1706,table = (data, options) => { const defaultOptions = ({ columns: {}, style: 'normal', paged: 25, columnOrder: [], omitColumns: [] }) const identity = i => i const th = (c, sortKey, sortDirection, sortable) => { let { options: { title } } = c; let sortIndicator = sortKey && sortDirection ? "↑" : "↓"; let arrow = html`${sortIndicator}`; let displayedTitle = title !== undefined ? title : c.key; if (c.type === 'number' || c.type === 'boolean') { return html` ${arrow}${displayedTitle} ` } return html` ${displayedTitle}${arrow} `; } options = Object.assign({}, defaultOptions, options); const {sortable, rank, paged} = options; let sortKey = undefined; let sortDirection = true; let page = 0; if (sortable && rank) { throw new Error('A table can either be ranked or sortable, but not both'); } let columns = getColumns(options.columnOrder, Object.keys(data[0]), options.omitColumns).map(key => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { if (sortKey) { data = orderBy(data, sortKey, sortDirection ? 'asc' : 'desc') } let rows = data.slice(page * paged, (page * paged) + paged); let pages = Math.ceil(data.length / paged); return html`

${options.header === false ? `` : html` ${rank ? html`` : ''} ${columns.map(c => { return th(c, sortKey, sortDirection, sortable); })} `} ${rows.map((row, i) => html` ${rank ? html`` : ''} ${columns.map(c => { let displayValue = (c.options.formatter || identity)(row[c.key], i, row); if (displayValue instanceof window.HTMLElement && displayValue.tagName == 'TD') { return displayValue; } let addClass = '' if (c.type === 'boolean') { let boolVal = typeof displayValue === 'boolean' ? displayValue : !displayValue ? '' : displayValue if (typeof boolVal === 'string') { if (/false|no/.test(boolVal)) { boolVal = false } else if (/yes|true|1/i.test(boolVal)) { boolVal = true } else { boolVal = '' } } addClass = `cell-value-boolean-${boolVal.toString()}` } return html`` })} `)}


${i + 1}	${displayValue}

${pages > 1 ? html`` : ''}

`; } let dom = bake(); function rerender() { dom.firstChild.remove(); dom.appendChild(bake().firstChild); } dom.addEventListener('click', e => { if (e.target.tagName === 'TH' && sortable) { if (sortKey == e.target.dataset.key) { sortDirection = !sortDirection; } sortKey = e.target.dataset.key; rerender(); } if (e.target.tagName === 'BUTTON') { if (e.target.dataset.action) { switch (e.target.dataset.action) { case 'next': page++, rerender(); break; case 'previous': page--, rerender(); break; } } else if (e.target.dataset.page) { page = parseInt(e.target.dataset.page), rerender(); } } }); return dom; }33:T45a,function radio(config = {}) { let { value: formValue, title, description, submit, disabled, options } = config; if (Array.isArray(config)) options = config; options = options.map( o => (typeof o === "string" ? { value: o, label: o } : o) ); const form = input({ type: "radio", title, description, submit, getValue: input => { const checked = Array.prototype.find.call(input, radio => radio.checked); return checked ? checked.value : undefined; }, form: html` ` }); form.output.remove(); return form; }34:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }35:[] 2f:{"id":"c042c63cf4697855","slug":"helpers","title":"Helpers","thumbnail":"a898554724dd0cc4dec8cfbde22bdb25052fc59e630265eb6cd705c364104f66","access_level":"public","create_time":"$D2018-10-19T12:33:27.196Z","update_time":"$D2021-07-28T22:05:44.955Z","view_time":null,"first_public_time":"$D2018-11-03T11:02:26.747Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5373c6363e9da6de","login":"alizbazar","name":"Albert Nazander","avatar_url":"https://avatars-next.observableusercontent.com/6ff3812f437a7a71e56b7577568fd447028d7a27b5cdd0f17313595c3c9a91ff","tier":"starter_2024"},"version":339,"publish_version":339,"role":null,"authored":false,"authors":[{"type":"individual","id":"2454674ee27d71f3","login":"alizbazar","name":"Albert Nazander","avatar_url":"https://avatars-next.observableusercontent.com/6ff3812f437a7a71e56b7577568fd447028d7a27b5cdd0f17313595c3c9a91ff","tier":null}],"members":[{"type":"individual","id":"2454674ee27d71f3","login":"alizbazar","name":"Albert Nazander","avatar_url":"https://avatars-next.observableusercontent.com/6ff3812f437a7a71e56b7577568fd447028d7a27b5cdd0f17313595c3c9a91ff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Helpers","cells":[{"id":0,"value":"md`# Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"getResultColor = {\n // red, gray, lightgreen, green\n const scale = d3.scaleLinear().domain([0.2, 0, -0.2, -0.5]).range(['#FF7E7E', '#E9E9E9', '#ADFFB8', '#58B063']).clamp(true)\n // return d3.scaleSequential(d3.interpolateGreens).domain([extent.min, extent.max])\n return d => typeof d === 'number' ? scale(d) : 'white'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"getParams = () => {\n const params = new URLSearchParams(document.location.search)\n return Array.from(params.entries()).reduce((acc, d) => {\n acc[d[0]] = d[1]\n return acc\n }, {})\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"saveFactory('test2134', () => ({foo:'bar'}), (data) => {\n console.log(data)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"getParams() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"table([\n { make: 'Audi', model: 'A3', year: 202 },\n { make: 'Kia', model: 'Rio', year: 2019 },\n { make: 'Toyota', model: 'Corolla', year: 2018 },\n], { sortable: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"function checkboxSelectAll (options) {\n const element = checkbox(options)\n \n const btn = html`