From 692cdfb10264ba4dbb1b673c5d6190ac80c56e8d Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Tue, 28 Jul 2020 19:16:44 +0530 Subject: [PATCH] chore: cleanup rounded bar utility --- src/js/utils/draw.js | 31 +++++++++---------------------- 1 file changed, 9 insertions(+), 22 deletions(-) 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,