[TSVB] Fix field value when switching aggregation type

src/plugins/vis_type_timeseries/public/application/components/lib/create_change_handler.js → src/plugins/vis_type_timeseries/public/application/components/lib/create_change_handler.ts

@@ -5,10 +5,14 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
-import _ from 'lodash';
-
-export const createChangeHandler = (handleChange, model) => (part) => {
-  const doc = _.assign({}, model, part);
-  handleChange(doc);
-};
+export const createChangeHandler = (
+  handleChange: Function,
+  baseObject: Record<string, any> = {}
+) => (part: Record<string, any> = {}) =>
+  handleChange(
+    {
+      ...baseObject,
+      ...part,
+    },
+    part
+  );

src/plugins/vis_type_timeseries/public/application/components/lib/get_supported_fields_by_metric_type.test.js → src/plugins/vis_type_timeseries/public/application/components/lib/get_supported_fields_by_metric_type.test.ts

@@ -10,16 +10,18 @@ import { getSupportedFieldsByMetricType } from './get_supported_fields_by_metric
 import { KBN_FIELD_TYPES } from '../../../../../../plugins/data/public';
 
 describe('getSupportedFieldsByMetricType', () => {
-  const shouldHaveHistogramAndNumbers = (type) =>
-    it(`should return numbers and histogram for ${type}`, () => {
+  const shouldHaveHistogramAndNumbers = (type: string) =>
+    test(`should return numbers and histogram for ${type}`, () => {
       expect(getSupportedFieldsByMetricType(type)).toEqual(['number', 'histogram']);
     });
-  const shouldSupportAllFieldTypes = (type) =>
-    it(`should return all field types for ${type}`, () => {
+
+  const shouldSupportAllFieldTypes = (type: string) =>
+    test(`should return all field types for ${type}`, () => {
       expect(getSupportedFieldsByMetricType(type)).toEqual(Object.values(KBN_FIELD_TYPES));
     });
-  const shouldHaveOnlyNumbers = (type) =>
-    it(`should return only numbers for ${type}`, () => {
+
+  const shouldHaveOnlyNumbers = (type: string) =>
+    test(`should return only numbers for ${type}`, () => {
       expect(getSupportedFieldsByMetricType(type)).toEqual(['number']);
     });
 
@@ -32,7 +34,7 @@ describe('getSupportedFieldsByMetricType', () => {
   shouldHaveOnlyNumbers('positive_rate');
   shouldHaveOnlyNumbers('std_deviation');
 
-  it(`should return everything but histogram for cardinality`, () => {
+  test(`should return everything but histogram for cardinality`, () => {
     expect(getSupportedFieldsByMetricType('cardinality')).not.toContain('histogram');
   });
 });

src/plugins/vis_type_timeseries/public/application/components/lib/get_supported_fields_by_metric_type.js → src/plugins/vis_type_timeseries/public/application/components/lib/get_supported_fields_by_metric_type.ts

@@ -9,7 +9,7 @@
 import { KBN_FIELD_TYPES } from '../../../../../../plugins/data/public';
 import { METRIC_TYPES } from '../../../../common/enums';
 
-export function getSupportedFieldsByMetricType(type) {
+export function getSupportedFieldsByMetricType(type: METRIC_TYPES | string) {
   switch (type) {
     case METRIC_TYPES.CARDINALITY:
       return Object.values(KBN_FIELD_TYPES).filter((t) => t !== KBN_FIELD_TYPES.HISTOGRAM);

src/plugins/vis_type_timeseries/public/application/components/lib/new_series_fn.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import uuid from 'uuid';
+import { newMetricAggFn } from './new_metric_agg_fn';
+import { STACKED_OPTIONS } from '../../visualizations/constants';
+
+export const newSeriesFn = (obj = {}) => ({
+  id: uuid.v1(),
+  color: '#68BC00',
+  split_mode: 'everything',
+  palette: {
+    type: 'palette',
+    name: 'default',
+  },
+  metrics: [newMetricAggFn()],
+  separate_axis: 0,
+  axis_position: 'right',
+  formatter: 'number',
+  chart_type: 'line',
+  line_width: 1,
+  point_size: 1,
+  fill: 0.5,
+  stacked: STACKED_OPTIONS.NONE,
+  ...obj,
+});

src/plugins/vis_type_timeseries/public/application/components/lib/series_change_handler.js

@@ -10,7 +10,14 @@ import { newMetricAggFn } from './new_metric_agg_fn';
 import { isBasicAgg } from '../../../../common/agg_lookup';
 import { handleAdd, handleChange } from './collection_actions';
 
-export const seriesChangeHandler = (props, items) => (doc) => {
+export const seriesChangeHandler = (props, items) => (doc, part) => {
+  // For Sibling Pipeline / Special aggregations, the field is used as a reference to the target aggregation.
+  // In these cases, an error occurs when switching to standard aggregation type.
+  // We should set an empty value for the "field" when switching the agg type
+  if (part.type && doc.field) {
+    doc.field = null;
+  }
+
   // If we only have one sibling and the user changes to a pipeline
   // agg we are going to add the pipeline instead of changing the
   // current item.

src/plugins/vis_type_timeseries/public/application/components/splits/terms.js

@@ -12,7 +12,6 @@ import { get, find } from 'lodash';
 import { GroupBySelect } from './group_by_select';
 import { createTextHandler } from '../lib/create_text_handler';
 import { createSelectHandler } from '../lib/create_select_handler';
-import { isPercentDisabled } from '../lib/stacked';
 import { FieldSelect } from '../aggs/field_select';
 import { MetricSelect } from '../aggs/metric_select';
 import {
@@ -81,11 +80,7 @@ export const SplitByTermsUI = ({
   const selectedField = find(fields[indexPattern], ({ name }) => name === model.terms_field);
   const selectedFieldType = get(selectedField, 'type');
 
-  if (
-    seriesQuantity &&
-    model.stacked === STACKED_OPTIONS.PERCENT &&
-    isPercentDisabled(seriesQuantity[model.id])
-  ) {
+  if (seriesQuantity && model.stacked === STACKED_OPTIONS.PERCENT && seriesQuantity[model.id] < 2) {
     onChange({ ['stacked']: STACKED_OPTIONS.NONE });
   }
 

src/plugins/vis_type_timeseries/public/application/components/vis_types/gauge/vis.js

@@ -11,6 +11,7 @@ import React from 'react';
 import { visWithSplits } from '../../vis_with_splits';
 import { createTickFormatter } from '../../lib/tick_formatter';
 import { get, isUndefined, assign, includes } from 'lodash';
+
 import { Gauge } from '../../../visualizations/views/gauge';
 import { getLastValue } from '../../../../../common/last_value_utils';
 import { getOperator, shouldOperate } from '../../../../../common/operators_utils';
@@ -71,7 +72,12 @@ function GaugeVisualization(props) {
   if (model.gauge_width) params.gaugeLine = model.gauge_width;
   if (model.gauge_inner_color) params.innerColor = model.gauge_inner_color;
   if (model.gauge_inner_width) params.innerLine = model.gauge_inner_width;
-  if (model.gauge_max != null) params.max = model.gauge_max;
+
+  if (model.gauge_max != null) {
+    params.max = Number(model.gauge_max);
+  } else {
+    params.max = Math.max(...(series[0].data || []).map(([, v]) => v));
+  }
 
   return (
     <div className="tvbVis" style={style}>

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js

@@ -29,7 +29,6 @@ import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { SeriesConfigQueryBarWithIgnoreGlobalFilter } from '../../series_config_query_bar_with_ignore_global_filter';
 import { PalettePicker } from '../../palette_picker';
 import { getChartsSetup } from '../../../../services';
-import { isPercentDisabled } from '../../lib/stacked';
 import { STACKED_OPTIONS } from '../../../visualizations/constants/chart';
 
 export const TimeseriesConfig = injectI18n(function (props) {
@@ -74,7 +73,7 @@ export const TimeseriesConfig = injectI18n(function (props) {
         defaultMessage: 'Percent',
       }),
       value: STACKED_OPTIONS.PERCENT,
-      disabled: isPercentDisabled(props.seriesQuantity[model.id]),
+      disabled: props.seriesQuantity[model.id] < 2,
     },
   ];
   const selectedStackedOption = stackedOptions.find((option) => {

src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js

@@ -7,12 +7,15 @@
  */
 
 import React, { useCallback } from 'react';
-import { getDisplayName } from './lib/get_display_name';
 import { labelDateFormatter } from './lib/label_date_formatter';
 import { findIndex, first } from 'lodash';
 import { emptyLabel } from '../../../common/empty_label';
 import { getSplitByTermsColor } from '../lib/get_split_by_terms_color';
 
+function getDisplayName(Component) {
+  return Component.displayName || Component.name || 'Component';
+}
+
 export function visWithSplits(WrappedComponent) {
   function SplitVisComponent(props) {
     const { model, visData, syncColors, palettesService } = props;

src/plugins/vis_type_timeseries/public/application/lib/set_is_reversed.js → src/plugins/vis_type_timeseries/public/application/lib/set_is_reversed.ts

@@ -9,20 +9,20 @@
 import color from 'color';
 import { getUISettings } from '../../services';
 
-const isDarkTheme = () => getUISettings().get('theme:darkMode');
+const isDarkTheme = () => getUISettings().get<boolean>('theme:darkMode');
 
 /**
  * Returns true if the color that is passed has low luminosity
  */
-const isColorDark = (c) => {
+const isColorDark = (c: string) => {
   return color(c).luminosity() < 0.45;
 };
 
 /**
  * Checks to see if the `currentTheme` is dark in luminosity.
  * Defaults to checking `theme:darkMode`.
  */
-export const isThemeDark = (currentTheme) => {
+export const isThemeDark = (currentTheme?: string) => {
   let themeIsDark = currentTheme || isDarkTheme();
 
   // If passing a string, check the luminosity
@@ -37,7 +37,7 @@ export const isThemeDark = (currentTheme) => {
  * Checks to find if the ultimate `backgroundColor` is dark.
  * Defaults to returning if the `currentTheme` is dark.
  */
-export const isBackgroundDark = (backgroundColor, currentTheme) => {
+export const isBackgroundDark = (backgroundColor: string, currentTheme: string) => {
   const themeIsDark = isThemeDark(currentTheme);
 
   // If a background color doesn't exist or it inherits, pass back if it's a darktheme
@@ -52,8 +52,9 @@ export const isBackgroundDark = (backgroundColor, currentTheme) => {
 /**
  * Checks to see if `backgroundColor` is the the same lightness spectrum as `currentTheme`.
  */
-export const isBackgroundInverted = (backgroundColor, currentTheme) => {
+export const isBackgroundInverted = (backgroundColor: string, currentTheme: string) => {
   const backgroundIsDark = isBackgroundDark(backgroundColor, currentTheme);
   const themeIsDark = isThemeDark(currentTheme);
+
   return backgroundIsDark !== themeIsDark;
 };

src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge.js

@@ -12,7 +12,6 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isBackgroundInverted, isBackgroundDark } from '../../lib/set_is_reversed';
 import { getLastValue } from '../../../../common/last_value_utils';
-import { getValueBy } from '../lib/get_value_by';
 import { GaugeVis } from './gauge_vis';
 import reactcss from 'reactcss';
 import { calculateCoordinates } from '../lib/calculate_coordinates';
@@ -62,7 +61,7 @@ export class Gauge extends Component {
     const { metric, type } = this.props;
     const { scale, translateX, translateY } = this.state;
     const value = getLastValue(metric?.data);
-    const max = (metric && getValueBy('max', metric.data)) || 1;
+
     const formatter =
       (metric && (metric.tickFormatter || metric.formatter)) ||
       this.props.tickFormatter ||
@@ -89,7 +88,7 @@ export class Gauge extends Component {
       gaugeLine: this.props.gaugeLine,
       innerLine: this.props.innerLine,
       innerColor: this.props.innerColor,
-      max: this.props.max || max,
+      max: this.props.max,
       color: (metric && metric.color) || '#8ac336',
       type,
     };
@@ -166,7 +165,7 @@ Gauge.propTypes = {
   gaugeLine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   innerColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   innerLine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  max: PropTypes.number,
   metric: PropTypes.object,
   backgroundColor: PropTypes.string,
   type: PropTypes.oneOf(['half', 'circle']),