candlestick-to-png
Version:
Lightweight library to draw an array of candles into a canvas and render it as png file.
1,044 lines (1,043 loc) • 47.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CandleStickGraph = void 0;
const technicalindicators_1 = require("technicalindicators");
class CandleStickDrag {
constructor() {
this.dragging = false;
this.dragEnd = CandleStickPoint.origin;
this.dragStart = CandleStickPoint.origin;
}
}
class CandleStickPoint {
constructor() {
this.x = 0;
this.y = 0;
}
}
CandleStickPoint.origin = { x: 0, y: 0 };
class CandleStickGraph {
constructor(options) {
this.options = {
wantLines: false,
wantCandles: true,
zoom: 0,
zoomSpeed: 0.15,
wantTrades: false,
wantSMA: false,
wantEMA: false,
granularity: 1,
wantRSI: true,
wantMACD: true,
wantBollingerBands: true,
wantGrid: true,
wantStats: false,
triangleSize: 10,
lineWidth: 1,
lineWidthGreen: 1,
lineWidthRed: 1,
wantSideMarksMove: false,
baseFontName: 'Arial'
};
this.candlesticks = [];
this.selectedCandleStick = [];
this.moves = [];
this.drops = [];
this.rightCandlesOffset = 0;
this.curRightCandleOffset = 0;
this.dragInfo = {
dragging: false,
dragStart: CandleStickPoint.origin,
dragEnd: CandleStickPoint.origin
};
this.colorInfo = {
gridColor: "#e2e2e2",
gridTextColor: "#a0a0a0",
mouseHoverBackgroundColor: "#f5f5f5",
lineColor: "#a0a0a0",
mouseHoverTextColor: "#000000",
greenColor: "#C1FF72",
redColor: "#CB6CE6",
greenHoverColor: "#27ae60",
redHoverColor: "#c0392b",
debugLineColor: "#D11538",
growLineColor: "#a0a0a0",
blackColor: "#131422",
whiteColor: "#ffffff",
yellowColor: "#f9ca24",
purpleColor: "#9b59b6",
purpleColorTransparent: "rgba(155,89,182,0.21)",
yellowColorTransparent: "rgba(249,202,36,0.2)",
whiteColorTrasparent: 'rgba(255,255,255,0.55)',
blueColor: '#3498db',
greenAreaColor: 'rgba(46,204,113,0.27)',
redAreaColor: 'rgba(231,76,60,0.27)',
greenAreaColorIntens: 'rgba(46,204,113,0.57)',
redAreaColorIntes: 'rgba(231,76,60,0.57)',
whiteColorMoreTrasparent: 'rgba(255,255,255,0.25)',
logoColor: 'white'
};
this.GENERAL_FONT_SIZE = 12;
this.TEXT_FONT_SIZE = 20;
this.draw = () => {
this.context.clearRect(0, 0, this.width, this.height);
this.fillRect(0, 0, this.width, this.height, this.colorInfo.blackColor);
this.selectedCandleStick = this.getSelectedCandleStick();
this.calculateYRange(this.selectedCandleStick);
this.calculateXRange(this.selectedCandleStick);
this.drawGrid();
this.candleWidth = this.calculateCandleWidth();
let points = [];
if (this.options.wantRSI) {
const rsiAreas = this.calculateRsi();
this.drawOverAreas(rsiAreas);
}
if (this.options.wantBollingerBands) {
const bollingerBandsRanges = this.calculateBollingerBands(18);
this.drawBollingRangeArea(bollingerBandsRanges, this.colorInfo.purpleColorTransparent);
}
if (this.options.wantMACD) {
const emaPoints12 = this.calculateEma(12);
this.drawLines(emaPoints12, this.colorInfo.purpleColor);
const emaPoints26 = this.calculateEma(26);
this.drawLines(emaPoints26, this.colorInfo.purpleColor);
this.drawMACD(emaPoints12, emaPoints26);
}
if (this.options.wantSMA) {
const smaPoints = this.calculateSma();
this.drawLines(smaPoints, this.colorInfo.yellowColor);
}
if (this.options.wantEMA) {
const emaPoints26 = this.calculateEma(26);
this.drawLines(emaPoints26, this.colorInfo.purpleColor);
}
for (let i = 0; i < this.selectedCandleStick.length; ++i) {
this.drawCandlesAndValuatePoints(i, points);
}
if (this.options.wantLines) {
this.drawLines(points, this.colorInfo.lineColor);
}
if (this.options.wantTrades) {
this.drawMoves();
}
// draw mouse hover
if (this.b_drawMouseOverlay) {
// price line
const { str, textWidth } = this.drawPriceLine();
// time line
this.drawTimeLine(str, textWidth);
// data
this.drawInfoLabel();
}
if (this.options.wantStats) {
try {
this.drawStatsLabel();
}
catch (e) {
console.error(e);
}
try {
this.drawLogo();
}
catch (e) {
console.error(e);
}
}
};
this.addCandlestick = (candlestick, adaptZoom) => {
this.candlesticks.push(candlestick);
if (adaptZoom) {
this.selectedCandleStick = this.candlesticks.slice(Math.max(0, this.options.zoom));
if ((this.xPixelRange / this.selectedCandleStick.length) < 3) {
this.options.zoom += 2;
}
}
};
this.mouseMove = (e) => {
const getMousePos = (e) => {
// @ts-ignore
const rect = this.canvas.getBoundingClientRect();
return { x: e.clientX - rect.left, y: e.clientY - rect.top };
};
this.mousePosition = getMousePos(e);
this.mousePosition.x += this.candleWidth / 2;
this.b_drawMouseOverlay = this.mousePosition.x >= this.marginLeft;
if (this.mousePosition.x > this.width - this.marginRight + this.candleWidth)
this.b_drawMouseOverlay = false;
if (this.mousePosition.y > this.height - this.marginBottom)
this.b_drawMouseOverlay = false;
if (this.b_drawMouseOverlay) {
this.yMouseHover = this.yToValueCoords(this.mousePosition.y);
this.xMouseHover = this.xToValueCoords(this.mousePosition.x);
// snap to candlesticks
const candlestickDelta = this.selectedCandleStick[1].timestamp - this.selectedCandleStick[0].timestamp;
this.hoveredCandlestickID = Math.floor((this.xMouseHover - this.selectedCandleStick[0].timestamp) / candlestickDelta);
this.xMouseHover = Math.floor(this.xMouseHover / candlestickDelta) * candlestickDelta;
this.mousePosition.x = this.xToPixelCoords(this.xMouseHover);
this.draw();
}
else
this.draw();
};
this.mouseUp = () => {
this.b_drawMouseOverlay = false;
this.dragInfo.dragging = false;
this.dragInfo.dragStart = this.dragInfo.dragEnd;
this.curRightCandleOffset =
Math.max(0, this.rightCandlesOffset + this.curRightCandleOffset);
this.rightCandlesOffset = 0;
};
this.mouseDown = (e) => {
this.b_drawMouseOverlay = false;
this.dragInfo.dragStart = {
x: e.pageX - this.canvas.offsetLeft,
y: e.pageY - this.canvas.offsetTop
};
this.dragInfo.dragging = true;
};
this.mouseDrag = (e) => {
this.b_drawMouseOverlay = false;
if (this.dragInfo.dragging) {
this.dragInfo.dragEnd = {
x: e.pageX - this.canvas.offsetLeft,
y: e.pageY - this.canvas.offsetTop
};
this.rightCandlesOffset = (this.dragInfo.dragEnd.x - this.dragInfo.dragStart.x) / this.candleWidth;
this.draw();
}
};
this.mouseOut = (e) => {
this.b_drawMouseOverlay = false;
this.mouseUp();
this.draw();
};
this.mouseWheel = (e) => {
const AT_LEAST_CANDLES = 20;
let zoomFactor = Math.min(15, e.deltaY * -this.options.zoomSpeed);
let noNegativeZoom = this.options.zoom + zoomFactor > 0;
let noTooManyCandles = zoomFactor > 0 || (this.xPixelRange / (this.selectedCandleStick.length + zoomFactor)) > 2;
let noSoFewCandles = zoomFactor < 0 || this.selectedCandleStick.length > Math.max(AT_LEAST_CANDLES, 20);
if (noNegativeZoom && noTooManyCandles && noSoFewCandles) {
this.options.zoom += zoomFactor;
this.draw();
}
};
this.drawGrid = () => {
const yGridSize = (this.yRange) / this.yGridCells;
let niceNumber = Math.pow(10, Math.ceil(Math.log10(yGridSize)));
if (yGridSize < 0.25 * niceNumber)
niceNumber = 0.25 * niceNumber;
else if (yGridSize < 0.5 * niceNumber)
niceNumber = 0.5 * niceNumber;
const yStartRoundNumber = Math.ceil(this.yStart / niceNumber) * niceNumber;
const yEndRoundNumber = Math.floor(this.yEnd / niceNumber) * niceNumber;
for (let y = yStartRoundNumber; y <= yEndRoundNumber; y += niceNumber) {
if (this.options.wantGrid)
this.drawLine(0, this.yToPixelCoords(y), this.width, this.yToPixelCoords(y), this.colorInfo.gridColor);
const textWidth = this.context.measureText(String(this.roundPriceValue(y))).width;
this.context.fillStyle = this.colorInfo.gridTextColor;
this.context.fillText(String(this.roundPriceValue(y)), this.width - textWidth - 5, this.yToPixelCoords(y) - 5);
}
const xGridSize = (this.xRange) / this.xGridCells;
niceNumber = Math.pow(10, Math.ceil(Math.log10(xGridSize)));
if (xGridSize < 0.25 * niceNumber)
niceNumber = 0.25 * niceNumber;
else if (xGridSize < 0.5 * niceNumber)
niceNumber = 0.5 * niceNumber;
const xStartRoundNumber = Math.ceil(this.xStart / niceNumber) * niceNumber;
const xEndRoundNumber = Math.floor(this.xEnd / niceNumber) * niceNumber;
let b_formatAsDate = false;
if (this.xRange > 60 * 60 * 24 * 1000 * 5)
b_formatAsDate = true;
for (let x = xStartRoundNumber; x <= xEndRoundNumber; x += niceNumber) {
if (this.options.wantGrid)
this.drawLine(this.xToPixelCoords(x), 0, this.xToPixelCoords(x), this.height, this.colorInfo.gridColor);
const date = new Date(x);
let dateStr = "";
if (b_formatAsDate) {
let day = date.getDate();
if (day < 10)
day = "0" + day;
let month = date.getMonth() + 1;
if (month < 10)
month = "0" + month;
dateStr = day + "." + month;
}
else {
let minutes = date.getMinutes();
if (minutes < 10)
minutes = "0" + minutes;
dateStr = date.getHours() + ":" + minutes;
}
this.context.fillStyle = this.colorInfo.gridTextColor;
this.context.fillText(dateStr, this.xToPixelCoords(x) + 5, this.height - 5);
}
};
this.calculateYRange = (candlesticks) => {
for (let i = 0; i < candlesticks.length; ++i) {
if (i === 0) {
this.yStart = candlesticks[i].low;
this.yEnd = candlesticks[i].high;
}
else {
if (candlesticks[i].low < this.yStart) {
this.yStart = candlesticks[i].low;
}
if (candlesticks[i].high > this.yEnd) {
this.yEnd = candlesticks[i].high;
}
}
}
this.yRange = this.yEnd - this.yStart;
};
this.calculateXRange = (candlesticks) => {
this.xStart = candlesticks[0].timestamp;
this.xEnd = candlesticks[candlesticks.length - 1].timestamp;
this.xRange = this.xEnd - this.xStart;
};
this.yToPixelCoords = (y) => {
return this.height - this.marginBottom - (y - this.yStart) * this.yPixelRange / this.yRange;
};
this.xToPixelCoords = (x) => {
return this.marginLeft + (x - this.xStart) * this.xPixelRange / this.xRange;
};
this.yToValueCoords = (y) => {
return this.yStart + (this.height - this.marginBottom - y) * this.yRange / this.yPixelRange;
};
this.xToValueCoords = (x) => {
return this.xStart + (x - this.marginLeft) * this.xRange / this.xPixelRange;
};
this.drawLine = (xStart, yStart, xEnd, yEnd, color) => {
this.context.beginPath();
// to get a crisp 1 pixel wide line, we need to add 0.5 to the coords
this.context.moveTo(xStart + 0.5, yStart + 0.5);
this.context.lineTo(xEnd + 0.5, yEnd + 0.5);
this.context.strokeStyle = color;
this.context.stroke();
};
this.fillRect = (x, y, width, height, color) => {
this.context.beginPath();
this.context.fillStyle = color;
this.context.rect(x, y, width, height);
this.context.fill();
};
this.fillRectRounded = (x, y, width, height, color, radius) => {
this.context.beginPath();
this.context.fillStyle = color;
this.context.moveTo(x + radius, y);
this.context.lineTo(x + width - radius, y);
this.context.quadraticCurveTo(x + width, y, x + width, y + radius);
this.context.lineTo(x + width, y + height - radius);
this.context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
this.context.lineTo(x + radius, y + height);
this.context.quadraticCurveTo(x, y + height, x, y + height - radius);
this.context.lineTo(x, y + radius);
this.context.quadraticCurveTo(x, y, x + radius, y);
this.context.closePath();
this.context.fill();
};
this.drawTriangleUp = (x, y, lat, color, label) => {
this.context.beginPath();
this.context.fillStyle = color;
this.context.moveTo(x + lat, y + lat);
this.context.lineTo(x, y - lat / 1.5);
this.context.lineTo(x - lat, y + lat);
this.context.fill();
if (label) {
this.context.font = CandleStickGraph.getFont((this.TEXT_FONT_SIZE * 2), this.options.baseFontName);
const textW = this.context.measureText(label).width;
this.context.fillStyle = this.colorInfo.whiteColorMoreTrasparent;
this.context.fillText(label, x - textW / 2, y - lat * 8);
}
};
this.drawTriangleDown = (x, y, lat, color, label) => {
this.context.beginPath();
this.context.fillStyle = color;
this.context.moveTo(x + lat, y - lat);
this.context.lineTo(x, y + lat / 1.5);
this.context.lineTo(x - lat, y - lat);
this.context.fill();
if (label) {
this.context.font = CandleStickGraph.getFont((this.TEXT_FONT_SIZE * 2), this.options.baseFontName);
const textW = this.context.measureText(label).width;
this.context.fillStyle = this.colorInfo.whiteColorMoreTrasparent;
this.context.fillText(label, x - textW / 2, y + lat * 8);
}
};
this.drawRect = (x, y, width, height, color) => {
this.context.beginPath();
this.context.strokeStyle = color;
this.context.rect(x, y, width, height);
this.context.stroke();
};
this.formatDate = (date) => {
let day = date.getDate();
if (day < 10)
day = "0" + day;
let month = date.getMonth() + 1;
if (month < 10)
month = "0" + month;
let hours = date.getHours();
if (hours < 10)
hours = "0" + hours;
let minutes = date.getMinutes();
if (minutes < 10)
minutes = "0" + minutes;
return day + "." + month + "." + date.getFullYear() + " - " + hours + ":" + minutes;
};
this.roundPriceValue = (value) => {
if (value > 1.0)
return Math.round(value * 100) / 100;
if (value > 0.001)
return Math.round(value * 1000) / 1000;
if (value > 0.00001)
return Math.round(value * 100000) / 100000;
if (value > 0.0000001)
return Math.round(value * 10000000) / 10000000;
else
return Math.round(value * 1000000000) / 1000000000;
};
this.formatDateNoHours = (date) => {
let day = date.getDate();
if (day < 10)
day = "0" + day;
let month = date.getMonth() + 1;
if (month < 10)
month = "0" + month;
return day + "." + month + "." + date.getFullYear();
};
this.apply(options);
}
toCandleStick(candle) {
if (!candle.candle) {
return {
timestamp: 0, open: 0, close: 0, high: 0, low: 0
};
}
return {
timestamp: candle.openTimeInMillis,
open: candle.candle.open,
close: candle.candle.close,
high: candle.candle.high,
low: candle.candle.low
};
}
reset() {
this.clean();
this.rightCandlesOffset = 0;
this.curRightCandleOffset = 0;
this.options.zoom = 0;
}
clean() {
this.candlesticks = [];
this.selectedCandleStick = [];
this.moves = [];
this.drops = [];
}
apply(options) {
if (options) {
this.options = options;
}
}
applyColors(options) {
this.colorInfo = options;
}
_initCanvas(canvas, canvasId) {
// @ts-ignore
this.canvas = canvas;
// @ts-ignore
this.width = parseInt(this.canvas.width);
// @ts-ignore
this.height = parseInt(this.canvas.height);
// @ts-ignore
this.context = this.canvas.getContext("2d");
/*
const scale = 2;
this.canvas.width = this.width * scale;
this.canvas.height = this.height * scale;
*/
// this.canvas.style.backgroundColor = "#000";
this.context.lineWidth = 1;
this.candleWidth = 5;
this.marginLeft = 10;
this.marginRight = 100;
this.marginTop = 10;
this.marginBottom = 30;
this.yStart = 0;
this.yEnd = 0;
this.yRange = 0;
this.yPixelRange = this.height - this.marginTop - this.marginBottom;
this.xStart = 0;
this.xEnd = 0;
this.xRange = 0;
this.xPixelRange = this.width - this.marginLeft - this.marginRight;
this.xGridCells = 16;
this.yGridCells = 16;
this.b_drawMouseOverlay = false;
this.mousePosition = { x: 0, y: 0 };
this.xMouseHover = 0;
this.yMouseHover = 0;
this.hoveredCandlestickID = 0;
this.context.font = CandleStickGraph.getFont(this.GENERAL_FONT_SIZE, this.options.baseFontName);
this.leftAxis = {
x1: 0,
y1: 0,
x2: 0,
y2: this.yPixelRange
};
this.rightAxis = {
x1: this.xPixelRange,
y1: 0,
x2: this.xPixelRange,
y2: this.yPixelRange
};
this.reset();
}
initCanvasHeadless(canvas) {
this._initCanvas(canvas);
}
initCanvas(canvas, canvasId) {
this._initCanvas(canvas);
this.bindCanvasListeners();
}
bindCanvasListeners() {
this.canvas.addEventListener("mousedown", (e) => {
if (this.areSelectedCandlesNotNull()) {
this.mouseDown(e);
}
});
this.canvas.addEventListener("mouseup", (e) => {
if (this.areSelectedCandlesNotNull()) {
this.mouseUp();
}
});
this.canvas.addEventListener("mousemove", (e) => {
if (this.areSelectedCandlesNotNull()) {
this.mouseMove(e);
this.mouseDrag(e);
}
});
this.canvas.addEventListener("mouseout", (e) => {
if (this.areSelectedCandlesNotNull()) {
this.mouseOut(e);
}
});
this.canvas.addEventListener('wheel', (e) => {
if (this.areSelectedCandlesNotNull()) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
this.mouseWheel(e);
}
}, false);
}
static getFont(fontSize, baseFont) {
return fontSize + "px " + baseFont;
}
areSelectedCandlesNotNull() {
return this.selectedCandleStick && this.selectedCandleStick.length > 0;
}
calculateCandleWidth() {
let ww = (this.xPixelRange / this.selectedCandleStick.length) - 1;
if (ww % 2 === 0)
ww--;
return ww;
}
getSelectedCandleStick() {
let nCandlesSkipFromLeft = Math.max(0, this.options.zoom);
let untilFromRight = Math.floor(Math.max(0, this.rightCandlesOffset + this.curRightCandleOffset));
return this.candlesticks.slice(Math.max(0, nCandlesSkipFromLeft - untilFromRight), this.candlesticks.length - untilFromRight);
}
drawRectangleWithText(textX, textY, str) {
let oldFont = this.context.font;
this.context.font = CandleStickGraph.getFont((this.TEXT_FONT_SIZE + 2), this.options.baseFontName);
const textWidth = this.context.measureText(str).width;
this.fillRectRounded(textX - textWidth / 2 - 10, textY - 15, textWidth + 20, 25, this.colorInfo.whiteColor, 25 / 2);
this.context.fillStyle = this.colorInfo.blackColor;
this.context.fillText(str, textX - textWidth / 2, textY + (10) / 2);
this.context.font = oldFont;
}
drawSmallRectangleWithText(textX, textY, str, bgColor = this.colorInfo.whiteColor, textColor = this.colorInfo.blackColor) {
let oldFont = this.context.font;
this.context.font = CandleStickGraph.getFont((this.GENERAL_FONT_SIZE * 1.5), this.options.baseFontName);
const textWidth = this.context.measureText(str).width;
this.fillRect(textX - textWidth - 5, textY - 15, textWidth + 10, 30, bgColor !== null && bgColor !== void 0 ? bgColor : this.colorInfo.whiteColor);
this.context.fillStyle = textColor;
this.context.fillText(str, textX - textWidth, textY + 5);
this.context.font = oldFont;
}
drawMoves() {
this.getIncreaseMsg = function (tradeBuy, tradeSell) {
function twoDecimalsOf(number) {
// @ts-ignore
return number.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0];
}
let from = (tradeBuy.cryptoValue);
let to = (tradeSell.cryptoValue);
let diffPercentage = twoDecimalsOf(100 * ((to - from) / (from)));
if (tradeSell.profitPercOverride) {
diffPercentage = twoDecimalsOf(tradeSell.profitPercOverride);
}
return /*twoDecimalsOf(from) + "-" + twoDecimalsOf(to) + " -> " + */ diffPercentage +
"% " + ((from > to) ? "down" : "up");
};
for (let i = 0; i < this.moves.length; i++) {
const TRIANGLE_SIZE = this.options.triangleSize;
let x = Math.min(Math.max(TRIANGLE_SIZE * 2, this.xToPixelCoords(this.moves[i].timestamp)), this.xPixelRange + TRIANGLE_SIZE * 2);
let y = Math.max(TRIANGLE_SIZE, this.yToPixelCoords(this.moves[i].cryptoValue));
if (this.moves[i].type === "buy") {
this.drawTriangleUp(x, y + TRIANGLE_SIZE, TRIANGLE_SIZE, this.colorInfo.whiteColor);
}
else {
this.drawTriangleDown(x, y - TRIANGLE_SIZE, TRIANGLE_SIZE, this.colorInfo.whiteColor);
}
if (i !== 0 && this.moves[i].type === "sell") {
let xSell = this.xToPixelCoords(this.moves[i].timestamp);
let ySell = this.yToPixelCoords(this.moves[i].cryptoValue);
let xBuy = this.xToPixelCoords(this.moves[i - 1].timestamp);
let yBuy = this.yToPixelCoords(this.moves[i - 1].cryptoValue);
this.context.setLineDash([20, 10]);
this.setLineWidth(2);
this.drawLine(xSell, ySell, xBuy, yBuy, this.colorInfo.growLineColor);
this.resetLineWidth();
this.context.setLineDash([]);
let leftIntersect = this.lineIntersect(xSell, ySell, xBuy, yBuy, this.leftAxis.x1, this.leftAxis.y1, this.leftAxis.x2, this.leftAxis.y2);
let rightIntersect = this.lineIntersect(xSell, ySell, xBuy, yBuy, this.rightAxis.x1, this.rightAxis.y1, this.rightAxis.x2, this.rightAxis.y2);
if (!!leftIntersect) {
if (typeof leftIntersect !== "boolean") {
this.drawRectangleWithText((xSell + leftIntersect.x) / 2, (ySell + leftIntersect.y) / 2, this.getIncreaseMsg(this.moves[i - 1], this.moves[i]));
}
}
else if (!!rightIntersect) {
if (typeof rightIntersect !== "boolean") {
this.drawRectangleWithText((xBuy + rightIntersect.x) / 2, (yBuy + rightIntersect.y) / 2, this.getIncreaseMsg(this.moves[i - 1], this.moves[i]));
}
}
else {
this.drawRectangleWithText((xBuy + xSell) / 2, (yBuy + ySell) / 2, this.getIncreaseMsg(this.moves[i - 1], this.moves[i]));
}
}
if (this.options.wantSideMarksMove) {
this.drawSideMarksMove(this.moves[i]);
}
}
}
drawSideMarksMove(m) {
const color = m.type === 'sell' ? this.colorInfo.redColor : this.colorInfo.greenColor;
const textColor = m.type === 'sell' ? this.colorInfo.blackColor : this.colorInfo.blackColor;
// draw a rectangle with the price on the right side
const str = this.roundPriceValue(m.cryptoValue).toString();
this.drawSmallRectangleWithText(this.width, this.yToPixelCoords(m.cryptoValue), str, color, textColor);
}
drawDrops() {
this.drops.forEach(drop => {
let wl = 10;
let x1 = this.xToPixelCoords(drop.fromTime);
let x2 = this.xToPixelCoords(drop.toTime);
let y1 = this.yToPixelCoords(drop.fromCrypto);
let y2 = this.yToPixelCoords(drop.toCrypto);
this.setLineWidth(2);
this.drawLine(x2 - wl, y2, x2 + wl, y2, this.colorInfo.redColor);
this.resetLineWidth();
});
}
drawLines(points, color) {
for (let i = 0; i < points.length - 1; i++) {
this.drawLine(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, color);
}
}
drawOverAreas(points) {
for (let i = 0; i < points.length - 1; i++) {
if (points[i].y > 70) {
// should sell (overbought)
this.fillRect(points[i].x - Math.floor(this.candleWidth / 2), 0, this.candleWidth, this.height, this.colorInfo.redAreaColor);
}
else if (points[i].y < 30) {
// should buy (oversell)
this.fillRect(points[i].x - Math.floor(this.candleWidth / 2), 0, this.candleWidth, this.height, this.colorInfo.greenAreaColor);
}
}
}
drawCandlesAndValuatePoints(i, points) {
var _a, _b;
let isRising = (this.selectedCandleStick[i].close > this.selectedCandleStick[i].open);
let color = isRising ? this.colorInfo.greenColor : this.colorInfo.redColor;
if (i === this.hoveredCandlestickID) {
if (isRising)
color = this.colorInfo.greenHoverColor;
else
color = this.colorInfo.redHoverColor;
}
let xOnGraph = this.xToPixelCoords(this.selectedCandleStick[i].timestamp);
let yTopOnGraph = this.yToPixelCoords(this.selectedCandleStick[i].open);
let yDownOnGraph = this.yToPixelCoords(this.selectedCandleStick[i].close);
let height = yDownOnGraph - yTopOnGraph;
points.push({ x: xOnGraph, y: yTopOnGraph + height });
let yLineLow = this.yToPixelCoords(this.selectedCandleStick[i].low);
let yLineHigh = this.yToPixelCoords(this.selectedCandleStick[i].high);
// draw the candle and the wick
if (this.options.wantCandles) {
if (isRising) {
this.setLineWidth((_a = this.options.lineWidthGreen) !== null && _a !== void 0 ? _a : this.options.lineWidth);
this.drawRect(xOnGraph - Math.floor(this.candleWidth / 2), yTopOnGraph, this.candleWidth, height, color);
this.drawLine(xOnGraph, yDownOnGraph, xOnGraph, yLineHigh, color);
this.drawLine(xOnGraph, yTopOnGraph, xOnGraph, yLineLow, color);
// fill rect here as well
this.fillRect(xOnGraph - Math.floor(this.candleWidth / 2), yTopOnGraph, this.candleWidth, height, color);
this.resetLineWidth();
}
else {
this.setLineWidth((_b = this.options.lineWidthRed) !== null && _b !== void 0 ? _b : this.options.lineWidth);
this.drawRect(xOnGraph - Math.floor(this.candleWidth / 2), yTopOnGraph, this.candleWidth, height, color);
this.drawLine(xOnGraph, yTopOnGraph, xOnGraph, yLineHigh, color);
this.drawLine(xOnGraph, yDownOnGraph, xOnGraph, yLineLow, color);
this.resetLineWidth();
}
}
}
drawPriceLine() {
this.context.setLineDash([5, 5]);
this.drawLine(0, this.mousePosition.y, this.width, this.mousePosition.y, this.colorInfo.mouseHoverBackgroundColor);
this.context.setLineDash([]);
const str = this.roundPriceValue(this.yMouseHover);
const textWidth = this.context.measureText(String(str)).width;
this.fillRect(this.width - 70, this.mousePosition.y - 10, 70, 20, this.colorInfo.whiteColor);
this.context.fillStyle = this.colorInfo.blackColor;
this.context.fillText(String(str), this.width - textWidth - 5, this.mousePosition.y + 5);
return { str, textWidth };
}
drawTimeLine(str, textWidth) {
this.context.setLineDash([5, 5]);
this.drawLine(this.mousePosition.x, 0, this.mousePosition.x, this.height, this.colorInfo.mouseHoverBackgroundColor);
this.context.setLineDash([]);
str = this.formatDate(new Date(this.xMouseHover));
textWidth = this.context.measureText(str).width;
this.fillRect(this.mousePosition.x - textWidth / 2 - 5, this.height - 20, textWidth + 10, 20, this.colorInfo.whiteColor);
this.context.fillStyle = this.colorInfo.gridTextColor;
this.context.fillText(str, this.mousePosition.x - textWidth / 2, this.height - 5);
}
drawInfoLabel() {
let yPos = this.mousePosition.y - 95;
if (yPos < 0)
yPos = this.mousePosition.y + 15;
this.fillRect(this.mousePosition.x + 15, yPos, 100, 80, this.colorInfo.whiteColor);
const color = (this.selectedCandleStick[this.hoveredCandlestickID].close > this.selectedCandleStick[this.hoveredCandlestickID].open) ? this.colorInfo.greenColor : this.colorInfo.redColor;
this.fillRect(this.mousePosition.x + 15, yPos, 10, 80, color);
this.context.lineWidth = 2;
this.drawRect(this.mousePosition.x + 15, yPos, 100, 80, color);
this.context.lineWidth = 1;
this.context.fillStyle = this.colorInfo.mouseHoverTextColor;
this.context.fillText("O: " + this.selectedCandleStick[this.hoveredCandlestickID].open, this.mousePosition.x + 30, yPos + 15);
this.context.fillText("C: " + this.selectedCandleStick[this.hoveredCandlestickID].close, this.mousePosition.x + 30, yPos + 35);
this.context.fillText("H: " + this.selectedCandleStick[this.hoveredCandlestickID].high, this.mousePosition.x + 30, yPos + 55);
this.context.fillText("L: " + this.selectedCandleStick[this.hoveredCandlestickID].low, this.mousePosition.x + 30, yPos + 75);
}
addTrade(move) {
const goalTs = move.timestamp;
const closestOnTs = this.candlesticks.reduce((prev, curr) => {
return (Math.abs(curr.timestamp - goalTs) < Math.abs(prev.timestamp - goalTs) ? curr : prev);
});
const cryptoValue = closestOnTs.close;
this.moves.push({
timestamp: move.timestamp,
type: move.type,
cryptoValue: move.cryptoValue ? move.cryptoValue : cryptoValue,
currencyType: move.currencyType,
profitPercOverride: move.profitPercOverride,
baseType: move.baseType
});
return this;
}
concatCandleSticks(canvasCandleSticks, adaptZoom = false) {
canvasCandleSticks = canvasCandleSticks.concat(this.candlesticks);
const actualZoom = this.options.zoom;
this.candlesticks = [];
this.selectedCandleStick = [];
canvasCandleSticks.forEach((c) => {
this.addCandlestick(c, adaptZoom);
});
if (!adaptZoom) {
this.options.zoom = actualZoom;
this.selectedCandleStick = this.candlesticks.slice(Math.max(0, this.options.zoom));
}
/*
this.candlesticks.sort((a,b)=>{
return a.timestamp - b.timestamp;
})
*/
return this;
}
fillPolygon(points, greenColor) {
this.context.beginPath();
this.context.fillStyle = greenColor;
this.context.moveTo(points[0].x, points[0].y);
for (let i = 0; i < points.length; i++)
this.context.lineTo(points[i].x, points[i].y);
this.context.lineTo(points[0].x, points[0].y);
this.context.closePath();
this.context.fill();
}
// MATH UTILS
lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
//console.log("line interpolation : " + x3 + ','+ y3 + '-'+ x4 + ','+ y4);
// Check if none of the lines are of length 0
if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {
return false;
}
let denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
// Lines are parallel
if (denominator === 0) {
return false;
}
let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;
// is the intersection along the segments
if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
return false;
}
// Return object with the x and y coordinates of the intersection
let x = x1 + ua * (x2 - x1);
let y = y1 + ua * (y2 - y1);
return { x, y };
}
cleanCandleSticks() {
this.selectedCandleStick = [];
}
setLineWidth(number) {
this.context.lineWidth = number;
}
resetLineWidth() {
this.setLineWidth(1);
}
calculateSma(period = 26) {
let values = this.candlesticks;
let valuesY = this.candlesticks.map((c) => c.close);
const indicators = technicalindicators_1.SMA.calculate({ period: period, values: valuesY });
const newCandleSticks = values.map((el, i) => {
return {
...el,
close: (i > (valuesY.length - indicators.length)) ? indicators[i - period] : el.close
};
});
return newCandleSticks.map((c) => {
let xOnGraph = this.xToPixelCoords(c.timestamp);
let yTopOnGraph = this.yToPixelCoords(c.open);
let yDownOnGraph = this.yToPixelCoords(c.close);
let height = yDownOnGraph - yTopOnGraph;
return { x: xOnGraph, y: yTopOnGraph + height };
});
}
calculateEma(period = 26) {
let values = this.candlesticks;
let valuesY = this.candlesticks.map((c) => c.close);
const indicators = technicalindicators_1.EMA.calculate({ period: period, values: valuesY });
const newCandleSticks = values.map((el, i) => {
return {
...el,
close: (i > (valuesY.length - indicators.length)) ? indicators[i - period] : el.close
};
});
return newCandleSticks.map((c) => {
let xOnGraph = this.xToPixelCoords(c.timestamp);
let yTopOnGraph = this.yToPixelCoords(c.open);
let yDownOnGraph = this.yToPixelCoords(c.close);
let height = yDownOnGraph - yTopOnGraph;
return { x: xOnGraph, y: yTopOnGraph + height };
});
}
//FIXME: trix is too low valued to be displayed
calculateTrix() {
let period = 30;
let values = this.candlesticks;
let valuesY = this.candlesticks.map((c) => c.close);
const indicators = technicalindicators_1.TRIX.calculate({ period: period, values: valuesY });
const newCandleSticks = values.map((el, i) => {
return {
...el,
close: (i > (valuesY.length - indicators.length)) ? indicators[i - period] : el.close
};
});
return newCandleSticks.map((c) => {
let xOnGraph = this.xToPixelCoords(c.timestamp);
let yTopOnGraph = this.yToPixelCoords(c.open);
let yDownOnGraph = this.yToPixelCoords(c.close);
let height = yDownOnGraph - yTopOnGraph;
return { x: xOnGraph, y: yTopOnGraph + height };
});
}
calculateRsi() {
let period = 8;
let values = this.candlesticks;
let valuesY = this.candlesticks.map((c) => c.close);
const indicators = technicalindicators_1.RSI.calculate({ period: period, values: valuesY });
const newCandleSticks = values.map((el, i) => {
return {
...el,
close: (i > (valuesY.length - indicators.length)) ? indicators[i - period] : el.close
};
});
return newCandleSticks.map((c) => {
let xOnGraph = this.xToPixelCoords(c.timestamp);
return { x: xOnGraph, y: c.close };
});
}
drawMACD(emaPoints1, emaPoints2) {
this.fillPolygon(emaPoints1.concat(emaPoints2.reverse()), this.colorInfo.whiteColorMoreTrasparent);
emaPoints2.reverse();
for (let i = 0; i < Math.min(emaPoints1.length, emaPoints2.length); i++) {
const h = (emaPoints1[i].y - emaPoints2[i].y);
const colorMACD = h > 0 ? this.colorInfo.greenAreaColorIntens : this.colorInfo.redAreaColorIntes;
this.fillRect(emaPoints1[i].x, emaPoints1[i].y, this.candleWidth, -h, colorMACD);
}
}
calculateBollingerBands(period) {
let values = this.candlesticks;
let valuesY = this.candlesticks.map((c) => c.close);
const indicators = technicalindicators_1.BollingerBands.calculate({ period: period, values: valuesY, stdDev: 2 });
const newCandleSticks = values.map((el, i) => {
return {
...el,
open: (i > (valuesY.length - indicators.length)) ? indicators[i - period].upper : el.open,
close: (i > (valuesY.length - indicators.length)) ? indicators[i - period].lower : el.close
};
});
return newCandleSticks.map((c) => {
let xOnGraph = this.xToPixelCoords(c.timestamp);
return {
x: xOnGraph,
y: c.open,
y2: c.close
};
});
}
drawBollingRangeArea(bollingerBandsRanges, color) {
this.drawLines(bollingerBandsRanges.map((el) => {
let yTopOnGraph = this.yToPixelCoords(el.y);
return {
x: el.x,
y: yTopOnGraph
};
}), color);
this.drawLines(bollingerBandsRanges.map((el) => {
let yTopOnGraph = this.yToPixelCoords(el.y2);
return {
x: el.x,
y: yTopOnGraph
};
}), color);
const polygonPoints = bollingerBandsRanges
.map((el) => {
let yTopOnGraph = this.yToPixelCoords(el.y);
return {
x: el.x,
y: yTopOnGraph
};
})
.concat(bollingerBandsRanges
.map((el) => {
let yTopOnGraph = this.yToPixelCoords(el.y2);
return {
x: el.x,
y: yTopOnGraph
};
}).reverse());
this.fillPolygon(polygonPoints, color);
}
drawStatsLabel() {
var _a;
const preFont = this.context.font;
const preColor = this.context.fillStyle;
const paddingLeft = 80;
const paddingTop = 60;
const textSize = (40);
this.context.font = CandleStickGraph.getFont(textSize, this.options.baseFontName);
this.context.fillStyle = this.colorInfo.whiteColor;
const baseType = (_a = this.moves[0].baseType) !== null && _a !== void 0 ? _a : 'USD';
this.context.fillText(`${this.moves[0].currencyType}/${baseType}`, 10 + paddingLeft, textSize);
this.context.fillStyle = this.colorInfo.gridTextColor;
this.context.font = CandleStickGraph.getFont(textSize / 2, this.options.baseFontName);
const day = new Date(this.candlesticks[Math.floor(this.candlesticks.length / 2)].timestamp);
this.context.fillText(this.formatDateNoHours(day), 10 + paddingLeft, textSize + textSize / 2);
this.context.fillStyle = preColor;
this.context.font = preFont;
}
drawLogo() {
var _a;
const SVGIcons = {
"logo_only_wave_black.svg": {
draw: (ctx) => {
ctx.save();
ctx.strokeStyle = "rgba(0,0,0,0)";
ctx.miterLimit = 4;
ctx.font = "15px ''";
ctx.font = " 15px ''";
ctx.translate(0.5540540540540562, 0);
ctx.scale(0.5675675675675675, 0.5675675675675675);
ctx.save();
ctx.fillStyle = this.colorInfo.logoColor;
ctx.strokeStyle = "rgba(0,0,0,0)";
ctx.font = " 15px ''";
ctx.beginPath();
ctx.moveTo(3.468657, 112);
ctx.bezierCurveTo(4.020682, 110.817299, 4.825206, 109.280014, 6.094991, 108.505936);
ctx.bezierCurveTo(21.296396, 99.238838, 34.968487, 88.210617, 44.995117, 73.342888);
ctx.bezierCurveTo(50.24588, 65.556938, 53.777756, 56.854958, 53.971645, 47.214466);
ctx.bezierCurveTo(54.098431, 40.910656, 49.403709, 36.394333, 43.021671, 35.966431);
ctx.bezierCurveTo(32.913063, 35.288681, 23.390165, 37.276749, 13.563206, 42.203903);
ctx.bezierCurveTo(16.78842, 31.64435, 20.66403, 22.60828, 28.800495, 15.462938);
ctx.bezierCurveTo(35.724667, 9.382215, 43.249119, 5.420638, 52.264214, 3.928263);
ctx.bezierCurveTo(61.730152, 2.361255, 71.043755, 2.495655, 80.439186, 4.763796);
ctx.bezierCurveTo(95.638657, 8.433086, 108.042816, 16.535461, 118.391975, 27.9454);
ctx.bezierCurveTo(127.008179, 37.444775, 132.411224, 48.666054, 134.99324, 61.223808);
ctx.bezierCurveTo(138.522568, 78.388939, 135.801132, 94.988892, 130.683777, 111.666382);
ctx.bezierCurveTo(88.645775, 112, 46.291542, 112, 3.468657, 112);
ctx.moveTo(35.521973, 17.985134);
ctx.bezierCurveTo(31.913422, 22.007553, 28.304873, 26.029974, 24.611584, 30.146849);
ctx.bezierCurveTo(31.886415, 29.730671, 38.266277, 28.570263, 44.471703, 29.181328);
ctx.bezierCurveTo(56.280746, 30.344191, 61.625313, 38.039322, 60.023434, 49.94173);
ctx.bezierCurveTo(59.939613, 50.564533, 60.156376, 51.227787, 60.445763, 53.655109);
ctx.bezierCurveTo(63.584568, 50.26371, 65.973213, 47.883102, 68.131683, 45.309452);
ctx.bezierCurveTo(72.790947, 39.753975, 76.516441, 40.059505, 80.033485, 46.463547);
ctx.bezierCurveTo(81.581734, 49.282703, 82.759308, 52.355904, 84.644165, 54.91711);
ctx.bezierCurveTo(85.506744, 56.089203, 87.645317, 56.620827, 89.262398, 56.755348);
ctx.bezierCurveTo(89.741348, 56.795193, 90.919563, 54.485046, 90.90345, 53.263275);
ctx.bezierCurveTo(90.858521, 49.856037, 89.930351, 46.42281, 90.183434, 43.06255);
ctx.bezierCurveTo(90.351166, 40.835518, 91.389603, 37.979366, 93.041145, 36.719131);
ctx.bezierCurveTo(95.616463, 34.753994, 98.297409, 36.349041, 99.967766, 38.931087);
ctx.bezierCurveTo(102.061996, 42.168354, 103.658569, 45.787243, 106.09317, 48.724934);
ctx.bezierCurveTo(107.897293, 50.901863, 110.776886, 53.75631, 113.032768, 53.634323);
ctx.bezierCurveTo(116.71669, 53.435123, 117.701836, 49.508595, 118.018204, 45.958389);
ctx.bezierCurveTo(118.623749, 39.16328, 115.103226, 33.990963, 110.868752, 29.535463);
ctx.bezierCurveTo(102.017853, 20.222555, 91.340195, 13.894811, 78.653564, 10.890461);
ctx.bezierCurveTo(63.46563, 7.293773, 49.090187, 7.807244, 35.521973, 17.985134);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
}
}
};
for (const name in SVGIcons) {
(_a = SVGIcons[name]) === null || _a === void 0 ? void 0 : _a.draw(this.context);
}
}
}
exports.CandleStickGraph = CandleStickGraph;
class MoveTrade {
constructor() {
this.timestamp = 0;
this.type = '';
this.cryptoValue = 0;
this.currencyType = '';
}
}
class Drop {
constructor() {
this.fromTime = 0;
this.toTime = 0;
this.fromCrypto = 0;
this.toCrypto = 0;
this.diff = 0;
}
}