Merge pull request #35 from AAMasters/develop
Improvements on timePeriod Handling
This commit is contained in:
7 files changed
+289
-733
No files matched your search
@@ -92,6 +92,7 @@ function newTimeControlPanel () {
|
||||
}
|
||||
|
||||
function draw () {
|
||||
return
|
||||
thisObject.container.frame.draw(false, false, true)
|
||||
thisObject.datetimeDisplay.draw()
|
||||
panelTabButton.draw()
|
||||
|
||||
@@ -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 */
|
||||
|
||||
drawRigthScale()
|
||||
drawLeftScale()
|
||||
|
||||
function drawRigthScale () {
|
||||
/* 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()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,271 @@
|
||||
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 FILES_PERIOD_DEFAULT_VALUE = 0
|
||||
const TIME_PERIOD_DEFAULT_VALUE = 0
|
||||
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
|
||||
let objectStorage = {}
|
||||
let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
|
||||
let timePeriodIndex = TIME_PERIOD_DEFAULT_VALUE
|
||||
let timePeriodsMasterArray = [marketFilesPeriods, dailyFilePeriods]
|
||||
let timePeriodLabel = ''
|
||||
|
||||
return thisObject
|
||||
|
||||
function initialize (pTimeLineCoordinateSystem) {
|
||||
timeLineCoordinateSystem = pTimeLineCoordinateSystem
|
||||
|
||||
thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
|
||||
|
||||
readObjectState()
|
||||
newTimePeriod()
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
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) {
|
||||
delta = event.wheelDelta
|
||||
if (delta < 0) {
|
||||
timePeriodIndex--
|
||||
if (timePeriodIndex < 0) {
|
||||
filePeriodIndex--
|
||||
if (filePeriodIndex < 0) {
|
||||
filePeriodIndex = 0
|
||||
timePeriodIndex = 0
|
||||
} else {
|
||||
timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1
|
||||
}
|
||||
}
|
||||
} else {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
saveObjectState()
|
||||
newTimePeriod()
|
||||
}
|
||||
|
||||
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 label = timePeriodLabel
|
||||
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()
|
||||
*/
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
@@ -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++) {
|
||||
|
||||
+1
-1
@@ -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
|
||||
|
||||
+15
-15
@@ -47,6 +47,7 @@
|
||||
let market
|
||||
|
||||
let productsPanelHandle
|
||||
let timePeriodScale
|
||||
|
||||
return thisObject
|
||||
|
||||
@@ -112,9 +113,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)
|
||||
|
||||
@@ -149,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
|
||||
@@ -163,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)
|
||||
@@ -238,7 +238,7 @@
|
||||
|
||||
let container
|
||||
|
||||
// container = chartGrid.getContainer(point)
|
||||
container = timePeriodScale.getContainer(point)
|
||||
|
||||
if (container !== undefined) { return container }
|
||||
|
||||
@@ -287,8 +287,8 @@
|
||||
|
||||
// chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
|
||||
|
||||
timePeriodScale.draw()
|
||||
plotterManager.draw()
|
||||
|
||||
breakpointsBar.draw()
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user