Ability to supress tooltip coords message with the plot attribute

Figure gathers the tooltip from the axes (if they provide it)

Author: dgrechka

RELEASE_NOTES.md

@@ -1,3 +1,13 @@
+### 1.5.19 (December 27, 2018)
+
+New features:
+ - Tooltip now shows the labels of label axis (in case of label axis depicts intervals)
+ - Plot coordinates info can be suppressed in tooltip with `data-idd-suppress-tooltip-coords`
+
+ ### 1.5.18 (December 21, 2018)
+ - base64 data source is now suppoerted for specifing the data declaratively
+ - Label axis data can be specified declaratively in the DOM before IDD plot initialization
+
 ### 1.5.17 (December 13, 2018)
 
 New features:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interactive-data-display",
-  "version": "1.5.18",
+  "version": "1.5.19",
   "license": "Apache-2.0",
   "homepage": "https://github.com/predictionmachines/InteractiveDataDisplay/wiki",
   "description": "A JavaScript visualization library for dynamic data",

samples/LabelledAxisDeclarative.html

@@ -44,10 +44,10 @@
                 <div id="bottom_axis1" data-idd-axis="labels" data-idd-placement="bottom" style="position: relative;">
                     ticks  labels
                     1   a
-                    3   b
-                    8   c
-                    2   d
-                    4   e
+                    2   b
+                    3   c
+                    4   d
+                    5   
                 </div>
             <div id="left_axis1" data-idd-axis="numeric" data-idd-placement="left" style="position: relative;"></div>
         </div>

src/idd/idd.axis.js

@@ -80,7 +80,7 @@ InteractiveDataDisplay.TicksRenderer = function (div, source) {
 
     var _width, _height;
     var _size;
-    var _deltaRange;
+    var _deltaRange; // DG: seems to be a ratio between axis screen size and visible data range
     var _canvasHeight;
     var _rotateAngle;
 
@@ -706,6 +706,9 @@ InteractiveDataDisplay.TicksRenderer = function (div, source) {
 InteractiveDataDisplay.NumericAxis = function (div) {
     this.base = InteractiveDataDisplay.TicksRenderer;
     div[0].axis = this;
+
+    // DG: seems to be data coord -> screen coord transform
+    //     ticks locations are transformed with this function to be put to screen
     this.getCoordinateFromTick = function (x) {
         var delta = this.deltaRange;
         if (isFinite(delta)) {
@@ -745,6 +748,8 @@ InteractiveDataDisplay.LabelledAxis = function (div, params) {
     this.base = InteractiveDataDisplay.TicksRenderer;
     var that = this;
 
+    // DG: seems to be data coord -> screen coord transform
+    //     ticks locations are transformed with this function to be put to screen
     this.getCoordinateFromTick = function (x) {
         var delta = this.deltaRange;
         if (isFinite(delta)) {
@@ -765,11 +770,45 @@ InteractiveDataDisplay.LabelledAxis = function (div, params) {
     };
 
     if (params && params.rotate)
-        this.rotateLabels = true;
+        this.rotateLabels = true;            
 
     this.base(div, new InteractiveDataDisplay.LabelledTickSource(params));
     this.rotateAngle = params && params.rotateAngle ? params.rotateAngle : 0;
 
+    // returns the string, that depicts the supplied data coordinate (associated label)    
+    this.getToolTip = function(dataCoord) {
+        // the function returns the tooltip only for the named intervals (e.g. when Ticks count is one more than labels count)
+        var dataToPlot = function(x) { return that.dataTransform ? that.dataTransform(x) : x }
+        var plotCoord = dataToPlot(dataCoord)
+                    
+        // finding "invisible" tick (tick hidden, label visible) after unlabeled visible tick
+        var lessThanIndex = undefined
+        var moreThanIndex = undefined
+        for(var i=0; i<that.ticks.length; i++) {
+            var curTick = that.ticks[i]
+            if(curTick.text) // we skip labeled invisible ticks, analyzing only unlabled ones
+                continue
+            var curPlotCoord = dataToPlot(curTick.position)
+            if(curPlotCoord>plotCoord && !moreThanIndex)
+                moreThanIndex = i
+            if(curPlotCoord<plotCoord)
+                lessThanIndex = i                 
+        }
+        if(moreThanIndex && !lessThanIndex) {
+            // left interval bound is out of visible region, right is inside
+            if(that.ticks[moreThanIndex-1] && that.ticks[moreThanIndex-1].text)
+                return that.ticks[moreThanIndex-1].text
+        } else if (lessThanIndex && !moreThanIndex) {
+            // right interval bound is out of visible region, left is inside
+            if(that.ticks[lessThanIndex+1] && that.ticks[lessThanIndex+1].text)
+                return that.ticks[lessThanIndex+1].text
+        } else if (lessThanIndex && moreThanIndex && (moreThanIndex-lessThanIndex == 2)) {
+            // left and right interval bounds are inside visible regions
+            return that.ticks[lessThanIndex+1].text
+        }                   
+        return undefined
+    }
+
     return this;
 }
 InteractiveDataDisplay.LabelledAxis.prototype = new InteractiveDataDisplay.TicksRenderer;
@@ -1196,7 +1235,7 @@ InteractiveDataDisplay.LabelledTickSource = function (params) {
     var that = this;
 
     var _labels = [];
-    var _ticks = [];
+    var _ticks = []; // DG: Seems that it is in data coords, as the coords are later processed with getCoordinateFromTick
 
     // if labels and ticks are defined - cash them
     // if ticks are undefined - they are calculated as an array of integers from 0 to length of labels

src/idd/idd.base.js

@@ -277,6 +277,7 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
         // I set this flag to suppress echo, i.e. I will not notify bound plots about my new visible rectangle.
         // The flag is reset when any other update request is received.
         var _suppressNotifyBoundPlots = false;
+        var _tooltipSettings = undefined;
 
         var _plotRect;
 
@@ -300,6 +301,11 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
                 _padding = Number(div.attr("data-idd-padding"))
                 div.removeAttr("data-idd-padding");             
             }
+            if(div.attr("data-idd-suppress-tooltip-coords")) {                
+                div.removeAttr("data-idd-suppress-tooltip-coords");                
+                _tooltipSettings = _tooltipSettings || {}
+                _tooltipSettings.showCursorCoordinates = false
+            }
             div[0].plot = this; // adding a reference to the initialized DOM object of the plot, pointing to the plot instance.
 
             // Disables user selection for this element:
@@ -499,8 +505,7 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
                 configurable: false
             }
         );
-
-        var _tooltipSettings = undefined;
+        
         Object.defineProperty(this, "tooltipSettings",
             {
                 get: function () { return _isMaster ? _tooltipSettings : _master.tooltipSettings; },
@@ -1375,6 +1380,10 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
         // Implementation of this method for a particular plot should build and return
         // a tooltip element for the point (xd,yd) in data coordinates, and (xp, yp) in plot coordinates.
         // Method returns <div> element or undefined
+        this.getTooltip = function (xd, yd, xp, yp) {
+            return undefined;
+        };
+
         var foreachDependentPlot = function (plot, f) {
             var myChildren = plot.children;
             var n = myChildren.length;
@@ -1384,9 +1393,6 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
             }
             f(plot);
         };
-        this.getTooltip = function (xd, yd, xp, yp) {
-            return undefined;
-        };
 
         if (_isMaster) {
             var _tooltipTimer; // descriptor of the set timer to show the tooltip
@@ -1405,10 +1411,11 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
                 clearTooltip();
 
                 var getElements = function () {
-                    var tooltips = [];
-                    var xd, yd;
+                    var tooltips = [];                    
                     var px = origin_p.x, py = origin_p.y;
-
+                    
+                    var xd,yd;
+                    
                     foreachDependentPlot(that, function (child) {
                         var my_xd = child.xDataTransform ? child.xDataTransform.plotToData(px) : px;
                         var my_yd = child.yDataTransform ? child.yDataTransform.plotToData(py) : py;

src/idd/idd.figure.js

@@ -287,6 +287,40 @@ InteractiveDataDisplay.Figure = function (div, master) {
         return jqDiv;
     }
 
+    // Builds a tooltip <div> for a point
+    this.getTooltip = function (xd, yd, xp, yp) {
+        // the Figure is responsible for producing the tooltips for the axes (e.g. label axis)
+        // tooltip must show relevant informative information from the axes
+        // thus, traversing axes, gathering labels that corespond to mouse position
+        var axes = that.getAxes();        
+        var axisTooltipFound = false
+        var labels = new Array()
+        if (axes) {
+            for (var i = 0; i < axes.length; i++) {
+                // we build tooltip only for axes that are able to return tooltip
+                var axis = axes[i]
+                if(axis.getToolTip) {
+                    axisTooltipFound = true
+                    var coord;
+                    if (axes[i].mode=="left" || axes[i].mode=="right")
+                        coord = yd
+                    else
+                        coord = xd
+                    var tooltipValue = axes[i].getToolTip(coord)
+                    if(tooltipValue)
+                        labels.push(tooltipValue)                        
+                }
+            }
+        }
+        if(axisTooltipFound) {
+            var $content = $("<div></div>").addClass('idd-tooltip-compositevalue');            
+            $content.append($("<div>"+labels.join(', ')+"</div>"));
+            return $content
+        }
+        else
+            return undefined
+    }
+
     var finalSize;
     this.measure = function (screenSize) {