PercentGrowth = ({ data=[{target:10, actual:8}, {target:12, actual:9}], title="Monthly growth", width=700, height=20, titleWidth=100}) => { const perc = (a, b) => (b-a)/a; const target=perc(data[0].target, data[1].target), actual=perc(data[0].actual, data[1].actual); const wTitle=titleWidth, wLegend=117, wActual=140; const legendSize=(height-3)/2; const wBar=width-wTitle-wActual-wLegend; const sign = actual>=0 ? 1 : -1; const range = actual>=target? actual : (actual>=0) ? target : (target-actual); const xScale = (x) => (x - (actual<0 ? actual : 0))/range * wBar; const opacity = 0.3; const style = svg.fragment`` const Title = svg.fragment`${title}` const Actuals = svg.fragment` actuals ${d3.format(".3s")(data[0].actual)} → ${d3.format(".3s")(data[1].actual)}` const Target = svg.fragment` ` const Actual = svg.fragment` =0 ? "steelblue" : "red"} style="stroke-width:2;" /> ` const Percent = svg.fragment` ${d3.format(".0%")(actual/target)} of target growth rate` const Legend = svg.fragment` target actual ${d3.format(".0%")(target)} ${d3.format(".0%")(actual)} ` return html`` }