Fix percentiles band mode

elastic · Mar 20, 2020 · 09dd443 · 09dd443
1 parent 8fd317c
commit 09dd443
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 22 deletions.
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/constants/chart.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/constants/chart.js
@@ -32,6 +32,7 @@ export const GRID_LINE_CONFIG = {
 export const X_ACCESSOR_INDEX = 0;
 export const STACK_ACCESSORS = [0];
 export const Y_ACCESSOR_INDEXES = [1];
+export const Y0_ACCESSOR_INDEXES = [2];
 
 export const STACKED_OPTIONS = {
   NONE: 'none',

diff --git a/...s/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js b/...s/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js
@@ -21,7 +21,7 @@ import React from 'react';
 import { ScaleType, AreaSeries } from '@elastic/charts';
 import { getAreaStyles } from '../utils/series_styles';
 import { ChartsEntities } from '../model/charts';
-import { X_ACCESSOR_INDEX, Y_ACCESSOR_INDEXES } from '../../../constants';
+import { X_ACCESSOR_INDEX, Y_ACCESSOR_INDEXES, Y0_ACCESSOR_INDEXES } from '../../../constants';
 
 export function AreaSeriesDecorator({
   seriesId,
@@ -55,6 +55,7 @@ export function AreaSeriesDecorator({
     hideInLegend,
     xAccessor: X_ACCESSOR_INDEX,
     yAccessors: Y_ACCESSOR_INDEXES,
+    y0Accessors: lines.mode === 'band' ? Y0_ACCESSOR_INDEXES : undefined,
     stackAccessors,
     stackAsPercentage,
     xScaleType,

diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js
@@ -88,7 +88,7 @@ export const TimeSeries = ({
   const tooltipFormatter = decorateFormatter(xAxisFormatter);
   const uiSettings = getUISettings();
   const timeZone = timezoneProvider(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);
@@ -162,7 +162,7 @@ export const TimeSeries = ({
           const isPercentage = stack === STACKED_OPTIONS.PERCENT;
           const key = `${id}-${label}`;
 
-          if (bars.show) {
+          if (bars?.show) {
             return (
               <BarSeriesDecorator
                 key={key}

diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/percentile.js
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import _ from 'lodash';
 import { getAggValue } from '../../helpers/get_agg_value';
 import { getDefaultDecoration } from '../../helpers/get_default_decoration';
 import { getSplits } from '../../helpers/get_splits';
@@ -37,31 +36,23 @@ export function percentile(resp, panel, series, meta) {
         const percentileValue = percentile.value ? percentile.value : 0;
         const label = `${split.label} (${percentileValue})`;
         const data = split.timeseries.buckets.map(bucket => {
-          const m = _.assign({}, metric, { percent: percentileValue });
-          return [bucket.key, getAggValue(bucket, m)];
+          const higherMetric = { ...metric, percent: percentileValue };
+          const serieData = [bucket.key, getAggValue(bucket, higherMetric)];
+
+          if (percentile.mode === 'band') {
+            const lowerMetric = { ...metric, percent: percentile.percentile };
+            serieData.push(getAggValue(bucket, lowerMetric));
+          }
+
+          return serieData;
         });
         if (percentile.mode === 'band') {
-          const fillData = split.timeseries.buckets.map(bucket => {
-            const m = _.assign({}, metric, { percent: percentile.percentile });
-            return [bucket.key, getAggValue(bucket, m)];
-          });
           results.push({
             id: `${split.id}:${percentile.id}`,
             color: split.color,
             label,
             data,
-            lines: { show: true, fill: percentile.shade, lineWidth: 0 },
-            points: { show: false },
-            legend: false,
-            fillBetween: `${split.id}:${percentile.id}:${percentile.percentile}`,
-          });
-          results.push({
-            id: `${split.id}:${percentile.id}:${percentile.percentile}`,
-            color: split.color,
-            label,
-            data: fillData,
-            lines: { show: true, fill: false, lineWidth: 0 },
-            legend: false,
+            lines: { show: true, fill: percentile.shade, lineWidth: 0, mode: 'band' },
             points: { show: false },
           });
         } else {