From a2f34c939714270610587833771b4066219b44dc Mon Sep 17 00:00:00 2001
From: archmoj <mojtaba@plot.ly>
Date: Wed, 18 Nov 2020 10:39:01 -0500
Subject: [PATCH] adjust hover positions on parcats category bands in respect
 to css transforms

---
 src/traces/parcats/parcats.js | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/traces/parcats/parcats.js b/src/traces/parcats/parcats.js
index a5fc1a60659..143199c8ba3 100644
--- a/src/traces/parcats/parcats.js
+++ b/src/traces/parcats/parcats.js
@@ -765,7 +765,10 @@ function emitPointsEventColorHovermode(bandElement, eventName, event) {
  *  HTML element for band
  *
  */
-function createHoverLabelForCategoryHovermode(rootBBox, bandElement) {
+function createHoverLabelForCategoryHovermode(gd, rootBBox, bandElement) {
+    var scaleX = gd._fullLayout._inverseScaleX;
+    var scaleY = gd._fullLayout._inverseScaleY;
+
     // Selections
     var rectSelection = d3.select(bandElement.parentNode).select('rect.catrect');
     var rectBoundingBox = rectSelection.node().getBoundingClientRect();
@@ -813,8 +816,8 @@ function createHoverLabelForCategoryHovermode(rootBBox, bandElement) {
     var hovertext = hoverinfoParts.join('<br>');
     return {
         trace: trace,
-        x: hoverCenterX - rootBBox.left,
-        y: hoverCenterY - rootBBox.top,
+        x: scaleX * (hoverCenterX - rootBBox.left),
+        y: scaleY * (hoverCenterY - rootBBox.top),
         text: hovertext,
         color: 'lightgray',
         borderColor: 'black',
@@ -843,7 +846,7 @@ function createHoverLabelForCategoryHovermode(rootBBox, bandElement) {
  *  HTML element for band
  *
  */
-function createHoverLabelForDimensionHovermode(rootBBox, bandElement) {
+function createHoverLabelForDimensionHovermode(gd, rootBBox, bandElement) {
     var allHoverlabels = [];
 
     d3.select(bandElement.parentNode.parentNode)
@@ -851,7 +854,7 @@ function createHoverLabelForDimensionHovermode(rootBBox, bandElement) {
         .select('rect.catrect')
         .each(function() {
             var bandNode = this;
-            allHoverlabels.push(createHoverLabelForCategoryHovermode(rootBBox, bandNode));
+            allHoverlabels.push(createHoverLabelForCategoryHovermode(gd, rootBBox, bandNode));
         });
 
     return allHoverlabels;
@@ -866,7 +869,10 @@ function createHoverLabelForDimensionHovermode(rootBBox, bandElement) {
  *  HTML element for band
  *
  */
-function createHoverLabelForColorHovermode(rootBBox, bandElement) {
+function createHoverLabelForColorHovermode(gd, rootBBox, bandElement) {
+    var scaleX = gd._fullLayout._inverseScaleX;
+    var scaleY = gd._fullLayout._inverseScaleY;
+
     var bandBoundingBox = bandElement.getBoundingClientRect();
 
     // Models
@@ -944,8 +950,8 @@ function createHoverLabelForColorHovermode(rootBBox, bandElement) {
 
     return {
         trace: trace,
-        x: hoverCenterX - rootBBox.left,
-        y: hoverCenterY - rootBBox.top,
+        x: scaleX * (hoverCenterX - rootBBox.left),
+        y: scaleY * (hoverCenterY - rootBBox.top),
         // name: 'NAME',
         text: hovertext,
         color: bandViewModel.color,
@@ -1008,11 +1014,11 @@ function mouseoverCategoryBand(bandViewModel) {
             if(bandViewModel.parcatsViewModel.hoverinfoItems.indexOf('none') === -1) {
                 var hoverItems;
                 if(hoveron === 'category') {
-                    hoverItems = createHoverLabelForCategoryHovermode(rootBBox, bandElement);
+                    hoverItems = createHoverLabelForCategoryHovermode(gd, rootBBox, bandElement);
                 } else if(hoveron === 'color') {
-                    hoverItems = createHoverLabelForColorHovermode(rootBBox, bandElement);
+                    hoverItems = createHoverLabelForColorHovermode(gd, rootBBox, bandElement);
                 } else if(hoveron === 'dimension') {
-                    hoverItems = createHoverLabelForDimensionHovermode(rootBBox, bandElement);
+                    hoverItems = createHoverLabelForDimensionHovermode(gd, rootBBox, bandElement);
                 }
 
                 if(hoverItems) {