From 1636e3717fe7b26eabb9caf4bf026ef6b262fa72 Mon Sep 17 00:00:00 2001 From: Chris Jackson Date: Fri, 31 Oct 2014 16:51:31 +0000 Subject: [PATCH] Add 'title' option to display a title on the left or right axes. This is primarily designed for the graph2d line graph. --- examples/graph2d/16_bothAxis_titles.html | 187 +++++++++++++++++++++++ lib/timeline/component/DataAxis.js | 58 ++++++- lib/timeline/component/css/dataaxis.css | 42 +++++ 3 files changed, 282 insertions(+), 5 deletions(-) create mode 100644 examples/graph2d/16_bothAxis_titles.html diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html new file mode 100644 index 00000000..90929099 --- /dev/null +++ b/examples/graph2d/16_bothAxis_titles.html @@ -0,0 +1,187 @@ + + + + Graph2d | Both Axis Example + + + + + + + +

Graph2d | Both Axis Example

+
+ + + + + +
+ This example shows setting a title for the left and right axes. + + + + + + + + + + + + + + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index 31c486f2..4f428a51 100644 --- a/lib/timeline/component/DataAxis.js +++ b/lib/timeline/component/DataAxis.js @@ -30,6 +30,10 @@ function DataAxis (body, options, svg, linegraphOptions) { customRange: { left: {min:undefined, max:undefined}, right: {min:undefined, max:undefined} + }, + title: { + left: {text:undefined}, + right: {text:undefined} } }; @@ -38,7 +42,8 @@ function DataAxis (body, options, svg, linegraphOptions) { this.props = {}; this.DOMelements = { // dynamic elements lines: {}, - labels: {} + labels: {}, + title: {} }; this.dom = {}; @@ -108,7 +113,8 @@ DataAxis.prototype.setOptions = function (options) { 'iconWidth', 'width', 'visible', - 'customRange' + 'customRange', + 'title' ]; util.selectiveExtend(fields, this.options, options); @@ -252,7 +258,7 @@ DataAxis.prototype.redraw = function () { var showMinorLabels = this.options.showMinorLabels; var showMajorLabels = this.options.showMajorLabels; - // determine the width and height of the elemens for the axis + // determine the width and height of the elements for the axis props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0; props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0; @@ -280,6 +286,8 @@ DataAxis.prototype.redraw = function () { if (this.options.icons == true) { this._redrawGroupIcons(); } + + this._redrawTitle(orientation); } return changeCalled; }; @@ -359,8 +367,11 @@ DataAxis.prototype._redrawLabels = function () { this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange; } - var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15; - // this will resize the yAxis to accomodate the labels. + // Note that title is rotated, so we're using the height, not width! + var titleWidth = this.options.title[orientation].text === undefined ? 0 : this.props.titleCharHeight; + var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15; + + // this will resize the yAxis to accommodate the labels. if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) { this.width = this.maxLabelSize + offset; this.options.width = this.width + "px"; @@ -450,6 +461,30 @@ DataAxis.prototype._redrawLine = function (y, orientation, className, offset, wi } }; +/** + * Create a title for the axis + * @private + * @param orientation + */ +DataAxis.prototype._redrawTitle = function (orientation) { + DOMutil.prepareElements(this.DOMelements.title); + + // Check if the title is defined for this axes + if(this.options.title[orientation] == false || this.options.title[orientation].text === undefined) { + return; + } + var title = DOMutil.getDOMElement('div',this.DOMelements.title, this.dom.frame); + title.className = 'yAxis title ' + orientation; + title.innerHTML = this.options.title[orientation].text; + if (orientation == 'left') { + title.style.left = this.props.titleCharHeight + 'px'; + } + else { + title.style.right = this.props.titleCharHeight + 'px'; + } + + title.style.width = this.height + 'px'; +}; @@ -486,6 +521,19 @@ DataAxis.prototype._calculateCharSize = function () { this.dom.frame.removeChild(measureCharMajor); } + + if (!('titleCharHeight' in this.props)) { + var textTitle = document.createTextNode('0'); + var measureCharTitle = document.createElement('DIV'); + measureCharTitle.className = 'yAxis title measure'; + measureCharTitle.appendChild(textTitle); + this.dom.frame.appendChild(measureCharTitle); + + this.props.titleCharHeight = measureCharTitle.clientHeight; + this.props.titleCharWidth = measureCharTitle.clientWidth; + + this.dom.frame.removeChild(measureCharTitle); + } }; /** diff --git a/lib/timeline/component/css/dataaxis.css b/lib/timeline/component/css/dataaxis.css index 1fe4d71d..279899d5 100644 --- a/lib/timeline/component/css/dataaxis.css +++ b/lib/timeline/component/css/dataaxis.css @@ -44,6 +44,48 @@ width: auto; } +.vis.timeline .dataaxis .yAxis.title{ + position: absolute; + color: #4d4d4d; + white-space: nowrap; + bottom: 20px; + text-align: center; +} + +.vis.timeline .dataaxis .yAxis.title.measure{ + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; + visibility: hidden; + width: auto; +} + +.vis.timeline .dataaxis .yAxis.title.left { + bottom: 0px; + -webkit-transform-origin: left top; + -moz-transform-origin: left top; + -ms-transform-origin: left top; + -o-transform-origin: left top; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +.vis.timeline .dataaxis .yAxis.title.right { + bottom: 0px; + -webkit-transform-origin: right bottom; + -moz-transform-origin: right bottom; + -ms-transform-origin: right bottom; + -o-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); +} .vis.timeline .legend { background-color: rgba(247, 252, 255, 0.65);