31:T799,function categoricalWidget({options, value, showAll = false, showNone = false}) { const renderOptions = (checkedValues) => { const result = options.map((label) => { const isChecked = (checkedValues || []).indexOf(label) > -1; return renderLabel(label, isChecked); }); if (showNone) { const input = html``; result.unshift(html`${input} None`); } if (showAll) { const wasChecked = checkedValues.includes('All'); const isChecked = checkedValues.length - (wasChecked ? 1 : 0) == options.length; const input = html``; input.setAttribute('value', 'All'); const style = isChecked ? `background: #333; color: white;`: ''; result.unshift(html`${input} All`); } return result; } const form = html``; const getValueAndUpdate = input => { const result = Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); scale.domain(result); form.innerHTML = ''; renderOptions(result).forEach(o => form.appendChild(o)); return result; }; form.onchange = e => { e && e.preventDefault(); if (e && e.target.id === 'all') { value = e.target.checked ? options : []; form.innerHTML = ''; renderOptions(value).forEach(o => form.appendChild(o)); } else if (e && e.target.id === 'none') { value = e.target.checked ? [] : value; form.innerHTML = ''; renderOptions(value).forEach(o => form.appendChild(o)); } else { value = getValueAndUpdate(form.input); } form.value = value; form.dispatchEvent(new CustomEvent('input', { bubbles: true })); }; form.onsubmit = e => e && e.preventDefault(); form.onchange(); return form; }32:[] 2f:{"title":"Categorical Legend Picker","cells":[{"id":0,"value":"md`# Categorical Legend Picker\n\nA little piece of UI which takes a list of options and presents them as labeled checkboxes which can also function as a basic legend.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof selected = categoricalWidget({\n options: foodGroups,\n value: [\"Snacks\", \"Sweets\", \"Fast Foods\"],\n showAll: true,\n showNone: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"html`Selected values: ${selected.map(l =>\n `${l}`\n).join(\", \")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`# TODO\n- Keep track of order of selection, so that when you add a new selection it doesn't reshuffle existing colors that come later in the options.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"function renderLabel(label, isChecked) {\n const input = html``;\n input.setAttribute('value', label);\n const style = isChecked ? `background: ${scale(label)}; color: white;`: '';\n return html`${input}${label}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"scale = d3.scaleOrdinal().range(colorScheme);","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"colorScheme = d3.schemeCategory10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"foodGroups = [\n \"Dairy and Egg Products\",\n \"Spices and Herbs\",\n \"Baby Foods\",\n \"Fats and Oils\",\n \"Poultry Products\",\n \"Soups, Sauces, and Gravies\",\n \"Sausages and Luncheon Meats\",\n \"Breakfast Cereals\",\n \"Snacks\",\n \"Fruits and Fruit Juices\",\n \"Pork Products\",\n \"Vegetables and Vegetable Products\",\n \"Nut and Seed Products\",\n \"Beef Products\",\n \"Beverages\",\n \"Finfish and Shellfish Products\",\n \"Legumes and Legume Products\",\n \"Lamb, Veal, and Game Products\",\n \"Baked Products\",\n \"Sweets\",\n \"Cereal Grains and Pasta\",\n \"Fast Foods\",\n \"Meals, Entrees, and Side Dishes\",\n \"American Indian/Alaska Native Foods\",\n \"Restaurant Foods\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3-scale', 'd3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}