From 67f25102f6dff4dce39de507635dd7fe02fe0f60 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Fri, 5 May 2017 16:32:10 -0700 Subject: [PATCH 1/2] Adding seconds to the timeseries tooltip --- .../public/visualizations/components/timeseries_chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js index 1581f5a8d338b..1ebb4d597b4c1 100644 --- a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js +++ b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js @@ -172,7 +172,7 @@ class TimeseriesChart extends Component {
{ item.series.label }
{ formatter(value) }
-
{ moment(item.datapoint[0]).format('lll') }
+
{ moment(item.datapoint[0]).format('ll LTS') }
From b34fa7f4542112382f9432c8ae61d5411a27bd33 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Fri, 5 May 2017 17:46:20 -0700 Subject: [PATCH 2/2] Adding x-axis label to show the bucket size --- .../lib/__tests__/get_axis_label_string.js | 16 ++++++++++++ .../components/lib/get_axis_label_string.js | 25 +++++++++++++++++++ .../components/vis_types/timeseries/vis.js | 8 ++++++ .../metrics/public/less/misc.less | 1 + .../metrics/public/lib/validate_interval.js | 2 +- .../visualizations/components/timeseries.js | 4 ++- .../components/timeseries_chart.js | 6 +++++ .../visualizations/less/includes/chart.less | 12 ++++++++- 8 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/get_axis_label_string.js create mode 100644 src/core_plugins/metrics/public/components/lib/get_axis_label_string.js diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/get_axis_label_string.js b/src/core_plugins/metrics/public/components/lib/__tests__/get_axis_label_string.js new file mode 100644 index 0000000000000..5e3f15843c011 --- /dev/null +++ b/src/core_plugins/metrics/public/components/lib/__tests__/get_axis_label_string.js @@ -0,0 +1,16 @@ +import { expect } from 'chai'; +import { getAxisLabelString } from '../get_axis_label_string'; + +describe('getAxisLabelString(interval)', () => { + it('should return a valid label for 10 seconds', () => { + expect(getAxisLabelString(10000)).to.equal('per 10 seconds'); + }); + it('should return a valid label for 2 minutes', () => { + expect(getAxisLabelString(120000)).to.equal('per 2 minutes'); + }); + it('should return a valid label for 2 hour', () => { + expect(getAxisLabelString(7200000)).to.equal('per 2 hours'); + }); +}); + + diff --git a/src/core_plugins/metrics/public/components/lib/get_axis_label_string.js b/src/core_plugins/metrics/public/components/lib/get_axis_label_string.js new file mode 100644 index 0000000000000..ed384af254207 --- /dev/null +++ b/src/core_plugins/metrics/public/components/lib/get_axis_label_string.js @@ -0,0 +1,25 @@ +import { relativeOptions } from '../../../../../ui/public/timepicker/relative_options'; +import _ from 'lodash'; +import moment from 'moment'; +const unitLookup = { + s: 'seconds', + m: 'minutes', + h: 'hours', + d: 'days', + w: 'weeks', + M: 'months', + y: 'years' +}; +export function getAxisLabelString(interval) { + const units = _.pluck(_.clone(relativeOptions).reverse(), 'value') + .filter(s => /^[smhdwMy]$/.test(s)); + const duration = moment.duration(interval, 'ms'); + for (let i = 0; i < units.length; i++) { + const as = duration.as(units[i]); + if (Math.abs(as) > 1) { + const unitValue = Math.round(Math.abs(as)); + const unitString = unitLookup[units[i]]; + return `per ${unitValue} ${unitString}`; + } + } +} diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js index be8a8c6a7a3f6..fd59f391011a7 100644 --- a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js +++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js @@ -4,6 +4,7 @@ import _ from 'lodash'; import { Timeseries } from 'plugins/metrics/visualizations'; import color from 'color'; import replaceVars from '../../lib/replace_vars'; +import { getAxisLabelString } from '../../lib/get_axis_label_string'; function hasSeperateAxis(row) { return row.seperate_axis; @@ -76,6 +77,10 @@ function TimeseriesVisualization(props) { } }); + const interval = series.reduce((currentInterval, item) => { + const seriesInterval = item.data[1][0] - item.data[0][0]; + if (!currentInterval || seriesInterval < currentInterval) return seriesInterval; + }, 0); let axisCount = 1; if (seriesModel.some(hasSeperateAxis)) { @@ -120,6 +125,9 @@ function TimeseriesVisualization(props) { if (props.onBrush) props.onBrush(ranges); } }; + if (interval) { + params.xaxisLabel = getAxisLabelString(interval); + } const style = { }; const panelBackgroundColor = model.background_color || backgroundColor; if (panelBackgroundColor) { diff --git a/src/core_plugins/metrics/public/less/misc.less b/src/core_plugins/metrics/public/less/misc.less index 03928de21b65b..ff624c4139caf 100644 --- a/src/core_plugins/metrics/public/less/misc.less +++ b/src/core_plugins/metrics/public/less/misc.less @@ -102,3 +102,4 @@ color: rgba(255,255,255,0.8); } } + diff --git a/src/core_plugins/metrics/public/lib/validate_interval.js b/src/core_plugins/metrics/public/lib/validate_interval.js index d2e72c4db9c76..ea397b9f14eed 100644 --- a/src/core_plugins/metrics/public/lib/validate_interval.js +++ b/src/core_plugins/metrics/public/lib/validate_interval.js @@ -1,4 +1,4 @@ -import parseInterval from 'ui/utils/parse_interval'; +import { parseInterval } from 'ui/utils/parse_interval'; export function validateInterval(timefilter, panel, maxBuckets) { const { interval } = panel; const { min, max } = timefilter.getBounds(); diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/core_plugins/metrics/public/visualizations/components/timeseries.js index 13f8d6dd891d2..a2267fc0bb1e5 100644 --- a/src/core_plugins/metrics/public/visualizations/components/timeseries.js +++ b/src/core_plugins/metrics/public/visualizations/components/timeseries.js @@ -130,6 +130,7 @@ class Timeseries extends Component { show={ this.state.show } tickFormatter={this.props.tickFormatter} options={this.props.options} + xaxisLabel={this.props.xaxisLabel} yaxes={this.props.yaxes} /> this.container = el} className="rhythm_chart__timeseries-container"> { tooltip } { annotations } +
{this.props.xaxisLabel}
); } @@ -221,6 +226,7 @@ TimeseriesChart.propTypes = { show: PropTypes.array, tickFormatter: PropTypes.func, yaxes: PropTypes.array, + xaxisLabel: PropTypes.string }; export default TimeseriesChart; diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/chart.less b/src/core_plugins/metrics/public/visualizations/less/includes/chart.less index ea8ae6036aad5..b6a6d7e0463f7 100644 --- a/src/core_plugins/metrics/public/visualizations/less/includes/chart.less +++ b/src/core_plugins/metrics/public/visualizations/less/includes/chart.less @@ -118,10 +118,20 @@ .rhythm_chart__timeseries-container { position: relative; display: flex; - row-direction: column; + flex-direction: column; flex: 1 0 auto; } +.rhythm_chart__axis-label { + font-size: 0.8em; + color: rgba(0,0,0,0.4); + text-align: center; + min-height: 1.2em; + &.reversed { + color: rgba(255,255,255,0.6); + } +} + .annotation { position: absolute; display: flex;