123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- /*
- Axis label plugin for flot
- Derived from:
- Axis Labels Plugin for flot.
- http://github.com/markrcote/flot-axislabels
- Original code is Copyright (c) 2010 Xuan Luo.
- Original code was released under the GPLv3 license by Xuan Luo, September 2010.
- Original code was rereleased under the MIT license by Xuan Luo, April 2012.
- Permission is hereby granted, free of charge, to any person obtaining
- a copy of this software and associated documentation files (the
- "Software"), to deal in the Software without restriction, including
- without limitation the rights to use, copy, modify, merge, publish,
- distribute, sublicense, and/or sell copies of the Software, and to
- permit persons to whom the Software is furnished to do so, subject to
- the following conditions:
- The above copyright notice and this permission notice shall be
- included in all copies or substantial portions of the Software.
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
- LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
- OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
- WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
- (function($) {
- "use strict";
- var options = {
- axisLabels: {
- show: true
- }
- };
- function AxisLabel(axisName, position, padding, placeholder, axisLabel, surface) {
- this.axisName = axisName;
- this.position = position;
- this.padding = padding;
- this.placeholder = placeholder;
- this.axisLabel = axisLabel;
- this.surface = surface;
- this.width = 0;
- this.height = 0;
- this.elem = null;
- }
- AxisLabel.prototype.calculateSize = function() {
- var axisId = this.axisName + 'Label',
- layerId = axisId + 'Layer',
- className = axisId + ' axisLabels';
- var info = this.surface.getTextInfo(layerId, this.axisLabel, className);
- this.labelWidth = info.width;
- this.labelHeight = info.height;
- if (this.position === 'left' || this.position === 'right') {
- this.width = this.labelHeight + this.padding;
- this.height = 0;
- } else {
- this.width = 0;
- this.height = this.labelHeight + this.padding;
- }
- };
- AxisLabel.prototype.transforms = function(degrees, x, y, svgLayer) {
- var transforms = [], translate, rotate;
- if (x !== 0 || y !== 0) {
- translate = svgLayer.createSVGTransform();
- translate.setTranslate(x, y);
- transforms.push(translate);
- }
- if (degrees !== 0) {
- rotate = svgLayer.createSVGTransform();
- var centerX = Math.round(this.labelWidth / 2),
- centerY = 0;
- rotate.setRotate(degrees, centerX, centerY);
- transforms.push(rotate);
- }
- return transforms;
- };
- AxisLabel.prototype.calculateOffsets = function(box) {
- var offsets = {
- x: 0,
- y: 0,
- degrees: 0
- };
- if (this.position === 'bottom') {
- offsets.x = box.left + box.width / 2 - this.labelWidth / 2;
- offsets.y = box.top + box.height - this.labelHeight;
- } else if (this.position === 'top') {
- offsets.x = box.left + box.width / 2 - this.labelWidth / 2;
- offsets.y = box.top;
- } else if (this.position === 'left') {
- offsets.degrees = -90;
- offsets.x = box.left - this.labelWidth / 2;
- offsets.y = box.height / 2 + box.top;
- } else if (this.position === 'right') {
- offsets.degrees = 90;
- offsets.x = box.left + box.width - this.labelWidth / 2;
- offsets.y = box.height / 2 + box.top;
- }
- offsets.x = Math.round(offsets.x);
- offsets.y = Math.round(offsets.y);
- return offsets;
- };
- AxisLabel.prototype.cleanup = function() {
- var axisId = this.axisName + 'Label',
- layerId = axisId + 'Layer',
- className = axisId + ' axisLabels';
- this.surface.removeText(layerId, 0, 0, this.axisLabel, className);
- };
- AxisLabel.prototype.draw = function(box) {
- var axisId = this.axisName + 'Label',
- layerId = axisId + 'Layer',
- className = axisId + ' axisLabels',
- offsets = this.calculateOffsets(box),
- style = {
- position: 'absolute',
- bottom: '',
- right: '',
- display: 'inline-block',
- 'white-space': 'nowrap'
- };
- var layer = this.surface.getSVGLayer(layerId);
- var transforms = this.transforms(offsets.degrees, offsets.x, offsets.y, layer.parentNode);
- this.surface.addText(layerId, 0, 0, this.axisLabel, className, undefined, undefined, undefined, undefined, transforms);
- this.surface.render();
- Object.keys(style).forEach(function(key) {
- layer.style[key] = style[key];
- });
- };
- function init(plot) {
- plot.hooks.processOptions.push(function(plot, options) {
- if (!options.axisLabels.show) {
- return;
- }
- var axisLabels = {};
- var defaultPadding = 2; // padding between axis and tick labels
- plot.hooks.axisReserveSpace.push(function(plot, axis) {
- var opts = axis.options;
- var axisName = axis.direction + axis.n;
- axis.labelHeight += axis.boxPosition.centerY;
- axis.labelWidth += axis.boxPosition.centerX;
- if (!opts || !opts.axisLabel || !axis.show) {
- return;
- }
- var padding = opts.axisLabelPadding === undefined
- ? defaultPadding
- : opts.axisLabelPadding;
- var axisLabel = axisLabels[axisName];
- if (!axisLabel) {
- axisLabel = new AxisLabel(axisName,
- opts.position, padding,
- plot.getPlaceholder()[0], opts.axisLabel, plot.getSurface());
- axisLabels[axisName] = axisLabel;
- }
- axisLabel.calculateSize();
- // Incrementing the sizes of the tick labels.
- axis.labelHeight += axisLabel.height;
- axis.labelWidth += axisLabel.width;
- });
- // TODO - use the drawAxis hook
- plot.hooks.draw.push(function(plot, ctx) {
- $.each(plot.getAxes(), function(flotAxisName, axis) {
- var opts = axis.options;
- if (!opts || !opts.axisLabel || !axis.show) {
- return;
- }
- var axisName = axis.direction + axis.n;
- axisLabels[axisName].draw(axis.box);
- });
- });
- plot.hooks.shutdown.push(function(plot, eventHolder) {
- for (var axisName in axisLabels) {
- axisLabels[axisName].cleanup();
- }
- });
- });
- };
- $.plot.plugins.push({
- init: init,
- options: options,
- name: 'axisLabels',
- version: '3.0'
- });
- })(jQuery);
|