@datarailsshared/dr_renderer 1.3.20 → 1.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.3.20",
+  "version": "1.3.21",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/dr_chart_tooltip.js

@@ -226,24 +226,31 @@ function DrChartTooltip(chart, options) {
     }
 
     this.getAnchorBox = function(el) {
+        const containerRect = this.chart.container.getBoundingClientRect();
+        const zoom = this.chart.container.clientWidth / containerRect.width;
+
         if (el.getBBox) {
-            return el.getBBox();
-        }
+            const bBox = el.getBBox();
+            bBox.x = bBox.x * zoom;
+            bBox.y = bBox.y * zoom;
+            bBox.width = bBox.width * zoom;
+            bBox.height = bBox.height * zoom;
 
-        const containerRect = this.chart.container.getBoundingClientRect();
+            return bBox;
+        }
 
         if (el.getBoundingClientRect) {
             const elRect = el.getBoundingClientRect();
             return {
-                x: elRect.x - containerRect.x,
-                y: elRect.y - containerRect.y,
-                width: elRect.width,
-                height: elRect.height,
+                x: (elRect.x - containerRect.x) * zoom,
+                y: (elRect.y - containerRect.y) * zoom,
+                width: elRect.width * zoom,
+                height: elRect.height * zoom,
             };
         }
         return {
-            x: el.x - containerRect.x,
-            y: el.y - containerRect.y,
+            x: (el.x - containerRect.x) * zoom,
+            y: (el.y - containerRect.y) * zoom,
             width: 0,
             height: 0,
         };

package/tests/dr_chart_tooltip.test.js

@@ -32,6 +32,7 @@ describe("DrChartTooltip", () => {
             },
             container: {
                 getBoundingClientRect: jest.fn().mockReturnValue(chartBBoxMock),
+                clientWidth: 800,
             },
             chartWidth: 800,
             chartHeight: 600,
@@ -349,6 +350,23 @@ describe("DrChartTooltip", () => {
             expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:15px`);
         });
 
+        it("sets a top arrow position (tooltip is smaller than anchor) on a zoomed chart", () => {
+            chartMock.container.clientWidth = 1600;
+            tooltipBBoxMock.width = 40;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 205,
+                y: 180,
+                direction: "top",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:22px`);
+        });
+
         it("sets a top arrow position (clamp left)", () => {
             tooltipBBoxMock.width = 100;
             tooltipBBoxMock.height = 20;
@@ -477,6 +495,23 @@ describe("DrChartTooltip", () => {
             expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:15px`);
         });
 
+        it("sets a left arrow position (tooltip is smaller than anchor) on a zoomed chart", () => {
+            chartMock.container.clientWidth = 1600;
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 40;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 180,
+                y: 205,
+                direction: "left",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:22px`);
+        });
+
         it("sets a left arrow position (clamp top)", () => {
             tooltipBBoxMock.width = 20;
             tooltipBBoxMock.height = 100;
@@ -593,6 +628,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 175, y: 170 });
         });
 
+        it("gets coordinates (top - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 400, y: 370 });
+        });
+
         it("gets coordinates (top - bound to the chart - left)", () => {
             anchorBBoxMock.x = 0;
             expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 8 /* offset */, y: 170 });
@@ -627,6 +667,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 215 });
         });
 
+        it("gets coordinates (left - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 290, y: 440 });
+        });
+
         it("gets coordinates (left - bound to the chart - bottom)", () => {
             anchorBBoxMock.y = 1000;
             expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 572 });
@@ -645,6 +690,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 260, y: 215 });
         });
 
+        it("gets coordinates (right - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 510, y: 440 });
+        });
+
         it("gets coordinates (right - bound to the chart - bottom)", () => {
             anchorBBoxMock.y = 1000;
             expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({