[TSVB] Adds a color picker in percentiles and percentiles rank aggs (#…

…107390)

* WIP - Improve the way that percentiles are rendered in TSVB

* Adds color picker to percentile and percentile ranks

* initialize color

* Be backwards compatible

* Fixes unit tests

* Add a unit test for percentile rank

* Fix unit tests

* Address PR comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_type_timeseries/common/constants.ts

@@ -14,3 +14,4 @@ export const ROUTES = {
  FIELDS: '/api/metrics/fields',
 };
 export const USE_KIBANA_INDEXES_KEY = 'use_kibana_indexes';
+export const TSVB_DEFAULT_COLOR = '#68BC00';

src/plugins/vis_type_timeseries/common/types/panel_model.ts

@@ -24,6 +24,7 @@ interface Percentile {
  shade?: number | string;
  value?: number | string;
  percentile?: string;
+ color?: string;
 }
 
 export interface Metric {
@@ -52,6 +53,7 @@ export interface Metric {
  type: string;
  value?: string;
  values?: string[];
+ colors?: string[];
  size?: string | number;
  agg_with?: string;
  order?: string;

src/plugins/vis_type_timeseries/public/application/components/aggs/histogram_support.test.js

@@ -27,7 +27,7 @@ const runTest = (aggType, name, test, additionalProps = {}) => {
  ...additionalProps,
  };
  const series = { ...SERIES, metrics: [metric] };
- const panel = { ...PANEL, series };
+ const panel = PANEL;
 
  it(name, () => {
  const wrapper = mountWithIntl(

src/plugins/vis_type_timeseries/public/application/components/aggs/percentile.js

@@ -102,7 +102,13 @@ export function PercentileAgg(props) {
  />
  }
  >
- <Percentiles onChange={handleChange} name="percentiles" model={model} panel={panel} />
+ <Percentiles
+ onChange={handleChange}
+ name="percentiles"
+ model={model}
+ panel={panel}
+ seriesId={series.id}
+ />
  </EuiFormRow>
  </EuiFlexItem>
  <EuiFlexItem>

src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.test.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 React from 'react';
+import { shallowWithIntl } from '@kbn/test/jest';
+import { MultiValueRow } from './multi_value_row';
+import { ColorPicker } from '../../color_picker';
+
+describe('MultiValueRow', () => {
+ const model = {
+ id: 95,
+ value: '95',
+ color: '#00028',
+ };
+ const props = {
+ model,
+ enableColorPicker: true,
+ onChange: jest.fn(),
+ onDelete: jest.fn(),
+ onAdd: jest.fn(),
+ disableAdd: false,
+ disableDelete: false,
+ };
+
+ const wrapper = shallowWithIntl(<MultiValueRow {...props} />);
+
+ it('displays a color picker if the enableColorPicker prop is true', () => {
+ expect(wrapper.find(ColorPicker).length).toEqual(1);
+ });
+
+ it('not displays a color picker if the enableColorPicker prop is false', () => {
+ const newWrapper = shallowWithIntl(<MultiValueRow {...props} enableColorPicker={false} />);
+ expect(newWrapper.find(ColorPicker).length).toEqual(0);
+ });
+
+ it('sets the picker color to the model color', () => {
+ expect(wrapper.find(ColorPicker).prop('value')).toEqual('#00028');
+ });
+
+ it('should have called the onChange function on color change', () => {
+ wrapper.find(ColorPicker).simulate('change');
+ expect(props.onChange).toHaveBeenCalled();
+ });
+});

src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/multi_value_row.tsx

@@ -10,17 +10,21 @@ import React, { ChangeEvent } from 'react';
 import { get } from 'lodash';
 
 import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { TSVB_DEFAULT_COLOR } from '../../../../../common/constants';
 
 import { AddDeleteButtons } from '../../add_delete_buttons';
+import { ColorPicker, ColorProps } from '../../color_picker';
 
 interface MultiValueRowProps {
  model: {
  id: number;
  value: string;
+ color: string;
  };
  disableAdd: boolean;
  disableDelete: boolean;
- onChange: ({ value, id }: { id: number; value: string }) => void;
+ enableColorPicker: boolean;
+ onChange: ({ value, id, color }: { id: number; value: string; color: string }) => void;
  onDelete: (model: { id: number; value: string }) => void;
  onAdd: () => void;
 }
@@ -32,16 +36,33 @@ export const MultiValueRow = ({
  onAdd,
  disableAdd,
  disableDelete,
+ enableColorPicker,
 }: MultiValueRowProps) => {
  const onFieldNumberChange = (event: ChangeEvent<HTMLInputElement>) =>
  onChange({
  ...model,
  value: get(event, 'target.value'),
  });
 
+ const onColorPickerChange = (props: ColorProps) =>
+ onChange({
+ ...model,
+ color: props?.color || TSVB_DEFAULT_COLOR,
+ });
+
  return (
  <EuiPanel paddingSize="s" className="tvbAggRow__multiValueRow">
  <EuiFlexGroup alignItems="center" gutterSize="s">
+ {enableColorPicker && (
+ <EuiFlexItem grow={false}>
+ <ColorPicker
+ disableTrash={true}
+ onChange={onColorPickerChange}
+ value={model.color}
+ name="color"
+ />
+ </EuiFlexItem>
+ )}
  <EuiFlexItem>
  <EuiFieldNumber
  value={model.value === '' ? '' : Number(model.value)}

src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank.tsx

@@ -27,7 +27,9 @@ import { AggRow } from '../agg_row';
 import { PercentileRankValues } from './percentile_rank_values';
 
 import { KBN_FIELD_TYPES } from '../../../../../../data/public';
-import type { Metric, Panel, SanitizedFieldType } from '../../../../../common/types';
+import type { Metric, Panel, SanitizedFieldType, Series } from '../../../../../common/types';
+import { TSVB_DEFAULT_COLOR } from '../../../../../common/constants';
+
 import { DragHandleProps } from '../../../../types';
 import { PercentileHdr } from '../percentile_hdr';
 
@@ -40,6 +42,7 @@ interface PercentileRankAggProps {
  model: Metric;
  panel: Panel;
  siblings: Metric[];
+ series: Series;
  dragHandleProps: DragHandleProps;
  onAdd(): void;
  onChange(): void;
@@ -48,19 +51,25 @@ interface PercentileRankAggProps {
 
 export const PercentileRankAgg = (props: PercentileRankAggProps) => {
  const { panel, fields, indexPattern } = props;
- const defaults = { values: [''] };
+ const defaults = { values: [''], colors: [TSVB_DEFAULT_COLOR] };
  const model = { ...defaults, ...props.model };
 
  const htmlId = htmlIdGenerator();
  const isTablePanel = panel.type === 'table';
  const handleChange = createChangeHandler(props.onChange, model);
  const handleSelectChange = createSelectHandler(handleChange);
  const handleNumberChange = createNumberHandler(handleChange);
+ const percentileRankSeries =
+ panel.series.find((s) => s.id === props.series.id) || panel.series[0];
+ // If the series is grouped by, then these colors are not respected, no need to display the color picker */
+ const isGroupedBy = panel.series.length > 0 && percentileRankSeries.split_mode !== 'everything';
+ const enableColorPicker = !isGroupedBy && !['table', 'metric', 'markdown'].includes(panel.type);
 
- const handlePercentileRankValuesChange = (values: Metric['values']) => {
+ const handlePercentileRankValuesChange = (values: Metric['values'], colors: Metric['colors']) => {
  handleChange({
  ...model,
  values,
+ colors,
  });
  };
  return (
@@ -119,8 +128,10 @@ export const PercentileRankAgg = (props: PercentileRankAggProps) => {
  disableAdd={isTablePanel}
  disableDelete={isTablePanel}
  showOnlyLastRow={isTablePanel}
- model={model.values!}
+ values={model.values!}
+ colors={model.colors!}
  onChange={handlePercentileRankValuesChange}
+ enableColorPicker={enableColorPicker}
  />
  </EuiFormRow>
  </EuiFlexItem>

src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_rank/percentile_rank_values.tsx

@@ -10,35 +10,43 @@ import React from 'react';
 import { last } from 'lodash';
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { TSVB_DEFAULT_COLOR } from '../../../../../common/constants';
 import { MultiValueRow } from './multi_value_row';
 
 interface PercentileRankValuesProps {
- model: Array<string | null>;
+ values: string[];
+ colors: string[];
  disableDelete: boolean;
  disableAdd: boolean;
  showOnlyLastRow: boolean;
- onChange: (values: any[]) => void;
+ enableColorPicker: boolean;
+ onChange: (values: string[], colors: string[]) => void;
 }
 
 export const PercentileRankValues = (props: PercentileRankValuesProps) => {
- const model = props.model || [];
- const { onChange, disableAdd, disableDelete, showOnlyLastRow } = props;
+ const values = props.values || [];
+ const colors = props.colors || [];
+ const { onChange, disableAdd, disableDelete, showOnlyLastRow, enableColorPicker } = props;
 
- const onChangeValue = ({ value, id }: { value: string; id: number }) => {
- model[id] = value;
+ const onChangeValue = ({ value, id, color }: { value: string; id: number; color: string }) => {
+ values[id] = value;
+ colors[id] = color;
 
- onChange(model);
+ onChange(values, colors);
  };
  const onDeleteValue = ({ id }: { id: number }) =>
- onChange(model.filter((item, currentIndex) => id !== currentIndex));
- const onAddValue = () => onChange([...model, '']);
+ onChange(
+ values.filter((item, currentIndex) => id !== currentIndex),
+ colors.filter((item, currentIndex) => id !== currentIndex)
+ );
+ const onAddValue = () => onChange([...values, ''], [...colors, TSVB_DEFAULT_COLOR]);
 
  const renderRow = ({
  rowModel,
  disableDeleteRow,
  disableAddRow,
  }: {
- rowModel: { id: number; value: string };
+ rowModel: { id: number; value: string; color: string };
  disableDeleteRow: boolean;
  disableAddRow: boolean;
  }) => (
@@ -50,6 +58,7 @@ export const PercentileRankValues = (props: PercentileRankValuesProps) => {
  disableDelete={disableDeleteRow}
  disableAdd={disableAddRow}
  model={rowModel}
+ enableColorPicker={enableColorPicker}
  />
  </EuiFlexItem>
  );
@@ -59,19 +68,21 @@ export const PercentileRankValues = (props: PercentileRankValuesProps) => {
  {showOnlyLastRow &&
  renderRow({
  rowModel: {
- id: model.length - 1,
- value: last(model) || '',
+ id: values.length - 1,
+ value: last(values) || '',
+ color: last(colors) || TSVB_DEFAULT_COLOR,
  },
  disableAddRow: true,
  disableDeleteRow: true,
  })}
 
  {!showOnlyLastRow &&
- model.map((value, id, array) =>
+ values.map((value, id, array) =>
  renderRow({
  rowModel: {
  id,
  value: value || '',
+ color: colors[id] || TSVB_DEFAULT_COLOR,
  },
  disableAddRow: disableAdd,
  disableDeleteRow: disableDelete || array.length < 2,

src/plugins/vis_type_timeseries/public/application/components/aggs/percentile_ui.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { i18n } from '@kbn/i18n';
 import _ from 'lodash';
+import { TSVB_DEFAULT_COLOR } from '../../../../common/constants';
 import { collectionActions } from '../lib/collection_actions';
 import { AddDeleteButtons } from '../add_delete_buttons';
 import uuid from 'uuid';
@@ -23,10 +24,11 @@ import {
  EuiFlexGrid,
  EuiPanel,
 } from '@elastic/eui';
+import { ColorPicker } from '../color_picker';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const newPercentile = (opts) => {
- return _.assign({ id: uuid.v1(), mode: 'line', shade: 0.2 }, opts);
+ return _.assign({ id: uuid.v1(), mode: 'line', shade: 0.2, color: TSVB_DEFAULT_COLOR }, opts);
 };
 
 export class Percentiles extends Component {
@@ -39,11 +41,20 @@ export class Percentiles extends Component {
  };
  }
 
+ handleColorChange(item) {
+ return (val) => {
+ const handleChange = collectionActions.handleChange.bind(null, this.props);
+ handleChange(_.assign({}, item, val));
+ };
+ }
+
  renderRow = (row, i, items) => {
- const defaults = { value: '', percentile: '', shade: '' };
+ const defaults = { value: '', percentile: '', shade: '', color: TSVB_DEFAULT_COLOR };
  const model = { ...defaults, ...row };
- const { panel } = this.props;
+ const { panel, seriesId } = this.props;
  const flexItemStyle = { minWidth: 100 };
+ const percentileSeries = panel.series.find((s) => s.id === seriesId) || panel.series[0];
+ const isGroupedBy = panel.series.length > 0 && percentileSeries.split_mode !== 'everything';
 
  const percentileFieldNumber = (
  <EuiFlexItem style={flexItemStyle}>
@@ -106,7 +117,19 @@ export class Percentiles extends Component {
  <EuiPanel>
  <EuiFlexGroup key={model.id} alignItems="center">
  <EuiFlexItem>
- <EuiFlexGrid columns={2}>
+ <EuiFlexGrid columns={3}>
+ {/* If the series is grouped by, then these colors are not respected,
+ no need to display the color picker */}
+ {!isGroupedBy && !['table', 'metric', 'markdown'].includes(panel.type) && (
+ <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
+ <ColorPicker
+ disableTrash={true}
+ onChange={this.handleColorChange(model)}
+ value={model.color}
+ name="color"
+ />
+ </EuiFlexItem>
+ )}
  {percentileFieldNumber}
  <EuiFlexItem style={flexItemStyle}>
  <EuiFormRow
@@ -206,4 +229,5 @@ Percentiles.propTypes = {
  model: PropTypes.object,
  panel: PropTypes.object,
  onChange: PropTypes.func,
+ seriesId: PropTypes.string,
 };