31:[] 2f:{"title":"SVG progress component","cells":[{"id":0,"value":"md`# SVG progress component`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":562,"value":"textElement = txt => `${txt}` \n\n","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":279,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"range = (n) => [...Array(n).keys()]","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}