diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 6ce0cc0..aab8881 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -167,45 +167,32 @@ export function makeGradient(svgDefElem, color, lighter = false) { return gradientId; } -export function makeRoundedCornerBarPath(x, width, height) { +export function rightRoundedBar(x, width, height) { + // https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90 let radius = height/2; + let xOffset = width - radius; - return `M${x},0 - h${width - radius} - q${radius},0 ${radius},${radius} - q0,${radius} -${radius},${radius} - h-${width - radius} - v${height}z`; + return `M${x},0 h${xOffset} q${radius},0 ${radius},${radius} q0,${radius} -${radius},${radius} h-${xOffset} v${height}z`; } -export function makeRoundedCornerBarPathLast(x, width, height) { +export function leftRoundedBar(x, width, height) { let radius = height/2; + let xOffset = width - radius; - return `M${x + radius},0 - h${width - radius} - v${height} - h-${width - radius} - q-${radius}, 0 -${radius},-${radius} - q0,-${radius} ${radius},-${radius}z`; + return `M${x + radius},0 h${xOffset} v${height} h-${xOffset} q-${radius}, 0 -${radius},-${radius} q0,-${radius} ${radius},-${radius}z`; } - export function percentageBar(x, y, width, height, isFirst, isLast, fill='none') { - // https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90 - // - // - if (isLast) { - let pathStr = makeRoundedCornerBarPath(x, width, height); + let pathStr = rightRoundedBar(x, width, height); return makePath(pathStr, 'percentage-bar', null, fill); } if (isFirst) { - let pathStr = makeRoundedCornerBarPathLast(x, width, height); + let pathStr = leftRoundedBar(x, width, height); return makePath(pathStr, 'percentage-bar', null, fill); } - let args = { className: 'percentage-bar', x: x,