jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

refactor: move endPoint creation to draw-utils

Browse Source
This commit is contained in:
Shivam Mishra 2019-09-27 15:00:43 +05:30
parent 2451e58df9
commit 9053b01462
2 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/js/utils/draw-utils.js
View File

@ -25,6 +25,33 @@ export function equilizeNoOfElements(array1, array2,
return [array1, array2];
}
export function getEndpointsForTrapezoid(startPositions) {
const endPosition = []
let [point_a, point_b] = startPositions
// For an equilateral triangle, the angles are always 60 deg.
// The end points on the polygons can be created using the following formula
//
// end_point_x = start_x +/- height * 1/2
// end_point_y = start_y + height
//
// b
// _______________________________
// \ |_| /
// \ | /
// \ | h /
// \ | /
// \|____________________/
//
// b = h * cos(60 deg)
//
endPosition[0] = [point_a[0] + height * 0.5, point_a[1] + height]
endPosition[1] = [point_b[0] - height * 0.5, point_b[1] + height]
return endPosition
}
export function truncateString(txt, len) {
if (!txt) {
return;
@ -71,7 +98,7 @@ export function getSplineCurvePointsStr(xList, yList) {
angle: Math.atan2(lengthY, lengthX)
};
};
let controlPoint = (current, previous, next, reverse) => {
let p = previous || current;
let n = next || current;
@ -82,18 +109,18 @@ export function getSplineCurvePointsStr(xList, yList) {
let y = current[1] + Math.sin(angle) * length;
return [x, y];
};
let bezierCommand = (point, i, a) => {
let cps = controlPoint(a[i - 1], a[i - 2], point);
let cpe = controlPoint(point, a[i - 1], a[i + 1], true);
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
};
let pointStr = (points, command) => {
return points.reduce((acc, point, i, a) => i === 0
? `${point[0]},${point[1]}`
: `${acc} ${command(point, i, a)}`, '');
};
return pointStr(points, bezierCommand);
}

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

@ -190,30 +190,8 @@ export function percentageBar(x, y, width, height,
return createSVG("rect", args);
}
export function funnelSlice(className, startPositions, height, fill='none') {
const endPosition = []
let [point_a, point_b] = startPositions[0]
// For an equilateral triangle, the angles are always 60 deg.
// The end points on the polygons can be created using the following formula
//
// end_point_x = start_x + height
// end_point_y = start_y +/- height * 1/2
//
// b
// _______________________________
// \ |_| /
// \ | /
// \ | h /
// \ | /
// \|____________________/
//
// b = h * cos(60 deg)
//
endPosition[0] = [point_a[0] + height, point_a[1] + height * 0.5]
endPosition[1] = [point_b[0] + height, point_b[1] - height * 0.5]
export function funnelSlice(className, startPositions, endPosition, height, fill='none') {
return createSVG("polygon")
}
export function heatSquare(className, x, y, size, fill='none', data={}) {
@ -348,7 +326,7 @@ function makeHoriLine(y, label, x1, x2, options={}) {
if(!options.stroke) options.stroke = BASE_LINE_COLOR;
if(!options.lineType) options.lineType = '';
if (options.shortenNumbers) label = shortenLargeNumber(label);
let className = 'line-horizontal ' + options.className +
(options.lineType === "dashed" ? "dashed": "");
@ -609,7 +587,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
// Spline
if (options.spline)
pointsStr = getSplineCurvePointsStr(xList, yList);
let path = makePath("M"+pointsStr, 'line-graph-path', color);
// HeatLine