fix: fix slope line

packages/picasso.js/src/core/chart-components/ref-line/__tests__/refline.spec.js

@@ -503,7 +503,7 @@ describe('reference lines', () => {
         type: 'text',
         width: 120,
         x: 742,
-        y: 607.25,
+        y: 404,
       },
     ]);
   });
@@ -565,7 +565,7 @@ describe('reference lines', () => {
         x1: 0,
         x2: 870,
         y1: 406.5,
-        y2: 0,
+        y2: 813,
       },
       {
         anchor: 'start',
@@ -653,7 +653,7 @@ describe('reference lines', () => {
         type: 'rect',
         width: 55.4,
         x: 791.6,
-        y: 0.6000000000000014,
+        y: 392.1,
       },
       {
         anchor: 'start',
@@ -667,7 +667,7 @@ describe('reference lines', () => {
         type: 'text',
         width: 50.4,
         x: 793.6,
-        y: 10,
+        y: 401.5,
       },
     ]);
   });
@@ -721,7 +721,7 @@ describe('reference lines', () => {
     expect(rendererOutput).to.deep.equal([
       {
         type: 'circle',
-        cy: 775,
+        cy: 38,
         cx: 15,
         r: 10,
         stroke: 'transparent',
@@ -738,7 +738,7 @@ describe('reference lines', () => {
         type: 'text',
         text: 1,
         x: 11,
-        y: 779,
+        y: 42,
         fontFamily: 'Arial',
         fontSize: '13px',
         stroke: 'transparent',
@@ -748,9 +748,9 @@ describe('reference lines', () => {
       },
       {
         type: 'path',
-        d: '\n    M 7.5 786.25\n    L 22.5 786.25\n    L 15 793.75 Z\n  ',
+        d: '\n    M 7.5 26.75\n    L 22.5 26.75\n    L 15 19.25 Z\n  ',
         x: 15,
-        y: 775,
+        y: 38,
         stroke: 'transparent',
         fill: '#4D4D4D',
         strokeWidth: 0,

packages/picasso.js/src/core/chart-components/ref-line/lines-and-labels.js

@@ -66,18 +66,14 @@ function getFormatter(p, chart) {
   return null;
 }
 
-function isColliding(items, slopeValue, slope, measured, maxX, xPadding, yPadding) {
+function isColliding(items, slopeValue, measured, xPadding, yPadding) {
   for (let i = 0, len = items.length; i < len; i++) {
     const curItem = items[i];
     if (curItem?.type === 'text') {
-      if (slope > 0 && maxX !== undefined) {
-        if (
-          Math.abs(curItem.x - slopeValue.x) < curItem.width + xPadding &&
-          Math.abs(curItem.y - slopeValue.y) < measured.height + yPadding
-        ) {
-          return true;
-        }
-      } else if (Math.abs(curItem.y - slopeValue.y) < measured.height + yPadding) {
+      if (
+        Math.abs(curItem.x - slopeValue.x) < Math.max(curItem.width + xPadding, slopeValue.width + xPadding) &&
+        Math.abs(curItem.y - slopeValue.y) < measured.height + yPadding
+      ) {
         return true;
       }
     }
@@ -86,22 +82,24 @@ function isColliding(items, slopeValue, slope, measured, maxX, xPadding, yPaddin
 }
 
 function calculateX(slopeLine, line, maxX, measured, blueprint, slopeStyle) {
+  let neededPadding = 0;
   // calculate x for the various scenarios possible
   if (maxX !== undefined) {
     // docking at top
     if (maxX < DOCK_CORNER) {
-      return slopeLine.isRtl ? maxX * blueprint.width - (measured.width + slopeStyle.padding) : maxX * blueprint.width;
+      neededPadding = slopeLine.slope < 0 || slopeLine.isRtl ? slopeStyle.padding * 3 : slopeStyle.padding * 2;
+      return slopeLine.isRtl ? maxX * blueprint.width + neededPadding : maxX * blueprint.width + neededPadding;
     }
-    if (maxX > DOCK_CORNER) {
-      // very close to the corner when width doesn't fit
+    if (maxX === 1) {
+      // dock at the corner of the data area top and right
       return slopeLine.isRtl
-        ? maxX * blueprint.width - (measured.width + slopeStyle.padding * 2)
+        ? maxX * blueprint.width - (measured.width + slopeStyle.padding * 3)
         : maxX * blueprint.width - (measured.width + slopeStyle.padding * 6);
     }
-    if (maxX === 1) {
-      // dock at the corner of the data area top and right
+    if (maxX > DOCK_CORNER) {
+      // very close to the corner when width doesn't fit
       return slopeLine.isRtl
-        ? maxX * blueprint.width + (measured.width + slopeStyle.padding * 3)
+        ? maxX * blueprint.width - (measured.width + slopeStyle.padding * 3)
         : maxX * blueprint.width - (measured.width + slopeStyle.padding * 6);
     }
   } else if (slopeLine.slope > 0) {
@@ -326,7 +324,11 @@ export function createLineWithLabel({ chart, blueprint, renderer, p, settings, i
   // Always push the line,
   // but this is done after collision detection,
   // because otherwise it would collide with it's own line
-  items.push(line);
+  // check for slopeline if the points are almost on the blueprints edge
+  if (line) {
+    items.push(line);
+  }
+
   if (slopeLine?.slope !== 0 && (slopeLine?.showLabel || slopeLine?.showValue)) {
     // create data area labels for slope line
     let valueString;
@@ -351,11 +353,10 @@ export function createLineWithLabel({ chart, blueprint, renderer, p, settings, i
       const maxX = isMaxY(chart, slopeLine.slope, slopeLine.value)
         ? getMaxXPosition(chart, slopeLine.slope, slopeLine.value)
         : undefined;
-      const maxY = maxX === undefined ? Math.abs(line.y2) : 1;
       const xPadding = maxX !== undefined && !slopeLine.isRtl ? slopeStyle.padding * 3 : slopeStyle.padding;
       const yPadding = maxX !== undefined || slopeLine.slope > 0 ? slopeStyle.padding * 3 : slopeStyle.padding;
       const x = calculateX(slopeLine, line, maxX, measured, blueprint, slopeStyle);
-      const y = slopeLine.slope > 0 ? maxY : line.y1;
+      const y = Math.min(line.y1, line.y2);
       // if coloredBackground is true make a rect
       if (slopeLine.labelStroke) {
         labelBackground = {
@@ -386,7 +387,7 @@ export function createLineWithLabel({ chart, blueprint, renderer, p, settings, i
         maxWidth: maxLabelWidth,
         width: measured.width,
       };
-      if (!isColliding(items, slopeLabel, slopeLine.slope, measured, maxX, xPadding, yPadding)) {
+      if (!isColliding(items, slopeLabel, measured, xPadding, yPadding)) {
         if (labelBackground) {
           items.push(labelBackground);
         }

packages/picasso.js/src/core/chart-components/ref-line/oob.js

@@ -141,3 +141,7 @@ export function oobManager({ blueprint, oob, settings, items }) {
     }
   }
 }
+
+export function isOob(value, min, max) {
+  return value < min || value > max;
+}

packages/picasso.js/src/core/chart-components/ref-line/refline.js

@@ -1,6 +1,6 @@
 import extend from 'extend';
 import { transposer } from '../../transposer/transposer';
-import { oobManager } from './oob';
+import { isOob, oobManager } from './oob';
 import { createLineWithLabel } from './lines-and-labels';
 
 function createOobData(line) {
@@ -39,6 +39,25 @@ function getPosition(scale, value) {
   }
   return scale(value);
 }
+const EPSILON = 1e-15;
+function isIdentical(p1, p2) {
+  return p1 && p2 && Math.abs(p1.x - p2.x) < EPSILON && Math.abs(p1.y - p2.y) < EPSILON;
+}
+
+function removeDuplication(intersections) {
+  if (isIdentical(intersections[0], intersections[1])) {
+    intersections[1] = undefined;
+  }
+  if (isIdentical(intersections[1], intersections[2])) {
+    intersections[2] = undefined;
+  }
+  if (isIdentical(intersections[2], intersections[3])) {
+    intersections[3] = undefined;
+  }
+  if (isIdentical(intersections[3], intersections[0])) {
+    intersections[3] = undefined;
+  }
+}
 
 /**
  * Component settings
@@ -268,21 +287,39 @@ const refLineComponent = {
           const scaleY = this.chart.scale({ scale: 'y' });
           const minX = scaleX.min();
           const maxX = scaleX.max();
-          slopeLine = { ...p };
-          slopeLine.x1 = getPosition(scaleX, minX);
-          slopeLine.x2 = getPosition(scaleX, maxX);
+          const minY = scaleY.min();
+          const maxY = scaleY.max();
+          slopeLine = { ...p, x1: undefined, y1: undefined, x2: undefined, y2: undefined };
           const y1 = minX * p.slope + p.value;
           const y2 = maxX * p.slope + p.value;
-          slopeLine.y1 = getPosition(scaleY, y1);
-          slopeLine.y2 = getPosition(scaleY, y2);
-          if (slopeLine.y1 > 1 && slopeLine.y2 > 1) {
-            oob[`y${slopeLine.y1 > 1 ? 1 : 0}`].push(createOobData(p));
-            return;
+          const x1 = (minY - p.value) / p.slope;
+          const x2 = (maxY - p.value) / p.slope;
+          let intersections = [];
+          if (!isOob(y1, minY, maxY)) {
+            intersections[0] = { x: getPosition(scaleX, minX), y: getPosition(scaleY, y1) };
+          }
+          if (!isOob(x1, minX, maxX)) {
+            intersections[1] = { x: getPosition(scaleX, x1), y: 1 };
+          }
+          if (!isOob(y2, minY, maxY)) {
+            intersections[2] = { x: getPosition(scaleX, maxX), y: getPosition(scaleY, y2) };
+          }
+          if (!isOob(x2, minX, maxX)) {
+            intersections[3] = { x: getPosition(scaleX, x2), y: 0 };
+          }
+          const numIntersections = intersections.filter((i) => !!i).length;
+          if (numIntersections > 2) {
+            removeDuplication(intersections);
           }
-          if (slopeLine.y1 < 0 && slopeLine.y2 < 0) {
-            oob[`y${slopeLine.y1 < 1 ? 0 : 1}`].push(createOobData(p));
+          intersections = intersections.filter((i) => !!i);
+          if (intersections.length < 2) {
+            oob[`y${y1 > maxY ? 0 : 1}`].push(createOobData(p));
             return;
           }
+          slopeLine.x1 = intersections[0].x;
+          slopeLine.y1 = intersections[0].y;
+          slopeLine.x2 = intersections[1].x;
+          slopeLine.y2 = intersections[1].y;
         } else {
           slopeLine = undefined;
         }