canvas-trading
Version:
Interactive HTML5 Canvas Trading Chart
132 lines (131 loc) • 6.7 kB
JavaScript
import { canvasSettings } from '../config';
import { Candle2D } from './CandleClasses';
var CandleCanvas = /** @class */ (function () {
function CandleCanvas(width, height, candlesShown, candleShift, candlesToDraw, lastCandle) {
this.candlesShown = candlesShown;
this.candleShift = candleShift;
this.candlesToDraw = candlesToDraw;
this.standardDeviationArray = [];
if (candlesToDraw.length < canvasSettings.minCandlesShown)
throw new Error('Not enough candles to draw');
this.width = width * canvasSettings.scaleForQuality;
this.height = height * canvasSettings.scaleForQuality;
this.lastCandle = lastCandle;
if (lastCandle !== undefined)
candlesToDraw[candlesToDraw.length - 9] = lastCandle;
var zoomedAndShifted = candlesToDraw.slice(candlesToDraw.length - this.candlesShown - this.candleShift, candlesToDraw.length - this.candleShift);
var minMax = this.minMaxCalc(zoomedAndShifted);
this.minMax = minMax;
var gapAndWidth = this.getGapAndCandleWidth();
this.gap = gapAndWidth.gap;
this.candleWidth = gapAndWidth.candleWidth;
this.candleArray = this.getDrawingArray(zoomedAndShifted);
this.alligatorArray = this.getAlligatorArray(this.candleArray);
this.aoArray = this.getAOArray(zoomedAndShifted, minMax);
this.standardDeviationArray = this.getStandardDeviationArray(zoomedAndShifted);
}
CandleCanvas.prototype.getGapAndCandleWidth = function () {
var gap = this.width / this.candlesShown / 5;
var candleWidth = (this.width - (this.candlesShown - 1) * gap) / this.candlesShown;
return { gap: gap, candleWidth: candleWidth };
};
CandleCanvas.prototype.minMaxCalc = function (candles) {
// not if value is 0
var min = Math.min.apply(Math, candles.map(function (candle) { return (candle.low !== 0 ? candle.low : Infinity); }));
var max = Math.max.apply(Math, candles.map(function (candle) { return (candle.high !== 0 ? candle.high : -Infinity); }));
var aoMin = Math.min.apply(Math, candles.map(function (candle) {
return candle.indicators.ao.value !== 0 ? candle.indicators.ao.value : Infinity;
}));
var aoMax = Math.max.apply(Math, candles.map(function (candle) {
return candle.indicators.ao.value !== 0 ? candle.indicators.ao.value : -Infinity;
}));
return {
min: min,
max: max,
aoMin: aoMin,
aoMax: aoMax,
};
};
CandleCanvas.prototype.getDrawingArray = function (slicedArray) {
var _this = this;
var indexInTheOriginalArray = this.candlesToDraw.length - slicedArray.length;
var candles2D = slicedArray.map(function (candle, i) {
return new Candle2D(candle.open, candle.close, candle.low, candle.high, candle.indicators, _this, candle.trades ? candle.trades : [], i * (_this.candleWidth + _this.gap), i + indexInTheOriginalArray);
});
return candles2D;
};
CandleCanvas.prototype.getAlligatorArray = function (candles) {
var _this = this;
var jaw = [];
var teeth = [];
var lips = [];
candles.forEach(function (candle, index) {
var x = index * (_this.candleWidth + _this.gap) + _this.candleWidth / 2;
if (candle.alligator.jaw !== 0)
jaw.push({ x: x, y: candle.alligator.jaw });
if (candle.alligator.teeth !== 0)
teeth.push({ x: x, y: candle.alligator.teeth });
if (candle.alligator.lips !== 0)
lips.push({ x: x, y: candle.alligator.lips });
});
return { jaw: jaw, teeth: teeth, lips: lips };
};
CandleCanvas.prototype.getAOArray = function (candles, minMax) {
var _this = this;
var aoArray = [];
var min = minMax.aoMin * 1.1;
var max = minMax.aoMax * 1.1;
var allHeight = this.height / 5;
var maxPercentOfMin = minMax.aoMax / (Math.abs(min) + max);
var newMidLine = allHeight * maxPercentOfMin;
candles.forEach(function (candle, index) {
var newValue = candle.indicators.ao.value > 0
? candle.indicators.ao.value / max
: candle.indicators.ao.value / min;
var aboveLine = candle.indicators.ao.value > 0;
aoArray.push({
x: index * (_this.candleWidth + _this.gap),
y: aboveLine ? newMidLine - newValue * newMidLine : newMidLine,
vertexValue: candle.indicators.ao.vertexValue,
height: aboveLine ? newValue * newMidLine : newValue * (allHeight - newMidLine),
});
});
return aoArray;
};
CandleCanvas.prototype.getStandardDeviationArray = function (candles) {
var _this = this;
var stdevArray = [];
var stdev = candles.map(function (candle) { return candle.indicators.stdev; });
// ensure no 0 are in the array
var stdevFiltered = stdev.filter(function (value) { return value !== 0; });
var stdevRange = Math.max.apply(Math, stdevFiltered) - Math.min.apply(Math, stdevFiltered);
var max = Math.max.apply(Math, stdevFiltered) + stdevRange * 0.1;
var min = Math.min.apply(Math, stdevFiltered) - stdevRange * 0.1;
var allHeight = this.height / 5;
candles.forEach(function (candle, index) {
if (candle.indicators.stdev === 0)
return;
var newValue = (candle.indicators.stdev - min) / (max - min);
stdevArray.push({
x: index * (_this.candleWidth + _this.gap),
y: allHeight - newValue * allHeight,
});
});
return stdevArray;
};
CandleCanvas.prototype.getDisplayedPrice = function (y) {
var minMaxRange = this.minMax.max - this.minMax.min;
var gapSpace = this.candleWidth * 4.5;
// % that both gaps take in relation to useful space on the canvas
// value that is taken by gaps (in relation to minMaxRange)
var gapInPrice = minMaxRange * (gapSpace / (this.height - gapSpace * 2));
// imagine that our minMax takes all the Y space to calculate the price
// imagine value that is exactly on the top edge on the canvas - correct % multiplied by newMinMaxRange
var price = this.minMax.max +
gapInPrice -
(minMaxRange + gapInPrice * 2) * (y / (this.height / canvasSettings.scaleForQuality));
return Math.round(price * 100000) / 100000;
};
return CandleCanvas;
}());
export { CandleCanvas };