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

package/dist/es2015/chart/constants.js

@@ -92,6 +92,14 @@ const SHOW_TOOLTIP = "showTooltip";
 const HIDE_TOOLTIP = "hideTooltip";
 const PANE_RENDER = "paneRender";
 
+
+const CHART_POINT_ROLE = "graphics-symbol";
+const CHART_POINT_CLASSNAME = "k-chart-point";
+const CHART_POINT_ROLE_DESCRIPTION = "Point";
+const LEGEND_ITEM_ROLE = "checkbox";
+const LEGEND_ITEM_CLASSNAME = "k-chart-legend-item";
+const LEGEND_ITEM_ARIA_ROLE_DESCRIPTION = "Legend item";
+
 const LOGARITHMIC = "log";
 const CATEGORY = "category";
 
@@ -134,5 +142,8 @@ export {
     HEATMAP,
     DRILLDOWN, DRILLDOWN_FIELD,
     MIN_MOVING_AVERAGE_PERIOD,
-    TRENDLINE_SERIES, TRENDLINE_LINEAR, TRENDLINE_MOVING_AVERAGE
+    TRENDLINE_SERIES, TRENDLINE_LINEAR, TRENDLINE_MOVING_AVERAGE,
+    CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION,
+    LEGEND_ITEM_ROLE, LEGEND_ITEM_CLASSNAME,
+    LEGEND_ITEM_ARIA_ROLE_DESCRIPTION
 };

package/dist/es2015/chart/funnel-chart/funnel-chart.js

@@ -22,12 +22,13 @@ class FunnelChart extends ChartElement {
     }
 
     formatPointValue(point, format) {
-        return this.chartService.format.auto(format,point.value);
+        return this.plotArea.chartService.format.auto(format,point.value);
     }
 
     render() {
+        const seriesIx = 0;
         const { options, plotArea: { options: { seriesColors = [] } } } = this;
-        const series = options.series[0];
+        const series = options.series[seriesIx];
         const data = series.data;
 
         if (!data) {
@@ -53,6 +54,7 @@ class FunnelChart extends ChartElement {
                 index: i,
                 owner: this,
                 series: series,
+                seriesIx: seriesIx,
                 dataItem: data[i],
                 percentage: pointData.value / total
             }, fields, { visible: pointData.visible });
@@ -75,7 +77,7 @@ class FunnelChart extends ChartElement {
             series: series,
             dataItem: fields.dataItem,
             index: fields.index
-        }, { defaults: series._defaults, excluded: [ "data", "content", "template", "toggle", "visual" ] });
+        }, { defaults: series._defaults, excluded: [ "data", "content", "template", "toggle", "visual", "ariaTemplate" ] });
     }
 
     createSegment(value, fields) {

package/dist/es2015/chart/funnel-chart/funnel-segment.js

@@ -1,10 +1,12 @@
-import { drawing as draw } from '@progress/kendo-drawing';
+import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
 
 import { ChartElement, Box, Point } from '../../core';
 import PointEventsMixin from '../mixins/point-events-mixin';
 
 import { WHITE } from '../../common/constants';
-import { deepExtend, setDefaultOptions } from '../../common';
+import { deepExtend, setDefaultOptions, getTemplate } from '../../common';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
+import { CHART_POINT_CLASSNAME, CHART_POINT_ROLE, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
 
 class FunnelSegment extends ChartElement {
     constructor(value, options, segmentOptions) {
@@ -14,11 +16,25 @@ class FunnelSegment extends ChartElement {
         this.options.index = segmentOptions.index;
     }
 
+    getLabelText(options) {
+        let labelTemplate = getTemplate(options);
+
+        if (labelTemplate) {
+            return labelTemplate(this.pointData());
+        } else if (options.format) {
+            return this.formatValue(options.format);
+        }
+
+        return this.value;
+    }
+
     reflow(chartBox) {
         const points = this.points;
         const label = this.children[0];
+        const x1 = Math.min(points[0].x, points[3].x);
+        const x2 = Math.max(points[1].x, points[2].x);
 
-        this.box = new Box(points[0].x, points[0].y, points[1].x, points[2].y);
+        this.box = new Box(x1, points[0].y, x2, points[2].y);
 
         if (label) {
             label.reflow(new Box(chartBox.x1, points[0].y, chartBox.x2, points[2].y));
@@ -31,6 +47,8 @@ class FunnelSegment extends ChartElement {
 
         super.createVisual();
 
+        this.addAccessibilityAttributesToVisual();
+
         if (options.visual) {
             visual = options.visual({
                 category: this.category,
@@ -87,6 +105,24 @@ class FunnelSegment extends ChartElement {
         };
     }
 
+    createFocusHighlight(style) {
+        const borderWidth = this.options.accessibility.highlight.border.width;
+        const result = draw.Path.fromPoints(this.points, deepExtend({}, style, {
+            stroke: {
+                width: borderWidth * 2
+            }
+        })).close();
+
+        const clipPath = new draw.MultiPath();
+
+        clipPath.paths.push(draw.Path.fromRect(this.box.clone().pad(borderWidth).toRect()));
+        clipPath.paths.push(draw.Path.fromPoints(this.points));
+
+        result.clip(clipPath);
+
+        return result;
+    }
+
     tooltipAnchor() {
         const box = this.box;
         return {
@@ -102,15 +138,38 @@ class FunnelSegment extends ChartElement {
         const point = this;
         return point.owner.formatPointValue(point, format);
     }
+
+    pointData() {
+        return {
+            dataItem: this.dataItem,
+            category: this.category,
+            value: this.value,
+            series: this.series,
+            percentage: this.percentage
+        };
+    }
+
+    getIndex() {
+        return this.index;
+    }
 }
 
 setDefaultOptions(FunnelSegment, {
     color: WHITE,
     border: {
         width: 1
+    },
+    labels: {
+        format: ""
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 });
 
 deepExtend(FunnelSegment.prototype, PointEventsMixin);
+deepExtend(FunnelSegment.prototype, AccessibilityAttributesMixin);
 
 export default FunnelSegment;

package/dist/es2015/chart/heatmap-chart/heatmap-chart.js

@@ -62,7 +62,8 @@ class HeatmapChart extends ChartElement {
             defaults: series._defaults,
             excluded: [
                 "data", "tooltip", "content", "template",
-                "visual", "toggle", "drilldownSeriesFactory"
+                "visual", "toggle", "drilldownSeriesFactory",
+                "ariaTemplate"
             ]
         };
 

package/dist/es2015/chart/heatmap-chart/heatmap-point.js

@@ -1,7 +1,8 @@
 import { autoTextColor, deepExtend, getTemplate, valueOrDefault } from '../../common';
 import { CENTER, ROUNDED_RECT, BOTTOM, WHITE } from '../../common/constants';
 import { ChartElement, Point, rectToBox, ShapeElement, TextBox } from '../../core';
-import { TOOLTIP_OFFSET } from '../constants';
+import { CHART_POINT_CLASSNAME, CHART_POINT_ROLE, CHART_POINT_ROLE_DESCRIPTION, TOOLTIP_OFFSET } from '../constants';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 import NoteMixin from '../mixins/note-mixin';
 import PointEventsMixin from '../mixins/point-events-mixin';
 
@@ -31,38 +32,43 @@ class HeatmapPoint extends ChartElement {
         const labels = options.labels;
 
         if (labels.visible) {
-            const pointData = this.pointData();
-            let labelTemplate = getTemplate(labels);
-            let labelText;
-            let labelColor = labels.color;
-
-            if (labelTemplate) {
-                labelText = labelTemplate(pointData);
-            } else {
-                labelText = this.formatValue(labels.format);
-            }
+            this.label = this.createLabelElement(labels);
+            this.append(this.label);
+        }
+    }
 
-            if (!labelColor) {
-                labelColor = autoTextColor(this.color);
-            }
+    createLabelElement(options) {
+        let labelColor = options.color;
+
+        if (!labelColor) {
+            labelColor = autoTextColor(this.color);
+        }
 
-            this.label = new TextBox(labelText,
-                deepExtend({
-                    align: CENTER,
-                    vAlign: CENTER,
-                    margin: {
-                        left: 5,
-                        right: 5
-                    },
-                    zIndex: valueOrDefault(labels.zIndex, this.series.zIndex)
+        return new TextBox(this.getLabelText(options),
+            deepExtend({
+                align: CENTER,
+                vAlign: CENTER,
+                margin: {
+                    left: 5,
+                    right: 5
                 },
-                labels, {
-                    color: labelColor
-                }),
-                pointData
-            );
-            this.append(this.label);
+                zIndex: valueOrDefault(options.zIndex, this.series.zIndex)
+            },
+            options, {
+                color: labelColor
+            }),
+            this.pointData()
+        );
+    }
+
+    getLabelText(options) {
+        let labelTemplate = getTemplate(options);
+
+        if (labelTemplate) {
+            return labelTemplate(this.pointData());
         }
+
+        return this.formatValue(options.format);
     }
 
     formatValue(format) {
@@ -87,6 +93,12 @@ class HeatmapPoint extends ChartElement {
         this.marker.reflow(this.markerBox());
     }
 
+    createVisual() {
+        super.createVisual();
+
+        this.addAccessibilityAttributesToVisual();
+    }
+
     markerBox() {
         const options = this.options;
         const markers = options.markers;
@@ -189,6 +201,27 @@ class HeatmapPoint extends ChartElement {
         };
     }
 
+    createFocusHighlight() {
+        const markerOptions = this.options.markers;
+        const highlightOptions = this.options.accessibility.highlight;
+
+        const highlight = new ShapeElement({
+            type: valueOrDefault(markerOptions.type, 'rect'),
+            width: markerOptions.size,
+            height: markerOptions.size,
+            rotation: markerOptions.rotation,
+            background: highlightOptions.color,
+            border: highlightOptions.border,
+            borderRadius: markerOptions.borderRadius,
+            padding: highlightOptions.border.width / 2,
+            zIndex: highlightOptions.zIndex
+        });
+
+        highlight.reflow(this.markerBox());
+
+        return highlight.getElement();
+    }
+
     tooltipAnchor() {
         const left = this.box.center().x;
         const top = this.box.y1 - TOOLTIP_OFFSET;
@@ -223,6 +256,7 @@ class HeatmapPoint extends ChartElement {
 
 deepExtend(HeatmapPoint.prototype, PointEventsMixin);
 deepExtend(HeatmapPoint.prototype, NoteMixin);
+deepExtend(HeatmapPoint.prototype, AccessibilityAttributesMixin);
 
 HeatmapPoint.prototype.defaults = {
     markers: {
@@ -240,6 +274,11 @@ HeatmapPoint.prototype.defaults = {
     opacity: 1,
     notes: {
         label: {}
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 };
 

package/dist/es2015/chart/legend/legend-item.js

@@ -1,9 +1,11 @@
 import { drawing as draw } from '@progress/kendo-drawing';
 
 import { BoxElement, FloatElement, ShapeElement, TextBox } from '../../core';
-import { LEGEND_ITEM_CLICK, LEGEND_ITEM_HOVER, LEGEND_ITEM_LEAVE } from '../constants';
+import { LEGEND_ITEM_ARIA_ROLE_DESCRIPTION, LEGEND_ITEM_CLASSNAME, LEGEND_ITEM_CLICK, LEGEND_ITEM_HOVER, LEGEND_ITEM_LEAVE, LEGEND_ITEM_ROLE } from '../constants';
 import { CENTER, WHITE } from '../../common/constants';
-import { deepExtend, eventElement } from '../../common';
+import { deepExtend, eventElement, setDefaultOptions } from '../../common';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
+import addAccessibilityAttributesToVisual from '../../core/utils/add-accessibility-attributes-to-visual';
 
 class LegendItem extends BoxElement {
     constructor(options) {
@@ -99,6 +101,19 @@ class LegendItem extends BoxElement {
         };
     }
 
+    createVisual() {
+        super.createVisual();
+        const options = this.options;
+
+        if (this.options.visible) {
+            const accessibilityOptions = deepExtend({ ariaLabel: options.text }, options.accessibility);
+
+            addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);
+
+            this.visual.options.ariaChecked = options.active;
+        }
+    }
+
     renderVisual() {
         const options = this.options;
         const customVisual = options.visual;
@@ -130,6 +145,21 @@ class LegendItem extends BoxElement {
             super.renderVisual();
         }
     }
+
+    createFocusHighlight(style) {
+        const borderWidth = style.stroke.width;
+        return draw.Path.fromRect(this.container.box.pad(borderWidth / 2).toRect(), style);
+    }
 }
 
+deepExtend(LegendItem.prototype, AccessibilityAttributesMixin);
+
+setDefaultOptions(LegendItem, {
+    accessibility: {
+        role: LEGEND_ITEM_ROLE,
+        className: LEGEND_ITEM_CLASSNAME,
+        ariaRoleDescription: LEGEND_ITEM_ARIA_ROLE_DESCRIPTION
+    }
+});
+
 export default LegendItem;

package/dist/es2015/chart/legend/legend.js

@@ -100,7 +100,8 @@ class Legend extends ChartElement {
             innerElement.append(new LegendItem(deepExtend({}, {
                 markers: options.markers,
                 labels: options.labels,
-                rtl: chartService.rtl
+                rtl: chartService.rtl,
+                accessibility: options.accessibility
             }, options.item, item)));
         }
 
@@ -120,6 +121,10 @@ class Legend extends ChartElement {
         return this.container.children[0].children.length > 0;
     }
 
+    getItems() {
+        return this.container.children[0].children;
+    }
+
     reflow(targetBox) {
         const options = this.options;
         const legendBox = targetBox.clone();

package/dist/es2015/chart/line-chart/line-point.js

@@ -4,10 +4,12 @@ import { ChartElement, TextBox, ShapeElement, Box, Point } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
-import { LINE_MARKER_SIZE, FADEIN, INITIAL_ANIMATION_DURATION, BORDER_BRIGHTNESS, TOOLTIP_OFFSET, ABOVE, BELOW } from '../constants';
+import { LINE_MARKER_SIZE, FADEIN, INITIAL_ANIMATION_DURATION, BORDER_BRIGHTNESS, TOOLTIP_OFFSET, ABOVE, BELOW, CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
 
 import { WHITE, CIRCLE, CENTER, TOP, BOTTOM, LEFT, HIGHLIGHT_ZINDEX } from '../../common/constants';
 import { deepExtend, defined, getTemplate, valueOrDefault, getSpacing } from '../../common';
+import TemplateService from '../../services/template-service';
+import guid from '../../core/utils/guid';
 
 class LinePoint extends ChartElement {
     constructor(value, options) {
@@ -20,7 +22,7 @@ class LinePoint extends ChartElement {
     }
 
     render() {
-        const { markers, labels } = this.options;
+        const { markers } = this.options;
 
         if (this._rendered) {
             return;
@@ -33,35 +35,59 @@ class LinePoint extends ChartElement {
             this.append(this.marker);
         }
 
+        this.createLabel();
+        this.createNote();
+
+        if (this.errorBar) {
+            this.append(this.errorBar);
+        }
+    }
+
+    createLabel() {
+        const options = this.options;
+        const labels = options.labels;
+
         if (labels.visible) {
-            const labelTemplate = getTemplate(labels);
-            const pointData = this.pointData();
-            let labelText = this.value;
-            if (labelTemplate) {
-                labelText = labelTemplate(pointData);
-            } else if (labels.format) {
-                labelText = this.formatValue(labels.format);
-            }
-            this.label = new TextBox(labelText,
-                deepExtend({
-                    align: CENTER,
-                    vAlign: CENTER,
-                    margin: {
-                        left: 5,
-                        right: 5
-                    },
-                    zIndex: valueOrDefault(labels.zIndex, this.series.zIndex)
-                }, labels),
-                pointData
-            );
+            this.label = this.createLabelElement(labels);
             this.append(this.label);
         }
+    }
 
-        this.createNote();
+    createLabelElement(options) {
+        return new TextBox(this.getLabelText(options),
+            deepExtend({
+                align: CENTER,
+                vAlign: CENTER,
+                margin: {
+                    left: 5,
+                    right: 5
+                },
+                zIndex: valueOrDefault(options.zIndex, this.series.zIndex)
+            }, options),
+            this.pointData()
+        );
+    }
 
-        if (this.errorBar) {
-            this.append(this.errorBar);
+    getLabelText(options) {
+        let labelTemplate = getTemplate(options);
+
+        if (labelTemplate) {
+            return labelTemplate(this.pointData());
+        } else if (options.format) {
+            return this.formatValue(options.format);
         }
+
+        return this.value;
+    }
+
+    getAriaLabelText() {
+        const labels = this.options.labels;
+
+        if (labels.ariaTemplate) {
+            return TemplateService.compile(labels.ariaTemplate)(this.pointData());
+        }
+
+        return this.getLabelText(labels);
     }
 
     markerBorder() {
@@ -90,7 +116,10 @@ class LinePoint extends ChartElement {
             opacity: options.opacity,
             zIndex: valueOrDefault(options.zIndex, this.series.zIndex),
             animation: options.animation,
-            visual: options.visual
+            visual: options.visual,
+            accessibilityOptions: deepExtend({
+                ariaLabel: this.getAriaLabelText(this.options.labels)
+            }, this.options.accessibility)
         }, {
             dataItem: this.dataItem,
             value: this.value,
@@ -221,6 +250,28 @@ class LinePoint extends ChartElement {
         };
     }
 
+    createFocusHighlight() {
+        const markerOptions = this.options.markers;
+        const highlightOptions = this.options.accessibility.highlight;
+        const size = markerOptions.size + (markerOptions.border.width || 0);
+
+        const highlight = new ShapeElement({
+            type: markerOptions.type,
+            width: size,
+            height: size,
+            rotation: markerOptions.rotation,
+            background: highlightOptions.color,
+            border: highlightOptions.border,
+            opacity: highlightOptions.opacity,
+            padding: highlightOptions.border.width / 2,
+            zIndex: highlightOptions.zIndex
+        });
+
+        highlight.reflow(this._childBox);
+
+        return highlight.getElement();
+    }
+
     tooltipAnchor() {
         const markerBox = this.markerBox();
         const clipBox = this.owner.pane.clipBox();
@@ -278,6 +329,33 @@ class LinePoint extends ChartElement {
             series: this.series
         };
     }
+
+    focusVisual() {
+        if (this.marker) {
+            this._id = guid();
+
+            if (this.marker.visual) {
+                this.marker.visual.options.set("id", this._id);
+            }
+
+            this.toggleFocusHighlight(true);
+        }
+    }
+
+    clearFocusFromVisual() {
+        if (this.marker) {
+            if (this.marker.visual) {
+                this.marker.visual.options.set("id", "");
+            }
+
+            this._id = null;
+            this.toggleFocusHighlight(false);
+        }
+    }
+
+    getIndex() {
+        return defined(this.categoryIx) ? this.categoryIx : this.pointIx;
+    }
 }
 
 LinePoint.prototype.defaults = {
@@ -318,6 +396,12 @@ LinePoint.prototype.defaults = {
         line: {
             width: 1
         }
+    },
+    accessibility: {
+        tabIndex: 0,
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 };
 

package/dist/es2015/chart/mixins/accessibility-attributes-mixin.js

@@ -0,0 +1,36 @@
+import addAccessibilityAttributesToVisual from "../../core/utils/add-accessibility-attributes-to-visual";
+import { deepExtend } from "../../common";
+import guid from '../../core/utils/guid';
+import TemplateService from "../../services/template-service";
+
+const AccessibilityAttributesMixin = {
+    addAccessibilityAttributesToVisual: function() {
+        const accessibilityOptions = deepExtend({ ariaLabel: this.getAriaLabelText() }, this.options.accessibility);
+
+        addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);
+    },
+
+    getAriaLabelText() {
+        const labels = this.options.labels;
+
+        if (labels.ariaTemplate) {
+            return TemplateService.compile(labels.ariaTemplate)(this.pointData());
+        }
+
+        return this.getLabelText(labels);
+    },
+
+    focusVisual() {
+        this._id = guid();
+        this.visual.options.set("id", this._id);
+        this.toggleFocusHighlight(true);
+    },
+
+    clearFocusFromVisual() {
+        this.visual.options.set("id", "");
+        this._id = null;
+        this.toggleFocusHighlight(false);
+    }
+};
+
+export default AccessibilityAttributesMixin;

package/dist/es2015/chart/pie-chart/pie-chart.js

@@ -101,7 +101,7 @@ class PieChart extends ChartElement {
             dataItem: fields.dataItem,
             category: fields.category,
             percentage: fields.percentage
-        }, { defaults: series._defaults, excluded: [ "data", "content", "template", "visual", "toggle" ] });
+        }, { defaults: series._defaults, excluded: [ "data", "content", "template", "visual", "toggle", "ariaTemplate" ] });
     }
 
     addValue(value, sector, fields) {