25:["$","title",null,{"children":"Drivetrain Picker | Miguel Bermudez | Observable"}] 49:T1055,class DrivetrainPicker extends Preact.Component { constructor(){ super([]); this.state = {wheel: 680, crank: 170}; } handleSubmit(evt){ evt.preventDefault(); var event = new Event('addDrivetrain'); console.log(this.state.label) if(!this.state.label || this.state.label === ''){ const co = this.state.cassetteOut; const label = `${this.state.chainringOut.join('-')}T : ${co[0]}-${co[co.length - 1]}T` this.setState({label: label}) } event['drivetrain'] = this.state; this.setState({label: null, cassetteOut: null, chainringOut: null, cassetteSearch: null, chainringSearch: null}); this.base.dispatchEvent(event); } handleLabel(evt){ this.setState({label: evt.target.value}); } handleWheel(evt){ this.setState({wheel: evt.target.value}); } handleCrank(evt){ this.setState({crank: evt.target.value}); } handleManualCassette(evt){ const input = evt.target.value.replace(/[^\d,-]/g, '').split(/[,-]+/).sort(d3.ascending); this.setState({cassetteOut: input, cassetteSearch: null}); } handleManualChainring(evt){ const input = evt.target.value.replace(/[^\d,-]/g, '').split(/[,-]+/).sort(d3.descending); this.setState({chainringOut: input, chainringSearch: null}); } handleCassetteChange(evt) { const match = cassette.find(d => `${d.seriesName}: ${d.name}` === evt.target.value) this.setState({cassetteOut: match.sprockets, cassetteSearch: evt.target.value}); } handleChainringChange(evt) { const match = chainrings.find(d => `${d.seriesName}: ${d.chainring}` === evt.target.value) this.setState({chainringOut: match.chainring.replace('T','').split(/[,-]+/).map(d => +d), chainringSearch: evt.target.value}); } render({page}, {todos = []}) { return htm`

this.handleSubmit(e)}>

Cassette this.handleCassetteChange(e)} value="${this.state.cassetteSearch}"> this.handleManualCassette(e)} required> ${cassette.map(d => htm` `)}

Chainrings this.handleChainringChange(e)} value=${this.state.chainringSearch}> ${chainrings.map(d => htm` `)}

Label this.handleLabel(e)} value="${this.state.label}">

Wheel diameter (mm) this.handleWheel(e)} value=${this.state.wheel}>

Crank length (mm) this.handleCrank(e)} value=${this.state.crank}>

`; } }4a:[] 29:{"id":"80fcb09ac0a9bce5","slug":null,"title":"Drivetrain Picker","thumbnail":"11bea471c796e10aedfe25d567d742e07d142159c605869d63a2ca933408a5f6","access_level":"public","create_time":"$D2023-06-20T17:39:54.417Z","update_time":"$D2023-06-20T17:39:54.417Z","view_time":null,"first_public_time":"$D2023-06-20T17:39:54.417Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"47d01742190b0ff6","login":"miguelbermudez","name":"Miguel Bermudez","avatar_url":"https://avatars-next.observableusercontent.com/80c1db7f7e6d68130ac5bd39dc2a4e33e17773ef481cd4f831327fbc5c385a96","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":519,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"035f57c79fbcfc3f","login":"miguelbermudez","name":"Miguel Bermudez","avatar_url":"https://avatars-next.observableusercontent.com/80c1db7f7e6d68130ac5bd39dc2a4e33e17773ef481cd4f831327fbc5c385a96","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"035f57c79fbcfc3f","login":"miguelbermudez","name":"Miguel Bermudez","avatar_url":"https://avatars-next.observableusercontent.com/80c1db7f7e6d68130ac5bd39dc2a4e33e17773ef481cd4f831327fbc5c385a96","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Drivetrain Picker","cells":[{"id":0,"value":"md`# Drivetrain Picker`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"picker = {\n return Preact.render(htm`<${DrivetrainPicker} page=\"All\" />`)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"cassette = {\n let cassettes = cassettesRaw.map(d => {\n let obj = Object.assign({}, d);\n obj['speeds'] = +obj['speeds']\n obj['seriesName'] = obj['seriesName'].replace(' Series', '')\n let merged = d.combination.split('|').map(combo => {\n const sprockets = combo.trim().replace('T', '').split('-')\n return Object.assign({\"sprockets\": sprockets.map(g => +g), \n \"name\": `${sprockets[0]}-${sprockets[sprockets.length-1]}T`}, obj)\n })\n \n return merged\n })\n return cassettes.flat(3)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"pickerStyle = {\n return html`\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"chainrings = {\n let crankset = cranksetsRaw.map(d => { \n let test = d.chainring.split('|').map( cs => {\n let obj = Object.assign({}, d)\n obj.chainring = cs.trim()\n obj.crank_length = obj.crank_length.split('|')\n obj['seriesName'] = obj['seriesName'].replace(' Series', '')\n return obj\n })\n return test\n })\n return crankset.flat(3)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"cassettesRaw = d3.tsv('https://raw.githubusercontent.com/tysonanderson/drivetrain/master/cassettes.csv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"cranksetsRaw = d3.tsv('https://raw.githubusercontent.com/tysonanderson/drivetrain/master/cranksets.csv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"htm = (await require(\"htm@2/dist/htm.umd.js\")).bind(Preact.h)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"Preact = require(\"preact@8/dist/preact.min.js\").catch(() => window.preact)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null