From 12e2fa437d9240dc9915669ed30931b5d98964eb Mon Sep 17 00:00:00 2001 From: yotamberk Date: Mon, 17 Oct 2016 11:53:47 +0300 Subject: [PATCH] Custom function label - fixes #1098 (#2145) * Hide vertically hidden ranged items in groups that are not visible * Add custom function format for time labels * fix misspell * remove spaces * remove backspace * add backspaces * Add docs and examples * Fix docs --- docs/timeline/index.html | 10 +- .../timeline/other/functionLabelFormats.html | 141 ++++++++++++++++++ lib/timeline/TimeStep.js | 8 + lib/timeline/component/Group.js | 4 +- lib/timeline/optionsTimeline.js | 4 +- 5 files changed, 162 insertions(+), 5 deletions(-) create mode 100644 examples/timeline/other/functionLabelFormats.html diff --git a/docs/timeline/index.html b/docs/timeline/index.html index b9182900..70f747be 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -557,7 +557,7 @@ function (option, path) { format - Object + Object or Function none Apply custom date formatting of the labels on the time axis. The default value of format is: @@ -583,8 +583,16 @@ function (option, path) { year: '' } } + For values which not provided in the customized options.format, the default values will be used. All available formatting syntax is described in the docs of moment.js. +
+ You can also use a function format for each label. The function accepts as arguments the date, scale and step in that order, and expects to return a string for the label. + + 
function format({
+  minorLabels: Function(date: Date, scale: Number, step: Number),
+  majorLabels: Function(date: Date, scale: Number, step: Number)
+}
diff --git a/examples/timeline/other/functionLabelFormats.html b/examples/timeline/other/functionLabelFormats.html new file mode 100644 index 00000000..9de9023b --- /dev/null +++ b/examples/timeline/other/functionLabelFormats.html @@ -0,0 +1,141 @@ + + + + Timeline | Custom function label format example + + + + + + + + + + + +

+ This example demonstrate using custom function label formats. +

+
+ + + + \ No newline at end of file diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js index c5a9bfc2..dc3991ed 100644 --- a/lib/timeline/TimeStep.js +++ b/lib/timeline/TimeStep.js @@ -532,6 +532,10 @@ TimeStep.prototype.getLabelMinor = function(date) { date = this.current; } + if (typeof(this.format.minorLabels) === "function") { + return this.format.minorLabels(date, this.scale, this.step); + } + var format = this.format.minorLabels[this.scale]; return (format && format.length > 0) ? this.moment(date).format(format) : ''; }; @@ -546,6 +550,10 @@ TimeStep.prototype.getLabelMajor = function(date) { if (date == undefined) { date = this.current; } + + if (typeof(this.format.majorLabels) === "function") { + return this.format.majorLabels(date, this.scale, this.step); + } var format = this.format.majorLabels[this.scale]; return (format && format.length > 0) ? this.moment(date).format(format) : ''; diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js index 512fac58..3d0d0e82 100644 --- a/lib/timeline/component/Group.js +++ b/lib/timeline/component/Group.js @@ -180,6 +180,7 @@ Group.prototype.redraw = function(range, margin, restack) { // recalculate the height of the subgroups this._calculateSubGroupHeights(); + this.isVisible = this._isGroupVisible(range, margin); // reposition visible items vertically @@ -220,7 +221,7 @@ Group.prototype.redraw = function(range, margin, restack) { stack.nostack(this.visibleItems, margin, this.subgroups); } } - + if (!this.isVisible && this.height) { return resized = false; } @@ -275,7 +276,6 @@ Group.prototype._calculateSubGroupHeights = function () { * check if group is visible * @private */ - Group.prototype._isGroupVisible = function (range, margin) { var isVisible = (this.top <= range.body.domProps.centerContainer.height - range.body.domProps.scrollTop + margin.axis) diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js index fc4330fe..a20d27f4 100644 --- a/lib/timeline/optionsTimeline.js +++ b/lib/timeline/optionsTimeline.js @@ -47,7 +47,7 @@ let allOptions = { day: {string,'undefined': 'undefined'}, month: {string,'undefined': 'undefined'}, year: {string,'undefined': 'undefined'}, - __type__: {object} + __type__: {object, 'function': 'function'} }, majorLabels: { millisecond: {string,'undefined': 'undefined'}, @@ -58,7 +58,7 @@ let allOptions = { day: {string,'undefined': 'undefined'}, month: {string,'undefined': 'undefined'}, year: {string,'undefined': 'undefined'}, - __type__: {object} + __type__: {object, 'function': 'function'} }, __type__: {object} },