Use accessor formatters

elastic · Mar 23, 2020 · f24023b · f24023b
1 parent 9448c55
commit f24023b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 5 deletions.
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile_ui.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile_ui.js
@@ -135,6 +135,8 @@ class PercentilesUi extends Component {
           <EuiFlexItem style={optionsStyle} grow={false}>
             <EuiFieldNumber
               id={htmlId('fillTo')}
+              min={0}
+              max={100}
               step={1}
               onChange={this.handleTextChange(model, 'percentile')}
               value={Number(model.percentile)}

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
@@ -40,6 +40,8 @@ export function AreaSeriesDecorator({
   enableHistogramMode,
   useDefaultGroupDomain,
   sortIndex,
+  y1AccessorFormat,
+  y0AccessorFormat,
 }) {
   const id = seriesId;
   const groupId = seriesGroupId;
@@ -55,6 +57,8 @@ export function AreaSeriesDecorator({
     xAccessor: X_ACCESSOR_INDEX,
     yAccessors: Y_ACCESSOR_INDEXES,
     y0Accessors: lines.mode === 'band' ? Y0_ACCESSOR_INDEXES : undefined,
+    y1AccessorFormat,
+    y0AccessorFormat,
     stackAccessors,
     stackAsPercentage,
     xScaleType,

diff --git a/...ns/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js b/...ns/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js
@@ -39,6 +39,8 @@ export function BarSeriesDecorator({
   enableHistogramMode,
   useDefaultGroupDomain,
   sortIndex,
+  y1AccessorFormat,
+  y0AccessorFormat,
 }) {
   const id = seriesId;
   const groupId = seriesGroupId;
@@ -54,6 +56,8 @@ export function BarSeriesDecorator({
     xAccessor: X_ACCESSOR_INDEX,
     yAccessors: Y_ACCESSOR_INDEXES,
     y0Accessors: bars.mode === 'band' ? Y0_ACCESSOR_INDEXES : undefined,
+    y1AccessorFormat,
+    y0AccessorFormat,
     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
@@ -156,6 +156,8 @@ export const TimeSeries = ({
             stack,
             points,
             useDefaultGroupDomain,
+            y1AccessorFormat,
+            y0AccessorFormat,
           },
           sortIndex
         ) => {
@@ -182,6 +184,8 @@ export const TimeSeries = ({
                 enableHistogramMode={enableHistogramMode}
                 useDefaultGroupDomain={useDefaultGroupDomain}
                 sortIndex={sortIndex}
+                y1AccessorFormat={y1AccessorFormat}
+                y0AccessorFormat={y0AccessorFormat}
               />
             );
           }
@@ -206,6 +210,8 @@ export const TimeSeries = ({
                 enableHistogramMode={enableHistogramMode}
                 useDefaultGroupDomain={useDefaultGroupDomain}
                 sortIndex={sortIndex}
+                y1AccessorFormat={y1AccessorFormat}
+                y0AccessorFormat={y0AccessorFormat}
               />
             );
           }

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
@@ -34,7 +34,7 @@ export function percentile(resp, panel, series, meta) {
     getSplits(resp, panel, series, meta).forEach(split => {
       metric.percentiles.forEach(percentile => {
         const percentileValue = percentile.value ? percentile.value : 0;
-        const label = `${split.label} (${percentileValue})`;
+        const id = `${split.id}:${percentile.id}`;
         const data = split.timeseries.buckets.map(bucket => {
           const higherMetric = { ...metric, percent: percentileValue };
           const serieData = [bucket.key, getAggValue(bucket, higherMetric)];
@@ -48,9 +48,9 @@ export function percentile(resp, panel, series, meta) {
         });
         if (percentile.mode === 'band') {
           results.push({
-            id: `${split.id}:${percentile.id}`,
+            id,
             color: split.color,
-            label,
+            label: split.label,
             data,
             lines: {
               show: series.chart_type === 'line',
@@ -64,13 +64,15 @@ export function percentile(resp, panel, series, meta) {
               mode: 'band',
             },
             points: { show: false },
+            y1AccessorFormat: ` (${percentileValue})`,
+            y0AccessorFormat: ` (${percentile.percentile})`,
           });
         } else {
           const decoration = getDefaultDecoration(series);
           results.push({
-            id: `${split.id}:${percentile.id}`,
+            id,
             color: split.color,
-            label,
+            label: `${split.label} (${percentileValue})`,
             data,
             ...decoration,
           });