jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: added helper function for rounded edges

Browse Source
This commit is contained in:
Shivam Mishra 2020-07-28 15:46:58 +05:30 committed by Arjun Choudhary
parent d139d15cb7
commit 428a447cba
2 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/objects/ChartComponents.js
View File

@ -102,10 +102,14 @@ let componentConfigs = {
percentageBars: { percentageBars: {
layerClass: 'percentage-bars', layerClass: 'percentage-bars',
makeElements(data) { makeElements(data) {
const numberOfPoints = data.xPositions.length;
return data.xPositions.map((x, i) =>{ return data.xPositions.map((x, i) =>{
let y = 0; let y = 0;
let bar = percentageBar(x, y, data.widths[i],
this.constants.barHeight, this.constants.barDepth, data.colors[i]); let isLast = i == numberOfPoints - 1;
let isFirst = i == 0;
let bar = percentageBar(x, y, data.widths[i], this.constants.barHeight, isFirst, isLast, data.colors[i]);
return bar; return bar;
}); });
}, },

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

@ -168,8 +168,44 @@ export function makeGradient(svgDefElem, color, lighter = false) {
return gradientId; return gradientId;
} }
export function percentageBar(x, y, width, height, export function makeRoundedCornerBarPath(x, width, height) {
depth=PERCENTAGE_BAR_DEFAULT_DEPTH, fill='none') { let radius = height/2;
return `M${x},0
h${width - radius}
q${radius},0 ${radius},${radius}
q0,${radius} -${radius},${radius}
h-${width - radius}
v${height}z`;
}
export function makeRoundedCornerBarPathLast(x, width, height) {
let radius = height/2;
return `M${x + radius},0
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') {
// 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) {
let pathStr = makeRoundedCornerBarPath(x, width, height);
return makePath(pathStr, 'percentage-bar', null, fill);
}
if (isFirst) {
let pathStr = makeRoundedCornerBarPathLast(x, width, height);
return makePath(pathStr, 'percentage-bar', null, fill);
}
let args = { let args = {
className: 'percentage-bar', className: 'percentage-bar',
@ -177,14 +213,7 @@ export function percentageBar(x, y, width, height,
y: y, y: y,
width: width, width: width,
height: height, height: height,
fill: fill, fill: fill
styles: {
'stroke': lightenDarkenColor(fill, -25),
// Diabolically good: https://stackoverflow.com/a/9000859
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`,
'stroke-width': depth
},
}; };
return createSVG("rect", args); return createSVG("rect", args);