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,