Add support of stack option

elastic · Apr 1, 2019 · 891200b · 891200b
1 parent 3942ceb
commit 891200b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 37 deletions.
diff --git a/src/legacy/core_plugins/metrics/public/components/vis_types/timeseries/vis.js b/src/legacy/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
@@ -22,6 +22,7 @@ import React, { Component } from 'react';
 import { toastNotifications } from 'ui/notify';
 import { MarkdownSimple } from 'ui/markdown';
 import { htmlIdGenerator } from '@elastic/eui';
+import { ScaleType } from '@elastic/charts';
 
 import { createTickFormatter } from '../../lib/tick_formatter';
 import _ from 'lodash';
@@ -110,14 +111,10 @@ class TimeseriesVisualization extends Component {
       position: model.axis_position,
       tickFormatter,
     };
+    const mainAxisScaleType = model.axis_scale === 'log' ? ScaleType.Log : ScaleType.Linear;
 
     if (model.axis_min) mainAxis.min = Number(model.axis_min);
     if (model.axis_max) mainAxis.max = Number(model.axis_max);
-    if (model.axis_scale === 'log') {
-      mainAxis.mode = 'log';
-      mainAxis.transform = value => value > 0 ? Math.log(value) / Math.LN10 : null;
-      mainAxis.inverseTransform = value => Math.pow(10, value);
-    }
 
     const yaxes = [mainAxis];
 
@@ -129,34 +126,29 @@ class TimeseriesVisualization extends Component {
       seriesData.forEach(seriesDataRow => {
         seriesDataRow.tickFormatter = seriesGroupTickFormatter;
         seriesDataRow.groupId = seriesGroup.separate_axis ? seriesGroupId : mainAxisGroupId;
+        seriesDataRow.yScaleType = seriesGroup.separate_axis ? ScaleType.Linear : mainAxisScaleType;
         seriesDataRow.hideInLegend = Boolean(seriesGroup.hide_in_legend);
-
-        if (seriesGroup.stacked !== 'none') {
-          seriesDataRow.data = seriesDataRow.data.map(point => {
-            if (!point[1]) return [point[0], 0];
-            return point;
-          });
-        }
       });
 
-      if (seriesGroup.stacked === 'percent') {
-        seriesGroup.separate_axis = true;
-        seriesGroup.axisFormatter = 'percent';
-        seriesGroup.axis_min = 0;
-        seriesGroup.axis_max = 1;
-        seriesGroup.axis_position = model.axis_position;
-        const first = seriesData[0];
-        if (first) {
-          first.data.forEach((row, index) => {
-            const rowSum = seriesData.reduce((acc, item) => {
-              return item.data[index][1] + acc;
-            }, 0);
-            seriesData.forEach(item => {
-              item.data[index][1] = rowSum && item.data[index][1] / rowSum || 0;
-            });
-          });
-        }
-      }
+      /* Temporarily disable support of stacking by percent*/
+      // if (seriesGroup.stacked === 'percent') {
+      //   seriesGroup.separate_axis = true;
+      //   seriesGroup.axisFormatter = 'percent';
+      //   seriesGroup.axis_min = 0;
+      //   seriesGroup.axis_max = 1;
+      //   seriesGroup.axis_position = model.axis_position;
+      //   const first = seriesData[0];
+      //   if (first) {
+      //     first.data.forEach((row, index) => {
+      //       const rowSum = seriesData.reduce((acc, item) => {
+      //         return item.data[index][1] + acc;
+      //       }, 0);
+      //       seriesData.forEach(item => {
+      //         item.data[index][1] = rowSum && item.data[index][1] / rowSum || 0;
+      //       });
+      //     });
+      //   }
+      // }
 
       if (seriesGroup.separate_axis) {
         const yaxis = {

diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/series.js b/src/legacy/core_plugins/metrics/public/visualizations/components/series.js
@@ -30,14 +30,15 @@ import {
 import { calculateFillColor } from '../lib/calculate_fill_color';
 
 export const Series = ({
-  mode,
+  yScaleType,
   id,
   groupId,
   label,
   data,
   bars,
   lines,
   color,
+  stack
 }) => {
   const { fill: barFill, show: isBarSeries } = bars;
   const { fill: lineFill, steps } = lines;
@@ -59,9 +60,10 @@ export const Series = ({
       id={specId}
       groupId={getGroupId(groupId)}
       xScaleType={ScaleType.Time}
-      yScaleType={mode}
+      yScaleType={yScaleType}
       xAccessor={0}
       yAccessors={[1]}
+      stackAccessors={stack ? [0] : null}
       data={data}
       yScaleToDataExtent={false}
       customSeriesColors={customSeriesColors}
@@ -71,15 +73,15 @@ export const Series = ({
 };
 
 Series.defaultProps = {
-  mode: ScaleType.Linear,
+  yScaleType: ScaleType.Linear,
   bars: {},
   lines: {},
 };
 
 Series.propTypes = {
   hideInLegend: PropTypes.bool,
   id: PropTypes.string,
-  mode: PropTypes.string,
+  yScaleType: PropTypes.string,
   groupId: PropTypes.string,
   label: PropTypes.node,
   data: PropTypes.array,

diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/legacy/core_plugins/metrics/public/visualizations/components/timeseries.js
@@ -42,8 +42,6 @@ export const TimeSeries = ({
   onBrush,
   xAxisFormatter
 }) => {
-  const [mainAxis] = yaxes;
-  const { mode } = mainAxis;
   return (
     <Chart renderer="canvas" className="tvbVisTimeSeries" >
       <Settings
@@ -57,7 +55,6 @@ export const TimeSeries = ({
         <Series
           key={`${s.id}-${s.label}`}
           {...s}
-          mode={mode}
         />))
       }