From de2a8f80347ae724724263069c15fd25a20560a9 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 10:19:15 +0200 Subject: [PATCH 1/6] Refactoring RateScale --- Scales/ChartGrid.js | 4 ++-- Scales/{RightScale.js => RateScale.js} | 3 +-- TimeMachine.js | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) rename Scales/{RightScale.js => RateScale.js} (99%) diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js index 3ceb3bd35..a0ea51d17 100644 --- a/Scales/ChartGrid.js +++ b/Scales/ChartGrid.js @@ -510,10 +510,10 @@ /* Now we put the scale on the right side of the chart */ - drawRigthScale() + drawRateScale() drawLeftScale() - function drawRigthScale () { + function drawRateScale () { /* And now the scale. */ let fontSize = 10 diff --git a/Scales/RightScale.js b/Scales/RateScale.js similarity index 99% rename from Scales/RightScale.js rename to Scales/RateScale.js index 2edb711f1..670128339 100644 --- a/Scales/RightScale.js +++ b/Scales/RateScale.js @@ -1,4 +1,4 @@ -function newRigthScale () { +function newRateScale () { const MODULE_NAME = 'Right Scale' const INFO_LOG = false const INTENSIVE_LOG = false @@ -214,4 +214,3 @@ to be visible at the top of the viewPort. */ browserCanvasContext.stroke() } } - diff --git a/TimeMachine.js b/TimeMachine.js index efbc9df25..d25a9aaa1 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -114,7 +114,7 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) - rigthScale = newRigthScale() + rigthScale = newRateScale() rigthScale.container.connectToParent(thisObject.container, false, false) rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 From 4563353238891bd734cc4aceb2ef78dca09bf3e5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 10:22:03 +0200 Subject: [PATCH 2/6] Got rid of this --- Scales/ChartGrid.js | 713 -------------------------------------------- TimelineChart.js | 3 - 2 files changed, 716 deletions(-) delete mode 100644 Scales/ChartGrid.js diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js deleted file mode 100644 index a0ea51d17..000000000 --- a/Scales/ChartGrid.js +++ /dev/null @@ -1,713 +0,0 @@ - function newChartGrid () { - let thisObject = { - container: undefined, - draw: draw, - getContainer: getContainer, - initialize: initialize - } - - let container = newContainer() - container.initialize() - thisObject.container = container - - thisObject.container.frame.width = 0 - thisObject.container.frame.height = 0 - - container.frame.position.x = 0 - container.frame.position.y = 0 - - container.isDraggeable = false - container.isClickeable = true - - return thisObject - - function initialize () { - - } - - function getContainer (point) { - let container - - container = rigthScale.getContainer(point) - - if (container !== undefined) { - return container - } - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ - - return undefined - } - } - - function draw (container, timeLineCoordinateSystem) { - return // not for now - - rightScaleBackground() - leftScaleBackground() - - let periods = [] - let boxes = [] - let labels = [] - - const basePeriod = { - x: 8 * 60 * 60 * 1000, - y: timeLineCoordinateSystem.max.y / 1000 - } - - let period = { - x: basePeriod.x, - y: basePeriod.y - } - - calculateTimeLabels() - printLabels(1000, 10000) - - function calculateTimeLabels () { - periods.push(period) // 0 - - period = { - x: basePeriod.x / 8, - y: basePeriod.y / 10 - } - - periods.push(period) // 1 - - period = { - x: basePeriod.x / 8 / 6, - y: basePeriod.y / 100 - } - - periods.push(period) // 2 - - period = { - x: basePeriod.x * 3, - y: basePeriod.y * 10 - } - - periods.push(period) // 3 - - period = { - x: basePeriod.x * 3 * 7, - y: basePeriod.y * 100 - } - - periods.push(period) // 4 - - /* Period #2 Plotting */ - - boxes = [] - plotGrid(periods[2]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('0') - break - } - case Math.trunc(1 / 6 * 1000): { - - } - labels.push('10') - break - case Math.trunc(2 / 6 * 1000): { - - } - labels.push('20') - break - - case Math.trunc(3 / 6 * 1000): { - - } - labels.push('30') - break - - case Math.trunc(4 / 6 * 1000): { - - } - labels.push('40') - break - - case Math.trunc(5 / 6 * 1000): { - - } - labels.push('50') - break - - } - } - - printLabels(1, 150) - - /* Period #1 Plotting */ - - boxes = [] - plotGrid(periods[1]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 3 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('0 Hs') - break - } - case Math.trunc(1 / 24 * 1000): { - - } - labels.push('1 Hs') - break - case Math.trunc(2 / 24 * 1000): { - - } - labels.push('2 Hs') - break - - case Math.trunc(3 / 24 * 1000): { - - } - labels.push('3 Hs') - break - - case Math.trunc(4 / 24 * 1000): { - - } - labels.push('4 Hs') - break - - case Math.trunc(5 / 24 * 1000): { - - } - labels.push('5 Hs') - break - - case Math.trunc(6 / 24 * 1000): { - - } - labels.push('6 Hs') - break - - case Math.trunc(7 / 24 * 1000): { - - } - labels.push('7 Hs') - break - - case Math.trunc(8 / 24 * 1000): { - - } - labels.push('8 Hs') - break - - case Math.trunc(9 / 24 * 1000): { - - } - labels.push('9 Hs') - break - - case Math.trunc(10 / 24 * 1000): { - - } - labels.push('10 Hs') - break - - case Math.trunc(11 / 24 * 1000): { - - } - labels.push('11 Hs') - break - - case Math.trunc(12 / 24 * 1000): { - - } - labels.push('12 Hs') - break - - case Math.trunc(13 / 24 * 1000): { - - } - labels.push('13 Hs') - break - - case Math.trunc(14 / 24 * 1000): { - - } - labels.push('14 Hs') - break - - case Math.trunc(15 / 24 * 1000): { - - } - labels.push('15 Hs') - break - - case Math.trunc(16 / 24 * 1000): { - - } - labels.push('16 Hs') - break - - case Math.trunc(17 / 24 * 1000): { - - } - labels.push('17 Hs') - break - - case Math.trunc(18 / 24 * 1000): { - - } - labels.push('18 Hs') - break - - case Math.trunc(19 / 24 * 1000): { - - } - labels.push('19 Hs') - break - - case Math.trunc(20 / 24 * 1000): { - - } - labels.push('20 Hs') - break - - case Math.trunc(21 / 24 * 1000): { - - } - labels.push('21 Hs') - break - - case Math.trunc(22 / 24 * 1000): { - - } - labels.push('22 Hs') - break - - case Math.trunc(23 / 24 * 1000): { - - } - labels.push('23 Hs') - break - } - } - - printLabels(5, 250) - - /* Period #0 Plotting */ - - boxes = [] - plotGrid(periods[0]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 3 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('Morning') - break - } - case Math.trunc(1 / 3 * 1000): { - - } - labels.push('Afternoon') - break - case Math.trunc(2 / 3 * 1000): { - - } - labels.push('Evening') - break - } - } - - printLabels(15, 50) - - /* Period #3 Plotting */ - - boxes = [] - plotGrid(periods[3]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - let date = new Date(currentValue.x) - - labels.push(date.toDateString()) - } - - printLabels(100, 2250) - - /* Period #4 Plotting */ - - boxes = [] - plotGrid(periods[4]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - let date = new Date(currentValue.x) - - var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - - labels.push(monthNames[date.getMonth()] + ' ' + date.getFullYear()) - } - } - - function plotGrid (period) { - return - - let periodWidth = period.x - let periodHeight = period.y - - let visiblePoint1 = { - x: viewPort.visibleArea.topLeft.x, - y: viewPort.visibleArea.bottomLeft.y - } - - visiblePoint1 = unTransformThisPoint(visiblePoint1, container) - visiblePoint1 = timeLineCoordinateSystem.unInverseTransform(visiblePoint1, container.frame.height) - - let visiblePoint2 = { - x: viewPort.visibleArea.bottomRight.x, - y: viewPort.visibleArea.topRight.y - } - - visiblePoint2 = unTransformThisPoint(visiblePoint2, container) - visiblePoint2 = timeLineCoordinateSystem.unInverseTransform(visiblePoint2, container.frame.height) - - startingPoint = { - x: Math.trunc(visiblePoint1.x / periodWidth) * periodWidth, - y: Math.round(Math.trunc(visiblePoint1.y / periodHeight) * periodHeight * 100000) / 100000 - } - - endingPoint = { - x: Math.trunc(visiblePoint2.x / periodWidth) * periodWidth, - y: Math.trunc(visiblePoint2.y / periodHeight) * periodHeight - } - - let lineWidth - - if (viewPort.zoomLevel > 0) { - lineWidth = period.x / basePeriod.x + period.x / basePeriod.x * viewPort.zoomLevel / 20 - } else { - lineWidth = period.x / basePeriod.x + period.x / basePeriod.x * viewPort.zoomLevel / 80 - } - - if (lineWidth < 0.7) { - return - } - - if (lineWidth > 1.4) { - lineWidth = 1.4 - } - - browserCanvasContext.beginPath() - - let y1 - let y2 - - let lastRightLabelPosition = { - x: 0, - y: 0 - } - - let lastLeftLabelPosition = { - x: 0, - y: 0 - } - - for (var j = startingPoint.y; j <= endingPoint.y + periodHeight; j = j + periodHeight) { - if (j >= 0 && j <= timeLineCoordinateSystem.max.y) { - let point1 = { - x: visiblePoint1.x, - y: j - } - - let point2 = { - x: visiblePoint2.x, - y: j - } - - point1 = timeLineCoordinateSystem.transformThisPoint(point1) - point2 = timeLineCoordinateSystem.transformThisPoint(point2) - - point1 = transformThisPoint(point1, container) - point2 = transformThisPoint(point2, container) - - if (point1.y >= viewPort.visibleArea.topLeft.y) { - /* Here we keep the last two positive valued of y */ - - y2 = y1 - y1 = point1.y - } - - point1 = viewPort.fitIntoVisibleArea(point1) - point2 = viewPort.fitIntoVisibleArea(point2) - - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - - /* Now we put the scale on the right side of the chart */ - - drawRateScale() - drawLeftScale() - - function drawRateScale () { - /* And now the scale. */ - - let fontSize = 10 - - let label = ' ' + Math.round(j * 1) / 1 - label = Number(label).toLocaleString() - - let labelPoint = { - x: viewPort.visibleArea.bottomRight.x + 5, - y: point1.y + fontSize / 2 * FONT_ASPECT_RATIO - } - - if (Math.abs(lastRightLabelPosition.y - labelPoint.y > fontSize || lastRightLabelPosition.y === 0)) { - if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } - - lastRightLabelPosition.x = labelPoint.x - lastRightLabelPosition.y = labelPoint.y - } - - function drawLeftScale () { - let fontSize = 10 - - /* - j is a value between 0 and the max y on the scale of the products. - If we want to convert j to the scale of profits we need to apply the following formula: - */ - - let labelValue = (j - timeLineCoordinateSystem.max.y / 2) * 200 / timeLineCoordinateSystem.max.y - labelValue = Math.round(labelValue * 100) / 100 - if (labelValue > 0) { labelValue = '+' + labelValue } - if (parseInt(labelValue) > -10 && parseInt(labelValue) < 10) { labelValue = ' ' + labelValue } - if (parseInt(labelValue) === 0) { labelValue = ' ' + labelValue } - let label = ' ' + pad(labelValue, 3) + '%' - - let labelPoint = { - x: 0, - y: point1.y + fontSize / 2 * FONT_ASPECT_RATIO - } - - if (Math.abs(lastLeftLabelPosition.y - labelPoint.y > fontSize || lastLeftLabelPosition.y === 0)) { - if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } - - lastLeftLabelPosition.x = labelPoint.x - lastLeftLabelPosition.y = labelPoint.y - } - } - } - - let x1 - let x2 - - for (var i = startingPoint.x; i <= endingPoint.x + periodWidth; i = i + periodWidth) { - let point3 = { - x: i, - y: 0 - } - - let point4 = { - x: i, - y: timeLineCoordinateSystem.max.y - } - - point3 = timeLineCoordinateSystem.transformThisPoint(point3) - point4 = timeLineCoordinateSystem.transformThisPoint(point4) - - point3 = transformThisPoint(point3, container) - point4 = transformThisPoint(point4, container) - - /* Here we keep the last two positive valued of y */ - - x2 = x1 - x1 = point3.x - - if (x2 !== undefined) { - let topLeft = { - x: x2, - y: y1 - } - - let bottomRight = { - x: x1, - y: y2 - } - - let box = { - topLeft: topLeft, - bottomRight: bottomRight - } - boxes.push(box) - } - - /* Painting the lines */ - - point3 = viewPort.fitIntoVisibleArea(point3) - point4 = viewPort.fitIntoVisibleArea(point4) - - browserCanvasContext.moveTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - } - - browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.05' + Math.trunc(lineWidth + 1) + ')' - - browserCanvasContext.lineWidth = lineWidth - - browserCanvasContext.stroke() - } - - function printLabels (baseZoomFilter, maxZoom) { - let zoomFilter = viewPort.zoomFontSize(baseZoomFilter) - - if (zoomFilter < 7 || zoomFilter > maxZoom) { - return - } - - for (let i = 0; i < boxes.length; i++) { - let label = labels[i] - - if (label === undefined) { - label = 'undefined' - } - - let fontSize = 10 - - let labelPoint = { - x: boxes[i].topLeft.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: viewPort.visibleArea.topLeft.y - fontSize / 2 + 1 - } - - let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(labelPoint.x, labelPoint.y - fontSize, xOffset * 2, fontSize) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fill() - - browserCanvasContext.closePath() - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.beginPath() - browserCanvasContext.rect(0, TOP_SPACE_HEIGHT, viewPort.visibleArea.topLeft.x, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT) - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, TOP_SPACE_HEIGHT, 500, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT) - browserCanvasContext.closePath() - browserCanvasContext.fill() - } - - function rightScaleBackground () { - const RIGHT_MARGIN = 50 - - /* We will paint some transparent background here. */ - - let opacity = '0.95' - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - } - - function leftScaleBackground () { - const LEFT_MARGIN = 50 - - /* We will paint some transparent background here. */ - - let opacity = '0.95' - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(0, viewPort.visibleArea.topRight.y, LEFT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - } - } - } diff --git a/TimelineChart.js b/TimelineChart.js index bc42bb917..61b98b01a 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -112,9 +112,6 @@ logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - // chartGrid = newChartGrid() - // chartGrid.initialize() - breakpointsBar = newBreakpointsBar() breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) From 4afcf7acd29ead4b14b35597ccb23c31deab0b28 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 11:45:23 +0200 Subject: [PATCH 3/6] 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() } } From c1a80892e5073acb32364fc256db169f7d0dee7f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 12:29:44 +0200 Subject: [PATCH 4/6] Scale changing working --- Scales/TimePeriodScale.js | 85 +++++++++++++++++++++++++++------------ 1 file changed, 60 insertions(+), 25 deletions(-) diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index fe76982fb..70e725e55 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -14,8 +14,8 @@ function newTimePeriodScale () { timePeriod: undefined } - const TIME_PERIOD_DEFAULT_VALUE = 5 - const STEP_SIZE = 5 + const FILES_PERIOD_DEFAULT_VALUE = 0 + const TIME_PERIOD_DEFAULT_VALUE = 0 const MIN_HEIGHT = 50 thisObject.container = newContainer() @@ -34,6 +34,11 @@ function newTimePeriodScale () { let visible = false let timeLineCoordinateSystem + let objectStorage = {} + let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE + let timePeriodIndex = TIME_PERIOD_DEFAULT_VALUE + let timePeriodsMasterArray = [marketFilesPeriods, dailyFilePeriods] + let timePeriodLabel = '' return thisObject @@ -42,16 +47,8 @@ function newTimePeriodScale () { 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) + readObjectState() + newTimePeriod() thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { mouse.position.x = event.x @@ -68,17 +65,31 @@ function newTimePeriodScale () { function onMouseWheel (event) { delta = event.wheelDelta if (delta < 0) { - thisObject.timePeriod = thisObject.timePeriod - STEP_SIZE - if (thisObject.timePeriod < STEP_SIZE) { thisObject.timePeriod = STEP_SIZE } + timePeriodIndex-- + if (timePeriodIndex < 0) { + filePeriodIndex-- + if (filePeriodIndex < 0) { + filePeriodIndex = 0 + timePeriodIndex = 0 + } else { + timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1 + } + } } else { - thisObject.timePeriod = thisObject.timePeriod + STEP_SIZE - if (thisObject.timePeriod > 100) { thisObject.timePeriod = 100 } + timePeriodIndex++ + if (timePeriodIndex > timePeriodsMasterArray[filePeriodIndex].length - 1) { + filePeriodIndex++ + if (filePeriodIndex > timePeriodsMasterArray.length - 1) { + filePeriodIndex = timePeriodsMasterArray.length - 1 + timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1 + } else { + timePeriodIndex = 0 + } + } } - event.timePeriod = thisObject.timePeriod - thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) - - window.localStorage.setItem(MODULE_NAME, thisObject.timePeriod) + saveObjectState() + newTimePeriod() } function getContainer (pPoint) { @@ -161,6 +172,8 @@ to be visible at the top of the viewPort. */ /* 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) @@ -172,6 +185,7 @@ to be visible at the top of the viewPort. */ 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 @@ -184,10 +198,7 @@ to be visible at the top of the viewPort. */ y: point1.y + viewPort.margins.BOTTOM } - let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) - date = new Date(date) - - let label = '24 hs' + let label = timePeriodLabel let fontSize = 10 let xOffset = label.length * fontSize * FONT_ASPECT_RATIO @@ -212,5 +223,29 @@ to be visible at the top of the viewPort. */ browserCanvasContext.stroke() */ } -} + function saveObjectState () { + objectStorage.filePeriodIndex = filePeriodIndex + objectStorage.timePeriodIndex = timePeriodIndex + window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage)) + } + + function readObjectState () { + let objectStorageString = window.localStorage.getItem(MODULE_NAME) + if (objectStorageString !== null && objectStorageString !== '') { + objectStorage = JSON.parse(objectStorageString) + filePeriodIndex = objectStorage.filePeriodIndex + timePeriodIndex = objectStorage.timePeriodIndex + } + } + + function newTimePeriod () { + let timePeriodArray = timePeriodsMasterArray[filePeriodIndex] + thisObject.timePeriod = timePeriodArray[timePeriodIndex][0] + timePeriodLabel = timePeriodArray[timePeriodIndex][1] + + let event = {} + event.timePeriod = thisObject.timePeriod + thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) + } +} From f507486165575b784a815f94f9adcd700a906c77 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 13:03:11 +0200 Subject: [PATCH 5/6] Working Time Period Scale --- Scales/TimePeriodScale.js | 20 ++++++++++++++++++++ TimelineChart.js | 35 ++++++++++++----------------------- 2 files changed, 32 insertions(+), 23 deletions(-) diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 70e725e55..cb836d04e 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -60,6 +60,26 @@ function newTimePeriodScale () { thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { visible = false }) + + viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) + } + + function onZoomChanged (event) { + let currentTimePeriod = thisObject.timePeriod + let timePeriod = recalculatePeriod(event.newLevel) + if (timePeriod !== currentTimePeriod) { + for (let i = 0; i < timePeriodsMasterArray.length; i++) { + let timePeriodArray = timePeriodsMasterArray[i] + for (let j = 0; j < timePeriodArray.length; j++) { + let record = timePeriodArray[j] + if (timePeriod === record[0]) { + filePeriodIndex = i + timePeriodIndex = j + } + } + } + newTimePeriod() + } } function onMouseWheel (event) { diff --git a/TimelineChart.js b/TimelineChart.js index ce8cc9965..34e41ec8c 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -70,19 +70,6 @@ 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) }) @@ -160,6 +147,18 @@ return } + timePeriodScale = newTimePeriodScale() + timePeriodScale.container.connectToParent(thisObject.container, false, false) + timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { + let currentTimePeriod = timePeriod + timePeriod = event.timePeriod + if (timePeriod !== currentTimePeriod) { + plotterManager.setTimePeriod(timePeriod) + } + }) + + timePeriodScale.initialize(timeLineCoordinateSystem) + initializationReady = true callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) return @@ -174,16 +173,6 @@ if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') } if (initializationReady === true) { - let currentTimePeriod = timePeriod - - timePeriod = recalculatePeriod(event.newLevel) - - /* If the period changes, we need to spread the word in cascade towards all the depending objects. */ - - if (timePeriod !== currentTimePeriod) { - plotterManager.setTimePeriod(timePeriod) - } - recalculateCurrentDatetime() // saveUserPosition(thisObject.container, timeLineCoordinateSystem) From 3e371e7ff809500a2346e699afb4efad3e1b9645 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 13:13:48 +0200 Subject: [PATCH 6/6] Time Control Panels not drawn --- Panels/TimeControlPanel.js | 1 + Spaces/PanelsSpace.js | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js index b56759dc3..7a1b51e8e 100644 --- a/Panels/TimeControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -92,6 +92,7 @@ function newTimeControlPanel () { } function draw () { + return thisObject.container.frame.draw(false, false, true) thisObject.datetimeDisplay.draw() panelTabButton.draw() diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 5378671d2..ecd4793a2 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -98,8 +98,6 @@ function newPanelsSpace () { function draw () { thisObject.container.frame.draw(false, false) - /* When we draw a time machine, that means also to draw all the charts in it. */ - thisObject.panels = panelsMap.get('Global') if (thisObject.panels != undefined) { for (var i = 0; i < thisObject.panels.length; i++) {