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

package/dist/es2015/sankey/sankey.js

@@ -5,7 +5,7 @@ import { Node, resolveNodeOptions } from './node';
 import { Link, resolveLinkOptions } from './link';
 import { Label, resolveLabelOptions } from './label';
 import { Title } from './title';
-import { BOTTOM, LEFT, RIGHT, TOP } from '../common/constants';
+import { BLACK, BOTTOM, LEFT, RIGHT, TOP } from '../common/constants';
 import { Box, rectToBox } from '../core';
 import { Legend } from './legend';
 import { defined } from '../drawing-utils';
@@ -25,6 +25,7 @@ export class Sankey extends Observable {
         if (options && options.data) {
             this._redraw();
             this._initResizeObserver();
+            this._initNavigation(element);
         }
     }
 
@@ -32,13 +33,24 @@ export class Sankey extends Observable {
         this.unbind();
         this._destroySurface();
         this._destroyResizeObserver();
+
+        if (this.element) {
+            this.element.removeEventListener('keydown', this._keydownHandler);
+            this.element.removeEventListener('focus', this._focusHandler);
+            this.element.removeEventListener('mousedown', this._onDownHandler);
+            this.element.removeEventListener('touchstart', this._onDownHandler);
+            this.element.removeEventListener('pointerdown', this._onDownHandler);
+        }
+
+        this._focusState = null;
+
+        this.element = null;
     }
 
     _initElement(element) {
         this.element = element;
         addClass(element, [ "k-chart", "k-sankey" ]);
         element.setAttribute('role', 'graphics-document');
-        element.tabIndex = element.getAttribute("tabindex") || 0;
 
         const { title } = this.options;
 
@@ -59,6 +71,31 @@ export class Sankey extends Observable {
         }
     }
 
+    _initNavigation(element) {
+        element.tabIndex = element.getAttribute("tabindex") || 0;
+
+        if (this.options.disableKeyboardNavigation) {
+            return;
+        }
+
+        this._keydownHandler = this._keydown.bind(this);
+        this._focusHandler = this._focus.bind(this);
+        this._blurHandler = this._blur.bind(this);
+        this._onDownHandler = this._onDown.bind(this);
+
+        element.addEventListener('keydown', this._keydownHandler);
+        element.addEventListener('focus', this._focusHandler);
+        element.addEventListener('blur', this._blurHandler);
+        element.addEventListener('mousedown', this._onDownHandler);
+        element.addEventListener('touchstart', this._onDownHandler);
+        element.addEventListener('pointerdown', this._onDownHandler);
+
+        this._focusState = {
+            node: this.columns[0][0],
+            link: null
+        };
+    }
+
     _initResizeObserver() {
         const observer = new ResizeObserver((entries) => {
             entries.forEach(entry => {
@@ -220,16 +257,219 @@ export class Sankey extends Observable {
 
     _click(ev) {
         const element = ev.element;
+        const dataItem = element.dataItem;
         const isLink = element.type === LINK;
         const isNode = element.type === NODE;
+        const focusState = this._focusState || {};
 
         if (isNode) {
+            const focusedNodeClicked = !focusState.link && this.sameNode(focusState.node, dataItem);
+
+            if (!focusedNodeClicked) {
+                this._focusState = { node: dataItem, link: null };
+                this._focusNode({ highlight: false });
+            }
+
             this.trigger('nodeClick', ev);
         } else if (isLink) {
+            const link = {
+                sourceId: dataItem.source.id,
+                targetId: dataItem.target.id,
+                value: dataItem.value
+            };
+            const focusedLinkClicked = this.sameLink(focusState.link, link);
+
+            if (!focusedLinkClicked) {
+                this._focusState = { node: dataItem.source, link: link };
+                this._focusLink({ highlight: false });
+            }
+
             this.trigger('linkClick', ev);
         }
     }
 
+    sameNode(node1, node2) {
+        return node1 && node2 && node1.id === node2.id;
+    }
+
+    sameLink(link1, link2) {
+        return link1 && link2 && link1.sourceId === link2.sourceId && link1.targetId === link2.targetId;
+    }
+
+    _focusNode(options) {
+        this._cleanFocusHighlight();
+
+        const nodeData = this._focusState.node;
+        const node = this.models.map.get(nodeData.id);
+        node.focus(options);
+    }
+
+    _focusLink(options) {
+        this._cleanFocusHighlight();
+
+        const linkData = this._focusState.link;
+        const link = this.models.map.get(`${linkData.sourceId}-${linkData.targetId}`);
+        link.focus(options);
+    }
+
+    _focusNextNode(direction = 1) {
+        const current = this._focusState.node;
+
+        const columnIndex = this.columns.findIndex(column => column.find(n => n.id === current.id));
+        const columnNodes = this.columns[columnIndex];
+        const nodeIndex = columnNodes.findIndex(n => n.id === current.id);
+
+        const nextNode = columnNodes[nodeIndex + direction];
+        if (nextNode) {
+            this._focusState.node = nextNode;
+            this._focusNode();
+        }
+    }
+
+    _focusNextLink(direction = 1) {
+        const node = this._focusState.node;
+        const link = this._focusState.link;
+
+        const sourceLinkIndex = node.sourceLinks.findIndex(l => l.sourceId === link.sourceId && l.targetId === link.targetId);
+        const targetLinkIndex = node.targetLinks.findIndex(l => l.sourceId === link.sourceId && l.targetId === link.targetId);
+
+        if (sourceLinkIndex !== -1) {
+            const nextLink = node.sourceLinks[sourceLinkIndex + direction];
+
+            if (nextLink) {
+                this._focusState.link = nextLink;
+                this._focusLink();
+            }
+        } else if (targetLinkIndex !== -1) {
+            const nextLink = node.targetLinks[targetLinkIndex + direction];
+
+            if (nextLink) {
+                this._focusState.link = nextLink;
+                this._focusLink();
+            }
+        }
+    }
+
+    _focusSourceNode() {
+        const linkData = this._focusState.link;
+        const sourceNode = this.models.map.get(linkData.sourceId);
+        this._focusState = { node: sourceNode.options.node, link: null };
+        this._focusNode();
+    }
+
+    _focusTargetNode() {
+        const linkData = this._focusState.link;
+        const targetNode = this.models.map.get(linkData.targetId);
+        this._focusState = { node: targetNode.options.node, link: null };
+        this._focusNode();
+    }
+
+    _focusSourceLink() {
+        const nodeData = this._focusState.node;
+        const sourceLinks = nodeData.sourceLinks;
+        const linkData = sourceLinks[0];
+        if (linkData) {
+            this._focusState.link = linkData;
+            this._focusLink();
+        }
+    }
+
+    _focusTargetLink() {
+        const nodeData = this._focusState.node;
+        const targetLinks = nodeData.targetLinks;
+        const linkData = targetLinks[0];
+        if (linkData) {
+            this._focusState.link = linkData;
+            this._focusLink();
+        }
+    }
+
+    _focus() {
+        if (!this._skipFocusHighlight) {
+            if (this._focusState.link) {
+                this._focusLink();
+            } else {
+                this._focusNode();
+            }
+        }
+
+        this._skipFocusHighlight = false;
+    }
+
+    _blur() {
+        this._cleanFocusHighlight();
+    }
+
+    _onDown() {
+        if (!this._hasFocus()) {
+            this._skipFocusHighlight = true;
+        }
+    }
+
+    _hasFocus() {
+        return this.element.ownerDocument.activeElement === this.element;
+    }
+
+    _cleanFocusHighlight() {
+        this.models.nodes.forEach(node => node.blur());
+        this.models.links.forEach(link => link.blur());
+    }
+
+    _keydown(ev) {
+        const handler = this['on' + ev.key];
+
+        if (handler) {
+            handler.call(this, ev);
+        }
+    }
+
+    onEscape(ev) {
+        ev.preventDefault();
+
+        this._focusState = { node: this.columns[0][0], link: null };
+        this._focusNode();
+    }
+
+    onArrowDown(ev) {
+        ev.preventDefault();
+
+        if (this._focusState.link) {
+            this._focusNextLink(1);
+        } else {
+            this._focusNextNode(1);
+        }
+    }
+
+    onArrowUp(ev) {
+        ev.preventDefault();
+
+        if (this._focusState.link) {
+            this._focusNextLink(-1);
+        } else {
+            this._focusNextNode(-1);
+        }
+    }
+
+    onArrowLeft(ev) {
+        ev.preventDefault();
+
+        if (this._focusState.link) {
+            this._focusSourceNode();
+        } else {
+            this._focusTargetLink();
+        }
+    }
+
+    onArrowRight(ev) {
+        ev.preventDefault();
+
+        if (this._focusState.link) {
+            this._focusTargetNode();
+        } else {
+            this._focusSourceLink();
+        }
+    }
+
     highlightLinks(node, highlight) {
         if (node) {
             this.setLinksInactivityOpacity(highlight.inactiveOpacity);
@@ -317,10 +557,13 @@ export class Sankey extends Observable {
     }
 
     calculateSankey(calcOptions, sankeyOptions) {
-        const { title, legend, data, nodes, labels, nodeColors, disableAutoLayout } = sankeyOptions;
+        const { title, legend, data, nodes, labels, nodeColors, disableAutoLayout, disableKeyboardNavigation } = sankeyOptions;
         const autoLayout = !disableAutoLayout;
+        const padding = disableKeyboardNavigation ? 0 : highlightOptions.width / 2;
 
         const sankeyBox = new Box(0, 0, calcOptions.width, calcOptions.height);
+        sankeyBox.unpad(padding);
+
         const titleBox = this.titleBox(title, sankeyBox);
 
         let legendArea = sankeyBox.clone();
@@ -360,7 +603,7 @@ export class Sankey extends Observable {
         const { nodes: calculatedNodes, circularLinks } = calculateSankey(Object.assign({}, calcOptions, {offsetX: 0, offsetY: 0, width: sankeyBox.width(), height: sankeyBox.height()}));
         if (circularLinks) {
             console.warn('Circular links detected. Kendo Sankey diagram does not support circular links.');
-            return { sankey: { nodes: [], links: [], circularLinks }, legendBox, titleBox };
+            return { sankey: { nodes: [], links: [], columns: [[]], circularLinks }, legendBox, titleBox };
         }
 
         const box = new Box();
@@ -444,12 +687,18 @@ export class Sankey extends Observable {
         const sankeyOptions = options || this.options;
         const sankeyContext = context || this;
 
-        const { data, labels: labelOptions, nodes: nodesOptions, links: linkOptions, nodeColors, title, legend } = sankeyOptions;
+        const { data, labels: labelOptions, nodes: nodesOptions, links: linkOptions, nodeColors, title, legend, disableKeyboardNavigation } = sankeyOptions;
         const { width, height } = sankeyContext.size;
 
         const calcOptions = Object.assign({}, data, {width, height, nodesOptions, title, legend});
         const { sankey, titleBox, legendBox } = this.calculateSankey(calcOptions, sankeyOptions);
-        const { nodes, links } = sankey;
+        const { nodes, links, columns } = sankey;
+
+        sankeyContext.columns = columns.map(column => {
+            const newColumn = column.slice();
+            newColumn.sort((a, b) => a.y0 - b.y0);
+            return newColumn;
+        });
 
         const visual = new drawing.Group({
             clip: drawing.Path.fromRect(new geometry.Rect([0, 0], [width, height]))
@@ -468,8 +717,19 @@ export class Sankey extends Observable {
         const visualNodes = new Map();
         sankeyContext.nodesVisuals = visualNodes;
 
+        const models = {
+            nodes: [],
+            links: [],
+            map: new Map()
+        };
+        sankeyContext.models = models;
+
+        const focusHighlights = [];
+
         nodes.forEach((node, i) => {
             const nodeOps = resolveNodeOptions(node, nodesOptions, nodeColors, i);
+            nodeOps.root = () => sankeyContext.element;
+            nodeOps.navigatable = disableKeyboardNavigation !== true;
 
             const nodeInstance = new Node(nodeOps);
             const nodeVisual = nodeInstance.exportVisual();
@@ -486,7 +746,16 @@ export class Sankey extends Observable {
                 targetLinks: node.targetLinks.map(link => ({ sourceId: link.sourceId, targetId: link.targetId, value: link.value }))});
             visualNodes.set(node.id, nodeVisual);
 
+            models.nodes.push(nodeInstance);
+            models.map.set(node.id, nodeInstance);
+
             visual.append(nodeVisual);
+
+            nodeInstance.createFocusHighlight();
+
+            if (nodeInstance._highlight) {
+                focusHighlights.push(nodeInstance._highlight);
+            }
         });
 
         const sortedLinks = links.slice().sort((a, b) => b.value - a.value);
@@ -499,6 +768,8 @@ export class Sankey extends Observable {
             const sourceNode = visualNodes.get(source.id);
             const targetNode = visualNodes.get(target.id);
             const linkOps = resolveLinkOptions(link, linkOptions, sourceNode, targetNode);
+            linkOps.root = () => sankeyContext.element;
+            linkOps.navigatable = disableKeyboardNavigation !== true;
             const linkInstance = new Link(linkOps);
             const linkVisual = linkInstance.exportVisual();
 
@@ -514,6 +785,15 @@ export class Sankey extends Observable {
             sourceNode.links.push(linkVisual);
             targetNode.links.push(linkVisual);
 
+            models.links.push(linkInstance);
+            models.map.set(`${source.id}-${target.id}`, linkInstance);
+
+            linkInstance.createFocusHighlight();
+
+            if (linkInstance._highlight) {
+                focusHighlights.push(linkInstance._highlight);
+            }
+
             visual.append(linkVisual);
         });
 
@@ -534,6 +814,12 @@ export class Sankey extends Observable {
             visual.append(legendVisual);
         }
 
+        if (focusHighlights.length !== 0) {
+            const focusHighlight = new drawing.Group();
+            focusHighlight.append(...focusHighlights);
+            visual.append(focusHighlight);
+        }
+
         return visual;
     }
 
@@ -556,6 +842,12 @@ export class Sankey extends Observable {
     }
 }
 
+const highlightOptions = {
+    opacity: 1,
+    width: 2,
+    color: BLACK
+};
+
 setDefaultOptions(Sankey, {
     title: {
         position: TOP, // 'top', 'bottom'
@@ -583,7 +875,11 @@ setDefaultOptions(Sankey, {
         padding: 16,
         opacity: 1,
         align: 'stretch', // 'left', 'right', 'stretch'
-        offset: { left: 0, top: 0 }
+        offset: { left: 0, top: 0 },
+        focusHighlight: Object.assign({}, highlightOptions),
+        labels: {
+            ariaTemplate: ({ node }) => node.label.text
+        }
     },
     links: {
         colorType: 'static', // 'source', 'target', 'static'
@@ -591,6 +887,10 @@ setDefaultOptions(Sankey, {
         highlight: {
             opacity: 0.8,
             inactiveOpacity: 0.2
+        },
+        focusHighlight: Object.assign({}, highlightOptions),
+        labels: {
+            ariaTemplate: ({ link }) => `${link.source.label.text} to ${link.target.label.text}`
         }
     },
     tooltip: {