From 39e09f236491ef97b2c08202dd5668617427cf8f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 26 Sep 2019 15:51:34 +0200 Subject: [PATCH] Performance Redesign --- Candles.js | 253 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 158 insertions(+), 95 deletions(-) diff --git a/Candles.js b/Candles.js index 4109cffad..7387b2d1f 100644 --- a/Candles.js +++ b/Candles.js @@ -564,157 +564,216 @@ if (candles.length > 0) { - /* Now we calculate and plot the candles */ - + /* Now we calculate all the points. */ for (let i = 0; i < candles.length; i++) { candle = candles[i]; - let candlePoint1 = { + candle.candlePoint1 = { x: candle.begin + timePeriod / 7 * 1.5, y: candle.open }; - let candlePoint2 = { + candle.candlePoint2 = { x: candle.begin + timePeriod / 7 * 5.5, y: candle.open }; - let candlePoint3 = { + candle.candlePoint3 = { x: candle.begin + timePeriod / 7 * 5.5, y: candle.close }; - let candlePoint4 = { + candle.candlePoint4 = { x: candle.begin + timePeriod / 7 * 1.5, y: candle.close }; - candlePoint1 = timeLineCoordinateSystem.transformThisPoint(candlePoint1); - candlePoint2 = timeLineCoordinateSystem.transformThisPoint(candlePoint2); - candlePoint3 = timeLineCoordinateSystem.transformThisPoint(candlePoint3); - candlePoint4 = timeLineCoordinateSystem.transformThisPoint(candlePoint4); + candle.candlePoint1 = timeLineCoordinateSystem.transformThisPoint(candle.candlePoint1); + candle.candlePoint2 = timeLineCoordinateSystem.transformThisPoint(candle.candlePoint2); + candle.candlePoint3 = timeLineCoordinateSystem.transformThisPoint(candle.candlePoint3); + candle.candlePoint4 = timeLineCoordinateSystem.transformThisPoint(candle.candlePoint4); - candlePoint1 = transformThisPoint(candlePoint1, thisObject.container); - candlePoint2 = transformThisPoint(candlePoint2, thisObject.container); - candlePoint3 = transformThisPoint(candlePoint3, thisObject.container); - candlePoint4 = transformThisPoint(candlePoint4, thisObject.container); + candle.candlePoint1 = transformThisPoint(candle.candlePoint1, thisObject.container); + candle.candlePoint2 = transformThisPoint(candle.candlePoint2, thisObject.container); + candle.candlePoint3 = transformThisPoint(candle.candlePoint3, thisObject.container); + candle.candlePoint4 = transformThisPoint(candle.candlePoint4, thisObject.container); - if (candlePoint2.x < viewPort.visibleArea.bottomLeft.x || candlePoint1.x > viewPort.visibleArea.bottomRight.x) { - continue; + candle.candlePoint1 = viewPort.fitIntoVisibleArea(candle.candlePoint1); + candle.candlePoint2 = viewPort.fitIntoVisibleArea(candle.candlePoint2); + candle.candlePoint3 = viewPort.fitIntoVisibleArea(candle.candlePoint3); + candle.candlePoint4 = viewPort.fitIntoVisibleArea(candle.candlePoint4); + + candle.stickPoint1 = { + x: candle.begin + timePeriod / 7 * 3.2, + y: candle.max + }; + + candle.stickPoint2 = { + x: candle.begin + timePeriod / 7 * 3.8, + y: candle.max + }; + + candle.stickPoint3 = { + x: candle.begin + timePeriod / 7 * 3.8, + y: candle.min + }; + + candle.stickPoint4 = { + x: candle.begin + timePeriod / 7 * 3.2, + y: candle.min + }; + + candle.stickPoint1 = timeLineCoordinateSystem.transformThisPoint(candle.stickPoint1); + candle.stickPoint2 = timeLineCoordinateSystem.transformThisPoint(candle.stickPoint2); + candle.stickPoint3 = timeLineCoordinateSystem.transformThisPoint(candle.stickPoint3); + candle.stickPoint4 = timeLineCoordinateSystem.transformThisPoint(candle.stickPoint4); + + candle.stickPoint1 = transformThisPoint(candle.stickPoint1, thisObject.container); + candle.stickPoint2 = transformThisPoint(candle.stickPoint2, thisObject.container); + candle.stickPoint3 = transformThisPoint(candle.stickPoint3, thisObject.container); + candle.stickPoint4 = transformThisPoint(candle.stickPoint4, thisObject.container); + + candle.stickPoint1 = viewPort.fitIntoVisibleArea(candle.stickPoint1); + candle.stickPoint2 = viewPort.fitIntoVisibleArea(candle.stickPoint2); + candle.stickPoint3 = viewPort.fitIntoVisibleArea(candle.stickPoint3); + candle.stickPoint4 = viewPort.fitIntoVisibleArea(candle.stickPoint4); + + } + + /* On screen candles */ + let onScreenCandles = [] + let mouseCandle + + for (let i = 0; i < candles.length; i++) { + + candle = candles[i]; + + if (candle.candlePoint2.x < viewPort.visibleArea.bottomLeft.x || candle.candlePoint1.x > viewPort.visibleArea.bottomRight.x) { + continue } - candlePoint1 = viewPort.fitIntoVisibleArea(candlePoint1); - candlePoint2 = viewPort.fitIntoVisibleArea(candlePoint2); - candlePoint3 = viewPort.fitIntoVisibleArea(candlePoint3); - candlePoint4 = viewPort.fitIntoVisibleArea(candlePoint4); + if (onScreenCandles.length < 5000) { + onScreenCandles.push(candle) + } - let stickPoint1 = { - x: candle.begin + timePeriod / 7 * 3.2, - y: candle.max - }; + if (userPositionDate >= candle.begin && userPositionDate <= candle.end) { + mouseCandle = candle + } + } - let stickPoint2 = { - x: candle.begin + timePeriod / 7 * 3.8, - y: candle.max - }; + /* We draw the sticks */ + browserCanvasContext.beginPath(); - let stickPoint3 = { - x: candle.begin + timePeriod / 7 * 3.8, - y: candle.min - }; + for (let i = 0; i < onScreenCandles.length; i++) { - let stickPoint4 = { - x: candle.begin + timePeriod / 7 * 3.2, - y: candle.min - }; + candle = onScreenCandles[i]; - stickPoint1 = timeLineCoordinateSystem.transformThisPoint(stickPoint1); - stickPoint2 = timeLineCoordinateSystem.transformThisPoint(stickPoint2); - stickPoint3 = timeLineCoordinateSystem.transformThisPoint(stickPoint3); - stickPoint4 = timeLineCoordinateSystem.transformThisPoint(stickPoint4); + browserCanvasContext.moveTo(candle.stickPoint1.x, candle.stickPoint1.y); + browserCanvasContext.lineTo(candle.stickPoint2.x, candle.stickPoint2.y); + browserCanvasContext.lineTo(candle.stickPoint3.x, candle.stickPoint3.y); + browserCanvasContext.lineTo(candle.stickPoint4.x, candle.stickPoint4.y); + } - stickPoint1 = transformThisPoint(stickPoint1, thisObject.container); - stickPoint2 = transformThisPoint(stickPoint2, thisObject.container); - stickPoint3 = transformThisPoint(stickPoint3, thisObject.container); - stickPoint4 = transformThisPoint(stickPoint4, thisObject.container); + browserCanvasContext.closePath(); + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; + browserCanvasContext.fill(); - stickPoint1 = viewPort.fitIntoVisibleArea(stickPoint1); - stickPoint2 = viewPort.fitIntoVisibleArea(stickPoint2); - stickPoint3 = viewPort.fitIntoVisibleArea(stickPoint3); - stickPoint4 = viewPort.fitIntoVisibleArea(stickPoint4); + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT + ', 1)'; + browserCanvasContext.lineWidth = 1; + browserCanvasContext.setLineDash([0, 0]) + browserCanvasContext.stroke(); + /* The stick at the mouse candle */ + if (mouseCandle) { browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(stickPoint1.x, stickPoint1.y); - browserCanvasContext.lineTo(stickPoint2.x, stickPoint2.y); - browserCanvasContext.lineTo(stickPoint3.x, stickPoint3.y); - browserCanvasContext.lineTo(stickPoint4.x, stickPoint4.y); + candle = mouseCandle + + browserCanvasContext.moveTo(candle.stickPoint1.x, candle.stickPoint1.y); + browserCanvasContext.lineTo(candle.stickPoint2.x, candle.stickPoint2.y); + browserCanvasContext.lineTo(candle.stickPoint3.x, candle.stickPoint3.y); + browserCanvasContext.lineTo(candle.stickPoint4.x, candle.stickPoint4.y); browserCanvasContext.closePath(); browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; browserCanvasContext.fill(); - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT + ', 1)'; - - if (userPositionDate >= candle.begin && userPositionDate <= candle.end) { - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'; // Current candle accroding to time - } - + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'; browserCanvasContext.lineWidth = 1; browserCanvasContext.setLineDash([0, 0]) browserCanvasContext.stroke(); + } + + + /* We draw the candles. */ + drawCandlesByDirection('up') + drawCandlesByDirection('down') + drawCandlesByDirection('side') + + function drawCandlesByDirection(direction) { browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(candlePoint1.x, candlePoint1.y); - browserCanvasContext.lineTo(candlePoint2.x, candlePoint2.y); - browserCanvasContext.lineTo(candlePoint3.x, candlePoint3.y); - browserCanvasContext.lineTo(candlePoint4.x, candlePoint4.y); + for (let i = 0; i < onScreenCandles.length; i++) { + + candle = onScreenCandles[i]; + + if (candle.direction !== direction) { continue } + + browserCanvasContext.moveTo(candle.candlePoint1.x, candle.candlePoint1.y); + browserCanvasContext.lineTo(candle.candlePoint2.x, candle.candlePoint2.y); + browserCanvasContext.lineTo(candle.candlePoint3.x, candle.candlePoint3.y); + browserCanvasContext.lineTo(candle.candlePoint4.x, candle.candlePoint4.y); + } browserCanvasContext.closePath(); - if (candle.direction === 'up') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'; } - if (candle.direction === 'down') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', 1)'; } - if (candle.direction === 'side') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; } + if (direction === 'up') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'; } + if (direction === 'down') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', 1)'; } + if (direction === 'side') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; } - if (candle.direction === 'up') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'; } - if (candle.direction === 'down') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'; } - if (candle.direction === 'side') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; } + if (direction === 'up') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'; } + if (direction === 'down') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'; } + if (direction === 'side') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; } - if (userPositionDate >= candle.begin && userPositionDate <= candle.end) { - - /* highlight the current candle */ - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'; // Current candle accroding to time - - let currentCandle = { - bodyWidth: candlePoint2.x - candlePoint1.x, - bodyHeight: candlePoint3.y - candlePoint2.y, - stickHeight: stickPoint4.y - stickPoint2.y, - stickWidth: stickPoint2.x - stickPoint1.x, - stickStart: candlePoint2.y - stickPoint2.y, - period: timePeriod, - innerCandle: candle - }; - thisObject.container.eventHandler.raiseEvent("Current Candle Changed", currentCandle); - } - - if ( - candlePoint1.x < viewPort.visibleArea.topLeft.x + 50 - || - candlePoint1.x > viewPort.visibleArea.bottomRight.x - 50 - ) { - // we leave this candles without fill. - } else { - browserCanvasContext.fill(); - } + browserCanvasContext.fill(); browserCanvasContext.lineWidth = 1; browserCanvasContext.setLineDash([0, 0]) browserCanvasContext.stroke(); + } + /* Draw mouse candel and Raise Event. */ + if (mouseCandle) { + /* highlight the current candle */ + + browserCanvasContext.beginPath(); + + candle = mouseCandle + + browserCanvasContext.moveTo(candle.candlePoint1.x, candle.candlePoint1.y); + browserCanvasContext.lineTo(candle.candlePoint2.x, candle.candlePoint2.y); + browserCanvasContext.lineTo(candle.candlePoint3.x, candle.candlePoint3.y); + browserCanvasContext.lineTo(candle.candlePoint4.x, candle.candlePoint4.y); + + browserCanvasContext.closePath(); + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'; // Current candle accroding to time + + browserCanvasContext.fill(); + + let currentCandle = { + bodyWidth: candle.candlePoint2.x - candle.candlePoint1.x, + bodyHeight: candle.candlePoint3.y - candle.candlePoint2.y, + stickHeight: candle.stickPoint4.y - candle.stickPoint2.y, + stickWidth: candle.stickPoint2.x - candle.stickPoint1.x, + stickStart: candle.candlePoint2.y - candle.stickPoint2.y, + period: timePeriod, + innerCandle: candle + }; + thisObject.container.eventHandler.raiseEvent("Current Candle Changed", currentCandle); } } @@ -724,6 +783,7 @@ } } + function onZoomChanged(event) { try { @@ -765,3 +825,6 @@ } + + +