From 4afcf7acd29ead4b14b35597ccb23c31deab0b28 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 11:45:23 +0200 Subject: [PATCH] Time Period Scale Added --- Scales/TimePeriodScale.js | 216 ++++++++++++++++++++++++++++++++++++++ TimelineChart.js | 18 +++- 2 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 Scales/TimePeriodScale.js diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js new file mode 100644 index 000000000..fe76982fb --- /dev/null +++ b/Scales/TimePeriodScale.js @@ -0,0 +1,216 @@ +function newTimePeriodScale () { + const MODULE_NAME = 'Time Period Scale' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize, + timePeriod: undefined + } + + const TIME_PERIOD_DEFAULT_VALUE = 5 + const STEP_SIZE = 5 + const MIN_HEIGHT = 50 + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isWheelable = true + + let mouse = { + position: { + x: 0, + y: 0 + } + } + + let visible = false + let timeLineCoordinateSystem + + return thisObject + + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + thisObject.timePeriod = window.localStorage.getItem(MODULE_NAME) + if (!thisObject.timePeriod) { + thisObject.timePeriod = TIME_PERIOD_DEFAULT_VALUE + } else { + thisObject.timePeriod = JSON.parse(thisObject.timePeriod) + } + + let event = {} + event.timePeriod = thisObject.timePeriod + thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + mouse.position.x = event.x + mouse.position.y = event.y + + visible = true + }) + + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { + visible = false + }) + } + + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta < 0) { + thisObject.timePeriod = thisObject.timePeriod - STEP_SIZE + if (thisObject.timePeriod < STEP_SIZE) { thisObject.timePeriod = STEP_SIZE } + } else { + thisObject.timePeriod = thisObject.timePeriod + STEP_SIZE + if (thisObject.timePeriod > 100) { thisObject.timePeriod = 100 } + } + + event.timePeriod = thisObject.timePeriod + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + + window.localStorage.setItem(MODULE_NAME, thisObject.timePeriod) + } + + function getContainer (pPoint) { + let container + +/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */ + let point = { + x: 0, + y: 0 + } + + point.x = pPoint.x - thisObject.container.frame.position.x + point.y = pPoint.y - thisObject.container.frame.position.y + + if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { + return thisObject.container + } else { + /* This point does not belong to this space. */ + + return undefined + } + } + + function draw () { + if (visible === false) { return } + +/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still +to be visible at the top of the viewPort. */ + + let frame = thisObject.container.parentContainer.frame + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: 0, + y: frame.height - frame.height / 10 + } + + point2 = { + x: frame.width, + y: frame.height - frame.height / 10 + } + + point3 = { + x: frame.width, + y: frame.height + } + + point4 = { + x: 0, + y: frame.height + } + + point5 = { + x: 0, + y: 0 + } + + /* Now the transformations. */ + + point1 = transformThisPoint(point1, frame.container) + point2 = transformThisPoint(point2, frame.container) + point3 = transformThisPoint(point3, frame.container) + point4 = transformThisPoint(point4, frame.container) + point5 = transformThisPoint(point5, frame.container) + + point1 = viewPort.fitIntoVisibleArea(point1) + point2 = viewPort.fitIntoVisibleArea(point2) + point3 = viewPort.fitIntoVisibleArea(point3) + point4 = viewPort.fitIntoVisibleArea(point4) + point5 = viewPort.fitIntoVisibleArea(point5) + + if (point3.y - point2.y < MIN_HEIGHT) { + point1.y = point3.y - MIN_HEIGHT + point2.y = point3.y - MIN_HEIGHT + } + + /* Lets start the drawing. */ + + let displacement = viewPort.margins.BOTTOM - BOTTOM_SPACE_HEIGHT + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y + displacement) + browserCanvasContext.lineTo(point2.x, point2.y + displacement) + browserCanvasContext.lineTo(point3.x, point3.y + displacement) + browserCanvasContext.lineTo(point4.x, point4.y + displacement) + browserCanvasContext.lineTo(point1.x, point1.y + displacement) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + + thisObject.container.frame.position.x = point1.x + thisObject.container.frame.position.y = point1.y + displacement + + thisObject.container.frame.width = point2.x - point1.x + thisObject.container.frame.height = point3.y - point2.y + + let point = { + x: mouse.position.x, + y: point1.y + viewPort.margins.BOTTOM + } + + let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + date = new Date(date) + + let label = '24 hs' + let fontSize = 10 + + let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + + if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + + browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 1) +/* + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point.x, point1.y) + browserCanvasContext.lineTo(point.x, point5.y) + + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() +*/ + } +} + diff --git a/TimelineChart.js b/TimelineChart.js index 61b98b01a..ce8cc9965 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -47,6 +47,7 @@ let market let productsPanelHandle + let timePeriodScale return thisObject @@ -69,6 +70,19 @@ market = pMarket timeLineCoordinateSystem = pTimeLineCoordinateSystem + timePeriodScale = newTimePeriodScale() + timePeriodScale.container.connectToParent(thisObject.container, false, false) + timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { + return // Ignore events from this scale + let currentTimePeriod = timePeriod + timePeriod = event.timePeriod + if (timePeriod !== currentTimePeriod) { + plotterManager.setTimePeriod(timePeriod) + } + }) + + timePeriodScale.initialize(timeLineCoordinateSystem) + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) }) @@ -235,7 +249,7 @@ let container - // container = chartGrid.getContainer(point) + container = timePeriodScale.getContainer(point) if (container !== undefined) { return container } @@ -284,8 +298,8 @@ // chartGrid.draw(thisObject.container, timeLineCoordinateSystem) + timePeriodScale.draw() plotterManager.draw() - breakpointsBar.draw() } }