2e:null 2f:["$","title",null,{"children":"SVG progress component | Håken Lid | Observable"}] 34:[] 32:{"id":"7b48dc2f21d87970","slug":"svg-progress-component","title":"SVG progress component","thumbnail":"19986c2725cbf03a8d23f5c0e0f5d22760c0ce6eb59b2b626f9d0f7ef881c21c","access_level":"public","create_time":"$D2019-05-28T15:07:54.612Z","update_time":"$D2019-06-05T17:36:00.901Z","view_time":null,"first_public_time":"$D2019-05-28T16:02:17.032Z","has_unpublished_edits":null,"fork":{"id":"888ab43c5911c5b3","slug":"svg-circle","title":"SVG circle segments","owner":{"id":"6d2a027a96475aac","login":"haakenlid","name":"Håken Lid"}},"stars":4,"starred":false,"owner":{"type":"team","id":"6d2a027a96475aac","login":"haakenlid","name":"Håken Lid","avatar_url":"https://avatars-next.observableusercontent.com/b950f524bb1ad7ce7826807e8cb8e5eefe2d48a58f7bf83d96de388e4339cd83","tier":"starter_2024"},"version":733,"publish_version":733,"role":null,"authored":false,"authors":[{"type":"individual","id":"87daa21e79a008d4","login":"haakenlid","name":"Håken Lid","avatar_url":"https://avatars-next.observableusercontent.com/b950f524bb1ad7ce7826807e8cb8e5eefe2d48a58f7bf83d96de388e4339cd83","tier":null}],"members":[{"type":"individual","id":"87daa21e79a008d4","login":"haakenlid","name":"Håken Lid","avatar_url":"https://avatars-next.observableusercontent.com/b950f524bb1ad7ce7826807e8cb8e5eefe2d48a58f7bf83d96de388e4339cd83","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"SVG progress component","cells":[{"id":0,"value":"md`# SVG progress component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"{\n const size = Math.max(300, data.radius * 2)\n const fn = segment(size/2, size/2, data.segments, data.radius, data.width, data.margin)\n const progress = Math.ceil(data.progress * data.segments)\n const className = n => n < progress ? 'active' : 'inactive'\n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"text = {\n const progress = data.progress * data.segments\n switch (data.text) {\n case 'P': \n return `${Math.ceil(100 * progress / data.segments)}%`;\n case 'N':\n return `${Math.ceil(data.progress * data.segments)}`;\n case 'T': {\n const minutes = 60 * data.progress\n const MM = ('' + Math.floor(minutes)).padStart(2, 0)\n const SS = ('' + Math.floor(60 * (minutes % 1))).padStart(2, 0)\n return `${MM}:${SS}`\n}}}\n \n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof data = form(html`

segments\n

radius\n

width\n

margin\n

progress\n

font weight\n

\n \n font size\n

\n %\n n\n time\n

\n \n \n \n colors\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"textElement = txt => `${txt}` \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"style = `\n@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:100,200,300,400,500,600,700,800,900&display=none&subset=latin-ext');\ntext {\n font-size: ${data.fontsize * data.radius*(data.inner ? 1 - data.width : 1)}px; \n font-family: 'Barlow Condensed', sans-serif;\n font-weight: ${data.fontweight};\n font-variant-numeric: proportional-nums;\n fill: ${data.colorC};\n}\npath {\n stroke: none;\n fill: ${data.colorB};\n}\n.active {\n fill: ${data.colorA};\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"polarToCartesian = (x, y, radius, degrees) => {\n const radians = degrees * Math.PI / 180.0;\n return [x + (radius * Math.sin(radians)),\n y - (radius * Math.cos(radians))]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"segment = (x, y, segments, radius, width, margin) => (n, className='inactive') => {\n const degrees = 360 / segments \n const start = degrees * n \n const end = (degrees * (n + 1 - margin) + (margin == 0 ? 1 : 0)) \n const path = segmentPath(x, y, radius, radius*(1-width), start, end)\n return ``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"segmentPath = (x, y, r0, r1, d0, d1) => {\n // https://svgwg.org/specs/paths/#PathDataEllipticalArcCommands\n const arc = Math.abs(d0 - d1) > 180 ? 1 : 0\n const point = (radius, degree) =>\n polarToCartesian(x, y, radius, degree)\n .map(n => n.toPrecision(5))\n .join(',')\n return [\n `M${point(r0, d0)}`,\n `A${r0},${r0},0,${arc},1,${point(r0, d1)}`,\n `L${point(r1, d1)}`,\n `A${r1},${r1},0,${arc},0,${point(r1, d0)}`,\n 'Z',\n ].join('')\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"range = (n) => [...Array(n).keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"