[Pkg-javascript-commits] [libjs-jquery-flot-axislabels] 01/02: import upstream 2.0.1+git20141122
Wolfgang Borgert
debacle at moszumanska.debian.org
Wed Nov 23 01:45:43 UTC 2016
This is an automated email from the git hooks/post-receive script.
debacle pushed a commit to branch master
in repository libjs-jquery-flot-axislabels.
commit 8c2407d1fcd9741d0f841fbcae9b0fd9e54d4255
Author: W. Martin Borgert <debacle at debian.org>
Date: Wed Nov 23 00:18:10 2016 +0000
import upstream 2.0.1+git20141122
---
README.md | 102 ++++++++++
jquery.flot.axislabels.js | 466 ++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 568 insertions(+)
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1df6814
--- /dev/null
+++ b/README.md
@@ -0,0 +1,102 @@
+flot-axislabels: Axis Labels plugin for flot
+============================================
+
+Originally written by Xuan Luo. Maintained by Mark Cote.
+
+Contributions:
+
+* Xuan Luo
+* Mark Cote
+* stdexcept
+* Clemens Stolle
+* Michael Haddon
+* andig
+* Alex Pinkney
+
+[flot-axislabels](https://github.com/markrcote/flot-axislabels) provides
+flot with the ability to label axes. It supports any number of axes. It
+can render the labels with CSS transforms, in canvas, or with traditional
+CSS positioning ("HTML" mode). flot-axislabels attempts a graceful fallback
+from CSS to canvas to HTML if some modes are not supported. You can also
+force a particular lesser mode (canvas or HTML).
+
+In both CSS and canvas modes, the y-axis labels are rotated to face the
+graph (90 degrees counter-clockwise for left-hand labels, and 90 degrees
+clockwise for right-hand labels). In HTML mode, y-axis labels are left
+horizontal (warning: this takes up a lot of space).
+
+In CSS and HTML modes, each axis label belongs to the classes "axisLabels"
+and "[axisName]Label" (e.g. .xaxisLabel, .y2axisLabel, etc). You can use
+standard CSS properties to customize their appearance.
+
+In canvas mode, you can set font size, family, and colour through flot
+options (see below).
+
+
+Example
+-------
+
+ $(function () {
+ var options = {
+ axisLabels: {
+ show: true
+ },
+ xaxes: [{
+ axisLabel: 'foo',
+ }],
+ yaxes: [{
+ position: 'left',
+ axisLabel: 'bar',
+ }, {
+ position: 'right',
+ axisLabel: 'bleem'
+ }]
+ };
+
+ $.plot($("#placeholder"),
+ yourData,
+ options);
+ );
+ });
+
+
+Usage
+-----
+
+flot-axislabel adds an axisLabels object to the global options object.
+It supports one option:
+
+* show (bool): display all axis labels (default: true)
+
+There are also several options added to the axis objects. The two main ones
+are
+
+* axisLabel (string): the text you want displayed as the label
+* axisLabelPadding (int): padding, in pixels, between the tick labels and the
+ axis label (default: 2)
+
+By default, if supported, flot-axislabels uses CSS transforms. You can force
+either canvas or HTML mode by setting axisLabelUseCanvas or axisLabelUseHtml,
+respectively, to true.
+
+Canvas mode supports several other options:
+
+* axisLabelFontSizePixels (int): the size, in pixels, of the font (default: 14)
+* axisLabelFontFamily (string): the font family of the font (default:
+ sans-serif)
+* axisLabelColour (string): the font colour (default: black)
+
+
+Compatibility
+-------------
+
+flot-axislabels should work with recent versions of Firefox, Chrome, Opera,
+and Safari. It also works with IE 8 and 9. The canvas option does *not*
+seem to work with IE 8, even with excanvas.
+
+
+License
+-------
+
+flot-axislabels is released under the terms of [the MIT License](http://www.opensource.org/licenses/MIT).
+
diff --git a/jquery.flot.axislabels.js b/jquery.flot.axislabels.js
new file mode 100644
index 0000000..c4b3bca
--- /dev/null
+++ b/jquery.flot.axislabels.js
@@ -0,0 +1,466 @@
+/*
+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 ($) {
+ var options = {
+ axisLabels: {
+ show: true
+ }
+ };
+
+ function canvasSupported() {
+ return !!document.createElement('canvas').getContext;
+ }
+
+ function canvasTextSupported() {
+ if (!canvasSupported()) {
+ return false;
+ }
+ var dummy_canvas = document.createElement('canvas');
+ var context = dummy_canvas.getContext('2d');
+ return typeof context.fillText == 'function';
+ }
+
+ function css3TransitionSupported() {
+ var div = document.createElement('div');
+ return typeof div.style.MozTransition != 'undefined' // Gecko
+ || typeof div.style.OTransition != 'undefined' // Opera
+ || typeof div.style.webkitTransition != 'undefined' // WebKit
+ || typeof div.style.transition != 'undefined';
+ }
+
+
+ function AxisLabel(axisName, position, padding, plot, opts) {
+ this.axisName = axisName;
+ this.position = position;
+ this.padding = padding;
+ this.plot = plot;
+ this.opts = opts;
+ this.width = 0;
+ this.height = 0;
+ }
+
+ AxisLabel.prototype.cleanup = function() {
+ };
+
+
+ CanvasAxisLabel.prototype = new AxisLabel();
+ CanvasAxisLabel.prototype.constructor = CanvasAxisLabel;
+ function CanvasAxisLabel(axisName, position, padding, plot, opts) {
+ AxisLabel.prototype.constructor.call(this, axisName, position, padding,
+ plot, opts);
+ }
+
+ CanvasAxisLabel.prototype.calculateSize = function() {
+ if (!this.opts.axisLabelFontSizePixels)
+ this.opts.axisLabelFontSizePixels = 14;
+ if (!this.opts.axisLabelFontFamily)
+ this.opts.axisLabelFontFamily = 'sans-serif';
+
+ var textWidth = this.opts.axisLabelFontSizePixels + this.padding;
+ var textHeight = this.opts.axisLabelFontSizePixels + this.padding;
+ if (this.position == 'left' || this.position == 'right') {
+ this.width = this.opts.axisLabelFontSizePixels + this.padding;
+ this.height = 0;
+ } else {
+ this.width = 0;
+ this.height = this.opts.axisLabelFontSizePixels + this.padding;
+ }
+ };
+
+ CanvasAxisLabel.prototype.draw = function(box) {
+ if (!this.opts.axisLabelColour)
+ this.opts.axisLabelColour = 'black';
+ var ctx = this.plot.getCanvas().getContext('2d');
+ ctx.save();
+ ctx.font = this.opts.axisLabelFontSizePixels + 'px ' +
+ this.opts.axisLabelFontFamily;
+ ctx.fillStyle = this.opts.axisLabelColour;
+ var width = ctx.measureText(this.opts.axisLabel).width;
+ var height = this.opts.axisLabelFontSizePixels;
+ var x, y, angle = 0;
+ if (this.position == 'top') {
+ x = box.left + box.width/2 - width/2;
+ y = box.top + height*0.72;
+ } else if (this.position == 'bottom') {
+ x = box.left + box.width/2 - width/2;
+ y = box.top + box.height - height*0.72;
+ } else if (this.position == 'left') {
+ x = box.left + height*0.72;
+ y = box.height/2 + box.top + width/2;
+ angle = -Math.PI/2;
+ } else if (this.position == 'right') {
+ x = box.left + box.width - height*0.72;
+ y = box.height/2 + box.top - width/2;
+ angle = Math.PI/2;
+ }
+ ctx.translate(x, y);
+ ctx.rotate(angle);
+ ctx.fillText(this.opts.axisLabel, 0, 0);
+ ctx.restore();
+ };
+
+
+ HtmlAxisLabel.prototype = new AxisLabel();
+ HtmlAxisLabel.prototype.constructor = HtmlAxisLabel;
+ function HtmlAxisLabel(axisName, position, padding, plot, opts) {
+ AxisLabel.prototype.constructor.call(this, axisName, position,
+ padding, plot, opts);
+ this.elem = null;
+ }
+
+ HtmlAxisLabel.prototype.calculateSize = function() {
+ var elem = $('<div class="axisLabels" style="position:absolute;">' +
+ this.opts.axisLabel + '</div>');
+ this.plot.getPlaceholder().append(elem);
+ // store height and width of label itself, for use in draw()
+ this.labelWidth = elem.outerWidth(true);
+ this.labelHeight = elem.outerHeight(true);
+ elem.remove();
+
+ this.width = this.height = 0;
+ if (this.position == 'left' || this.position == 'right') {
+ this.width = this.labelWidth + this.padding;
+ } else {
+ this.height = this.labelHeight + this.padding;
+ }
+ };
+
+ HtmlAxisLabel.prototype.cleanup = function() {
+ if (this.elem) {
+ this.elem.remove();
+ }
+ };
+
+ HtmlAxisLabel.prototype.draw = function(box) {
+ this.plot.getPlaceholder().find('#' + this.axisName + 'Label').remove();
+ this.elem = $('<div id="' + this.axisName +
+ 'Label" " class="axisLabels" style="position:absolute;">'
+ + this.opts.axisLabel + '</div>');
+ this.plot.getPlaceholder().append(this.elem);
+ if (this.position == 'top') {
+ this.elem.css('left', box.left + box.width/2 - this.labelWidth/2 +
+ 'px');
+ this.elem.css('top', box.top + 'px');
+ } else if (this.position == 'bottom') {
+ this.elem.css('left', box.left + box.width/2 - this.labelWidth/2 +
+ 'px');
+ this.elem.css('top', box.top + box.height - this.labelHeight +
+ 'px');
+ } else if (this.position == 'left') {
+ this.elem.css('top', box.top + box.height/2 - this.labelHeight/2 +
+ 'px');
+ this.elem.css('left', box.left + 'px');
+ } else if (this.position == 'right') {
+ this.elem.css('top', box.top + box.height/2 - this.labelHeight/2 +
+ 'px');
+ this.elem.css('left', box.left + box.width - this.labelWidth +
+ 'px');
+ }
+ };
+
+
+ CssTransformAxisLabel.prototype = new HtmlAxisLabel();
+ CssTransformAxisLabel.prototype.constructor = CssTransformAxisLabel;
+ function CssTransformAxisLabel(axisName, position, padding, plot, opts) {
+ HtmlAxisLabel.prototype.constructor.call(this, axisName, position,
+ padding, plot, opts);
+ }
+
+ CssTransformAxisLabel.prototype.calculateSize = function() {
+ HtmlAxisLabel.prototype.calculateSize.call(this);
+ this.width = this.height = 0;
+ if (this.position == 'left' || this.position == 'right') {
+ this.width = this.labelHeight + this.padding;
+ } else {
+ this.height = this.labelHeight + this.padding;
+ }
+ };
+
+ CssTransformAxisLabel.prototype.transforms = function(degrees, x, y) {
+ var stransforms = {
+ '-moz-transform': '',
+ '-webkit-transform': '',
+ '-o-transform': '',
+ '-ms-transform': ''
+ };
+ if (x != 0 || y != 0) {
+ var stdTranslate = ' translate(' + x + 'px, ' + y + 'px)';
+ stransforms['-moz-transform'] += stdTranslate;
+ stransforms['-webkit-transform'] += stdTranslate;
+ stransforms['-o-transform'] += stdTranslate;
+ stransforms['-ms-transform'] += stdTranslate;
+ }
+ if (degrees != 0) {
+ var rotation = degrees / 90;
+ var stdRotate = ' rotate(' + degrees + 'deg)';
+ stransforms['-moz-transform'] += stdRotate;
+ stransforms['-webkit-transform'] += stdRotate;
+ stransforms['-o-transform'] += stdRotate;
+ stransforms['-ms-transform'] += stdRotate;
+ }
+ var s = 'top: 0; left: 0; ';
+ for (var prop in stransforms) {
+ if (stransforms[prop]) {
+ s += prop + ':' + stransforms[prop] + ';';
+ }
+ }
+ s += ';';
+ return s;
+ };
+
+ CssTransformAxisLabel.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 + this.labelHeight/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
+ - this.labelHeight/2;
+ offsets.y = box.height/2 + box.top;
+ }
+ offsets.x = Math.round(offsets.x);
+ offsets.y = Math.round(offsets.y);
+
+ return offsets;
+ };
+
+ CssTransformAxisLabel.prototype.draw = function(box) {
+ this.plot.getPlaceholder().find("." + this.axisName + "Label").remove();
+ var offsets = this.calculateOffsets(box);
+ this.elem = $('<div class="axisLabels ' + this.axisName +
+ 'Label" style="position:absolute; ' +
+ this.transforms(offsets.degrees, offsets.x, offsets.y) +
+ '">' + this.opts.axisLabel + '</div>');
+ this.plot.getPlaceholder().append(this.elem);
+ };
+
+
+ IeTransformAxisLabel.prototype = new CssTransformAxisLabel();
+ IeTransformAxisLabel.prototype.constructor = IeTransformAxisLabel;
+ function IeTransformAxisLabel(axisName, position, padding, plot, opts) {
+ CssTransformAxisLabel.prototype.constructor.call(this, axisName,
+ position, padding,
+ plot, opts);
+ this.requiresResize = false;
+ }
+
+ IeTransformAxisLabel.prototype.transforms = function(degrees, x, y) {
+ // I didn't feel like learning the crazy Matrix stuff, so this uses
+ // a combination of the rotation transform and CSS positioning.
+ var s = '';
+ if (degrees != 0) {
+ var rotation = degrees/90;
+ while (rotation < 0) {
+ rotation += 4;
+ }
+ s += ' filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=' + rotation + '); ';
+ // see below
+ this.requiresResize = (this.position == 'right');
+ }
+ if (x != 0) {
+ s += 'left: ' + x + 'px; ';
+ }
+ if (y != 0) {
+ s += 'top: ' + y + 'px; ';
+ }
+ return s;
+ };
+
+ IeTransformAxisLabel.prototype.calculateOffsets = function(box) {
+ var offsets = CssTransformAxisLabel.prototype.calculateOffsets.call(
+ this, box);
+ // adjust some values to take into account differences between
+ // CSS and IE rotations.
+ if (this.position == 'top') {
+ // FIXME: not sure why, but placing this exactly at the top causes
+ // the top axis label to flip to the bottom...
+ offsets.y = box.top + 1;
+ } else if (this.position == 'left') {
+ offsets.x = box.left;
+ offsets.y = box.height/2 + box.top - this.labelWidth/2;
+ } else if (this.position == 'right') {
+ offsets.x = box.left + box.width - this.labelHeight;
+ offsets.y = box.height/2 + box.top - this.labelWidth/2;
+ }
+ return offsets;
+ };
+
+ IeTransformAxisLabel.prototype.draw = function(box) {
+ CssTransformAxisLabel.prototype.draw.call(this, box);
+ if (this.requiresResize) {
+ this.elem = this.plot.getPlaceholder().find("." + this.axisName +
+ "Label");
+ // Since we used CSS positioning instead of transforms for
+ // translating the element, and since the positioning is done
+ // before any rotations, we have to reset the width and height
+ // in case the browser wrapped the text (specifically for the
+ // y2axis).
+ this.elem.css('width', this.labelWidth);
+ this.elem.css('height', this.labelHeight);
+ }
+ };
+
+
+ function init(plot) {
+ plot.hooks.processOptions.push(function (plot, options) {
+
+ if (!options.axisLabels.show)
+ return;
+
+ // This is kind of a hack. There are no hooks in Flot between
+ // the creation and measuring of the ticks (setTicks, measureTickLabels
+ // in setupGrid() ) and the drawing of the ticks and plot box
+ // (insertAxisLabels in setupGrid() ).
+ //
+ // Therefore, we use a trick where we run the draw routine twice:
+ // the first time to get the tick measurements, so that we can change
+ // them, and then have it draw it again.
+ var secondPass = false;
+
+ var axisLabels = {};
+ var axisOffsetCounts = { left: 0, right: 0, top: 0, bottom: 0 };
+
+ var defaultPadding = 2; // padding between axis and tick labels
+ plot.hooks.draw.push(function (plot, ctx) {
+ var hasAxisLabels = false;
+ if (!secondPass) {
+ // MEASURE AND SET OPTIONS
+ $.each(plot.getAxes(), function(axisName, axis) {
+ var opts = axis.options // Flot 0.7
+ || plot.getOptions()[axisName]; // Flot 0.6
+
+ // Handle redraws initiated outside of this plug-in.
+ if (axisName in axisLabels) {
+ axis.labelHeight = axis.labelHeight -
+ axisLabels[axisName].height;
+ axis.labelWidth = axis.labelWidth -
+ axisLabels[axisName].width;
+ opts.labelHeight = axis.labelHeight;
+ opts.labelWidth = axis.labelWidth;
+ axisLabels[axisName].cleanup();
+ delete axisLabels[axisName];
+ }
+
+ if (!opts || !opts.axisLabel || !axis.show)
+ return;
+
+ hasAxisLabels = true;
+ var renderer = null;
+
+ if (!opts.axisLabelUseHtml &&
+ navigator.appName == 'Microsoft Internet Explorer') {
+ var ua = navigator.userAgent;
+ var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+ if (re.exec(ua) != null) {
+ rv = parseFloat(RegExp.$1);
+ }
+ if (rv >= 9 && !opts.axisLabelUseCanvas && !opts.axisLabelUseHtml) {
+ renderer = CssTransformAxisLabel;
+ } else if (!opts.axisLabelUseCanvas && !opts.axisLabelUseHtml) {
+ renderer = IeTransformAxisLabel;
+ } else if (opts.axisLabelUseCanvas) {
+ renderer = CanvasAxisLabel;
+ } else {
+ renderer = HtmlAxisLabel;
+ }
+ } else {
+ if (opts.axisLabelUseHtml || (!css3TransitionSupported() && !canvasTextSupported()) && !opts.axisLabelUseCanvas) {
+ renderer = HtmlAxisLabel;
+ } else if (opts.axisLabelUseCanvas || !css3TransitionSupported()) {
+ renderer = CanvasAxisLabel;
+ } else {
+ renderer = CssTransformAxisLabel;
+ }
+ }
+
+ var padding = opts.axisLabelPadding === undefined ?
+ defaultPadding : opts.axisLabelPadding;
+
+ axisLabels[axisName] = new renderer(axisName,
+ axis.position, padding,
+ plot, opts);
+
+ // flot interprets axis.labelHeight and .labelWidth as
+ // the height and width of the tick labels. We increase
+ // these values to make room for the axis label and
+ // padding.
+
+ axisLabels[axisName].calculateSize();
+
+ // AxisLabel.height and .width are the size of the
+ // axis label and padding.
+ // Just set opts here because axis will be sorted out on
+ // the redraw.
+
+ opts.labelHeight = axis.labelHeight +
+ axisLabels[axisName].height;
+ opts.labelWidth = axis.labelWidth +
+ axisLabels[axisName].width;
+ });
+
+ // If there are axis labels, re-draw with new label widths and
+ // heights.
+
+ if (hasAxisLabels) {
+ secondPass = true;
+ plot.setupGrid();
+ plot.draw();
+ }
+ } else {
+ secondPass = false;
+ // DRAW
+ $.each(plot.getAxes(), function(axisName, axis) {
+ var opts = axis.options // Flot 0.7
+ || plot.getOptions()[axisName]; // Flot 0.6
+ if (!opts || !opts.axisLabel || !axis.show)
+ return;
+
+ axisLabels[axisName].draw(axis.box);
+ });
+ }
+ });
+ });
+ }
+
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'axisLabels',
+ version: '2.0'
+ });
+})(jQuery);
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/libjs-jquery-flot-axislabels.git
More information about the Pkg-javascript-commits
mailing list