feat: added radialboundschecking and corrected unit tests

.gitignore

@@ -2,6 +2,7 @@
 *.tmp
 *.log
 .DS_Store
+junit.xml
 stats.json
 .idea/
 .vscode/

packages/picasso.js/src/core/chart-components/axis/__tests__/axis-arc-label-node.spec.js

@@ -5,11 +5,11 @@ function createTick(position, label) {
   return {
     position,
     label,
-    value: 1.23, // just some dummy value to test node value for tracking animation
+    value: 1.23,
   };
 }
 
-describe('Axis Label Node', () => {
+describe('Axis Arc Label Node', () => {
   const innerRect = {
     x: 0,
     y: 0,
@@ -64,7 +64,7 @@ describe('Axis Label Node', () => {
     });
 
     describe('Style align', () => {
-      it('start on left side of tick', () => {
+      it('the label should be placed on the left side of the tick', () => {
         buildOpts.align = 'top';
         tick = createTick(1, '0');
         const result = buildArcLabels(tick, buildOpts);
@@ -73,7 +73,7 @@ describe('Axis Label Node', () => {
         expect(result.anchor).to.equal('end');
       });
 
-      it('start on left side of tick', () => {
+      it('label with different position, but should still be placed in the left side of the tick', () => {
         buildOpts.align = 'top';
         tick = createTick(0.7, '100');
         const result = buildArcLabels(tick, buildOpts);
@@ -82,7 +82,7 @@ describe('Axis Label Node', () => {
         expect(result.anchor).to.equal('end');
       });
 
-      it('start on right side of tick', () => {
+      it('the label should be placed on the right side of the tick', () => {
         buildOpts.align = 'top';
         tick = createTick(0.4, '250');
         const result = buildArcLabels(tick, buildOpts);
@@ -101,7 +101,7 @@ describe('Axis Label Node', () => {
       });
     });
 
-    describe('Not text in tick label', () => {
+    describe('Not text in tick label-property', () => {
       it('tick.label is undefined', () => {
         buildOpts.align = 'top';
         tick = createTick(0, undefined);

packages/picasso.js/src/core/chart-components/axis/__tests__/axis-arc-node.spec.js

@@ -59,12 +59,12 @@ describe('Axis Arc Line Node', () => {
     it('Structure Properties', () => {
       const rect = buildOpts.innerRect;
       const centerPoint = { cx: rect.width / 2, cy: rect.height / 2 };
-      const plotSize = Math.min(rect.height, rect.width) / 2;
+      const halfPlotSize = Math.min(rect.height, rect.width) / 2;
       expected.transform = `translate(0, 0) translate(${centerPoint.cx}, ${centerPoint.cy})`;
       expected.arcDatum.startAngle = buildOpts.startAngle;
       expected.arcDatum.endAngle = buildOpts.endAngle;
-      expected.desc.slice.innerRadius = buildOpts.radius * plotSize;
-      expected.desc.slice.outerRadius = buildOpts.radius * plotSize + buildOpts.style.strokeWidth;
+      expected.desc.slice.innerRadius = buildOpts.radius * halfPlotSize;
+      expected.desc.slice.outerRadius = buildOpts.radius * halfPlotSize + buildOpts.style.strokeWidth;
       expect(buildArcLine(buildOpts)).to.deep.equal(expected);
     });
   });

packages/picasso.js/src/core/chart-components/axis/__tests__/axis-arc-tick-node.spec.js

@@ -3,7 +3,7 @@ import buildArcTicks from '../axis-arc-tick-node';
 function createTick(position, value) {
   return {
     position,
-    value, // just some dummy value to test node value for tracking animation
+    value,
   };
 }
 

packages/picasso.js/src/core/chart-components/axis/axis-arc-label-node.js

@@ -35,6 +35,18 @@ function calculateMaxWidth(buildOpts, side, innerPos) {
   return maxWidth;
 }
 
+function checkRadialOutOfBounds(buildOpts, innerPos, struct) {
+  let maxHeightTop;
+  let maxHeightBottom;
+  const textHeight = parseFloat(struct.fontSize) || 0;
+  maxHeightTop = innerPos.y - textHeight / 2;
+  maxHeightBottom = buildOpts.innerRect.height - (innerPos.y + textHeight / 2);
+  if (maxHeightTop < 0 || maxHeightBottom < 0) {
+    struct.text = '';
+  }
+  return maxHeightBottom;
+}
+
 function appendCollider(tick, struct, buildOpts, tickPos) {
   collider(tick, struct, buildOpts, tickPos);
 }
@@ -46,8 +58,8 @@ function appendBounds(struct, buildOpts) {
 export default function buildArcLabels(tick, buildOpts) {
   const rect = buildOpts.innerRect;
   const centerPoint = { cx: rect.width / 2, cy: rect.height / 2 };
-  const plotSize = Math.min(rect.height, rect.width) / 2;
-  const innerRadius = plotSize * buildOpts.radius;
+  const halfPlotSize = Math.min(rect.height, rect.width) / 2;
+  const innerRadius = halfPlotSize * buildOpts.radius;
   const outerRadius = innerRadius + buildOpts.padding;
   const startAngle = buildOpts.startAngle;
   const endAngle = buildOpts.endAngle;
@@ -98,5 +110,6 @@ export default function buildArcLabels(tick, buildOpts) {
   appendStyle(struct, buildOpts);
   appendBounds(struct, buildOpts);
   appendCollider(struct, tickPos);
+  checkRadialOutOfBounds(buildOpts, innerPos, struct);
   return struct;
 }

packages/picasso.js/src/core/chart-components/axis/axis-arc-node.js

@@ -7,8 +7,8 @@ function appendStyle(struct, buildOpts) {
 export default function buildArcLine(buildOpts) {
   const rect = buildOpts.innerRect;
   const centerPoint = { cx: rect.width / 2, cy: rect.height / 2 };
-  const plotSize = Math.min(rect.height, rect.width) / 2;
-  const innerRadius = plotSize * buildOpts.radius;
+  const halfPlotSize = Math.min(rect.height, rect.width) / 2;
+  const innerRadius = halfPlotSize * buildOpts.radius;
   const outerRadius = innerRadius + buildOpts.style.strokeWidth;
   const startAngle = buildOpts.startAngle;
   const endAngle = buildOpts.endAngle;

packages/picasso.js/src/core/chart-components/axis/axis-arc-tick-node.js

@@ -15,8 +15,8 @@ function polarToCartesian(centerX, centerY, radius, angle) {
 export default function buildArcTicks(tick, buildOpts) {
   const rect = buildOpts.innerRect;
   const centerPoint = { cx: rect.width / 2, cy: rect.height / 2 };
-  const plotSize = Math.min(rect.height, rect.width) / 2;
-  const innerRadius = plotSize * buildOpts.radius;
+  const halfPlotSize = Math.min(rect.height, rect.width) / 2;
+  const innerRadius = halfPlotSize * buildOpts.radius;
   const outerRadius = innerRadius + buildOpts.padding;
   const startAngle = buildOpts.startAngle;
   const endAngle = buildOpts.endAngle;