@progress/kendo-charts 2.4.0-dev.202405201104 → 2.4.0-dev.202405290547

package/dist/es2015/map/utils.js

@@ -1,15 +1,13 @@
-import {
-    isFunction,
-    isArray,
-    hasOwnProperty
-} from '../common';
+import { getSupportedFeatures } from '../common';
 
 /* eslint-disable arrow-body-style, no-useless-escape */
 
-const defineProperty = Object.defineProperty;
-
 export const extend = Object.assign;
 
+export const proxy = (method, context) => {
+    return method.bind(context);
+};
+
 export let convertToHtml = (html) => {
     const div = document.createElement("div");
     div.innerHTML = html;
@@ -65,331 +63,9 @@ export let toPixels = (value) => {
     return result;
 };
 
-const detectOS = (ua) => {
-    let os = false, minorVersion, match = [],
-        // notAndroidPhone = !/mobile safari/i.test(ua),
-        agentRxs = {
-            wp: /(Windows Phone(?: OS)?)\s(\d+)\.(\d+(\.\d+)?)/,
-            fire: /(Silk)\/(\d+)\.(\d+(\.\d+)?)/,
-            android: /(Android|Android.*(?:Opera|Firefox).*?\/)\s*(\d+)\.?(\d+(\.\d+)?)?/,
-            iphone: /(iPhone|iPod).*OS\s+(\d+)[\._]([\d\._]+)/,
-            ipad: /(iPad).*OS\s+(\d+)[\._]([\d_]+)/,
-            meego: /(MeeGo).+NokiaBrowser\/(\d+)\.([\d\._]+)/,
-            webos: /(webOS)\/(\d+)\.(\d+(\.\d+)?)/,
-            blackberry: /(BlackBerry|BB10).*?Version\/(\d+)\.(\d+(\.\d+)?)/,
-            playbook: /(PlayBook).*?Tablet\s*OS\s*(\d+)\.(\d+(\.\d+)?)/,
-            windows: /(MSIE)\s+(\d+)\.(\d+(\.\d+)?)/,
-            tizen: /(tizen).*?Version\/(\d+)\.(\d+(\.\d+)?)/i,
-            sailfish: /(sailfish).*rv:(\d+)\.(\d+(\.\d+)?).*firefox/i,
-            ffos: /(Mobile).*rv:(\d+)\.(\d+(\.\d+)?).*Firefox/
-        },
-        osRxs = {
-            ios: /^i(phone|pad|pod)$/i,
-            android: /^android|fire$/i,
-            blackberry: /^blackberry|playbook/i,
-            windows: /windows/,
-            wp: /wp/,
-            flat: /sailfish|ffos|tizen/i,
-            meego: /meego/
-        },
-        formFactorRxs = {
-            tablet: /playbook|ipad|fire/i
-        },
-        browserRxs = {
-            omini: /Opera\sMini/i,
-            omobile: /Opera\sMobi/i,
-            firefox: /Firefox|Fennec/i,
-            mobilesafari: /version\/.*safari/i,
-            ie: /MSIE|Windows\sPhone/i,
-            chrome: /chrome|crios/i,
-            webkit: /webkit/i
-        };
-
-    for (let agent in agentRxs) {
-        if (hasOwnProperty(agentRxs, agent)) {
-            match = ua.match(agentRxs[agent]);
-            if (match) {
-                if (agent === "windows" && "plugins" in navigator) { return false; } // Break if not Metro/Mobile Windows
-
-                os = {};
-                os.device = agent;
-                os.tablet = testRegex(agent, formFactorRxs, false);
-                os.browser = testRegex(ua, browserRxs, "default");
-                os.name = testRegex(agent, osRxs);
-                os[os.name] = true;
-                os.majorVersion = match[2];
-                os.minorVersion = (match[3] || "0").replace("_", ".");
-                minorVersion = os.minorVersion.replace(".", "").substr(0, 2);
-                os.flatVersion = os.majorVersion + minorVersion + (new Array(3 - (minorVersion.length < 3 ? minorVersion.length : 2)).join("0"));
-
-
-                break;
-            }
-        }
-    }
-
-    return os;
-};
-
-function testRegex(agent, regexes, dflt) {
-    for (let regex in regexes) {
-        if (hasOwnProperty(regexes, regex) && regexes[regex].test(agent)) {
-            return regex;
-        }
-    }
-    return dflt !== undefined ? dflt : agent;
-}
-
 export let hasNativeScrolling = (userAgent) => {
-    const os = detectOS(userAgent);
-    return os.ios || os.android;
-};
-
-const detectBrowser = (userAgent) => {
-    let browser = false,
-        match = [],
-        browserRxs = {
-            edge: /(edge)[ \/]([\w.]+)/i,
-            webkit: /(chrome|crios)[ \/]([\w.]+)/i,
-            safari: /(webkit)[ \/]([\w.]+)/i,
-            opera: /(opera)(?:.*version|)[ \/]([\w.]+)/i,
-            msie: /(msie\s|trident.*? rv:)([\w.]+)/i,
-            mozilla: /(mozilla)(?:.*? rv:([\w.]+)|)/i
-        };
-
-    for (let agent in browserRxs) {
-        if (hasOwnProperty(browserRxs, agent)) {
-            match = userAgent.match(browserRxs[agent]);
-
-            if (match) {
-                browser = {};
-                browser[agent] = true;
-                browser[match[1].toLowerCase().split(" ")[0].split("/")[0]] = true;
-                browser.version = parseInt(document.documentMode || match[2], 10);
-
-                break;
-            }
-        }
-    }
-
-    return browser;
-};
-
-export let getEventMap = () => {
-    let eventMap = {
-        down: "touchstart mousedown",
-        move: "mousemove touchmove",
-        up: "mouseup touchend touchcancel",
-        cancel: "mouseleave touchcancel"
-    };
-
-    const support = getSupportedFeatures();
-
-    if (support.touch && (support.mobileOS.ios || support.mobileOS.android)) {
-        eventMap = {
-            down: "touchstart",
-            move: "touchmove",
-            up: "touchend touchcancel",
-            cancel: "touchcancel"
-        };
-    } else if (support.pointers) {
-        eventMap = {
-            down: "pointerdown",
-            move: "pointermove",
-            up: "pointerup",
-            cancel: "pointercancel pointerleave"
-        };
-    } else if (support.msPointers) {
-        eventMap = {
-            down: "MSPointerDown",
-            move: "MSPointerMove",
-            up: "MSPointerUp",
-            cancel: "MSPointerCancel MSPointerLeave"
-        };
-    }
-
-    return eventMap;
-};
-
-export const getSupportedFeatures = () => {
-    const os = detectOS(navigator.userAgent);
-    const browser = detectBrowser(navigator.userAgent);
-
-    let chrome = browser.chrome,
-        mobileChrome = browser.crios,
-        mozilla = browser.mozilla,
-        safari = browser.safari;
-
-    const support = {};
-
-    support.mobileOS = os;
-    support.touch = "ontouchstart" in window;
-    support.pointers = !chrome && !mobileChrome && !mozilla && !safari && window.PointerEvent;
-    support.msPointers = !chrome && window.MSPointerEvent;
-    support.mouseAndTouchPresent = support.touch && !(support.mobileOS.ios || support.mobileOS.android);
-    support.eventCapture = document.documentElement.addEventListener;
-
-    let table = document.createElement("table");
-
-    let transitions = support.transitions = false,
-        transforms = support.transforms = false;
-
-    const STRING = "string";
-
-    ["Moz", "webkit", "O", "ms"].forEach(function(prefix) {
-        let hasTransitions = typeof table.style[prefix + "Transition"] === STRING;
-
-        if (hasTransitions || typeof table.style[prefix + "Transform"] === STRING) {
-            let lowPrefix = prefix.toLowerCase();
-
-            transforms = {
-                css: (lowPrefix !== "ms") ? "-" + lowPrefix + "-" : "",
-                prefix: prefix,
-                event: (lowPrefix === "o" || lowPrefix === "webkit") ? lowPrefix : ""
-            };
-
-            if (hasTransitions) {
-                transitions = transforms;
-                transitions.event = transitions.event ? transitions.event + "TransitionEnd" : "transitionend";
-            }
-
-            return false;
-        }
-    });
-
-    table = null;
-
-    support.transforms = transforms;
-    support.transitions = transitions;
-
-    support.delayedClick = function() {
-        // only the mobile devices with touch events do this.
-        if (support.touch) {
-            // All iOS devices so far (by the time I am writing this, iOS 9.0.2 is the latest),
-            // delay their click events.
-            if (support.mobileOS.ios) {
-                return true;
-            }
-
-            if (support.mobileOS.android) {
-
-                if (!support.browser.chrome) { // older webkits and webviews delay the click
-                    return true;
-                }
-
-                // from here on, we deal with Chrome on Android.
-                if (support.browser.version < 32) {
-                    return false;
-                }
-
-                // Chrome 32+ does conditional fast clicks if the view port is not user scalable.
-                const meta = document.querySelector("meta[name=viewport]");
-                const contentAttr = meta ? meta.getAttribute("content") : "";
-                return !contentAttr.match(/user-scalable=no/i);
-            }
-        }
-
-        return false;
-    };
-
-    return support;
-};
-
-export const ownsElement = (parent, element) => {
-    if (!element) {
-        return false;
-    }
-
-    let node = element.parentNode;
-
-    while (node !== null) {
-        if (node === parent) {
-            return true;
-        }
-
-        node = node.parentNode;
-    }
-
-    return false;
-};
-
-export const contains = (parent, element) => {
-    return parent === element || ownsElement(parent, element);
-};
-
-export const proxy = (method, context) => {
-    return method.bind(context);
-};
-
-function isString(value) {
-    return typeof(value) === "string";
-}
-
-export const on = (element, events, filter, handler, useCapture) => {
-    addEventListeners(element, events, filter, handler, useCapture);
-};
-
-export const addEventListeners = (element, events, filter, handler, useCapture) => {
-    const eventNames = isArray(events) ? events : (events || "").split(" ");
-
-    eventNames.forEach(function(eventName) {
-        addEventListener(element, eventName, filter, handler, useCapture);
-    });
-};
-
-export const addEventListener = (element, event, filter, handler, useCapture) => {
-    let eventHandler = handler;
-    let eventFilter;
-
-    if (filter && isFunction(filter) && !handler) {
-        eventHandler = filter;
-    } else if (filter && isString(filter) && isFunction(eventHandler)) {
-        eventFilter = filter;
-    }
-
-    element.addEventListener(event, function(e) {
-        const closestMatchingTarget = e.target ? e.target.closest(eventFilter) : null;
-
-        if (!eventFilter ||
-            (eventFilter && e.target && closestMatchingTarget)) {
-            const currentTarget = eventFilter ? closestMatchingTarget : e.currentTarget;
-
-            // reassign the property as it is a getters only
-            defineProperty(e, "currentTarget", { value: currentTarget });
-            // keep a reference to the top-level target
-            defineProperty(e, "delegateTarget", { value: element });
-
-            eventHandler(e);
-        }
-    }, Boolean(useCapture));
-};
-
-export const off = (element, events, filter, handler, useCapture) => {
-    removeEventListeners(element, events, filter, handler, useCapture);
-};
-
-export const removeEventListeners = (element, events, handler, useCapture) => {
-    const eventNames = isArray(events) ? events : (events || "").split(" ");
-
-    eventNames.forEach(function(eventName) {
-        removeEventListener(element, eventName, handler, useCapture);
-    });
-};
-
-export const removeEventListener = (element, event, handler, useCapture) => {
-    element.removeEventListener(event, handler, Boolean(useCapture));
-};
-
-export const applyEventMap = (events) => {
-    const eventMap = getEventMap(navigator.userAgent);
-    function queryEventMap(e) {
-        return eventMap[e] || e;
-    }
-
-    const eventRegEx = /([^ ]+)/g;
-    const appliedEvents = events.replace(eventRegEx, queryEventMap);
-
-    return appliedEvents;
+    const { mobileOS } = getSupportedFeatures(userAgent);
+    return mobileOS.ios || mobileOS.android;
 };
 
 export const setDefaultEvents = (type, events) => {
@@ -406,8 +82,7 @@ export const setDefaultEvents = (type, events) => {
     }
 };
 
-export const wheelDeltaY = (jQueryEvent) => {
-    const e = jQueryEvent.originalEvent || jQueryEvent;
+export const wheelDeltaY = (e) => {
     const deltaY = e.wheelDeltaY;
     let delta;
 
@@ -422,12 +97,6 @@ export const wheelDeltaY = (jQueryEvent) => {
     return delta;
 };
 
-export const now = () => {
-    return Number(new Date());
-};
-
-export const noop = () => {};
-
 export const renderPos = (pos) => {
     let result = [];
 

package/dist/es2015/map/zoom.js

@@ -5,12 +5,12 @@ import {
     keys,
     hasClasses,
     setDefaultOptions,
-    renderIcon
+    renderIcon,
+    on,
+    off,
 } from '../common';
 
 import {
-    on,
-    off,
     setDefaultEvents,
     convertToHtml
 } from './utils';

package/dist/es2015/sankey/legend.js

@@ -52,6 +52,11 @@ setDefaultOptions(Legend, {
     },
     position: BOTTOM,
     align: CENTER,
+    accessibility: {
+        role: 'presentation',
+        ariaLabel: null,
+        ariaRoleDescription: null
+    },
     border: {
         width: 0
     }

package/dist/es2015/sankey/link.js

@@ -2,6 +2,66 @@ 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;
+    const tt = t * 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) => {
+    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]];
+
+    // 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)];
+
+    // The actual width of the link at its middle point as can be seen on the screen.
+    const actualWidth = distanceToLine(upperCurveMiddleLine, lowerCurveMiddlePoint);
+
+    const upperNarrowness = (width - actualWidth) / 2;
+
+    // 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;
+
+    return y0 - y1 > 0 ? (-1) * offset : offset;
+};
 
 export class Link extends SankeyElement {
     getElement() {
@@ -13,17 +73,75 @@ export class Link extends SankeyElement {
             .moveTo(x0, y0).curveTo([xC, y0], [xC, y1], [x1, y1]);
     }
 
+    getLabelText(options) {
+        let labelTemplate = options.labels.ariaTemplate;
+
+        if (labelTemplate) {
+            return labelTemplate({ link: options.link });
+        }
+    }
+
     visualOptions() {
         const options = this.options;
         const link = this.options.link;
+        const ariaLabel = this.getLabelText(options);
+
         return {
             stroke: {
                 width: options.link.width,
                 color: link.color || options.color,
                 opacity: defined(link.opacity) ? link.opacity : options.opacity
-            }
+            },
+            role: 'graphics-symbol',
+            ariaRoleDescription: 'Link',
+            ariaLabel: ariaLabel
         };
     }
+
+    createFocusHighlight() {
+        if (!this.options.navigatable) {
+            return;
+        }
+        const link = this.options.link;
+        const { x0, x1, y0, y1 } = link;
+        const xC = (x0 + x1) / 2;
+        const halfWidth = link.width / 2;
+
+        const offset = calculateControlPointsOffsetX(link);
+
+        this._highlight = new drawing.Path({ stroke: this.options.focusHighlight, visible: false })
+            .moveTo(x0, y0 + halfWidth)
+            .lineTo(x0, y0 - halfWidth)
+            .curveTo([xC + offset, y0 - halfWidth], [xC + offset, y1 - halfWidth], [x1, y1 - halfWidth])
+            .lineTo(x1, y1 + halfWidth)
+            .curveTo([xC - offset, y1 + halfWidth], [xC - offset, y0 + halfWidth], [x0, y0 + halfWidth]);
+    }
+
+    focus(options) {
+        if (this._highlight) {
+            const { highlight = true } = options || {};
+            if (highlight) {
+                this._highlight.options.set('visible', true);
+            }
+            const id = `${this.options.link.sourceId}->${this.options.link.targetId}`;
+            this.visual.options.set('id', id);
+
+            if (this.options.root()) {
+                this.options.root().setAttribute(ARIA_ACTIVE_DESCENDANT, id);
+            }
+        }
+    }
+
+    blur() {
+        if (this._highlight) {
+            this._highlight.options.set('visible', false);
+            this.visual.options.set('id', '');
+
+            if (this.options.root()) {
+                this.options.root().removeAttribute(ARIA_ACTIVE_DESCENDANT);
+            }
+        }
+    }
 }
 
 export const resolveLinkOptions = (link, options, sourceNode, targetNode) => {

package/dist/es2015/sankey/node.js

@@ -1,18 +1,29 @@
 import { geometry, drawing } from '@progress/kendo-drawing';
 import { SankeyElement } from './element';
 import { deepExtend } from '../common';
+import { ARIA_ACTIVE_DESCENDANT } from '../common/constants';
 
 export class Node extends SankeyElement {
     getElement() {
-        const options = this.options;
-        const node = options.node;
-        const rect = new geometry.Rect([node.x0, node.y0], [node.x1 - node.x0, node.y1 - node.y0]);
+        return drawing.Path.fromRect(this.getRect(), this.visualOptions());
+    }
+
+    getRect() {
+        const node = this.options.node;
+        return new geometry.Rect([node.x0, node.y0], [node.x1 - node.x0, node.y1 - node.y0]);
+    }
 
-        return drawing.Path.fromRect(rect, this.visualOptions());
+    getLabelText(options) {
+        let labelTemplate = options.labels.ariaTemplate;
+
+        if (labelTemplate) {
+            return labelTemplate({ node: options.node });
+        }
     }
 
     visualOptions() {
         const options = deepExtend({}, this.options, this.options.node);
+        const ariaLabel = this.getLabelText(options);
 
         return {
             fill: {
@@ -23,9 +34,48 @@ export class Node extends SankeyElement {
             className: 'k-sankey-node',
             role: 'graphics-symbol',
             ariaRoleDescription: 'Node',
-            ariaLabel: options.node.label.text
+            ariaLabel: ariaLabel
         };
     }
+
+    createFocusHighlight() {
+        if (!this.options.navigatable) {
+            return;
+        }
+
+        this._highlight = new drawing.Path.fromRect(this.getRect(), {
+            stroke: this.options.focusHighlight,
+            visible: false
+        });
+
+        return this._highlight;
+    }
+
+    focus(options) {
+        if (this._highlight) {
+            const { highlight = true } = options || {};
+            if (highlight) {
+                this._highlight.options.set('visible', true);
+            }
+            const id = this.options.node.id;
+            this.visual.options.set('id', id);
+
+            if (this.options.root()) {
+                this.options.root().setAttribute(ARIA_ACTIVE_DESCENDANT, id);
+            }
+        }
+    }
+
+    blur() {
+        if (this._highlight) {
+            this._highlight.options.set('visible', false);
+            this.visual.options.set('id', '');
+
+            if (this.options.root()) {
+                this.options.root().removeAttribute(ARIA_ACTIVE_DESCENDANT);
+            }
+        }
+    }
 }
 
 const nodeColor = (node, nodeColors, index) => node.color || nodeColors[index % nodeColors.length];