SONAR-11559 corretly center bubble chart when zooming

3 files changed, 31 insertions, 17 deletions

diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
index 903d1323345..49a50d4ffcc 100644
--- a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
@@ -98,7 +98,7 @@ interface Props<T> {
   height: number;
   items: BubbleItem<T>[];
   onBubbleClick?: (ref?: T) => void;
-  padding?: [number, number, number, number];
+  padding: [number, number, number, number];
   sizeDomain?: [number, number];
   sizeRange?: [number, number];
   xDomain?: [number, number];
@@ -122,6 +122,7 @@ export default class BubbleChart<T> extends React.Component<Props<T>, State> {
     displayXTicks: true,
     displayYGrid: true,
     displayYTicks: true,
+    padding: [0, 0, 0, 0],
     sizeRange: [5, 45]
   };
 
@@ -146,7 +147,15 @@ export default class BubbleChart<T> extends React.Component<Props<T>, State> {
   };
 
   zoomed = () => {
-    this.setState({ transform: event.transform });
+    const { padding } = this.props;
+    const { x, y, k } = event.transform as { x: number; y: number; k: number };
+    this.setState({
+      transform: {
+        x: x + padding[3] * (k - 1),
+        y: y + padding[0] * (k - 1),
+        k
+      }
+    });
   };
 
   resetZoom = (event: React.MouseEvent<Link>) => {
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
index d98be168b61..df39a250e12 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
@@ -19,8 +19,13 @@
  */
 import * as React from 'react';
 import { mount } from 'enzyme';
+import { AutoSizerProps } from 'react-virtualized';
 import BubbleChart, { Bubble } from '../BubbleChart';
 
+jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => ({
+  AutoSizer: ({ children }: AutoSizerProps) => children({ width: 100, height: NaN })
+}));
+
 it('should display bubbles', () => {
   const items = [{ x: 1, y: 10, size: 7 }, { x: 2, y: 30, size: 5 }];
   const chart = mount(<BubbleChart height={100} items={items} />);
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.tsx.snap
index 9d69488fbd0..29a3fd2a7e1 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/BubbleChart-test.tsx.snap
@@ -5,8 +5,8 @@ exports[`should display bubbles 1`] = `
   key="0"
   r={45}
   scale={1}
-  x={-10}
-  y={52.3015873015873}
+  x={33.21428571428572}
+  y={70.07936507936508}
 >
   <Tooltip>
     <g>
@@ -19,7 +19,7 @@ exports[`should display bubbles 1`] = `
             "stroke": undefined,
           }
         }
-        transform="translate(-10, 52.3015873015873) scale(1)"
+        transform="translate(33.21428571428572, 70.07936507936508) scale(1)"
       />
     </g>
   </Tooltip>
@@ -31,7 +31,7 @@ exports[`should display bubbles 2`] = `
   key="1"
   r={33.57142857142857}
   scale={1}
-  x={-75}
+  x={66.42857142857144}
   y={33.57142857142857}
 >
   <Tooltip>
@@ -45,7 +45,7 @@ exports[`should display bubbles 2`] = `
             "stroke": undefined,
           }
         }
-        transform="translate(-75, 33.57142857142857) scale(1)"
+        transform="translate(66.42857142857144, 33.57142857142857) scale(1)"
       />
     </g>
   </Tooltip>
@@ -58,8 +58,8 @@ exports[`should render bubble links 1`] = `
   link="foo"
   r={45}
   scale={1}
-  x={-10}
-  y={52.3015873015873}
+  x={33.21428571428572}
+  y={70.07936507936508}
 >
   <Tooltip>
     <g>
@@ -81,7 +81,7 @@ exports[`should render bubble links 1`] = `
                 "stroke": undefined,
               }
             }
-            transform="translate(-10, 52.3015873015873) scale(1)"
+            transform="translate(33.21428571428572, 70.07936507936508) scale(1)"
           />
         </a>
       </Link>
@@ -96,7 +96,7 @@ exports[`should render bubble links 2`] = `
   link="bar"
   r={33.57142857142857}
   scale={1}
-  x={-75}
+  x={66.42857142857144}
   y={33.57142857142857}
 >
   <Tooltip>
@@ -119,7 +119,7 @@ exports[`should render bubble links 2`] = `
                 "stroke": undefined,
               }
             }
-            transform="translate(-75, 33.57142857142857) scale(1)"
+            transform="translate(66.42857142857144, 33.57142857142857) scale(1)"
           />
         </a>
       </Link>
@@ -135,8 +135,8 @@ exports[`should render bubbles with click handlers 1`] = `
   onClick={[MockFunction]}
   r={45}
   scale={1}
-  x={-10}
-  y={52.3015873015873}
+  x={33.21428571428572}
+  y={70.07936507936508}
 >
   <Tooltip>
     <g>
@@ -150,7 +150,7 @@ exports[`should render bubbles with click handlers 1`] = `
             "stroke": undefined,
           }
         }
-        transform="translate(-10, 52.3015873015873) scale(1)"
+        transform="translate(33.21428571428572, 70.07936507936508) scale(1)"
       />
     </g>
   </Tooltip>
@@ -164,7 +164,7 @@ exports[`should render bubbles with click handlers 2`] = `
   onClick={[MockFunction]}
   r={33.57142857142857}
   scale={1}
-  x={-75}
+  x={66.42857142857144}
   y={33.57142857142857}
 >
   <Tooltip>
@@ -179,7 +179,7 @@ exports[`should render bubbles with click handlers 2`] = `
             "stroke": undefined,
           }
         }
-        transform="translate(-75, 33.57142857142857) scale(1)"
+        transform="translate(66.42857142857144, 33.57142857142857) scale(1)"
       />
     </g>
   </Tooltip>