luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

Override the a11y title and description for the stats time series chart

Browse source 
Since this is a use case specific chart, we can use use case specific
language in our labels.
This commit is contained in:
Michael Lange 2018-09-24 21:20:02 -07:00
parent cdb1831ceb
commit ca631ee217
1 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ui/app/components/stats-time-series.js
View file

@ -5,6 +5,7 @@ import d3Format from 'd3-format';
import d3Scale from 'd3-scale';
import d3Array from 'd3-array';
import LineChart from 'nomad-ui/components/line-chart';
import formatDuration from 'nomad-ui/utils/format-duration';
export default LineChart.extend({
xProp: 'timestamp',
@ -19,6 +20,20 @@ export default LineChart.extend({
return d3Format.format('.1~%');
},
// Specific a11y descriptors
title: 'Stats Time Series Chart',
description: computed('data.[]', 'xProp', 'yProp', function() {
const { xProp, yProp, data } = this.getProperties('data', 'xProp', 'yProp');
const yRange = d3Array.extent(data, d => d[yProp]);
const xRange = d3Array.extent(data, d => d[xProp]);
const yFormatter = this.yFormat();
const duration = formatDuration(xRange[1] - xRange[0], 'ms', true);
return `Time-series data for the last ${duration}, with values ranging from ${yFormatter(yRange[0])} to ${yFormatter(yRange[1])}`;
}),
xScale: computed('data.[]', 'xProp', 'timeseries', 'yAxisOffset', function() {
const xProp = this.get('xProp');
const scale = this.get('timeseries') ? d3Scale.scaleTime() : d3Scale.scaleLinear();