@progress/kendo-charts 2.6.2 → 2.6.3-dev.202411211546

package/dist/es/chart/tooltip/base-tooltip.js

@@ -25,7 +25,14 @@ var BaseTooltip = (function (Class) {
             border = valueOrDefault(border, pointColor);
         }
 
-        var padding = getSpacing(options.padding || {}, "auto");
+        var padding = options.padding !== undefined ? getSpacing(options.padding) : {};
+
+        if (typeof options.padding === "object") {
+            padding.top = options.padding.top !== undefined ? padding.top : undefined;
+            padding.right = options.padding.right !== undefined ? padding.right : undefined;
+            padding.bottom = options.padding.bottom !== undefined ? padding.bottom : undefined;
+            padding.left = options.padding.left !== undefined ? padding.left : undefined;
+        }
 
         return {
             backgroundColor: background,

package/dist/es/sankey/link.js

@@ -1,22 +1,10 @@
+/* eslint-disable camelcase */
 import { drawing } from '@progress/kendo-drawing';
 import { SankeyElement } from './element';
 import { deepExtend } from '../common';
 import { defined } from '../drawing-utils';
 import { ARIA_ACTIVE_DESCENDANT } from '../common/constants';
 
-var distanceToLine = function (line, point) {
-    var ref = line[0];
-    var x1 = ref[0];
-    var y1 = ref[1];
-    var ref$1 = line[1];
-    var x2 = ref$1[0];
-    var y2 = ref$1[1];
-    var x3 = point[0];
-    var y3 = point[1];
-
-    return Math.abs((x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1)) / Math.sqrt(Math.pow( (x2 - x1), 2 ) + Math.pow( (y2 - y1), 2 ));
-};
-
 var bezierPoint = function (p1, p2, p3, p4, t) {
     var t1 = 1 - t;
     var t1t1 = t1 * t1;
@@ -24,64 +12,131 @@ var bezierPoint = function (p1, p2, p3, p4, t) {
     return (p1 * t1t1 * t1) + (3 * p2 * t * t1t1) + (3 * p3 * tt * t1) + (p4 * tt * t);
 };
 
-var angelBetweenTwoLines = function (line1, line2) {
-    var ref = line1[0];
-    var x1 = ref[0];
-    var y1 = ref[1];
-    var ref$1 = line1[1];
-    var x2 = ref$1[0];
-    var y2 = ref$1[1];
-    var ref$2 = line2[0];
-    var x3 = ref$2[0];
-    var y3 = ref$2[1];
-    var ref$3 = line2[1];
-    var x4 = ref$3[0];
-    var y4 = ref$3[1];
-
-    var a1 = Math.atan2(y2 - y1, x2 - x1);
-    var a2 = Math.atan2(y4 - y3, x4 - x3);
-
-    return Math.abs(a1 - a2);
-};
+function calculatePerpendicularLine(x1, y1, x2, y2, L) {
+    // 1. Calculate the midpoint M
+    var xM = (x1 + x2) / 2;
+    var yM = (y1 + y2) / 2;
+
+    var dx, dy;
+    if (y1 === y2) {
+        // The line AB is horizontal
+        dx = 0;
+        dy = L / 2;
+    } else if (x1 === x2) {
+        // The line AB is vertical
+        dx = L / 2;
+        dy = 0;
+    } else {
+        // Common case when the line is not horizontal or vertical
+        // 2. Calculate the slope of the original line
+        var m = (y2 - y1) / (x2 - x1);
+
+        // 3. Calculate the slope of the perpendicular line
+        var mPerp = -1 / m;
+
+        // 4. Calculate dx and dy
+        dx = (L / 2) / Math.sqrt(1 + mPerp * mPerp);
+        dy = mPerp * dx;
+    }
 
-var calculateControlPointsOffsetX = function (link, rtl) {
-    var x0 = link.x0;
-    var x1 = link.x1;
-    var y0 = link.y0;
-    var y1 = link.y1;
-    var xC = (x0 + x1) / 2;
+    // 5. Coordinates of the points of the perpendicular line
+    var P1 = { x: xM - dx, y: yM - dy };
+    var P2 = { x: xM + dx, y: yM + dy };
 
-    var width = link.width;
-    var halfWidth = width / 2;
+    return { P1: P1, P2: P2 };
+}
 
-    // upper curve, t = 0.5
-    var upperCurveMiddleLine = [[(x0 + xC) / 2, y0 - halfWidth], [(x1 + xC) / 2, y1 - halfWidth]];
+function findIntersection(a, b, L, p, q) {
+    // Midpoint between a and b
+    var midpoint = {
+        x: (a.x + b.x) / 2,
+        y: (a.y + b.y) / 2
+    };
+
+    // Vector of the line ab
+    var ab_dx = b.x - a.x;
+    var ab_dy = b.y - a.y;
+
+    // Vector, perpendicular to ab
+    var perp_dx = -ab_dy;
+    var perp_dy = ab_dx;
+
+    // Normalize the perpendicular vector and scale it to 2*L
+    var magnitude = Math.sqrt(perp_dx * perp_dx + perp_dy * perp_dy);
+    perp_dx = (perp_dx / magnitude) * L;
+    perp_dy = (perp_dy / magnitude) * L;
+
+    // The endpoints of the perpendicular, 2*L long
+    var c1 = {
+        x: midpoint.x + perp_dx,
+        y: midpoint.y + perp_dy
+    };
+    var c2 = {
+        x: midpoint.x - perp_dx,
+        y: midpoint.y - perp_dy
+    };
 
-    // for lower curve, bezier-point at t = 0.5
-    // for the case t = 0.5, the bezier-point is the middle point of the curve. => ((y0 + halfWidth) + (y1 + halfWidth)) / 2
-    var lowerCurveMiddlePoint = [xC, bezierPoint(y0 + halfWidth, y0 + halfWidth, y1 + halfWidth, y1 + halfWidth, 0.5)];
+    // Check for intersection of the lines pq and the perpendicular
+    var pq_dx = q.x - p.x;
+    var pq_dy = q.y - p.y;
 
-    // The actual width of the link at its middle point as can be seen on the screen.
-    var actualWidth = distanceToLine(upperCurveMiddleLine, lowerCurveMiddlePoint);
+    var denominator = (pq_dy) * (c1.x - c2.x) - (pq_dx) * (c1.y - c2.y);
 
-    var upperNarrowness = (width - actualWidth) / 2;
+    if (Math.abs(denominator) < 1e-10) {
+        // The lines are almost parallel, no intersection
+        return null;
+    }
 
-    // The line `upperCurveMiddleLine` shows the upper border of the link.
-    // Assumption 1: Translated to the left to the desired link width and the translate value will be the `offset`.
-    // Assumption 2: The translate value is a hypotenuse of a triangle.
-    var alpha = angelBetweenTwoLines(upperCurveMiddleLine, [[x0, y0 - halfWidth], [xC, y0 - halfWidth]]);
-    var a = upperNarrowness;
-    var b = Math.sin(alpha) * a;
-    var offset = Math.sqrt(a * a + b * b);
-    // Another option is to assume the triangle is isosceles
-    // => offset = Math.sqrt(2) * upperNarrowness;
+    var ua = (pq_dx * (c2.y - p.y) - pq_dy * (c2.x - p.x)) / denominator;
+    var ub = ((c1.x - c2.x) * (c2.y - p.y) - (c1.y - c2.y) * (c2.x - p.x)) / denominator;
 
-    var sign = y0 - y1 > 0 ? (-1) : 1;
-    if (rtl) {
-        sign = -sign;
+    if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
+        var intersection = {
+            x: c2.x + ua * (c1.x - c2.x),
+            // y: c2.y + ua * (c1.y - c2.y)
+        };
+        return intersection;
     }
 
-    return sign * offset;
+    // No intersection of the segments
+    return null;
+}
+
+var calculateControlPointsOffsetX = function (link, rtl) {
+    var halfWidth = link.width / 2;
+    var x0 = rtl ? link.x1 : link.x0;
+    var x1 = rtl ? link.x0 : link.x1;
+    var y0 = rtl ? link.y1 : link.y0;
+    var y1 = rtl ? link.y0 : link.y1;
+
+    var xC = (x0 + x1) / 2;
+    var middlePoint = [xC, bezierPoint(y0, y0, y1, y1, 0.5)];
+
+    var tH = 0.4999;
+
+    var pointH = [
+        bezierPoint(x0, xC, xC, x1, tH),
+        bezierPoint(y0, y0, y1, y1, tH)
+    ];
+
+    var line = calculatePerpendicularLine(middlePoint[0], middlePoint[1], pointH[0], pointH[1], link.width);
+
+    var middlePointDown = [xC, bezierPoint(y0 + halfWidth, y0 + halfWidth, y1 + halfWidth, y1 + halfWidth, 0.5)];
+    // const middlePointUp = [xC, bezierPoint(y0 - halfWidth, y0 - halfWidth, y1 - halfWidth, y1 - halfWidth, 0.5)];
+
+    var P = line.P1.y > line.P2.y ? line.P1 : line.P2;
+    var L = halfWidth;
+    var LDir = (y0 > y1 ? 1 : -1) * L;
+    var a = P;
+    var b = { x: middlePointDown[0], y: middlePointDown[1] };
+    var p = { x: middlePointDown[0], y: middlePointDown[1] };
+    var q = { x: Math.max(1, middlePointDown[0] + LDir), y: middlePointDown[1] };
+    var Pmx = findIntersection(a, b, L, p, q) || { x: (middlePointDown[0] + P.x) / 2 };
+    var P1 = x0;
+    var P4 = x1;
+    var P2 = (Pmx.x - (0.125 * P1) - (0.125 * P4)) / 0.75;
+
+    return xC - P2;
 };
 
 export var Link = (function (SankeyElement) {
@@ -134,9 +189,9 @@ export var Link = (function (SankeyElement) {
         if (!this.options.navigatable) {
             return;
         }
+
         var ref = this.options;
         var link = ref.link;
-        var rtl = ref.rtl;
         var x0 = link.x0;
         var x1 = link.x1;
         var y0 = link.y0;
@@ -144,7 +199,7 @@ export var Link = (function (SankeyElement) {
         var xC = (x0 + x1) / 2;
         var halfWidth = link.width / 2;
 
-        var offset = calculateControlPointsOffsetX(link, rtl);
+        var offset = calculateControlPointsOffsetX(link, this.options.rtl);
 
         this._highlight = new drawing.Path({ stroke: this.options.focusHighlight, visible: false })
             .moveTo(x0, y0 + halfWidth)

package/dist/es2015/chart/tooltip/base-tooltip.js

@@ -20,7 +20,14 @@ class BaseTooltip extends Class {
             border = valueOrDefault(border, pointColor);
         }
 
-        const padding = getSpacing(options.padding || {}, "auto");
+        const padding = options.padding !== undefined ? getSpacing(options.padding) : {};
+
+        if (typeof options.padding === "object") {
+            padding.top = options.padding.top !== undefined ? padding.top : undefined;
+            padding.right = options.padding.right !== undefined ? padding.right : undefined;
+            padding.bottom = options.padding.bottom !== undefined ? padding.bottom : undefined;
+            padding.left = options.padding.left !== undefined ? padding.left : undefined;
+        }
 
         return {
             backgroundColor: background,

package/dist/es2015/sankey/link.js

@@ -1,17 +1,10 @@
+/* eslint-disable camelcase */
 import { drawing } from '@progress/kendo-drawing';
 import { SankeyElement } from './element';
 import { deepExtend } from '../common';
 import { defined } from '../drawing-utils';
 import { ARIA_ACTIVE_DESCENDANT } from '../common/constants';
 
-const distanceToLine = (line, point) => {
-    const [x1, y1] = line[0];
-    const [x2, y2] = line[1];
-    const [x3, y3] = point;
-
-    return Math.abs((x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1)) / Math.sqrt(Math.pow( (x2 - x1), 2 ) + Math.pow( (y2 - y1), 2 ));
-};
-
 const bezierPoint = (p1, p2, p3, p4, t) => {
     const t1 = 1 - t;
     const t1t1 = t1 * t1;
@@ -19,53 +12,131 @@ const bezierPoint = (p1, p2, p3, p4, t) => {
     return (p1 * t1t1 * t1) + (3 * p2 * t * t1t1) + (3 * p3 * tt * t1) + (p4 * tt * t);
 };
 
-const angelBetweenTwoLines = (line1, line2) => {
-    const [x1, y1] = line1[0];
-    const [x2, y2] = line1[1];
-    const [x3, y3] = line2[0];
-    const [x4, y4] = line2[1];
-
-    const a1 = Math.atan2(y2 - y1, x2 - x1);
-    const a2 = Math.atan2(y4 - y3, x4 - x3);
-
-    return Math.abs(a1 - a2);
-};
-
-const calculateControlPointsOffsetX = (link, rtl) => {
-    const { x0, x1, y0, y1 } = link;
-    let xC = (x0 + x1) / 2;
-
-    const width = link.width;
-    const halfWidth = width / 2;
-
-    // upper curve, t = 0.5
-    const upperCurveMiddleLine = [[(x0 + xC) / 2, y0 - halfWidth], [(x1 + xC) / 2, y1 - halfWidth]];
+function calculatePerpendicularLine(x1, y1, x2, y2, L) {
+    // 1. Calculate the midpoint M
+    let xM = (x1 + x2) / 2;
+    let yM = (y1 + y2) / 2;
+
+    let dx, dy;
+    if (y1 === y2) {
+        // The line AB is horizontal
+        dx = 0;
+        dy = L / 2;
+    } else if (x1 === x2) {
+        // The line AB is vertical
+        dx = L / 2;
+        dy = 0;
+    } else {
+        // Common case when the line is not horizontal or vertical
+        // 2. Calculate the slope of the original line
+        let m = (y2 - y1) / (x2 - x1);
+
+        // 3. Calculate the slope of the perpendicular line
+        let mPerp = -1 / m;
+
+        // 4. Calculate dx and dy
+        dx = (L / 2) / Math.sqrt(1 + mPerp * mPerp);
+        dy = mPerp * dx;
+    }
 
-    // for lower curve, bezier-point at t = 0.5
-    // for the case t = 0.5, the bezier-point is the middle point of the curve. => ((y0 + halfWidth) + (y1 + halfWidth)) / 2
-    const lowerCurveMiddlePoint = [xC, bezierPoint(y0 + halfWidth, y0 + halfWidth, y1 + halfWidth, y1 + halfWidth, 0.5)];
+    // 5. Coordinates of the points of the perpendicular line
+    let P1 = { x: xM - dx, y: yM - dy };
+    let P2 = { x: xM + dx, y: yM + dy };
 
-    // The actual width of the link at its middle point as can be seen on the screen.
-    const actualWidth = distanceToLine(upperCurveMiddleLine, lowerCurveMiddlePoint);
+    return { P1, P2 };
+}
 
-    const upperNarrowness = (width - actualWidth) / 2;
+function findIntersection(a, b, L, p, q) {
+    // Midpoint between a and b
+    const midpoint = {
+        x: (a.x + b.x) / 2,
+        y: (a.y + b.y) / 2
+    };
+
+    // Vector of the line ab
+    const ab_dx = b.x - a.x;
+    const ab_dy = b.y - a.y;
+
+    // Vector, perpendicular to ab
+    let perp_dx = -ab_dy;
+    let perp_dy = ab_dx;
+
+    // Normalize the perpendicular vector and scale it to 2*L
+    const magnitude = Math.sqrt(perp_dx * perp_dx + perp_dy * perp_dy);
+    perp_dx = (perp_dx / magnitude) * L;
+    perp_dy = (perp_dy / magnitude) * L;
+
+    // The endpoints of the perpendicular, 2*L long
+    const c1 = {
+        x: midpoint.x + perp_dx,
+        y: midpoint.y + perp_dy
+    };
+    const c2 = {
+        x: midpoint.x - perp_dx,
+        y: midpoint.y - perp_dy
+    };
+
+    // Check for intersection of the lines pq and the perpendicular
+    const pq_dx = q.x - p.x;
+    const pq_dy = q.y - p.y;
+
+    const denominator = (pq_dy) * (c1.x - c2.x) - (pq_dx) * (c1.y - c2.y);
+
+    if (Math.abs(denominator) < 1e-10) {
+        // The lines are almost parallel, no intersection
+        return null;
+    }
 
-    // The line `upperCurveMiddleLine` shows the upper border of the link.
-    // Assumption 1: Translated to the left to the desired link width and the translate value will be the `offset`.
-    // Assumption 2: The translate value is a hypotenuse of a triangle.
-    const alpha = angelBetweenTwoLines(upperCurveMiddleLine, [[x0, y0 - halfWidth], [xC, y0 - halfWidth]]);
-    const a = upperNarrowness;
-    const b = Math.sin(alpha) * a;
-    const offset = Math.sqrt(a * a + b * b);
-    // Another option is to assume the triangle is isosceles
-    // => offset = Math.sqrt(2) * upperNarrowness;
+    const ua = (pq_dx * (c2.y - p.y) - pq_dy * (c2.x - p.x)) / denominator;
+    const ub = ((c1.x - c2.x) * (c2.y - p.y) - (c1.y - c2.y) * (c2.x - p.x)) / denominator;
 
-    let sign = y0 - y1 > 0 ? (-1) : 1;
-    if (rtl) {
-        sign = -sign;
+    if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
+        const intersection = {
+            x: c2.x + ua * (c1.x - c2.x),
+            // y: c2.y + ua * (c1.y - c2.y)
+        };
+        return intersection;
     }
 
-    return sign * offset;
+    // No intersection of the segments
+    return null;
+}
+
+const calculateControlPointsOffsetX = (link, rtl) => {
+    const halfWidth = link.width / 2;
+    const x0 = rtl ? link.x1 : link.x0;
+    const x1 = rtl ? link.x0 : link.x1;
+    const y0 = rtl ? link.y1 : link.y0;
+    const y1 = rtl ? link.y0 : link.y1;
+
+    const xC = (x0 + x1) / 2;
+    const middlePoint = [xC, bezierPoint(y0, y0, y1, y1, 0.5)];
+
+    const tH = 0.4999;
+
+    const pointH = [
+        bezierPoint(x0, xC, xC, x1, tH),
+        bezierPoint(y0, y0, y1, y1, tH)
+    ];
+
+    const line = calculatePerpendicularLine(middlePoint[0], middlePoint[1], pointH[0], pointH[1], link.width);
+
+    const middlePointDown = [xC, bezierPoint(y0 + halfWidth, y0 + halfWidth, y1 + halfWidth, y1 + halfWidth, 0.5)];
+    // const middlePointUp = [xC, bezierPoint(y0 - halfWidth, y0 - halfWidth, y1 - halfWidth, y1 - halfWidth, 0.5)];
+
+    const P = line.P1.y > line.P2.y ? line.P1 : line.P2;
+    const L = halfWidth;
+    const LDir = (y0 > y1 ? 1 : -1) * L;
+    const a = P;
+    const b = { x: middlePointDown[0], y: middlePointDown[1] };
+    const p = { x: middlePointDown[0], y: middlePointDown[1] };
+    const q = { x: Math.max(1, middlePointDown[0] + LDir), y: middlePointDown[1] };
+    const Pmx = findIntersection(a, b, L, p, q) || { x: (middlePointDown[0] + P.x) / 2 };
+    const P1 = x0;
+    const P4 = x1;
+    const P2 = (Pmx.x - (0.125 * P1) - (0.125 * P4)) / 0.75;
+
+    return xC - P2;
 };
 
 export class Link extends SankeyElement {
@@ -107,12 +178,13 @@ export class Link extends SankeyElement {
         if (!this.options.navigatable) {
             return;
         }
-        const { link, rtl } = this.options;
+
+        const { link } = this.options;
         const { x0, x1, y0, y1 } = link;
         const xC = (x0 + x1) / 2;
         const halfWidth = link.width / 2;
 
-        const offset = calculateControlPointsOffsetX(link, rtl);
+        const offset = calculateControlPointsOffsetX(link, this.options.rtl);
 
         this._highlight = new drawing.Path({ stroke: this.options.focusHighlight, visible: false })
             .moveTo(x0, y0 + halfWidth)