[TSVB] Fix std deviation band mode (elastic#64413)

* Fix std_deviation_bands mode

* Fix jest test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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);
@@ -180,7 +180,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 (
               <BarSeriesDecorator
                 key={key}
@@ -205,7 +205,7 @@ export const TimeSeries = ({
             );
           }
 
-          if (lines.show) {
+          if (lines?.show) {
             return (
               <AreaSeriesDecorator
                 key={key}

src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/index.js

@@ -17,30 +17,15 @@
  * under the License.
  */
 
-import { bucketTransform } from './bucket_transform';
-import { getAggValue } from './get_agg_value';
-import { getBucketSize } from './get_bucket_size';
-import { getBucketsPath } from './get_buckets_path';
-import { getDefaultDecoration } from './get_default_decoration';
-import { getLastMetric } from './get_last_metric';
-import { getSiblingAggValue } from './get_sibling_agg_value';
-import { getSplits } from './get_splits';
-import { getTimerange } from './get_timerange';
-import { mapBucket } from './map_bucket';
-import { parseSettings } from './parse_settings';
-
+export { bucketTransform } from './bucket_transform';
+export { getAggValue } from './get_agg_value';
+export { getBucketSize } from './get_bucket_size';
+export { getBucketsPath } from './get_buckets_path';
+export { getDefaultDecoration } from './get_default_decoration';
+export { getLastMetric } from './get_last_metric';
+export { getSiblingAggValue } from './get_sibling_agg_value';
+export { getSplits } from './get_splits';
+export { getTimerange } from './get_timerange';
+export { mapBucket } from './map_bucket';
+export { parseSettings } from './parse_settings';
 export { overwrite } from './overwrite';
-
-export const helpers = {
-  bucketTransform,
-  getAggValue,
-  getBucketSize,
-  getBucketsPath,
-  getDefaultDecoration,
-  getLastMetric,
-  getSiblingAggValue,
-  getSplits,
-  getTimerange,
-  mapBucket,
-  parseSettings,
-};

src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_deviation_bands.js

@@ -17,37 +17,37 @@
  * under the License.
  */
 
-import _ from 'lodash';
-import { getSplits } from '../../helpers/get_splits';
-import { getLastMetric } from '../../helpers/get_last_metric';
-import { mapBucket } from '../../helpers/map_bucket';
+import { getAggValue, getLastMetric, getSplits } from '../../helpers';
+import { METRIC_TYPES } from '../../../../../common/metric_types';
 
 export function stdDeviationBands(resp, panel, series, meta) {
   return next => 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,
         });
       });
     }

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],
       ],
     });
   });

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,
         });
       });
     }

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],
       ],
     });
   });