more wip heatmap gl

Author: etpinard

lib/index.js

@@ -30,7 +30,8 @@ Core.register([
     require('./scattergeo'),
     require('./choropleth'),
     require('./scattergl'),
-    require('./scatterternary')
+    require('./scatterternary'),
+    require('../src/traces/heatmapgl')
 ]);
 
 module.exports = Core;

src/plots/gl2d/scene2d.js

@@ -447,12 +447,9 @@ proto.draw = function() {
             (y / glplot.pixelRatio) - (size.t + (1-domainY[1]) * size.h)
         );
 
-
         if(result && fullLayout.hovermode) {
             var nextSelection = result.object._trace.handlePick(result);
 
-            console.log(result.dataCoord, result.pointId)
-
             if(nextSelection && (
                 !this.lastPickResult ||
                 this.lastPickResult.trace !== nextSelection.trace ||
@@ -478,6 +475,7 @@ proto.draw = function() {
                     var parts = hoverinfo.split('+');
                     if(parts.indexOf('x') === -1) selection.traceCoord[0] = undefined;
                     if(parts.indexOf('y') === -1) selection.traceCoord[1] = undefined;
+                    if(parts.indexOf('z') === -1) selection.traceCoord[2] = undefined;
                     if(parts.indexOf('text') === -1) selection.textLabel = undefined;
                     if(parts.indexOf('name') === -1) selection.name = undefined;
                 }
@@ -487,6 +485,7 @@ proto.draw = function() {
                     y: selection.screenCoord[1],
                     xLabel: this.hoverFormatter('xaxis', selection.traceCoord[0]),
                     yLabel: this.hoverFormatter('yaxis', selection.traceCoord[1]),
+                    zLabel: selection.traceCoord[2],
                     text: selection.textLabel,
                     name: selection.name,
                     color: selection.color

src/traces/heatmap/calc.js

@@ -175,6 +175,7 @@ function makeBoundArray(trace, arrayIn, v0In, dvIn, numbricks, ax) {
         v0,
         dv,
         i;
+
     if(Array.isArray(arrayIn) && !isHist && (ax.type!=='category')) {
         arrayIn = arrayIn.map(ax.d2c);
         var len = arrayIn.length;
@@ -184,7 +185,7 @@ function makeBoundArray(trace, arrayIn, v0In, dvIn, numbricks, ax) {
         // and extend it linearly based on the last two points
         if(len <= numbricks) {
             // contour plots only want the centers
-            if(isContour) arrayOut = arrayIn.slice(0, numbricks);
+            if(isContour || isGL2D) arrayOut = arrayIn.slice(0, numbricks);
             else if(numbricks === 1) arrayOut = [arrayIn[0]-0.5,arrayIn[0]+0.5];
             else {
                 arrayOut = [1.5*arrayIn[0]-0.5*arrayIn[1]];
@@ -217,7 +218,9 @@ function makeBoundArray(trace, arrayIn, v0In, dvIn, numbricks, ax) {
         else if(isHist || ax.type==='category') v0 = v0In;
         else v0 = ax.d2c(v0In);
 
-        for(i = isContour ? 0 : -0.5; i < numbricks; i++) arrayOut.push(v0 + dv * i);
+        for(i = (isContour || isGL2D) ? 0 : -0.5; i < numbricks; i++) {
+            arrayOut.push(v0 + dv * i);
+        }
     }
     return arrayOut;
 }

src/traces/heatmapgl/convert.js

@@ -11,11 +11,8 @@
 
 var createHeatmap2D = require('gl-heatmap2d');
 
-var maxRowLength = require('../heatmap/max_row_length');
 var str2RGBArray = require('../../lib/str2rgbarray');
 
-var AXES = ['xaxis', 'yaxis'];
-
 
 function Heatmap(scene, uid) {
     this.scene = scene;
@@ -48,23 +45,18 @@ function Heatmap(scene, uid) {
 var proto = Heatmap.prototype;
 
 proto.handlePick = function(pickResult) {
-    var index = this.idToIndex[pickResult.pointId];
-
-//     console.log(pickResult.pointId)
+    var index = pickResult.pointId,
+        shape = this.options.shape;
 
     return {
         trace: this,
         dataCoord: pickResult.dataCoord,
         traceCoord: [
-            this.xData[index],
-            this.yData[index]
+            this.options.x[index % shape[0]],
+            this.options.y[Math.floor(index / shape[0])],
+            this.options.z[index]
         ],
-        textLabel: Array.isArray(this.textLabels) ?
-            this.textLabels[index] :
-            this.textLabels,
-        color: Array.isArray(this.color) ?
-            this.color[index] :
-            this.color,
+        textLabel: this.textLabels[index],
         name: this.name,
         hoverinfo: this.hoverinfo
     };
@@ -73,7 +65,6 @@ proto.handlePick = function(pickResult) {
 proto.update = function(fullTrace, calcTrace) {
     var calcPt = calcTrace[0];
 
-    this.textLabels = fullTrace.text;
     this.name = fullTrace.name;
     this.hoverinfo = fullTrace.hoverinfo;
 
@@ -85,36 +76,16 @@ proto.update = function(fullTrace, calcTrace) {
         colLen = z.length;
     this.options.shape = [rowLen, colLen];
 
-    // don't use calc'ed bricks
-    // maybe use xa.makeCalcdata() ???
-    var x = fullTrace.x;
-    if(x) {
-        this.options.x = x;
-        this.bounds[0] = x[0];
-        this.bounds[2] = x[rowLen - 1];
-    }
-    else {
-        this.options.x = null;
-        this.bounds[0] = 0;
-        this.bounds[2] = rowLen
-    }
-
-    var y = fullTrace.y;
-    if(y) {
-        this.options.y = y;
-        this.bounds[1] = y[0];
-        this.bounds[3] = y[colLen - 1];
-    }
-    else {
-        this.options.y = null;
-        this.bounds[1] = 0;
-        this.bounds[3] = colLen
-    }
+    this.options.x = calcPt.x;
+    this.options.y = calcPt.y;
 
     var colorOptions = convertColorscale(fullTrace);
     this.options.colorLevels = colorOptions.colorLevels;
     this.options.colorValues = colorOptions.colorValues;
 
+    // convert text from 2D -> 1D
+    this.textLabels = [].concat.apply([], fullTrace.text);
+
     this.heatmap.update(this.options);
 };