Browse Source
Major redesign of data axis/scales, with large focus on creating a sane slave axis setup
codeClimate
Ludo Stellingwerff
8 years ago
6 changed files with 285 additions and 321 deletions
Unified View
Diff Options
-
+1 -0HISTORY.md
-
+1 -1index.js
-
+0 -219lib/timeline/DataStep.js
-
+46 -98lib/timeline/component/DataAxis.js
-
+235 -0lib/timeline/component/DataScale.js
-
+2 -3lib/timeline/component/LineGraph.js
+ 1
- 0
HISTORY.md
View File
+ 1
- 1
index.js
View File
+ 0
- 219
lib/timeline/DataStep.js
View File
| @ -1,219 +0,0 @@ | |||||
| /** | |||||
| * @constructor DataStep | |||||
| * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an | |||||
| * end data point. The class itself determines the best scale (step size) based on the | |||||
| * provided start Date, end Date, and minimumStep. | |||||
| * | |||||
| * If minimumStep is provided, the step size is chosen as close as possible | |||||
| * to the minimumStep but larger than minimumStep. If minimumStep is not | |||||
| * provided, the scale is set to 1 DAY. | |||||
| * The minimumStep should correspond with the onscreen size of about 6 characters | |||||
| * | |||||
| * Alternatively, you can set a scale by hand. | |||||
| * After creation, you can initialize the class by executing first(). Then you | |||||
| * can iterate from the start date to the end date via next(). You can check if | |||||
| * the end date is reached with the function hasNext(). After each step, you can | |||||
| * retrieve the current date via getCurrent(). | |||||
| * The DataStep has scales ranging from milliseconds, seconds, minutes, hours, | |||||
| * days, to years. | |||||
| * | |||||
| * Version: 1.2 | |||||
| * | |||||
| * @param {Date} [start] The start date, for example new Date(2010, 9, 21) | |||||
| * or new Date(2010, 9, 21, 23, 45, 00) | |||||
| * @param {Date} [end] The end date | |||||
| * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds | |||||
| */ | |||||
| function DataStep(start, end, minimumStep, containerHeight, customRange, formattingFunction, alignZeros) { | |||||
| // variables | |||||
| this.current = -1; | |||||
| this.stepIndex = 0; | |||||
| this.step = 1; | |||||
| this.scale = 1; | |||||
| this.formattingFunction = formattingFunction; | |||||
| this.marginStart; | |||||
| this.marginEnd; | |||||
| this.majorSteps = [1, 2, 5, 10]; | |||||
| this.minorSteps = [0.25, 0.5, 1, 2]; | |||||
| this.alignZeros = alignZeros; | |||||
| this.setRange(start, end, minimumStep, containerHeight, customRange); | |||||
| } | |||||
| /** | |||||
| * Set a new range | |||||
| * If minimumStep is provided, the step size is chosen as close as possible | |||||
| * to the minimumStep but larger than minimumStep. If minimumStep is not | |||||
| * provided, the scale is set to 1 DAY. | |||||
| * The minimumStep should correspond with the onscreen size of about 6 characters | |||||
| * @param {Number} [start] The start date and time. | |||||
| * @param {Number} [end] The end date and time. | |||||
| * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds | |||||
| */ | |||||
| DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, customRange) { | |||||
| if (customRange === undefined) { | |||||
| customRange = {}; | |||||
| } | |||||
| this._start = customRange.min === undefined ? start : customRange.min; | |||||
| this._end = customRange.max === undefined ? end : customRange.max; | |||||
| if (this._start === this._end) { | |||||
| this._start = customRange.min === undefined ? this._start - 0.75 : this._start; | |||||
| this._end = customRange.max === undefined ? this._end + 1 : this._end; | |||||
| } | |||||
| this.setMinimumStep(minimumStep, containerHeight); | |||||
| this.setFirst(customRange); | |||||
| }; | |||||
| /** | |||||
| * Automatically determine the scale that bests fits the provided minimum step | |||||
| * @param {Number} [minimumStep] The minimum step size in pixels | |||||
| */ | |||||
| DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) { | |||||
| // round to floor | |||||
| var range = this._end - this._start; | |||||
| var safeRange = range * 1.2; | |||||
| var minimumStepValue = minimumStep * (safeRange / containerHeight); | |||||
| var orderOfMagnitude = Math.round(Math.log(safeRange)/Math.LN10); | |||||
| var minorStepIdx = -1; | |||||
| var magnitudefactor = Math.pow(10,orderOfMagnitude); | |||||
| var start = 0; | |||||
| if (orderOfMagnitude < 0) { | |||||
| start = orderOfMagnitude; | |||||
| } | |||||
| var solutionFound = false; | |||||
| for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) { | |||||
| magnitudefactor = Math.pow(10,i); | |||||
| for (var j = 0; j < this.minorSteps.length; j++) { | |||||
| var stepSize = magnitudefactor * this.minorSteps[j]; | |||||
| if (stepSize >= minimumStepValue) { | |||||
| solutionFound = true; | |||||
| minorStepIdx = j; | |||||
| break; | |||||
| } | |||||
| } | |||||
| if (solutionFound === true) { | |||||
| break; | |||||
| } | |||||
| } | |||||
| this.stepIndex = minorStepIdx; | |||||
| this.scale = magnitudefactor; | |||||
| this.step = magnitudefactor * this.minorSteps[minorStepIdx]; | |||||
| }; | |||||
| /** | |||||
| * Round the current date to the first minor date value | |||||
| * This must be executed once when the current date is set to start Date | |||||
| */ | |||||
| DataStep.prototype.setFirst = function(customRange) { | |||||
| if (customRange === undefined) { | |||||
| customRange = {}; | |||||
| } | |||||
| var niceStart = customRange.min === undefined ? this._start - (this.scale * 2 * this.minorSteps[this.stepIndex]) : customRange.min; | |||||
| var niceEnd = customRange.max === undefined ? this._end + (this.scale * this.minorSteps[this.stepIndex]) : customRange.max; | |||||
| this.marginEnd = customRange.max === undefined ? this.roundToMinor(niceEnd) : customRange.max; | |||||
| this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min; | |||||
| // if we need to align the zero's we need to make sure that there is a zero to use. | |||||
| if (this.alignZeros === true && (this.marginEnd - this.marginStart) % this.step != 0) { | |||||
| this.marginEnd += this.marginEnd % this.step; | |||||
| } | |||||
| this.marginRange = this.marginEnd - this.marginStart; | |||||
| this.current = this.marginEnd; | |||||
| }; | |||||
| DataStep.prototype.roundToMinor = function(value) { | |||||
| var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex])); | |||||
| if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) { | |||||
| return rounded + (this.scale * this.minorSteps[this.stepIndex]); | |||||
| } | |||||
| else { | |||||
| return rounded; | |||||
| } | |||||
| } | |||||
| /** | |||||
| * Check if the there is a next step | |||||
| * @return {boolean} true if the current date has not passed the end date | |||||
| */ | |||||
| DataStep.prototype.hasNext = function () { | |||||
| return (this.current >= this.marginStart); | |||||
| }; | |||||
| /** | |||||
| * Do the next step | |||||
| */ | |||||
| DataStep.prototype.next = function() { | |||||
| var prev = this.current; | |||||
| this.current -= this.step; | |||||
| // safety mechanism: if current time is still unchanged, move to the end | |||||
| if (this.current === prev) { | |||||
| this.current = this._end; | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Do the next step | |||||
| */ | |||||
| DataStep.prototype.previous = function() { | |||||
| this.current += this.step; | |||||
| this.marginEnd += this.step; | |||||
| this.marginRange = this.marginEnd - this.marginStart; | |||||
| }; | |||||
| /** | |||||
| * Get the current datetime | |||||
| * @return {String} current The current date | |||||
| */ | |||||
| DataStep.prototype.getCurrent = function() { | |||||
| // prevent round-off errors when close to zero | |||||
| var current = (Math.abs(this.current) < this.step / 2) ? 0 : this.current; | |||||
| var returnValue = current; | |||||
| if (typeof this.formattingFunction === 'function') { | |||||
| return this.formattingFunction(current); | |||||
| } | |||||
| return '' + returnValue.toPrecision(3); | |||||
| }; | |||||
| /** | |||||
| * Check if the current value is a major value (for example when the step | |||||
| * is DAY, a major value is each first day of the MONTH) | |||||
| * @return {boolean} true if current date is major, else false. | |||||
| */ | |||||
| DataStep.prototype.isMajor = function() { | |||||
| return (this.current % (this.scale * this.majorSteps[this.stepIndex]) === 0); | |||||
| }; | |||||
| DataStep.prototype.shift = function(steps) { | |||||
| if (steps < 0) { | |||||
| for (let i = 0; i < -steps; i++) { | |||||
| this.previous(); | |||||
| } | |||||
| } | |||||
| else if (steps > 0) { | |||||
| for (let i = 0; i < steps; i++) { | |||||
| this.next(); | |||||
| } | |||||
| } | |||||
| } | |||||
| module.exports = DataStep; | |||||
+ 46
- 98
lib/timeline/component/DataAxis.js
View File
+ 235
- 0
lib/timeline/component/DataScale.js
View File
| @ -0,0 +1,235 @@ | |||||
| /** | |||||
| * Created by ludo on 25-1-16. | |||||
| */ | |||||
| function DataScale(start, end, autoScaleStart, autoScaleEnd, containerHeight, majorCharHeight, zeroAlign = false, formattingFunction=false) { | |||||
| this.majorSteps = [1, 2, 5, 10]; | |||||
| this.minorSteps = [0.25, 0.5, 1, 2]; | |||||
| this.customLines = null; | |||||
| this.containerHeight = containerHeight; | |||||
| this.majorCharHeight = majorCharHeight; | |||||
| this._start = start; | |||||
| this._end = end; | |||||
| this.scale = 1; | |||||
| this.minorStepIdx = -1; | |||||
| this.magnitudefactor = 1; | |||||
| this.determineScale(); | |||||
| this.zeroAlign = zeroAlign; | |||||
| this.autoScaleStart = autoScaleStart; | |||||
| this.autoScaleEnd = autoScaleEnd; | |||||
| this.formattingFunction = formattingFunction; | |||||
| if (autoScaleStart || autoScaleEnd) { | |||||
| var me = this; | |||||
| var roundToMinor = function (value) { | |||||
| var rounded = value - (value % (me.magnitudefactor * me.minorSteps[me.minorStepIdx])); | |||||
| if (value % (me.magnitudefactor * me.minorSteps[me.minorStepIdx]) > 0.5 * (me.magnitudefactor * me.minorSteps[me.minorStepIdx])) { | |||||
| return rounded + (me.magnitudefactor * me.minorSteps[me.minorStepIdx]); | |||||
| } | |||||
| else { | |||||
| return rounded; | |||||
| } | |||||
| }; | |||||
| if (autoScaleStart) { | |||||
| this._start -= this.magnitudefactor * 2 * this.minorSteps[this.minorStepIdx]; | |||||
| this._start = roundToMinor(this._start); | |||||
| } | |||||
| if (autoScaleEnd) { | |||||
| this._end += this.magnitudefactor * this.minorSteps[this.minorStepIdx]; | |||||
| this._end = roundToMinor(this._end); | |||||
| } | |||||
| this.determineScale(); | |||||
| } | |||||
| } | |||||
| DataScale.prototype.setCharHeight = function (majorCharHeight) { | |||||
| this.majorCharHeight = majorCharHeight; | |||||
| }; | |||||
| DataScale.prototype.setHeight = function (containerHeight) { | |||||
| this.containerHeight = containerHeight; | |||||
| }; | |||||
| DataScale.prototype.determineScale = function () { | |||||
| var range = this._end - this._start; | |||||
| this.scale = this.containerHeight / range; | |||||
| var minimumStepValue = this.majorCharHeight / this.scale; | |||||
| var orderOfMagnitude = Math.round(Math.log(range) / Math.LN10); | |||||
| this.minorStepIdx = -1; | |||||
| this.magnitudefactor = Math.pow(10, orderOfMagnitude); | |||||
| var start = 0; | |||||
| if (orderOfMagnitude < 0) { | |||||
| start = orderOfMagnitude; | |||||
| } | |||||
| var solutionFound = false; | |||||
| for (var l = start; Math.abs(l) <= Math.abs(orderOfMagnitude); l++) { | |||||
| this.magnitudefactor = Math.pow(10, l); | |||||
| for (var j = 0; j < this.minorSteps.length; j++) { | |||||
| var stepSize = this.magnitudefactor * this.minorSteps[j]; | |||||
| if (stepSize >= minimumStepValue) { | |||||
| solutionFound = true; | |||||
| this.minorStepIdx = j; | |||||
| break; | |||||
| } | |||||
| } | |||||
| if (solutionFound === true) { | |||||
| break; | |||||
| } | |||||
| } | |||||
| }; | |||||
| DataScale.prototype.is_major = function (value) { | |||||
| return (value % (this.magnitudefactor * this.majorSteps[this.minorStepIdx]) === 0); | |||||
| }; | |||||
| DataScale.prototype.getStep = function(){ | |||||
| return this.magnitudefactor * this.minorSteps[this.minorStepIdx]; | |||||
| }; | |||||
| DataScale.prototype.getFirstMajor = function(){ | |||||
| var majorStep = this.magnitudefactor * this.majorSteps[this.minorStepIdx]; | |||||
| return this.convertValue(this._start + ((majorStep - (this._start % majorStep)) % majorStep)); | |||||
| }; | |||||
| DataScale.prototype.formatValue = function(current) { | |||||
| var returnValue = current.toPrecision(5); | |||||
| if (typeof this.formattingFunction === 'function') { | |||||
| returnValue = this.formattingFunction(current); | |||||
| } | |||||
| if (typeof returnValue === 'number') { | |||||
| return '' + returnValue; | |||||
| } | |||||
| else if (typeof returnValue === 'string') { | |||||
| return returnValue; | |||||
| } | |||||
| else { | |||||
| return current.toPrecision(5); | |||||
| } | |||||
| }; | |||||
| DataScale.prototype.getLines = function () { | |||||
| var lines = []; | |||||
| var step = this.getStep(); | |||||
| var bottomOffset = (step - (this._start % step)) % step; | |||||
| for (var i = (this._start + bottomOffset); this._end-i > 0.00001; i += step) { | |||||
| if (i != this._start) { //Skip the bottom line | |||||
| lines.push({major: this.is_major(i), y: this.convertValue(i), val: this.formatValue(i)}); | |||||
| } | |||||
| } | |||||
| return lines; | |||||
| }; | |||||
| DataScale.prototype.followScale = function (other) { | |||||
| var oldStepIdx = this.minorStepIdx; | |||||
| var oldStart = this._start; | |||||
| var oldEnd = this._end; | |||||
| var me = this; | |||||
| var increaseMagnitude = function () { | |||||
| me.magnitudefactor *= 2; | |||||
| }; | |||||
| var decreaseMagnitude = function () { | |||||
| me.magnitudefactor /= 2; | |||||
| }; | |||||
| if ((other.minorStepIdx <= 1 && this.minorStepIdx <= 1) || (other.minorStepIdx > 1 && this.minorStepIdx > 1)) { | |||||
| //easy, no need to change stepIdx nor multiplication factor | |||||
| } else if (other.minorStepIdx < this.minorStepIdx) { | |||||
| //I'm 5, they are 4 per major. | |||||
| this.minorStepIdx = 1; | |||||
| if (oldStepIdx == 2) { | |||||
| increaseMagnitude(); | |||||
| } else { | |||||
| increaseMagnitude(); | |||||
| increaseMagnitude(); | |||||
| } | |||||
| } else { | |||||
| //I'm 4, they are 5 per major | |||||
| this.minorStepIdx = 2; | |||||
| if (oldStepIdx == 1) { | |||||
| decreaseMagnitude(); | |||||
| } else { | |||||
| decreaseMagnitude(); | |||||
| decreaseMagnitude(); | |||||
| } | |||||
| } | |||||
| //Get masters stats: | |||||
| var lines = other.getLines(); | |||||
| var otherZero = other.convertValue(0); | |||||
| var otherStep = other.getStep() * other.scale; | |||||
| var done = false; | |||||
| var count = 0; | |||||
| //Loop until magnitude is correct for given constrains. | |||||
| while (!done && count++ <5) { | |||||
| //Get my stats: | |||||
| this.scale = otherStep / (this.minorSteps[this.minorStepIdx] * this.magnitudefactor); | |||||
| var newRange = this.containerHeight / this.scale; | |||||
| //For the case the magnitudefactor has changed: | |||||
| this._start = oldStart; | |||||
| this._end = this._start + newRange; | |||||
| var myOriginalZero = this._end * this.scale; | |||||
| var majorStep = this.magnitudefactor * this.majorSteps[this.minorStepIdx]; | |||||
| var majorOffset = this.getFirstMajor() - other.getFirstMajor(); | |||||
| if (this.zeroAlign) { | |||||
| var zeroOffset = otherZero - myOriginalZero; | |||||
| this._end += (zeroOffset / this.scale); | |||||
| this._start = this._end - newRange; | |||||
| } else { | |||||
| if (!this.autoScaleStart) { | |||||
| this._start += majorStep - (majorOffset / this.scale); | |||||
| this._end = this._start + newRange; | |||||
| } else { | |||||
| this._start -= majorOffset / this.scale; | |||||
| this._end = this._start + newRange; | |||||
| } | |||||
| } | |||||
| if (!this.autoScaleEnd && this._end > oldEnd+0.00001) { | |||||
| //Need to decrease magnitude to prevent scale overshoot! (end) | |||||
| decreaseMagnitude(); | |||||
| done = false; | |||||
| continue; | |||||
| } | |||||
| if (!this.autoScaleStart && this._start < oldStart-0.00001) { | |||||
| if (this.zeroAlign && oldStart >= 0) { | |||||
| console.warn("Can't adhere to given 'min' range, due to zeroalign"); | |||||
| } else { | |||||
| //Need to decrease magnitude to prevent scale overshoot! (start) | |||||
| decreaseMagnitude(); | |||||
| done = false; | |||||
| continue; | |||||
| } | |||||
| } | |||||
| if (this.autoScaleStart && this.autoScaleEnd && newRange < (oldEnd-oldStart)){ | |||||
| increaseMagnitude(); | |||||
| done = false; | |||||
| continue; | |||||
| } | |||||
| done = true; | |||||
| } | |||||
| }; | |||||
| DataScale.prototype.convertValue = function (value) { | |||||
| return this.containerHeight - ((value - this._start) * this.scale); | |||||
| }; | |||||
| DataScale.prototype.screenToValue = function (pixels) { | |||||
| return ((this.containerHeight - pixels) / this.scale) + this._start; | |||||
| }; | |||||
| module.exports = DataScale; | |||||