@progress/kendo-charts 1.32.1 → 1.33.0-dev.202311081130

package/dist/es/chart/bar-chart/bar.js

@@ -2,7 +2,7 @@ import { drawing as draw, Color } from '@progress/kendo-drawing';
 
 import BarLabel from './bar-label';
 
-import { BORDER_BRIGHTNESS, TOOLTIP_OFFSET } from '../constants';
+import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE, BORDER_BRIGHTNESS, TOOLTIP_OFFSET } from '../constants';
 
 import hasGradientOverlay from '../utils/has-gradient-overlay';
 
@@ -10,6 +10,7 @@ import { ChartElement, Point } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 
 import { WHITE, LEFT, RIGHT, BOTTOM, TOP } from '../../common/constants';
 import { alignPathToPixel, deepExtend, defined, getTemplate, valueOrDefault } from '../../common';
@@ -50,24 +51,28 @@ var Bar = (function (ChartElement) {
         var labels = options.labels;
 
         if (labels.visible) {
-            var pointData = this.pointData();
-            var labelTemplate = getTemplate(labels);
-            var labelText;
+            this.label = this.createLabelElement(labels);
+            this.append(this.label);
+        }
+    };
 
-            if (labelTemplate) {
-                labelText = labelTemplate(pointData);
-            } else {
-                labelText = this.formatValue(labels.format);
-            }
+    Bar.prototype.createLabelElement = function createLabelElement (options) {
+        return new BarLabel(this.getLabelText(options),
+            deepExtend({
+                vertical: this.options.vertical
+            },
+            options
+        ), this.pointData());
+    };
 
-            this.label = new BarLabel(labelText,
-                deepExtend({
-                    vertical: options.vertical
-                },
-                labels
-            ), pointData);
-            this.append(this.label);
+    Bar.prototype.getLabelText = function getLabelText (options) {
+        var labelTemplate = getTemplate(options);
+
+        if (labelTemplate) {
+            return labelTemplate(this.pointData());
         }
+
+        return this.formatValue(options.format);
     };
 
     Bar.prototype.formatValue = function formatValue (format) {
@@ -110,6 +115,8 @@ var Bar = (function (ChartElement) {
         if (this.visible !== false) {
             ChartElement.prototype.createVisual.call(this);
 
+            this.addAccessibilityAttributesToVisual();
+
             if (customVisual) {
                 var visual = this.rectVisual = customVisual({
                     category: this.category,
@@ -203,6 +210,13 @@ var Bar = (function (ChartElement) {
         };
     };
 
+    Bar.prototype.createFocusHighlight = function createFocusHighlight (style) {
+        var borderWidth = this.options.accessibility.highlight.border.width;
+        var highlight = draw.Path.fromRect(this.box.pad(borderWidth / 2).toRect(), style);
+
+        return alignPathToPixel(highlight);
+    };
+
     Bar.prototype.getBorderColor = function getBorderColor () {
         var color = this.color;
         var border = this.options.border;
@@ -284,11 +298,16 @@ var Bar = (function (ChartElement) {
         };
     };
 
+    Bar.prototype.getIndex = function getIndex () {
+        return this.categoryIx;
+    };
+
     return Bar;
 }(ChartElement));
 
 deepExtend(Bar.prototype, PointEventsMixin);
 deepExtend(Bar.prototype, NoteMixin);
+deepExtend(Bar.prototype, AccessibilityAttributesMixin);
 
 Bar.prototype.defaults = {
     border: {
@@ -305,6 +324,11 @@ Bar.prototype.defaults = {
     opacity: 1,
     notes: {
         label: {}
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 };
 

package/dist/es/chart/bubble-chart/bubble.js

@@ -60,6 +60,16 @@ var Bubble = (function (LinePoint) {
         return highlightGroup;
     };
 
+    Bubble.prototype.createFocusHighlight = function createFocusHighlight (style) {
+        var highlightOptions = this.options.accessibility.highlight;
+        var markers = this.options.markers;
+        var center = this.box.center();
+        var radius = (markers.size + markers.border.width) / 2 + highlightOptions.border.width / 2;
+        var highlight = new draw.Circle(new geom.Circle([ center.x, center.y ], radius), style);
+
+        return highlight;
+    };
+
     return Bubble;
 }(LinePoint));
 

package/dist/es/chart/bullet-chart/bullet.js

@@ -12,6 +12,8 @@ import { WHITE, TOP, RIGHT } from '../../common/constants';
 import { alignPathToPixel, deepExtend, defined, getTemplate, setDefaultOptions, valueOrDefault } from '../../common';
 
 import BarLabel from '../bar-chart/bar-label';
+import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE } from '../constants';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 
 var Bullet = (function (ChartElement) {
     function Bullet(value, options) {
@@ -60,21 +62,27 @@ var Bullet = (function (ChartElement) {
         var labels = options.labels;
 
         if (labels.visible) {
-            var pointData = this.pointData();
-            var labelTemplate = getTemplate(labels);
-            var labelText;
-
-            if (labelTemplate) {
-                labelText = labelTemplate(pointData);
-            } else {
-                labelText = this.formatValue(labels.format);
-            }
-
-            this.label = new BarLabel(labelText, labels, pointData);
+            this.label = this.createLabelElement(labels);
             this.append(this.label);
         }
     };
 
+    Bullet.prototype.createLabelElement = function createLabelElement (options) {
+        return new BarLabel(this.getLabelText(options),
+            options,
+            this.pointData());
+    };
+
+    Bullet.prototype.getLabelText = function getLabelText (options) {
+        var labelTemplate = getTemplate(options);
+
+        if (labelTemplate) {
+            return labelTemplate(this.pointData());
+        }
+
+        return this.formatValue(options.format);
+    };
+
     Bullet.prototype.reflow = function reflow (box) {
         this.render();
 
@@ -115,6 +123,8 @@ var Bullet = (function (ChartElement) {
     Bullet.prototype.createVisual = function createVisual () {
         ChartElement.prototype.createVisual.call(this);
 
+        this.addAccessibilityAttributesToVisual();
+
         var options = this.options;
         var body = draw.Path.fromRect(this.box.toRect(), {
             fill: {
@@ -180,10 +190,15 @@ var Bullet = (function (ChartElement) {
         return this.box.overlaps(box);
     };
 
+    Bullet.prototype.getIndex = function getIndex () {
+        return this.categoryIx;
+    };
+
     return Bullet;
 }(ChartElement));
 
 Bullet.prototype.tooltipAnchor = Bar.prototype.tooltipAnchor;
+Bullet.prototype.createFocusHighlight = Bar.prototype.createFocusHighlight;
 
 setDefaultOptions(Bullet, {
     border: {
@@ -209,10 +224,16 @@ setDefaultOptions(Bullet, {
     },
     notes: {
         label: {}
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 });
 
 deepExtend(Bullet.prototype, PointEventsMixin);
 deepExtend(Bullet.prototype, NoteMixin);
+deepExtend(Bullet.prototype, AccessibilityAttributesMixin);
 
 export default Bullet;

package/dist/es/chart/candlestick-chart/candlestick.js

@@ -3,8 +3,10 @@ import { drawing as draw, Color } from '@progress/kendo-drawing';
 import { ChartElement, Point } from '../../core';
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
+import Bar from '../bar-chart/bar';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 
-import { TOOLTIP_OFFSET } from '../constants';
+import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE, TOOLTIP_OFFSET } from '../constants';
 import hasGradientOverlay from '../utils/has-gradient-overlay';
 
 import { WHITE, LEFT, TOP } from '../../common/constants';
@@ -20,6 +22,10 @@ var Candlestick = (function (ChartElement) {
     Candlestick.prototype = Object.create( ChartElement && ChartElement.prototype );
     Candlestick.prototype.constructor = Candlestick;
 
+    Candlestick.prototype.getLabelText = function getLabelText (options) {
+        return this.formatValue(options.format);
+    };
+
     Candlestick.prototype.reflow = function reflow (box) {
         var ref = this;
         var options = ref.options;
@@ -60,6 +66,9 @@ var Candlestick = (function (ChartElement) {
 
     Candlestick.prototype.createVisual = function createVisual () {
         ChartElement.prototype.createVisual.call(this);
+
+        this.addAccessibilityAttributesToVisual();
+
         this._mainVisual = this.mainVisual(this.options);
         this.visual.append(
             this._mainVisual
@@ -204,9 +213,27 @@ var Candlestick = (function (ChartElement) {
         return this.box.overlaps(box);
     };
 
+    Candlestick.prototype.pointData = function pointData () {
+        return {
+            dataItem: this.dataItem,
+            value: this.value,
+            meanPoints: this.meanPoints,
+            medianPoints: this.medianPoints,
+            whiskerPoints: this.whiskerPoints,
+            stackValue: this.stackValue,
+            series: this.series
+        };
+    };
+
+    Candlestick.prototype.getIndex = function getIndex () {
+        return this.categoryIx;
+    };
+
     return Candlestick;
 }(ChartElement));
 
+Candlestick.prototype.createFocusHighlight = Bar.prototype.createFocusHighlight;
+
 setDefaultOptions(Candlestick, {
     vertical: true,
     border: {
@@ -227,6 +254,9 @@ setDefaultOptions(Candlestick, {
                     "<tr><td>Close:</td><td>{3:C}</td></tr>" +
                 "</table>"
     },
+    labels: {
+        format: ""
+    },
     highlight: {
         opacity: 1,
         border: {
@@ -241,10 +271,16 @@ setDefaultOptions(Candlestick, {
     notes: {
         visible: true,
         label: {}
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 });
 
 deepExtend(Candlestick.prototype, PointEventsMixin);
 deepExtend(Candlestick.prototype, NoteMixin);
+deepExtend(Candlestick.prototype, AccessibilityAttributesMixin);
 
 export default Candlestick;

package/dist/es/chart/categorical-chart.js

@@ -326,7 +326,7 @@ var CategoricalChart = (function (ChartElement) {
             excluded: [
                 "data", "aggregate", "_events", "tooltip", "content", "template",
                 "visual", "toggle", "_outOfRangeMinPoint", "_outOfRangeMaxPoint",
-                "drilldownSeriesFactory"
+                "drilldownSeriesFactory", "ariaTemplate"
             ]
         };