From 891200b9f95684bfb06968365d78628f1ac4a246 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Mon, 1 Apr 2019 12:30:23 +0300 Subject: [PATCH] Add support of stack option --- .../components/vis_types/timeseries/vis.js | 52 ++++++++----------- .../visualizations/components/series.js | 10 ++-- .../visualizations/components/timeseries.js | 3 -- 3 files changed, 28 insertions(+), 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 index 1b33591abf96a..36b879c618f6d 100644 --- 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 index ad759e383e477..fb02c6f2ab230 100644 --- a/src/legacy/core_plugins/metrics/public/visualizations/components/series.js +++ b/src/legacy/core_plugins/metrics/public/visualizations/components/series.js @@ -30,7 +30,7 @@ import { import { calculateFillColor } from '../lib/calculate_fill_color'; export const Series = ({ - mode, + yScaleType, id, groupId, label, @@ -38,6 +38,7 @@ export const Series = ({ 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,7 +73,7 @@ export const Series = ({ }; Series.defaultProps = { - mode: ScaleType.Linear, + yScaleType: ScaleType.Linear, bars: {}, lines: {}, }; @@ -79,7 +81,7 @@ Series.defaultProps = { 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 index 59a3bfda43c57..db96351788bd3 100644 --- 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 ( )) }