added function _checkTicksWidth() for jqplot, function calculates ticks width nad cuts some if they don't fit space they have

1 files changed, 77 insertions, 0 deletions

diff --git a/plugins/CoreVisualizations/javascripts/jqplot.js b/plugins/CoreVisualizations/javascripts/jqplot.js
index 4beff9acab..5b73c95955 100644
--- a/plugins/CoreVisualizations/javascripts/jqplot.js
+++ b/plugins/CoreVisualizations/javascripts/jqplot.js
@@ -273,6 +273,72 @@
             loading.css({opacity: .7});
         },
 
+        /**
+         * This method sums up total width of all tick according to currently
+         * set font-family, font-size and font-weight. It is achieved by
+         * creating span elements with ticks and adding their width.
+         * Rendered ticks have to be visible to get their real width. But it
+         * is too fast for user to notice it. If total ticks width is bigger
+         * than container width then half of ticks is beeing cut out and their
+         * width is tested again. Until their total width is smaller than chart
+         * div. There is a failsafe so check will be performed no more than 20
+         * times, which is I think more than enough. Each tick have its own
+         * gutter, by default width of 5 px from each side so they are more
+         * readable.
+         *
+         * @TODO upgrade ticks cutout algorithm, so last possible tick is always on most left position under chart
+         *
+         * @param $targetDiv
+         * @private
+         */
+        _checkTicksWidth: function($targetDiv){
+            if(typeof this.jqplotParams.axes.xaxis.ticksOriginal === 'undefined' || this.jqplotParams.axes.xaxis.ticksOriginal === {}){
+                this.jqplotParams.axes.xaxis.ticksOriginal = this.jqplotParams.axes.xaxis.ticks.slice();
+            }
+
+            var ticks = this.jqplotParams.axes.xaxis.ticks = this.jqplotParams.axes.xaxis.ticksOriginal.slice();
+
+            var divWidth = $targetDiv.width();
+            var tickOptions = $.extend(true, {}, this.jqplotParams.axesDefaults.tickOptions, this.jqplotParams.axes.xaxis.tickOptions);
+            var gutter = tickOptions.gutter || 5;
+            var sumWidthOfTicks = Number.MAX_VALUE;
+            var $labelTestChamber = {};
+            var tick = "";
+            var $body = $("body");
+            var maxRunsFailsafe = 20;
+            var ticksCount = 0;
+            var key = 0;
+
+            while(sumWidthOfTicks > divWidth && maxRunsFailsafe > 0) {
+                sumWidthOfTicks = 0;
+                for (key = 0; key < ticks.length; key++) {
+                    tick = ticks[key];
+                    if (tick !== " " && tick !== "") {
+                        $labelTestChamber = $("<span/>", {
+                            style: 'font-size: ' + (tickOptions.fontSize || '11px') + '; font-family: ' + (tickOptions.fontFamily || 'Arial, Helvetica, sans-serif') + ';' + (tickOptions.fontWeight || 'normal') + ';' + 'clear: both; float: none;',
+                            text: tick
+                        }).appendTo($body);
+                        sumWidthOfTicks += ($labelTestChamber.width() + gutter*2);
+                        $labelTestChamber.remove();
+                    }
+                }
+
+                ticksCount = 0;
+                if (sumWidthOfTicks > divWidth) {
+                    for (key = 0; key < ticks.length; key++) {
+                        tick = ticks[key];
+                        if (tick !== " " && tick !== "") {
+                            if (ticksCount % 2 == 1) {
+                                ticks[key] = " ";
+                            }
+                            ticksCount++;
+                        }
+                    }
+                }
+                maxRunsFailsafe--;
+            }
+        },
+
         /** Generic render function */
         render: function () {
             if (this.data.length == 0) { // sanity check
@@ -295,6 +361,17 @@
             // report has been displayed.
             var self = this;
 
+            // I think that viewDataTable should be checked against some
+            // configuration, but I can't find any place where any global configs
+            // are stored.
+            if( this.param.viewDataTable === "graphBar"
+                || this.param.viewDataTable === "graphVerticalBar"
+                || this.param.viewDataTable === "graphEvolution" ) {
+                // before drawing a jqplot chart, check if all labels ticks will fit
+                // into it
+                self._checkTicksWidth(target);
+            }
+
             // create jqplot chart
             try {
                 var plot = self._plot = $.jqplot(targetDivId, this.data, this.jqplotParams);