/* *
|
*
|
* (c) 2009-2019 Øystein Moseng
|
*
|
* Accessibility component for series and points.
|
*
|
* License: www.highcharts.com/license
|
*
|
* */
|
|
'use strict';
|
|
Object.defineProperty(exports, "__esModule", {
|
value: true
|
});
|
|
var _Globals = require('../../../parts/Globals.js');
|
|
var _Globals2 = _interopRequireDefault(_Globals);
|
|
var _Utilities = require('../../../parts/Utilities.js');
|
|
var _Utilities2 = _interopRequireDefault(_Utilities);
|
|
var _AccessibilityComponent = require('../AccessibilityComponent.js');
|
|
var _AccessibilityComponent2 = _interopRequireDefault(_AccessibilityComponent);
|
|
var _KeyboardNavigationHandler = require('../KeyboardNavigationHandler.js');
|
|
var _KeyboardNavigationHandler2 = _interopRequireDefault(_KeyboardNavigationHandler);
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
var isNumber = _Utilities2.default.isNumber;
|
|
var merge = _Globals2.default.merge,
|
pick = _Globals2.default.pick;
|
|
/*
|
* Set for which series types it makes sense to move to the closest point with
|
* up/down arrows, and which series types should just move to next series.
|
*/
|
_Globals2.default.Series.prototype.keyboardMoveVertical = true;
|
['column', 'pie'].forEach(function (type) {
|
if (_Globals2.default.seriesTypes[type]) {
|
_Globals2.default.seriesTypes[type].prototype.keyboardMoveVertical = false;
|
}
|
});
|
|
/**
|
* Keep track of forcing markers.
|
* @private
|
*/
|
_Globals2.default.addEvent(_Globals2.default.Series, 'render', function () {
|
var series = this,
|
chart = series.chart,
|
options = series.options,
|
a11yOptions = chart.options.accessibility || {},
|
points = series.points || [],
|
dataLength = points.length,
|
resetMarkerOptions = series.resetA11yMarkerOptions,
|
|
// We need markers for a11y
|
forceMarkers = a11yOptions.enabled && (options.accessibility && options.accessibility.enabled) !== false && (dataLength < a11yOptions.pointDescriptionThreshold || a11yOptions.pointDescriptionThreshold === false || dataLength < a11yOptions.pointNavigationThreshold || a11yOptions.pointNavigationThreshold === false);
|
|
if (forceMarkers) {
|
// If markers are explicitly disabled on series, replace with markers
|
// that have zero opacity.
|
if (options.marker && options.marker.enabled === false) {
|
series.a11yMarkersForced = true;
|
merge(true, series.options, {
|
marker: {
|
enabled: true,
|
states: {
|
normal: {
|
opacity: 0
|
}
|
}
|
}
|
});
|
}
|
|
// If we have point markers, we need to handle them
|
if (series._hasPointMarkers && series.points && series.points.length) {
|
var i = dataLength,
|
pointOptions;
|
while (i--) {
|
pointOptions = points[i].options;
|
if (pointOptions.marker) {
|
if (pointOptions.marker.enabled) {
|
// Make sure opacity is overridden to show enabled
|
// markers
|
merge(true, pointOptions.marker, {
|
states: {
|
normal: {
|
opacity: pointOptions.marker.states && pointOptions.marker.states.normal && pointOptions.marker.states.normal.opacity || 1
|
}
|
}
|
});
|
} else {
|
// Make sure hidden markers are enabled instead, and
|
// opacity is out.
|
merge(true, pointOptions.marker, {
|
enabled: true,
|
states: {
|
normal: {
|
opacity: 0
|
}
|
}
|
});
|
}
|
}
|
}
|
}
|
} else if (series.a11yMarkersForced && resetMarkerOptions) {
|
// Series markers should not be forced, and we should reset to old
|
// options.
|
delete series.a11yMarkersForced;
|
merge(true, series.options, {
|
marker: {
|
enabled: resetMarkerOptions.enabled,
|
states: {
|
normal: {
|
opacity: resetMarkerOptions.states && resetMarkerOptions.states.normal && resetMarkerOptions.states.normal.opacity
|
}
|
}
|
}
|
});
|
}
|
});
|
|
/**
|
* Keep track of options to reset markers to if no longer forced.
|
* @private
|
*/
|
_Globals2.default.addEvent(_Globals2.default.Series, 'afterSetOptions', function (e) {
|
this.resetA11yMarkerOptions = merge(e.options.marker || {}, this.userOptions.marker || {});
|
});
|
|
/**
|
* Get the index of a point in a series. This is needed when using e.g. data
|
* grouping.
|
*
|
* @private
|
* @function getPointIndex
|
*
|
* @param {Highcharts.Point} point
|
* The point to find index of.
|
*
|
* @return {number}
|
* The index in the series.points array of the point.
|
*/
|
function getPointIndex(point) {
|
var index = point.index,
|
points = point.series.points,
|
i = points.length;
|
|
if (points[index] !== point) {
|
while (i--) {
|
if (points[i] === point) {
|
return i;
|
}
|
}
|
} else {
|
return index;
|
}
|
}
|
|
/**
|
* Determine if a series should be skipped
|
*
|
* @private
|
* @function isSkipSeries
|
*
|
* @param {Highcharts.Series} series
|
*
|
* @return {boolean}
|
*/
|
function isSkipSeries(series) {
|
var a11yOptions = series.chart.options.accessibility,
|
seriesA11yOptions = series.options.accessibility || {},
|
seriesKbdNavOptions = seriesA11yOptions.keyboardNavigation;
|
|
return seriesKbdNavOptions && seriesKbdNavOptions.enabled === false || seriesA11yOptions.enabled === false || series.options.enableMouseTracking === false || // #8440
|
!series.visible ||
|
// Skip all points in a series where pointNavigationThreshold is
|
// reached
|
a11yOptions.pointNavigationThreshold && a11yOptions.pointNavigationThreshold <= series.points.length;
|
}
|
|
/**
|
* Determine if a point should be skipped
|
*
|
* @private
|
* @function isSkipPoint
|
*
|
* @param {Highcharts.Point} point
|
*
|
* @return {boolean}
|
*/
|
function isSkipPoint(point) {
|
var a11yOptions = point.series.chart.options.accessibility;
|
|
return point.isNull && a11yOptions.keyboardNavigation.skipNullPoints || point.visible === false || isSkipSeries(point.series);
|
}
|
|
/**
|
* Get the point in a series that is closest (in distance) to a reference point.
|
* Optionally supply weight factors for x and y directions.
|
*
|
* @private
|
* @function getClosestPoint
|
*
|
* @param {Highcharts.Point} point
|
* @param {Highcharts.Series} series
|
* @param {number} [xWeight]
|
* @param {number} [yWeight]
|
*
|
* @return {Highcharts.Point|undefined}
|
*/
|
function getClosestPoint(point, series, xWeight, yWeight) {
|
var minDistance = Infinity,
|
dPoint,
|
minIx,
|
distance,
|
i = series.points.length;
|
|
if (point.plotX === undefined || point.plotY === undefined) {
|
return;
|
}
|
while (i--) {
|
dPoint = series.points[i];
|
if (dPoint.plotX === undefined || dPoint.plotY === undefined) {
|
continue;
|
}
|
distance = (point.plotX - dPoint.plotX) * (point.plotX - dPoint.plotX) * (xWeight || 1) + (point.plotY - dPoint.plotY) * (point.plotY - dPoint.plotY) * (yWeight || 1);
|
if (distance < minDistance) {
|
minDistance = distance;
|
minIx = i;
|
}
|
}
|
return minIx !== undefined && series.points[minIx];
|
}
|
|
/**
|
* Highlights a point (show tooltip and display hover state).
|
*
|
* @private
|
* @function Highcharts.Point#highlight
|
*
|
* @return {Highcharts.Point}
|
* This highlighted point.
|
*/
|
_Globals2.default.Point.prototype.highlight = function () {
|
var chart = this.series.chart;
|
|
if (!this.isNull) {
|
this.onMouseOver(); // Show the hover marker and tooltip
|
} else {
|
if (chart.tooltip) {
|
chart.tooltip.hide(0);
|
}
|
// Don't call blur on the element, as it messes up the chart div's focus
|
}
|
|
// We focus only after calling onMouseOver because the state change can
|
// change z-index and mess up the element.
|
if (this.graphic) {
|
chart.setFocusToElement(this.graphic);
|
}
|
|
chart.highlightedPoint = this;
|
return this;
|
};
|
|
/**
|
* Function to highlight next/previous point in chart.
|
*
|
* @private
|
* @function Highcharts.Chart#highlightAdjacentPoint
|
*
|
* @param {boolean} next
|
* Flag for the direction.
|
*
|
* @return {Highcharts.Point|boolean}
|
* Returns highlighted point on success, false on failure (no adjacent
|
* point to highlight in chosen direction).
|
*/
|
_Globals2.default.Chart.prototype.highlightAdjacentPoint = function (next) {
|
var chart = this,
|
series = chart.series,
|
curPoint = chart.highlightedPoint,
|
curPointIndex = curPoint && getPointIndex(curPoint) || 0,
|
curPoints = curPoint && curPoint.series.points,
|
lastSeries = chart.series && chart.series[chart.series.length - 1],
|
lastPoint = lastSeries && lastSeries.points && lastSeries.points[lastSeries.points.length - 1],
|
newSeries,
|
newPoint;
|
|
// If no points, return false
|
if (!series[0] || !series[0].points) {
|
return false;
|
}
|
|
if (!curPoint) {
|
// No point is highlighted yet. Try first/last point depending on move
|
// direction
|
newPoint = next ? series[0].points[0] : lastPoint;
|
} else {
|
// We have a highlighted point.
|
// Grab next/prev point & series
|
newSeries = series[curPoint.series.index + (next ? 1 : -1)];
|
newPoint = curPoints[curPointIndex + (next ? 1 : -1)];
|
if (!newPoint && newSeries) {
|
// Done with this series, try next one
|
newPoint = newSeries.points[next ? 0 : newSeries.points.length - 1];
|
}
|
|
// If there is no adjacent point, we return false
|
if (!newPoint) {
|
return false;
|
}
|
}
|
|
// Recursively skip points
|
if (isSkipPoint(newPoint)) {
|
// If we skip this whole series, move to the end of the series before we
|
// recurse, just to optimize
|
newSeries = newPoint.series;
|
if (isSkipSeries(newSeries)) {
|
chart.highlightedPoint = next ? newSeries.points[newSeries.points.length - 1] : newSeries.points[0];
|
} else {
|
// Otherwise, just move one point
|
chart.highlightedPoint = newPoint;
|
}
|
// Retry
|
return chart.highlightAdjacentPoint(next);
|
}
|
|
// There is an adjacent point, highlight it
|
return newPoint.highlight();
|
};
|
|
/**
|
* Highlight first valid point in a series. Returns the point if successfully
|
* highlighted, otherwise false. If there is a highlighted point in the series,
|
* use that as starting point.
|
*
|
* @private
|
* @function Highcharts.Series#highlightFirstValidPoint
|
*
|
* @return {Highcharts.Point|boolean}
|
*/
|
_Globals2.default.Series.prototype.highlightFirstValidPoint = function () {
|
var curPoint = this.chart.highlightedPoint,
|
start = (curPoint && curPoint.series) === this ? getPointIndex(curPoint) : 0,
|
points = this.points,
|
len = points.length;
|
|
if (points && len) {
|
for (var i = start; i < len; ++i) {
|
if (!isSkipPoint(points[i])) {
|
return points[i].highlight();
|
}
|
}
|
for (var j = start; j >= 0; --j) {
|
if (!isSkipPoint(points[j])) {
|
return points[j].highlight();
|
}
|
}
|
}
|
return false;
|
};
|
|
/**
|
* Highlight next/previous series in chart. Returns false if no adjacent series
|
* in the direction, otherwise returns new highlighted point.
|
*
|
* @private
|
* @function Highcharts.Chart#highlightAdjacentSeries
|
*
|
* @param {boolean} down
|
*
|
* @return {Highcharts.Point|boolean}
|
*/
|
_Globals2.default.Chart.prototype.highlightAdjacentSeries = function (down) {
|
var chart = this,
|
newSeries,
|
newPoint,
|
adjacentNewPoint,
|
curPoint = chart.highlightedPoint,
|
lastSeries = chart.series && chart.series[chart.series.length - 1],
|
lastPoint = lastSeries && lastSeries.points && lastSeries.points[lastSeries.points.length - 1];
|
|
// If no point is highlighted, highlight the first/last point
|
if (!chart.highlightedPoint) {
|
newSeries = down ? chart.series && chart.series[0] : lastSeries;
|
newPoint = down ? newSeries && newSeries.points && newSeries.points[0] : lastPoint;
|
return newPoint ? newPoint.highlight() : false;
|
}
|
|
newSeries = chart.series[curPoint.series.index + (down ? -1 : 1)];
|
|
if (!newSeries) {
|
return false;
|
}
|
|
// We have a new series in this direction, find the right point
|
// Weigh xDistance as counting much higher than Y distance
|
newPoint = getClosestPoint(curPoint, newSeries, 4);
|
|
if (!newPoint) {
|
return false;
|
}
|
|
// New series and point exists, but we might want to skip it
|
if (isSkipSeries(newSeries)) {
|
// Skip the series
|
newPoint.highlight();
|
adjacentNewPoint = chart.highlightAdjacentSeries(down); // Try recurse
|
if (!adjacentNewPoint) {
|
// Recurse failed
|
curPoint.highlight();
|
return false;
|
}
|
// Recurse succeeded
|
return adjacentNewPoint;
|
}
|
|
// Highlight the new point or any first valid point back or forwards from it
|
newPoint.highlight();
|
return newPoint.series.highlightFirstValidPoint();
|
};
|
|
/**
|
* Highlight the closest point vertically.
|
*
|
* @private
|
* @function Highcharts.Chart#highlightAdjacentPointVertical
|
*
|
* @param {boolean} down
|
*
|
* @return {Highcharts.Point|boolean}
|
*/
|
_Globals2.default.Chart.prototype.highlightAdjacentPointVertical = function (down) {
|
var curPoint = this.highlightedPoint,
|
minDistance = Infinity,
|
bestPoint;
|
|
if (curPoint.plotX === undefined || curPoint.plotY === undefined) {
|
return false;
|
}
|
this.series.forEach(function (series) {
|
if (isSkipSeries(series)) {
|
return;
|
}
|
series.points.forEach(function (point) {
|
if (point.plotY === undefined || point.plotX === undefined || point === curPoint) {
|
return;
|
}
|
var yDistance = point.plotY - curPoint.plotY,
|
width = Math.abs(point.plotX - curPoint.plotX),
|
distance = Math.abs(yDistance) * Math.abs(yDistance) + width * width * 4; // Weigh horizontal distance highly
|
|
// Reverse distance number if axis is reversed
|
if (series.yAxis.reversed) {
|
yDistance *= -1;
|
}
|
|
if (yDistance <= 0 && down || yDistance >= 0 && !down || // Chk dir
|
distance < 5 || // Points in same spot => infinite loop
|
isSkipPoint(point)) {
|
return;
|
}
|
|
if (distance < minDistance) {
|
minDistance = distance;
|
bestPoint = point;
|
}
|
});
|
});
|
|
return bestPoint ? bestPoint.highlight() : false;
|
};
|
|
/**
|
* Get accessible time description for a point on a datetime axis.
|
*
|
* @private
|
* @function Highcharts.Point#getTimeDescription
|
*
|
* @return {string}
|
* The description as string.
|
*/
|
_Globals2.default.Point.prototype.getA11yTimeDescription = function () {
|
var point = this,
|
series = point.series,
|
chart = series.chart,
|
a11yOptions = chart.options.accessibility;
|
if (series.xAxis && series.xAxis.isDatetimeAxis) {
|
return chart.time.dateFormat(a11yOptions.pointDateFormatter && a11yOptions.pointDateFormatter(point) || a11yOptions.pointDateFormat || _Globals2.default.Tooltip.prototype.getXDateFormat.call({
|
getDateFormat: _Globals2.default.Tooltip.prototype.getDateFormat,
|
chart: chart
|
}, point, chart.options.tooltip, series.xAxis), point.x);
|
}
|
};
|
|
/**
|
* The SeriesComponent class
|
*
|
* @private
|
* @class
|
* @name Highcharts.SeriesComponent
|
* @param {Highcharts.Chart} chart
|
* Chart object
|
*/
|
var SeriesComponent = function SeriesComponent(chart) {
|
this.initBase(chart);
|
this.init();
|
};
|
SeriesComponent.prototype = new _AccessibilityComponent2.default();
|
_Globals2.default.extend(SeriesComponent.prototype, /** @lends Highcharts.SeriesComponent */{
|
|
/**
|
* Init the component.
|
*/
|
init: function init() {
|
var component = this;
|
|
// On destroy, we need to clean up the focus border and the state.
|
this.addEvent(_Globals2.default.Series, 'destroy', function () {
|
var chart = this.chart;
|
if (chart === component.chart && chart.highlightedPoint && chart.highlightedPoint.series === this) {
|
delete chart.highlightedPoint;
|
if (chart.focusElement) {
|
chart.focusElement.removeFocusBorder();
|
}
|
}
|
});
|
|
// Hide tooltip from screen readers when it is shown
|
this.addEvent(_Globals2.default.Tooltip, 'refresh', function () {
|
if (this.chart === component.chart && this.label && this.label.element) {
|
this.label.element.setAttribute('aria-hidden', true);
|
}
|
});
|
|
// Hide series labels
|
this.addEvent(this.chart, 'afterDrawSeriesLabels', function () {
|
this.series.forEach(function (series) {
|
if (series.labelBySeries) {
|
series.labelBySeries.attr('aria-hidden', true);
|
}
|
});
|
});
|
|
// Set up announcing of new data
|
this.initAnnouncer();
|
},
|
|
/**
|
* Called on chart render. It is necessary to do this for render in case
|
* markers change on zoom/pixel density.
|
*/
|
onChartRender: function onChartRender() {
|
var component = this,
|
chart = this.chart;
|
chart.series.forEach(function (series) {
|
component[(series.options.accessibility && series.options.accessibility.enabled) !== false && series.visible ? 'addSeriesDescription' : 'hideSeriesFromScreenReader'](series);
|
});
|
},
|
|
/**
|
* Get keyboard navigation handler for this component.
|
* @return {Highcharts.KeyboardNavigationHandler}
|
*/
|
getKeyboardNavigation: function getKeyboardNavigation() {
|
var keys = this.keyCodes,
|
chart = this.chart,
|
inverted = chart.inverted,
|
a11yOptions = chart.options.accessibility,
|
|
// Function that attempts to highlight next/prev point, returns
|
// the response number. Handles wrap around.
|
attemptNextPoint = function attemptNextPoint(directionIsNext) {
|
if (!chart.highlightAdjacentPoint(directionIsNext)) {
|
// Failed to highlight next, wrap to last/first if we
|
// have wrapAround
|
if (a11yOptions.keyboardNavigation.wrapAround) {
|
return this.init(directionIsNext ? 1 : -1);
|
}
|
return this.response[directionIsNext ? 'next' : 'prev'];
|
}
|
return this.response.success;
|
};
|
|
return new _KeyboardNavigationHandler2.default(chart, {
|
keyCodeMap: [
|
// Arrow sideways
|
[[inverted ? keys.up : keys.left, inverted ? keys.down : keys.right], function (keyCode) {
|
return attemptNextPoint.call(this, keyCode === keys.right || keyCode === keys.down);
|
}],
|
|
// Arrow vertical
|
[[inverted ? keys.left : keys.up, inverted ? keys.right : keys.down], function (keyCode) {
|
var down = keyCode === keys.down || keyCode === keys.right,
|
navOptions = a11yOptions.keyboardNavigation;
|
|
// Handle serialized mode, act like left/right
|
if (navOptions.mode && navOptions.mode === 'serialize') {
|
return attemptNextPoint.call(this, down);
|
}
|
|
// Normal mode, move between series
|
var highlightMethod = chart.highlightedPoint && chart.highlightedPoint.series.keyboardMoveVertical ? 'highlightAdjacentPointVertical' : 'highlightAdjacentSeries';
|
|
chart[highlightMethod](down);
|
return this.response.success;
|
}],
|
|
// Enter/Spacebar
|
[[keys.enter, keys.space], function () {
|
if (chart.highlightedPoint) {
|
chart.highlightedPoint.firePointEvent('click');
|
}
|
}]],
|
|
// Always start highlighting from scratch when entering this module
|
init: function init(dir) {
|
var numSeries = chart.series.length,
|
i = dir > 0 ? 0 : numSeries,
|
res;
|
|
if (dir > 0) {
|
delete chart.highlightedPoint;
|
// Find first valid point to highlight
|
while (i < numSeries) {
|
res = chart.series[i].highlightFirstValidPoint();
|
if (res) {
|
break;
|
}
|
++i;
|
}
|
} else {
|
// Find last valid point to highlight
|
while (i--) {
|
chart.highlightedPoint = chart.series[i].points[chart.series[i].points.length - 1];
|
// Highlight first valid point in the series will also
|
// look backwards. It always starts from currently
|
// highlighted point.
|
res = chart.series[i].highlightFirstValidPoint();
|
if (res) {
|
break;
|
}
|
}
|
}
|
|
// Nothing to highlight
|
return this.response.success;
|
},
|
|
// If leaving points, don't show tooltip anymore
|
terminate: function terminate() {
|
if (chart.tooltip) {
|
chart.tooltip.hide(0);
|
}
|
delete chart.highlightedPoint;
|
}
|
});
|
},
|
|
/**
|
* Returns true if a point should be clickable.
|
* @private
|
* @param {Highcharts.Point} point The point to test.
|
* @return {boolean} True if the point can be clicked.
|
*/
|
isPointClickable: function isPointClickable(point) {
|
var seriesOpts = point.series.options || {},
|
seriesPointEvents = seriesOpts.point && seriesOpts.point.events;
|
return point && point.graphic && point.graphic.element && (point.hcEvents && point.hcEvents.click || seriesPointEvents && seriesPointEvents.click || point.options && point.options.events && point.options.events.click);
|
},
|
|
/**
|
* Initialize the new data announcer.
|
* @private
|
*/
|
initAnnouncer: function initAnnouncer() {
|
var chart = this.chart,
|
a11yOptions = chart.options.accessibility,
|
component = this;
|
this.lastAnnouncementTime = 0;
|
this.dirty = {
|
allSeries: {}
|
};
|
|
// Add the live region
|
this.announceRegion = this.createElement('div');
|
this.announceRegion.setAttribute('aria-hidden', false);
|
this.announceRegion.setAttribute('aria-live', a11yOptions.announceNewData.interruptUser ? 'assertive' : 'polite');
|
merge(true, this.announceRegion.style, this.hiddenStyle);
|
chart.renderTo.insertBefore(this.announceRegion, chart.renderTo.firstChild);
|
|
// After drilldown, make sure we reset time counter, and also that we
|
// highlight the first series.
|
this.addEvent(this.chart, 'afterDrilldown', function () {
|
chart.highlightedPoint = null;
|
if (chart.options.accessibility.announceNewData.enabled) {
|
if (this.series && this.series.length) {
|
var el = component.getSeriesElement(this.series[0]);
|
if (el.focus && el.getAttribute('aria-label')) {
|
el.focus();
|
} else {
|
this.series[0].highlightFirstValidPoint();
|
}
|
}
|
component.lastAnnouncementTime = 0;
|
if (chart.focusElement) {
|
chart.focusElement.removeFocusBorder();
|
}
|
}
|
});
|
// On new data in the series, make sure we add it to the dirty list
|
this.addEvent(_Globals2.default.Series, 'updatedData', function () {
|
if (this.chart === chart && this.chart.options.accessibility.announceNewData.enabled) {
|
component.dirty.hasDirty = true;
|
component.dirty.allSeries[this.name + this.index] = this;
|
}
|
});
|
// New series
|
this.addEvent(chart, 'afterAddSeries', function (e) {
|
if (this.options.accessibility.announceNewData.enabled) {
|
var series = e.series;
|
component.dirty.hasDirty = true;
|
component.dirty.allSeries[series.name + series.index] = series;
|
// Add it to newSeries storage unless we already have one
|
component.dirty.newSeries = component.dirty.newSeries === undefined ? series : null;
|
}
|
});
|
// New point
|
this.addEvent(_Globals2.default.Series, 'addPoint', function (e) {
|
if (this.chart === chart && this.chart.options.accessibility.announceNewData.enabled) {
|
// Add it to newPoint storage unless we already have one
|
component.dirty.newPoint = component.dirty.newPoint === undefined ? e.point : null;
|
}
|
});
|
// On redraw: compile what we know about new data, and build
|
// announcement
|
this.addEvent(chart, 'redraw', function () {
|
if (this.options.accessibility.announceNewData && component.dirty.hasDirty) {
|
var newPoint = component.dirty.newPoint,
|
newPoints;
|
// If we have a single new point, see if we can find it in the
|
// data array. Otherwise we can only pass through options to
|
// the description builder, and it is a bit sparse in info.
|
if (newPoint) {
|
newPoints = newPoint.series.data.filter(function (point) {
|
return point.x === newPoint.x && point.y === newPoint.y;
|
});
|
// We have list of points with the same x and y values. If
|
// this list is one point long, we have our new point.
|
newPoint = newPoints.length === 1 ? newPoints[0] : newPoint;
|
}
|
// Queue the announcement
|
component.announceNewData(Object.keys(component.dirty.allSeries).map(function (ix) {
|
return component.dirty.allSeries[ix];
|
}), component.dirty.newSeries, newPoint);
|
// Reset
|
component.dirty = {
|
allSeries: {}
|
};
|
}
|
});
|
},
|
|
/**
|
* Handle announcement to user that there is new data.
|
* @private
|
* @param {Array<Highcharts.Series>} dirtySeries
|
* Array of series with new data.
|
* @param {Highcharts.Series} [newSeries]
|
* If a single new series was added, a reference to this series.
|
* @param {Highcharts.Point} [newPoint]
|
* If a single point was added, a reference to this point.
|
*/
|
announceNewData: function announceNewData(dirtySeries, newSeries, newPoint) {
|
var chart = this.chart,
|
annOptions = chart.options.accessibility.announceNewData;
|
if (annOptions.enabled) {
|
var component = this,
|
now = +new Date(),
|
dTime = now - this.lastAnnouncementTime,
|
time = Math.max(0, annOptions.minAnnounceInterval - dTime),
|
allSeries;
|
|
// Add affected series from existing queued announcement
|
if (this.queuedAnnouncement) {
|
var uniqueSeries = (this.queuedAnnouncement.series || []).concat(dirtySeries).reduce(function (acc, cur) {
|
acc[cur.name + cur.index] = cur;
|
return acc;
|
}, {});
|
allSeries = Object.keys(uniqueSeries).map(function (ix) {
|
return uniqueSeries[ix];
|
});
|
} else {
|
allSeries = [].concat(dirtySeries);
|
}
|
|
// Build message and announce
|
var message = this.buildAnnouncementMessage(allSeries, newSeries, newPoint);
|
if (message) {
|
// Is there already one queued?
|
if (this.queuedAnnouncement) {
|
clearTimeout(this.queuedAnnouncementTimer);
|
}
|
|
// Build the announcement
|
this.queuedAnnouncement = {
|
time: now,
|
message: message,
|
series: allSeries
|
};
|
|
// Queue the announcement
|
component.queuedAnnouncementTimer = setTimeout(function () {
|
if (component && component.announceRegion) {
|
component.lastAnnouncementTime = +new Date();
|
component.announceRegion.innerHTML = component.queuedAnnouncement.message;
|
|
// Delete contents after a second to avoid user
|
// finding the live region in the DOM.
|
if (component.clearAnnouncementContainerTimer) {
|
clearTimeout(component.clearAnnouncementContainerTimer);
|
}
|
component.clearAnnouncementContainerTimer = setTimeout(function () {
|
component.announceRegion.innerHTML = '';
|
delete component.clearAnnouncementContainerTimer;
|
}, 1000);
|
delete component.queuedAnnouncement;
|
delete component.queuedAnnouncementTimer;
|
}
|
}, time);
|
}
|
}
|
},
|
|
/**
|
* Handle announcement to user that there is new data.
|
* @private
|
* @param {Array<Highcharts.Series>} dirtySeries
|
* Array of series with new data.
|
* @param {Highcharts.Series} [newSeries]
|
* If a single new series was added, a reference to this series.
|
* @param {Highcharts.Point} [newPoint]
|
* If a single point was added, a reference to this point.
|
*
|
* @return {string} The announcement message to give to user.
|
*/
|
buildAnnouncementMessage: function buildAnnouncementMessage(dirtySeries, newSeries, newPoint) {
|
var chart = this.chart,
|
annOptions = chart.options.accessibility.announceNewData;
|
|
// User supplied formatter?
|
if (annOptions.announcementFormatter) {
|
var formatterRes = annOptions.announcementFormatter(dirtySeries, newSeries, newPoint);
|
if (formatterRes !== false) {
|
return formatterRes.length ? formatterRes : null;
|
}
|
}
|
|
// Default formatter - use lang options
|
var multiple = _Globals2.default.charts && _Globals2.default.charts.length > 1 ? 'Multiple' : 'Single',
|
langKey = newSeries ? 'newSeriesAnnounce' + multiple : newPoint ? 'newPointAnnounce' + multiple : 'newDataAnnounce';
|
return chart.langFormat('accessibility.announceNewData.' + langKey, {
|
chartTitle: this.stripTags(chart.options.title.text || chart.langFormat('accessibility.defaultChartTitle', { chart: chart })),
|
seriesDesc: newSeries ? this.defaultSeriesDescriptionFormatter(newSeries) : null,
|
pointDesc: newPoint ? this.defaultPointDescriptionFormatter(newPoint) : null,
|
point: newPoint,
|
series: newSeries
|
});
|
},
|
|
/**
|
* Utility function. Reverses child nodes of a DOM element.
|
* @private
|
* @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} node
|
*/
|
reverseChildNodes: function reverseChildNodes(node) {
|
var i = node.childNodes.length;
|
while (i--) {
|
node.appendChild(node.childNodes[i]);
|
}
|
},
|
|
/**
|
* Get the DOM element for the first point in the series.
|
* @private
|
* @param {Highcharts.Series} series The series to get element for.
|
* @return {Highcharts.SVGDOMElement} The DOM element for the point.
|
*/
|
getSeriesFirstPointElement: function getSeriesFirstPointElement(series) {
|
return series.points && series.points.length && series.points[0].graphic && series.points[0].graphic.element;
|
},
|
|
/**
|
* Get the DOM element for the series that we put accessibility info on.
|
* @private
|
* @param {Highcharts.Series} series The series to get element for.
|
* @return {Highcharts.SVGDOMElement} The DOM element for the series
|
*/
|
getSeriesElement: function getSeriesElement(series) {
|
var firstPointEl = this.getSeriesFirstPointElement(series);
|
return firstPointEl && firstPointEl.parentNode || series.graph && series.graph.element || series.group && series.group.element; // Could be tracker series depending on series type
|
},
|
|
/**
|
* Hide series from screen readers.
|
* @private
|
* @param {Highcharts.Series} series The series to hide
|
*/
|
hideSeriesFromScreenReader: function hideSeriesFromScreenReader(series) {
|
var seriesEl = this.getSeriesElement(series);
|
if (seriesEl) {
|
seriesEl.setAttribute('aria-hidden', true);
|
}
|
},
|
|
/**
|
* Put accessible info on series and points of a series.
|
* @private
|
* @param {Highcharts.Series} series The series to add info on.
|
*/
|
addSeriesDescription: function addSeriesDescription(series) {
|
var component = this,
|
chart = series.chart,
|
a11yOptions = chart.options.accessibility,
|
seriesA11yOptions = series.options.accessibility || {},
|
firstPointEl = component.getSeriesFirstPointElement(series),
|
seriesEl = component.getSeriesElement(series),
|
setScreenReaderProps = series.points && (series.points.length < a11yOptions.pointDescriptionThreshold || a11yOptions.pointDescriptionThreshold === false) && !seriesA11yOptions.exposeAsGroupOnly,
|
setKeyboardProps = series.points && (series.points.length < a11yOptions.pointNavigationThreshold || a11yOptions.pointNavigationThreshold === false);
|
|
if (seriesEl) {
|
// For some series types the order of elements do not match the
|
// order of points in series. In that case we have to reverse them
|
// in order for AT to read them out in an understandable order
|
if (seriesEl.lastChild === firstPointEl) {
|
component.reverseChildNodes(seriesEl);
|
}
|
|
// Unhide series element
|
component.unhideElementFromScreenReaders(seriesEl);
|
|
// Make individual point elements accessible if possible
|
if (setScreenReaderProps || setKeyboardProps) {
|
series.points.forEach(function (point) {
|
var pointEl = point.graphic && point.graphic.element;
|
if (pointEl) {
|
// We always set tabindex, as long as we are setting
|
// props.
|
pointEl.setAttribute('tabindex', '-1');
|
|
if (setScreenReaderProps) {
|
// Set screen reader specific props
|
pointEl.setAttribute('role', 'img');
|
pointEl.setAttribute('aria-label', component.stripTags(seriesA11yOptions.pointDescriptionFormatter && seriesA11yOptions.pointDescriptionFormatter(point) || a11yOptions.pointDescriptionFormatter && a11yOptions.pointDescriptionFormatter(point) || component.defaultPointDescriptionFormatter(point)));
|
} else {
|
pointEl.setAttribute('aria-hidden', true);
|
}
|
}
|
});
|
}
|
|
// Make series element accessible
|
if (chart.series.length > 1 || a11yOptions.describeSingleSeries) {
|
// Handle role attribute
|
if (seriesA11yOptions.exposeAsGroupOnly) {
|
seriesEl.setAttribute('role', 'img');
|
} else if (a11yOptions.landmarkVerbosity === 'all') {
|
seriesEl.setAttribute('role', 'region');
|
} /* else do not add role */
|
|
seriesEl.setAttribute('tabindex', '-1');
|
seriesEl.setAttribute('aria-label', component.stripTags(a11yOptions.seriesDescriptionFormatter && a11yOptions.seriesDescriptionFormatter(series) || component.defaultSeriesDescriptionFormatter(series)));
|
} else {
|
seriesEl.setAttribute('aria-label', '');
|
}
|
}
|
},
|
|
/**
|
* Return string with information about series.
|
* @private
|
* @return {string}
|
*/
|
defaultSeriesDescriptionFormatter: function defaultSeriesDescriptionFormatter(series) {
|
var chart = series.chart,
|
seriesA11yOptions = series.options.accessibility || {},
|
desc = seriesA11yOptions.description,
|
description = desc && chart.langFormat('accessibility.series.description', {
|
description: desc,
|
series: series
|
}),
|
xAxisInfo = chart.langFormat('accessibility.series.xAxisDescription', {
|
name: series.xAxis && series.xAxis.getDescription(),
|
series: series
|
}),
|
yAxisInfo = chart.langFormat('accessibility.series.yAxisDescription', {
|
name: series.yAxis && series.yAxis.getDescription(),
|
series: series
|
}),
|
summaryContext = {
|
name: series.name || '',
|
ix: series.index + 1,
|
numSeries: chart.series && chart.series.length,
|
numPoints: series.points && series.points.length,
|
series: series
|
},
|
combination = chart.types && chart.types.length > 1 ? 'Combination' : '',
|
summary = chart.langFormat('accessibility.series.summary.' + series.type + combination, summaryContext) || chart.langFormat('accessibility.series.summary.default' + combination, summaryContext);
|
|
return summary + (description ? ' ' + description : '') + (chart.yAxis && chart.yAxis.length > 1 && this.yAxis ? ' ' + yAxisInfo : '') + (chart.xAxis && chart.xAxis.length > 1 && this.xAxis ? ' ' + xAxisInfo : '');
|
},
|
|
/**
|
* Return string with information about point.
|
* @private
|
* @return {string}
|
*/
|
defaultPointDescriptionFormatter: function defaultPointDescriptionFormatter(point) {
|
var series = point.series,
|
chart = series.chart,
|
a11yOptions = chart.options.accessibility,
|
tooltipOptions = point.series.tooltipOptions || {},
|
valuePrefix = a11yOptions.pointValuePrefix || tooltipOptions.valuePrefix || '',
|
valueSuffix = a11yOptions.pointValueSuffix || tooltipOptions.valueSuffix || '',
|
description = point.options && point.options.accessibility && point.options.accessibility.description,
|
timeDesc = point.getA11yTimeDescription(),
|
numberFormat = function numberFormat(value) {
|
if (isNumber(value)) {
|
var lang = _Globals2.default.defaultOptions.lang;
|
return _Globals2.default.numberFormat(value, a11yOptions.pointValueDecimals || tooltipOptions.valueDecimals || -1, lang.decimalPoint, lang.accessibility.thousandsSep || lang.thousandsSep);
|
}
|
return value;
|
},
|
showXDescription = pick(series.xAxis && series.xAxis.options.accessibility && series.xAxis.options.accessibility.enabled, !chart.angular),
|
pointCategory = series.xAxis && series.xAxis.categories && point.category !== undefined && '' + point.category;
|
|
// Pick and choose properties for a succint label
|
var xDesc = point.name || timeDesc || pointCategory && pointCategory.replace('<br/>', ' ') || (point.id && point.id.indexOf('highcharts-') < 0 ? point.id : 'x, ' + point.x),
|
valueDesc = point.series.pointArrayMap ? point.series.pointArrayMap.reduce(function (desc, key) {
|
return desc + (desc.length ? ', ' : '') + key + ': ' + valuePrefix + numberFormat(pick(point[key], point.options[key])) + valueSuffix;
|
}, '') : point.value !== undefined ? valuePrefix + numberFormat(point.value) + valueSuffix : valuePrefix + numberFormat(point.y) + valueSuffix;
|
|
return (point.index !== undefined ? point.index + 1 + '. ' : '') + (showXDescription ? xDesc + ', ' : '') + valueDesc + '.' + (description ? ' ' + description : '') + (chart.series.length > 1 && series.name ? ' ' + series.name : '');
|
}
|
|
});
|
|
exports.default = SeriesComponent;
|
