From 6d4d5200954806b59fa859e821c59ba42df57bda Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Mon, 24 Sep 2018 21:20:02 -0700 Subject: [PATCH] Override the a11y title and description for the stats time series chart Since this is a use case specific chart, we can use use case specific language in our labels. --- ui/app/components/stats-time-series.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/ui/app/components/stats-time-series.js b/ui/app/components/stats-time-series.js index 73076217182..dc3a0122bde 100644 --- a/ui/app/components/stats-time-series.js +++ b/ui/app/components/stats-time-series.js @@ -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();