@rongmz/trading-charts
Version:
This is a d3 based charting library for stocks and finance world. If the question is, why another chart library? - Coz, I find no "open-source" library fits my requirements.
280 lines • 10.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.drawRectLimiterMark = exports.drawFlagMark = exports.drawXSingle = exports.drawXRange = exports.drawBoxFilledText = exports.drawGridLine = exports.drawCenterPivotRotatedText = exports.drawText = exports.drawArea = exports.drawLine = exports.drawBar = exports.drawCandle = exports.clearCanvas = void 0;
function clearCanvas(context, x, y, w, h) {
if (context !== null) {
context.save();
context.clearRect(x, y, w, h);
context.restore();
}
}
exports.clearCanvas = clearCanvas;
function drawCandle(context, color, ocx, oy, cy, hlx, hy, ly, bw, sw) {
if (sw === void 0) { sw = 1; }
if (context !== null) {
context.save();
context.fillStyle = color;
context.fillRect(ocx, oy, bw, (cy - oy) || 1);
context.fillRect(hlx, hy, sw, ly - hy);
context.restore();
}
}
exports.drawCandle = drawCandle;
function drawBar(context, color, x, y, w, h) {
if (context !== null) {
context.save();
context.fillStyle = color;
context.fillRect(x, y, w, h);
context.restore();
}
}
exports.drawBar = drawBar;
function drawLine(context, color, lineType, lineWidth, coordinates) {
if (context !== null && coordinates.length > 1) {
context.save();
context.lineWidth = lineWidth;
if (lineType === 'dashed-line')
context.setLineDash([5, 10]);
else if (lineType === 'dotted-line')
context.setLineDash([2, 4]);
else
context.setLineDash([]);
context.strokeStyle = color;
context.lineJoin = 'round';
context.lineCap = 'round';
context.beginPath();
context.moveTo(coordinates[0][0], coordinates[0][1]);
for (var i = 1; i < coordinates.length; i++) {
var xy2 = coordinates[i];
context.lineTo(xy2[0], xy2[1]);
}
context.stroke();
context.restore();
}
}
exports.drawLine = drawLine;
function drawArea(context, lineColor, lineColorBaseY, lineWidth, areaColors, coordinates) {
if (context !== null && coordinates.length > 1) {
context.save();
context.lineWidth = lineWidth;
context.setLineDash([]);
context.strokeStyle = lineColor;
context.lineJoin = 'round';
context.lineCap = 'round';
context.beginPath();
context.moveTo(coordinates[0][0], coordinates[0][1]);
var miny = coordinates[0][1], maxy = coordinates[0][1];
for (var i = 1; i < coordinates.length; i++) {
var xy2 = coordinates[i];
miny = Math.min(miny, xy2[1], xy2[2]);
maxy = Math.max(maxy, xy2[1], xy2[2]);
context.lineTo(xy2[0], xy2[1]);
}
context.stroke();
var gdt_1 = context.createLinearGradient(0, miny, 0, maxy);
areaColors.map(function (c, i) { return gdt_1.addColorStop(i, c); });
context.fillStyle = gdt_1;
context.lineTo(coordinates[coordinates.length - 1][0], coordinates[coordinates.length - 1][2]);
for (var i = coordinates.length - 1; i > -1; i--) {
var x = coordinates[i][0];
var baseY = coordinates[i][2];
context.lineTo(x, baseY);
}
context.globalCompositeOperation = 'destination-over';
context.fill();
if (typeof (lineColorBaseY) !== 'undefined') {
context.beginPath();
context.moveTo(coordinates[0][0], coordinates[0][2]);
context.strokeStyle = lineColorBaseY;
for (var i = 0; i < coordinates.length; i++) {
var x = coordinates[i][0];
var baseY = coordinates[i][2];
context.lineTo(x, baseY);
}
context.stroke();
}
context.restore();
}
}
exports.drawArea = drawArea;
function drawText(context, text, x, y, maxWidth, color, font, align, baseline, direction) {
if (context !== null) {
context.save();
if (align)
context.textAlign = align;
if (font)
context.font = font;
if (baseline)
context.textBaseline = baseline;
if (direction)
context.direction = direction;
if (color)
context.fillStyle = color;
if (!maxWidth) {
var m = context.measureText(text);
maxWidth = m.width;
}
context.fillText(text, x, y, maxWidth);
context.restore();
}
}
exports.drawText = drawText;
function drawCenterPivotRotatedText(context, text, x, y, angleDegree, color, font) {
if (context !== null) {
context.save();
if (font)
context.font = font;
if (color)
context.fillStyle = color;
context.textAlign = 'center';
context.textBaseline = 'middle';
context.translate(x, y);
context.rotate(angleDegree * Math.PI / 180);
context.fillText(text, 0, 0);
context.restore();
}
}
exports.drawCenterPivotRotatedText = drawCenterPivotRotatedText;
function drawGridLine(context, color, x, y, w, h, type) {
if (context !== null) {
context.save();
context.lineWidth = 1;
context.strokeStyle = color;
if (['both', 'vert'].indexOf(type) > -1) {
context.moveTo(x, 0);
context.lineTo(x, h);
}
if (['both', 'horiz'].indexOf(type) > -1) {
context.moveTo(0, y);
context.lineTo(0, w);
}
context.stroke();
context.restore();
}
}
exports.drawGridLine = drawGridLine;
function drawBoxFilledText(context, text, backColor, textColor, tx, ty, rx, ry, rw, rh, font, align, baseline) {
if (context !== null) {
context.save();
if (align)
context.textAlign = align;
if (font)
context.font = font;
if (baseline)
context.textBaseline = baseline;
context.fillStyle = backColor;
var m = context.measureText(text);
if (typeof (rx) === 'undefined') {
switch (align) {
case 'center':
rx = tx - m.width / 2;
break;
default:
rx = tx;
}
}
context.fillRect(rx, ry || 0, (rw || m.width) * (align === 'right' ? -1 : 1), rh || 0);
context.fillStyle = textColor;
context.fillText(text, tx, ty);
context.restore();
}
}
exports.drawBoxFilledText = drawBoxFilledText;
function drawXRange(context, x1, x2, h, lineColor, lineWidth, areaColor, text, fontSize) {
if (context !== null) {
context.save();
context.lineWidth = lineWidth;
context.strokeStyle = lineColor;
context.lineJoin = 'round';
context.lineCap = 'round';
context.beginPath();
context.moveTo(x1, 0);
context.lineTo(x1, h);
context.moveTo(x2, 0);
context.lineTo(x2, h);
context.stroke();
context.fillStyle = areaColor;
context.fillRect(x1, 0, x2 - x1, h);
if (typeof (text) !== 'undefined' && !!fontSize) {
context.textAlign = 'center';
context.textBaseline = 'top';
context.font = fontSize;
context.fillStyle = lineColor;
context.fillText(text, x1 + (x2 - x1) / 2, 10);
}
context.restore();
}
}
exports.drawXRange = drawXRange;
function drawXSingle(context, x, h, lineColor, lineWidth, text, fontSize) {
if (context !== null) {
context.save();
context.lineWidth = lineWidth;
context.strokeStyle = lineColor;
context.lineJoin = 'round';
context.lineCap = 'round';
context.beginPath();
context.moveTo(x, 0);
context.lineTo(x, h);
context.stroke();
if (typeof (text) !== 'undefined' && !!fontSize) {
drawCenterPivotRotatedText(context, text, x - parseInt(fontSize) / 2 - 5, h / 2, -90, lineColor, fontSize);
}
context.restore();
}
}
exports.drawXSingle = drawXSingle;
function drawFlagMark(context, x, y, text, direction, color, textColor, fontSize) {
if (context !== null) {
context.save();
var dir = direction === 'up' ? -1 : 1;
var markerH = parseFloat(fontSize) * 2;
var markerW = parseFloat(fontSize) * 1.4;
context.fillStyle = color;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x - markerW, y + dir * markerH);
context.lineTo(x + markerW, y + dir * markerH);
context.fill();
context.fillStyle = textColor;
context.textAlign = 'center';
context.textBaseline = direction === 'up' ? 'bottom' : 'top';
context.fillText(text[0] || '', x, y + dir * markerH * 0.4);
context.restore();
}
}
exports.drawFlagMark = drawFlagMark;
function drawRectLimiterMark(context, x1, x2, y11, y12, y21, y22, lineColor, lineWidth, areaColor, text, fontSize) {
if (context !== null) {
context.save();
context.lineCap = 'round';
context.strokeStyle = lineColor;
context.lineWidth = lineWidth;
context.beginPath();
context.moveTo(x1, y11);
context.lineTo(x2, y21);
context.moveTo(x1, y12);
context.lineTo(x2, y22);
context.stroke();
context.fillStyle = areaColor;
context.beginPath();
context.moveTo(x1, y11);
context.lineTo(x1, y12);
context.lineTo(x2, y22);
context.lineTo(x2, y21);
context.fill();
if (text && fontSize) {
context.font = fontSize;
context.textAlign = 'center';
context.textBaseline = 'bottom';
context.fillStyle = lineColor;
var tx = x1 + (x2 - x1) / 2, ty = y12 - (y22 - y12) / 2;
context.translate(tx, ty);
context.rotate((y22 - y12) / (x2 - x1));
context.fillText(text, 0, lineWidth / 2 + 1);
}
context.restore();
}
}
exports.drawRectLimiterMark = drawRectLimiterMark;
//# sourceMappingURL=utils.js.map