jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

chore: cleanup rounded bar utility

Browse Source
This commit is contained in:
Shivam Mishra 2020-07-28 19:16:44 +05:30 committed by Arjun Choudhary
parent ec8f669385
commit 692cdfb102
1 changed files with 9 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/js/utils/draw.js
View File

@ -167,45 +167,32 @@ export function makeGradient(svgDefElem, color, lighter = false) {
return gradientId; 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 radius = height/2;
let xOffset = width - radius;
return `M${x},0 return `M${x},0 h${xOffset} q${radius},0 ${radius},${radius} q0,${radius} -${radius},${radius} h-${xOffset} v${height}z`;
h${width - radius}
q${radius},0 ${radius},${radius}
q0,${radius} -${radius},${radius}
h-${width - radius}
v${height}z`;
} }
export function makeRoundedCornerBarPathLast(x, width, height) { export function leftRoundedBar(x, width, height) {
let radius = height/2; let radius = height/2;
let xOffset = width - radius;
return `M${x + radius},0 return `M${x + radius},0 h${xOffset} v${height} h-${xOffset} q-${radius}, 0 -${radius},-${radius} q0,-${radius} ${radius},-${radius}z`;
h${width - radius}
v${height}
h-${width - radius}
q-${radius}, 0 -${radius},-${radius}
q0,-${radius} ${radius},-${radius}z`;
} }
export function percentageBar(x, y, width, height, isFirst, isLast, fill='none') { export function percentageBar(x, y, width, height, isFirst, isLast, fill='none') {
// https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90
// <rect class="percentage-bar" x="1400.0628798685607" y="0" width="163.9371201314394" height="20" fill="#F8814F"></rect>
// <path d="M1400,0 h163.93 q10,0 10,10 q0,10 -10,10 h-163.93 v20 z" fill="gray">
if (isLast) { if (isLast) {
let pathStr = makeRoundedCornerBarPath(x, width, height); let pathStr = rightRoundedBar(x, width, height);
return makePath(pathStr, 'percentage-bar', null, fill); return makePath(pathStr, 'percentage-bar', null, fill);
} }
if (isFirst) { if (isFirst) {
let pathStr = makeRoundedCornerBarPathLast(x, width, height); let pathStr = leftRoundedBar(x, width, height);
return makePath(pathStr, 'percentage-bar', null, fill); return makePath(pathStr, 'percentage-bar', null, fill);
} }
let args = { let args = {
className: 'percentage-bar', className: 'percentage-bar',
x: x, x: x,