Fix: y2 axis label going out of scope (fixes #110) (#125)

cerner · Dec 20, 2019 · 957a3f5 · 957a3f5
1 parent 7d3d238
commit 957a3f5
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 25 deletions.
diff --git a/src/main/js/controls/Timeline/helpers/creationHelpers.js b/src/main/js/controls/Timeline/helpers/creationHelpers.js
@@ -91,7 +91,7 @@ const getXAxisXPosition = (config) => config.padding.left;
  * @returns {number} Position for the axis
  */
 const getXAxisYPosition = (config) =>
-    (config.padding.top + config.padding.bottom) * 2;
+    config.padding.top * 1.5 + config.padding.bottom;
 
 /**
  * X Axis's width that will hold equally spaced ticks

diff --git a/src/main/js/helpers/axis.js b/src/main/js/helpers/axis.js
@@ -691,11 +691,9 @@ const getY2AxisWidth = (config) => {
     if (config.padding.hasCustomPadding) {
         return config.padding.right;
     }
-    return (
-        (hasY2Axis(config.axis)
-            ? getYAxisWidth(constants.Y2_AXIS, config)
-            : 20) + config.padding.right
-    );
+    return hasY2Axis(config.axis)
+        ? getYAxisWidth(constants.Y2_AXIS, config)
+        : 20;
 };
 /**
  * Checks if X Axis orientation is set to top
@@ -720,7 +718,7 @@ const calculateAxesSize = (config) => {
     config.axisSizes = {};
     config.axisSizes.y =
         getYAxisWidth(constants.Y_AXIS, config) + config.padding.left;
-    config.axisSizes.y2 = getY2AxisWidth(config);
+    config.axisSizes.y2 = getY2AxisWidth(config) + config.padding.right;
     config.axisSizes.x = getXAxisHeight(config);
 };
 /**

diff --git a/src/main/js/helpers/constants.js b/src/main/js/helpers/constants.js
@@ -149,7 +149,7 @@ export const AXES_ORIENTATION = {
 export default {
     PADDING: {
         top: 10,
-        bottom: 2.5,
+        bottom: 5,
         left: 30,
         right: 50,
         trackLabel: 100

diff --git a/src/test/unit/controls/Gantt/GanttGenerate-spec.js b/src/test/unit/controls/Gantt/GanttGenerate-spec.js
@@ -826,13 +826,13 @@ describe("Gantt - Generate", () => {
                 const datelineElement = fetchElementByClass(styles.dateline);
                 expect(
                     toNumber(datelineElement.getAttribute("x1"), 10)
-                ).toBeCloseTo(340);
+                ).toBeCloseTo(338);
                 expect(
                     toNumber(datelineElement.getAttribute("y1"), 10)
                 ).toBeCloseTo(0);
                 expect(
                     toNumber(datelineElement.getAttribute("x2"), 10)
-                ).toBeCloseTo(340);
+                ).toBeCloseTo(338);
                 expect(
                     toNumber(datelineElement.getAttribute("y2"), 10)
                 ).toBeCloseTo(0);
@@ -885,7 +885,7 @@ describe("Gantt - Generate", () => {
                 const translate = getSVGAnimatedTransformList(
                     datelinePointGroupElement.getAttribute("transform")
                 ).translate;
-                expect(toNumber(translate[0], 10)).toBeCloseTo(340);
+                expect(toNumber(translate[0], 10)).toBeCloseTo(338);
                 expect(toNumber(translate[1], 10)).toBeCloseTo(0);
                 done();
             });

diff --git a/src/test/unit/controls/Gantt/GanttLoad-spec.js b/src/test/unit/controls/Gantt/GanttLoad-spec.js
@@ -470,7 +470,7 @@ describe("When custom padding is used in input", () => {
         gantt = new Gantt(ganttConfig);
         const expectedOutput = {
             top: 10,
-            bottom: 2.5,
+            bottom: 5,
             left: 100, // defaults to constants trackLabel
             right: 50,
             hasCustomPadding: false
@@ -481,9 +481,7 @@ describe("When custom padding is used in input", () => {
         expect(toNumber(contentContainer.attr("x"), 10)).toEqual(
             gantt.config.axisSizes.y + gantt.config.axisLabelWidths.y
         );
-        expect(toNumber(contentContainer.attr("y"), 10)).toEqual(
-            (2.5 + 10) * 2
-        );
+        expect(toNumber(contentContainer.attr("y"), 10)).toEqual((5 + 10) * 2);
     });
     it("default padding applied when custom padding half used", () => {
         const primaryContent = getData();
@@ -494,7 +492,7 @@ describe("When custom padding is used in input", () => {
         gantt = new Gantt(ganttConfig);
         const expectedOutput = {
             top: 50,
-            bottom: 2.5,
+            bottom: 5,
             left: 100,
             right: 50,
             hasCustomPadding: true
@@ -505,9 +503,7 @@ describe("When custom padding is used in input", () => {
         expect(toNumber(contentContainer.attr("x"), 10)).toEqual(
             gantt.config.axisSizes.y + gantt.config.axisLabelWidths.y
         );
-        expect(toNumber(contentContainer.attr("y"), 10)).toEqual(
-            (50 + 2.5) * 2
-        );
+        expect(toNumber(contentContainer.attr("y"), 10)).toEqual((50 + 5) * 2);
     });
     it("position of content container starts where canvas starts", () => {
         const primaryContent = getData();

diff --git a/src/test/unit/controls/Graph/Graph-spec.js b/src/test/unit/controls/Graph/Graph-spec.js
@@ -529,7 +529,7 @@ describe("Graph", () => {
                 expect(graph.config.canvasHeight).toBeGreaterThan(0);
             });
             it("Sets the height correctly", () => {
-                expect(graph.config.height).toBe(237.5);
+                expect(graph.config.height).toBe(235);
             });
             it("Sets X axis position correctly", () => {
                 const axisXElement = fetchElementByClass(styles.axisX);

diff --git a/src/test/unit/controls/Graph/GraphResize-spec.js b/src/test/unit/controls/Graph/GraphResize-spec.js
@@ -191,7 +191,7 @@ describe("Graph - Resize", () => {
             graph = new Graph(axisData);
             const expectedOutput = {
                 top: 10,
-                bottom: 2.5,
+                bottom: 5,
                 left: 30,
                 right: 50,
                 hasCustomPadding: false
@@ -207,7 +207,7 @@ describe("Graph - Resize", () => {
             graph = new Graph(axisData);
             const expectedOutput = {
                 top: 40,
-                bottom: 2.5,
+                bottom: 5,
                 left: 30,
                 right: 50,
                 hasCustomPadding: true
@@ -295,7 +295,7 @@ describe("Graph - Resize", () => {
                 );
                 expect(
                     toNumber(contentContainer.attr("width"), 10)
-                ).toBeCloserTo(762);
+                ).toBeCloserTo(742);
                 expect(toNumber(contentContainer.attr("height"))).toBeCloserTo(
                     250
                 );

diff --git a/src/test/unit/controls/Timeline/Timeline-spec.js b/src/test/unit/controls/Timeline/Timeline-spec.js
@@ -471,7 +471,8 @@ describe("Timeline", () => {
             const currentWidth =
                 constants.PADDING.left +
                 constants.PADDING.right +
-                (constants.PADDING.top + constants.PADDING.bottom) * 2;
+                constants.PADDING.top * 1.5 +
+                constants.PADDING.bottom;
             const defsElement = fetchElementByClass(styles.canvas).firstChild;
             expect(defsElement.nodeName).toBe("defs");
             expect(defsElement.firstChild.nodeName).toBe("clipPath");

diff --git a/src/test/unit/helpers/commonHelpers.js b/src/test/unit/helpers/commonHelpers.js
@@ -6,7 +6,7 @@ export const TRANSITION_DELAY = 400;
 /*
  * @type {number} Padding bottom
  */
-export const PADDING_BOTTOM = 2;
+export const PADDING_BOTTOM = 5;
 /**
  * Flushes all D3 transitions before calling an event
  *