diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js index 5cf1619150e5c..b41e0b96357ea 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js @@ -87,7 +87,7 @@ export const TimeSeries = ({ const tooltipFormatter = decorateFormatter(xAxisFormatter); const uiSettings = getUISettings(); const timeZone = getTimezone(uiSettings); - const hasBarChart = series.some(({ bars }) => bars.show); + const hasBarChart = series.some(({ bars }) => bars?.show); // compute the theme based on the bg color const theme = getTheme(darkMode, backgroundColor); @@ -172,7 +172,7 @@ export const TimeSeries = ({ // Only use color mapping if there is no color from the server const finalColor = color ?? colors.mappedColors.mapping[label]; - if (bars.show) { + if (bars?.show) { return ( results => { const metric = getLastMetric(series); - if (metric.type === 'std_deviation' && metric.mode === 'band') { - getSplits(resp, panel, series, meta).forEach(split => { - const upper = split.timeseries.buckets.map( - mapBucket(_.assign({}, metric, { mode: 'upper' })) - ); - const lower = split.timeseries.buckets.map( - mapBucket(_.assign({}, metric, { mode: 'lower' })) - ); - results.push({ - id: `${split.id}:upper`, - label: split.label, - color: split.color, - lines: { show: true, fill: 0.5, lineWidth: 0 }, - points: { show: false }, - fillBetween: `${split.id}:lower`, - data: upper, - }); + if (metric.type === METRIC_TYPES.STD_DEVIATION && metric.mode === 'band') { + getSplits(resp, panel, series, meta).forEach(({ id, color, label, timeseries }) => { + const data = timeseries.buckets.map(bucket => [ + bucket.key, + getAggValue(bucket, { ...metric, mode: 'upper' }), + getAggValue(bucket, { ...metric, mode: 'lower' }), + ]); + results.push({ - id: `${split.id}:lower`, - color: split.color, - lines: { show: true, fill: false, lineWidth: 0 }, + id, + label, + color, + data, + lines: { + show: series.chart_type === 'line', + fill: 0.5, + lineWidth: 0, + mode: 'band', + }, + bars: { + show: series.chart_type === 'bar', + fill: 0.5, + mode: 'band', + }, points: { show: false }, - data: lower, }); }); } diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_bands.test.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_bands.test.js index 77949ff94dc4c..a229646ba8f3f 100644 --- a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_bands.test.js +++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_bands.test.js @@ -86,29 +86,18 @@ describe('stdDeviationBands(resp, panel, series)', () => { test('creates a series', () => { const next = results => results; const results = stdDeviationBands(resp, panel, series)(next)([]); - expect(results).toHaveLength(2); + expect(results).toHaveLength(1); expect(results[0]).toEqual({ - id: 'test:upper', + id: 'test', label: 'Std. Deviation of cpu', color: 'rgb(255, 0, 0)', - lines: { show: true, fill: 0.5, lineWidth: 0 }, - points: { show: false }, - fillBetween: 'test:lower', - data: [ - [1, 3.2], - [2, 3.5], - ], - }); - - expect(results[1]).toEqual({ - id: 'test:lower', - color: 'rgb(255, 0, 0)', - lines: { show: true, fill: false, lineWidth: 0 }, + lines: { show: true, fill: 0.5, lineWidth: 0, mode: 'band' }, + bars: { show: false, fill: 0.5, mode: 'band' }, points: { show: false }, data: [ - [1, 0.2], - [2, 0.5], + [1, 3.2, 0.2], + [2, 3.5, 0.5], ], }); }); diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_sibling.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_sibling.js index 96ead42c55253..1c6ee94050a62 100644 --- a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_sibling.js +++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_sibling.js @@ -17,40 +17,36 @@ * under the License. */ -import _ from 'lodash'; -import { getSplits } from '../../helpers/get_splits'; -import { getLastMetric } from '../../helpers/get_last_metric'; -import { getSiblingAggValue } from '../../helpers/get_sibling_agg_value'; +import { getSplits, getLastMetric, getSiblingAggValue } from '../../helpers'; export function stdDeviationSibling(resp, panel, series, meta) { return next => results => { const metric = getLastMetric(series); if (metric.mode === 'band' && metric.type === 'std_deviation_bucket') { getSplits(resp, panel, series, meta).forEach(split => { - const mapBucketByMode = mode => { - return bucket => { - return [bucket.key, getSiblingAggValue(split, _.assign({}, metric, { mode }))]; - }; - }; + const data = split.timeseries.buckets.map(bucket => [ + bucket.key, + getSiblingAggValue(split, { ...metric, mode: 'upper' }), + getSiblingAggValue(split, { ...metric, mode: 'lower' }), + ]); - const upperData = split.timeseries.buckets.map(mapBucketByMode('upper')); - const lowerData = split.timeseries.buckets.map(mapBucketByMode('lower')); - - results.push({ - id: `${split.id}:lower`, - lines: { show: true, fill: false, lineWidth: 0 }, - points: { show: false }, - color: split.color, - data: lowerData, - }); results.push({ - id: `${split.id}:upper`, + id: split.id, label: split.label, color: split.color, - lines: { show: true, fill: 0.5, lineWidth: 0 }, + lines: { + show: series.chart_type === 'line', + fill: 0.5, + lineWidth: 0, + mode: 'band', + }, + bars: { + show: series.chart_type === 'bar', + fill: 0.5, + mode: 'band', + }, points: { show: false }, - fillBetween: `${split.id}:lower`, - data: upperData, + data, }); }); } diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_sibling.test.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_sibling.test.js index adc5a3a4a991b..b93d929d5157a 100644 --- a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_sibling.test.js +++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_sibling.test.js @@ -86,29 +86,18 @@ describe('stdDeviationSibling(resp, panel, series)', () => { test('creates a series', () => { const next = results => results; const results = stdDeviationSibling(resp, panel, series)(next)([]); - expect(results).toHaveLength(2); + expect(results).toHaveLength(1); expect(results[0]).toEqual({ - id: 'test:lower', + id: 'test', color: 'rgb(255, 0, 0)', - lines: { show: true, fill: false, lineWidth: 0 }, - points: { show: false }, - data: [ - [1, 0.01], - [2, 0.01], - ], - }); - - expect(results[1]).toEqual({ - id: 'test:upper', label: 'Overall Std. Deviation of Average of cpu', - color: 'rgb(255, 0, 0)', - fillBetween: 'test:lower', - lines: { show: true, fill: 0.5, lineWidth: 0 }, + lines: { show: true, fill: 0.5, lineWidth: 0, mode: 'band' }, + bars: { show: false, fill: 0.5, mode: 'band' }, points: { show: false }, data: [ - [1, 0.7], - [2, 0.7], + [1, 0.7, 0.01], + [2, 0.7, 0.01], ], }); });