@antv/t8
Version:
T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative T8 markdown syntax that can be used to describe the content of data interpretation reports.
163 lines (159 loc) • 6.25 kB
JavaScript
;
var tslib = require('tslib');
/**
* Path generators for SVG shapes
* Creates SVG path data for lines, areas, and arcs
*/
/**
* Creates a line generator function
* Converts data points to SVG path data for lines
*
* @param xScale - Scale function for X coordinates
* @param yScale - Scale function for Y coordinates
* @returns Function that generates SVG path data from data array
*/
var line = function (xScale, yScale, height) {
return function (data) {
if (!data.length)
return '';
var points = data.map(function (item, index) { return [xScale(index), height - yScale(item)]; });
return points.reduce(function (path, _a, i) {
var x = _a[0], y = _a[1];
if (i === 0)
return "M".concat(x, " ").concat(y);
return "".concat(path, " L").concat(x, " ").concat(y);
}, '');
};
};
/**
* Creates an area generator function
* Converts data points to SVG path data for filled areas
*
* @param xScale - Scale function for X coordinates
* @param yScale - Scale function for Y coordinates
* @param y0 - Baseline Y coordinate for the area
* @returns Function that generates SVG path data from data array
*/
var area = function (xScale, yScale, y0) {
return function (data) {
if (!data.length)
return '';
var points = data.map(function (d, i) { return [xScale(i), y0 - yScale(d)]; });
var areaPoints = tslib.__spreadArray(tslib.__spreadArray([], points, true), [[points[points.length - 1][0], y0], [points[0][0], y0]], false);
return areaPoints.reduce(function (path, _a, i) {
var x = _a[0], y = _a[1];
if (i === 0)
return "M".concat(x, " ").concat(y);
return "".concat(path, " L").concat(x, " ").concat(y);
}, '');
};
};
/**
* Creates an arc generator function
* Converts angle data to SVG path data for arcs
*
* @param radius - radius of the arc
* @returns Function that generates SVG path data from start and end angles
*/
var arc = function (radius) {
return function (centerX, centerY, endAngle) {
var dx = centerX + radius * Math.sin(endAngle);
var dy = centerY - radius * Math.cos(endAngle);
var largeArcFlag = endAngle <= Math.PI ? 0 : 1;
return [
"M".concat(centerX, " ").concat(centerY - radius),
"A".concat(radius, " ").concat(radius, " 0 ").concat(largeArcFlag, " 1 ").concat(dx, " ").concat(dy),
"L".concat(centerX, " ").concat(centerY),
'Z',
].join(' ');
};
};
/**
* Creates an arrow generator function
* Converts start and end points to SVG path data for lines with arrowheads
*
* @param xScale - Scale function for X coordinates
* @param yScale - Scale function for Y coordinates
* @returns Function that generates SVG path data from start and end points
*/
var arrow = function (xScale, yScale, arrowheadLength, arrowheadWidth) {
if (arrowheadLength === void 0) { arrowheadLength = 2; }
if (arrowheadWidth === void 0) { arrowheadWidth = 2; }
return function (startData, endData) {
var startX = xScale(startData.index);
var startY = yScale(startData.value);
var endX = xScale(endData.index);
var endY = yScale(endData.value);
var deltaX = endX - startX;
var deltaY = endY - startY;
var angle = Math.atan2(deltaY, deltaX);
var basePointX = endX - arrowheadLength * Math.cos(angle);
var basePointY = endY - arrowheadLength * Math.sin(angle);
var arrowPoint1X = basePointX - (arrowheadWidth / 2) * Math.sin(angle);
var arrowPoint1Y = basePointY + (arrowheadWidth / 2) * Math.cos(angle);
var arrowPoint2X = basePointX + (arrowheadWidth / 2) * Math.sin(angle);
var arrowPoint2Y = basePointY - (arrowheadWidth / 2) * Math.cos(angle);
return [
"M".concat(startX, " ").concat(startY),
"L".concat(basePointX, " ").concat(basePointY),
"M".concat(endX, " ").concat(endY),
"L".concat(arrowPoint1X, " ").concat(arrowPoint1Y),
"L".concat(arrowPoint2X, " ").concat(arrowPoint2Y),
"Z",
].join(' ');
};
};
/**
* Generates an SVG path string for a smooth Bézier curve (similar to d3.curveBasis)
* based on a set of input points.
*
* NOTE: This is a simplified B-spline implementation suitable for smooth line generation,
*
* @param points - An array of coordinate pairs [[x0, y0], [x1, y1], ...] to be interpolated.
* @returns A complete SVG path data string (starting with 'M' followed by 'C' segments).
*/
function curveBasis(points) {
if (points.length < 4) {
// For simplicity, return a straight line for few points
var path_1 = points.map(function (p) { return p.join(','); }).join('L');
return "M".concat(path_1);
}
// A very simplified B-spline path generation for demonstration
// This is not a complete implementation of d3.curveBasis,
// but it generates a smooth-looking curve.
var path = "M".concat(points[0][0], ",").concat(points[0][1]);
for (var i = 1; i < points.length - 2; i++) {
var p0 = points[i - 1];
var p1 = points[i];
var p2 = points[i + 1];
var p3 = points[i + 2];
var x0 = p0[0];
var y0 = p0[1];
var x1 = p1[0];
var y1 = p1[1];
var x2 = p2[0];
var y2 = p2[1];
var x3 = p3[0];
var y3 = p3[1];
var cp1x = x1 + (x2 - x0) / 6;
var cp1y = y1 + (y2 - y0) / 6;
var cp2x = x2 - (x3 - x1) / 6;
var cp2y = y2 - (y3 - y1) / 6;
path += "C".concat(cp1x, ",").concat(cp1y, ",").concat(cp2x, ",").concat(cp2y, ",").concat(x2, ",").concat(y2);
}
return path;
}
var createCurvePath = function (xScale, yScale, data) {
if (!data || data.length < 2) {
return '';
}
var points = data.map(function (d) { return [xScale(d[0]), yScale(d[1])]; });
return curveBasis(points);
};
exports.arc = arc;
exports.area = area;
exports.arrow = arrow;
exports.createCurvePath = createCurvePath;
exports.curveBasis = curveBasis;
exports.line = line;
//# sourceMappingURL=paths.js.map