30:T7fa,function FacetedSearch(data, { attribs, filterData = filterDataJS } = {}) { if (!data || data.length < 0) { throw Error("Please provide an array of objects"); } const filtersContainer = html`

`; const target = html` ${filtersContainer} `; const filters = new Map(); // the selected elements target.value = data; target.value.filters = filters; function redraw() { filtersContainer.innerHTML = ""; filtersContainer.appendChild( html`

Selected ${target?.value.length} of ${data.length} ${Array.from(filters.values()).map(({ attr, ele }) => { return html`

${ele}

`; })}

` ); } async function updateAndRedraw() { let before; if (debug) { before = performance.now(); } const focused = document.activeElement; // Filter the data target.value = await filterData(data, filters); debug && console.log(`Finished filtering ${performance.now() - before}`); target.value.filters = filters; // Trigger an update target.dispatchEvent(new Event("input", { bubbles: true })); redraw(); // Trying to return the focus console.log("Trying to return the focus to", focused, document.activeElement); focused.focus && focused.focus() } attribs = attribs || Object.keys(data[0]); for (let attr of attribs) { // Assumes NaN => categorical if (isNaN(data[0][attr])) { // if (possibleValues.length < 20) { addSearchCheckboxes({ attr, filters, data, updateAndRedraw, target }); // We need a better filter for many values // } // else { // addMultiAutoSelect({ // attr, // filters, // data, // updateAndRedraw, // target, // possibleValues // }); // } } else { // *** Quantitative or date addRange({ attr, filters, data, updateAndRedraw, target }); } } redraw(); return target; }31:T466,function addRange({ attr, filters, data, updateAndRedraw, target, format, step } = {}) { if (data[0][attr] instanceof Date) { const fmt = (d) => new Date(d).toLocaleString(); format = format || (([s, e]) => html`${fmt(s)} ...
${fmt(e)}`); step = 1; } else if (+data[0][attr] % 1 === 0) { // Integer const fmt = d3.format(",d"); format = format || (([s, e]) => `${fmt(s)} ... ${fmt(e)}`); step = 1; } else { // float const fmt = d3.format(",.2f"); format = format || (([s, e]) => `${fmt(s)} ... ${fmt(e)}`); step = 0.01; } const extent = d3.extent(data, (d) => +d[attr]); const ele = conditionalShow( interval(extent, { label: attr, format, step }), { label: attr } ); ele.addEventListener("input", (evt) => { evt.stopPropagation(); // Update the filter const filter = filters.get(attr); filter.selected = ele.value; filters.set(attr, filter); updateAndRedraw(); }); filters.set(attr, { attr, ele, type: "range", selected: extent, allOptions: extent }); }32:[{"id":"1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","href":"https://static.observableusercontent.com/files/1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","name":"cars.json","type":"application/json","lastModified":1653434995487.776,"size":100492}] 2e:{"title":"Faceted Search","cells":[{"id":0,"value":"# Faceted Search\n\nA Faceted Search like filter widget that allows the user to filter the data. Uses a basic JS Filtering, but if you want you can pass your own ```filterData(data, filters)``` function to use a different backend. `filters` will be an array of objects with the following structure:\n\n```js\n{\n attr: \"attribute_name\", // Attribute name\n ele: HTMLElement, // The HTML element used for the attribute filter widget\n type: \"categorical\", // [\"categorical\", \"range\"]\n selected: Array, // Attribute values selected\n allOptions: Array // All Attribute values available for categorical or the extent for ranges\n}\n```\n\n## Usage\n\n```js\nimport {FacetedSearch} from \"@john-guerra/faceted-search\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"viewof selected = FacetedSearch(data, {\n // attribs: [\"date_of_birth\",\"nationality\"], // leave blank for using all attributes\n filterData: filterDataJS\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"selected.filters","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"selected","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"viewof data = dataInput({value: olympians, format: \"csv\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"data[0].date_of_birth","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"d = new Date()","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"d.toLocaleString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"attr=\"year\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"extent = d3.extent(data, (d) => +new Date(d[attr]));","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"interval(extent, {\n label: attr,\n format: ([s, e]) => {\n console.log(s, e, typeof s);\n return `${new Date(s).toLocaleString()} ... ${new Date(e).toLocaleString()}`;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"function addSearchCheckboxes({ attr, filters, data, updateAndRedraw, target }) {\n const groupCounts = d3.group(data, (d) => d[attr]),\n possibleValues = Array.from(groupCounts.keys());\n const ele = conditionalShow(\n searchCheckbox(possibleValues, {\n value: possibleValues,\n label: attr,\n height: 200,\n format: attr => `${attr} (${groupCounts.get(attr).length})`\n }),\n { label: attr }\n );\n\n ele.addEventListener(\"input\", (evt) => {\n evt.stopPropagation();\n \n // Update the filter\n const filter = filters.get(attr);\n filter.selected = ele.value;\n filters.set(attr, filter);\n\n updateAndRedraw();\n });\n\n filters.set(attr, {\n attr,\n ele,\n type: \"categorical\",\n selected: possibleValues,\n allOptions: possibleValues\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"function addMultiAutoSelect({\n attr,\n filters,\n data,\n updateAndRedraw,\n target\n}) {\n const possibleValues = Array.from(d3.group(data, (d) => d[attr]).keys());\n const ele = conditionalShow(\n multiAutoSelect( {options: possibleValues, label: attr }),\n { label: attr, value: possibleValues }\n );\n ele.addEventListener(\"input\", (evt) => {\n evt.stopPropagation();\n \n // Update the filter\n const filter = filters.get(attr);\n filter.selected = ele.value;\n filters.set(attr, filter);\n\n updateAndRedraw();\n });\n\n filters.set(attr, {\n attr,\n ele,\n type: \"categorical\",\n selected: possibleValues,\n allOptions: possibleValues\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"Number(\"1.2\") === 1.2","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"d3.format(\",d\")(31234234)","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"// A simple JS function to apply the filters on the data\nasync function filterDataJS(data, filters) {\n let res = data;\n\n for (let filter of filters.values()) {\n if (filter.type === \"categorical\") {\n res = res.filter((d) => filter.selected.includes(d[filter.attr]));\n } else if (filter.type === \"range\") {\n res = res.filter(\n (d) =>\n d[filter.attr] >= filter.selected[0] &&\n d[filter.attr] <= filter.selected[1]\n );\n }\n }\n\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"interval()","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"debug = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"import {conditionalShow} from \"@john-guerra/conditional-show\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"import {interval} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"import { dataInput} from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}