30:T52b,function PercentageGauge(pct,{ width = 100, gaugeWidth = 10, gaugeColor = '#000', discColor = '#ccc', textColor = '#000', fontWeight = 800 } = {}){ const svg = d3.create("svg") .attr("width", width) .attr("height", width) const arc = d3.arc() .innerRadius(width/2 - gaugeWidth) .outerRadius(width/2) .startAngle(360*pct * (Math.PI/180)) //converting from degs to radians .endAngle(0) svg.append('circle') .attr('cx', width/2) .attr('cy', width/2) .attr('r', width/2 - gaugeWidth/2) .attr('fill', discColor) const text = `${100*pct}%` const fontSize = `${width*.25}px` const fontFamily = 'sans-serif' const textDims = getFontSize(text, fontSize, fontFamily) svg.append('text') .text(d => text) .attr('fill', 'black') .attr('x', width/2) .attr('y', (width/2)+textDims.height/2) .attr('font-size', fontSize) .attr('font-family', fontFamily) .attr('line-height', width*.25) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('font-weight', fontWeight) .attr('fill', textColor) svg.append("path") .attr("d", arc) .attr("transform", `translate(${width/2},${width/2})`) .attr("fill", gaugeColor) return Object.assign(svg.node()) }31:[] 2e:{"title":"Percentage Gauge","cells":[{"id":282,"value":"# Percentage Gauge","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"{\n return html`\n

${\n PercentageGauge(.77, {\n width: 50, \n gaugeWidth: 5, \n gaugeColor: '#4daf4a',\n discColor: '#eee',\n textColor: '#333',\n fontWeight: 400\n })\n }thing 1

${\n PercentageGauge(.85, {\n width: 50, \n gaugeWidth: 5, \n gaugeColor: '#984ea3',\n discColor: '#eee',\n textColor: '#333',\n fontWeight: 400\n })\n }thing 2

\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"function getFontSize(text, size, family) {\n const ctx = document.createElement(\"canvas\").getContext(\"2d\")\n ctx.font = `${size} ${family}`\n const dim = ctx.measureText(text)\n return {\n width: dim.actualBoundingBoxRight + dim.actualBoundingBoxLeft,\n height: dim.actualBoundingBoxAscent + dim.actualBoundingBoxDescent\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"chartStyle = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}