[Lens] Thresholds added (elastic#108342)

Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: dej611 <[email protected]>
Co-authored-by: Marco Liberati <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts

@@ -27,12 +27,18 @@ interface AxisConfig {
  hide?: boolean;
 }
 
-export type YAxisMode = 'auto' | 'left' | 'right';
+export type YAxisMode = 'auto' | 'left' | 'right' | 'bottom';
+export type LineStyle = 'solid' | 'dashed' | 'dotted';
+export type FillStyle = 'none' | 'above' | 'below';
 
 export interface YConfig {
  forAccessor: string;
  axisMode?: YAxisMode;
  color?: string;
+ icon?: string;
+ lineWidth?: number;
+ lineStyle?: LineStyle;
+ fill?: FillStyle;
 }
 
 export type AxisTitlesVisibilityConfigResult = AxesSettingsConfig & {
@@ -161,6 +167,24 @@ export const yAxisConfig: ExpressionFunctionDefinition<
  types: ['string'],
  help: 'The color of the series',
  },
+ lineStyle: {
+ types: ['string'],
+ options: ['solid', 'dotted', 'dashed'],
+ help: 'The style of the threshold line',
+ },
+ lineWidth: {
+ types: ['number'],
+ help: 'The width of the threshold line',
+ },
+ icon: {
+ types: ['string'],
+ help: 'An optional icon used for threshold lines',
+ },
+ fill: {
+ types: ['string'],
+ options: ['none', 'above', 'below'],
+ help: '',
+ },
  },
  fn: function fn(input: unknown, args: YConfig) {
  return {

x-pack/plugins/lens/public/assets/chart_bar_threshold.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const LensIconChartBarThreshold = ({
+ title,
+ titleId,
+ ...props
+}: Omit<EuiIconProps, 'type'>) => (
+ <svg
+ viewBox="0 0 16 12"
+ width={30}
+ height={22}
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
+ {...props}
+ >
+ {title ? <title id={titleId}>{title}</title> : null}
+ <g>
+ <path
+ className="lensChartIcon__subdued"
+ d="M3.2 4.79997C3.2 4.50542 2.96122 4.26663 2.66667 4.26663H0.533333C0.238784 4.26663 0 4.50542 0 4.79997V6.39997H3.2V4.79997ZM3.2 9.59997H0V13.3333C0 13.6279 0.238784 13.8666 0.533333 13.8666H2.66667C2.96122 13.8666 3.2 13.6279 3.2 13.3333V9.59997ZM8.53333 9.59997H11.7333V13.3333C11.7333 13.6279 11.4946 13.8666 11.2 13.8666H9.06667C8.77211 13.8666 8.53333 13.6279 8.53333 13.3333V9.59997ZM11.7333 6.39997H8.53333V2.66663C8.53333 2.37208 8.77211 2.1333 9.06667 2.1333H11.2C11.4946 2.1333 11.7333 2.37208 11.7333 2.66663V6.39997ZM12.8 9.59997V13.3333C12.8 13.6279 13.0388 13.8666 13.3333 13.8666H15.4667C15.7612 13.8666 16 13.6279 16 13.3333V9.59997H12.8ZM16 6.39997V5.86663C16 5.57208 15.7612 5.3333 15.4667 5.3333H13.3333C13.0388 5.3333 12.8 5.57208 12.8 5.86663V6.39997H16ZM7.46667 11.2C7.46667 10.9054 7.22789 10.6666 6.93333 10.6666H4.8C4.50544 10.6666 4.26667 10.9054 4.26667 11.2V13.3333C4.26667 13.6279 4.50544 13.8666 4.8 13.8666H6.93333C7.22789 13.8666 7.46667 13.6279 7.46667 13.3333V11.2Z"
+ />
+ <rect
+ y="7.4668"
+ width="16"
+ height="1.06667"
+ rx="0.533334"
+ className="lensChartIcon__accent"
+ />
+ </g>
+ </svg>
+);

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/add_layer.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
  EuiToolTip,
  EuiButton,
@@ -38,12 +38,17 @@ export function AddLayerButton({
 }: AddLayerButtonProps) {
  const [showLayersChoice, toggleLayersChoice] = useState(false);
 
- const hasMultipleLayers = Boolean(visualization.appendLayer && visualizationState);
- if (!hasMultipleLayers) {
+ const supportedLayers = useMemo(() => {
+ if (!visualization.appendLayer || !visualizationState) {
+ return null;
+ }
+ return visualization.getSupportedLayers?.(visualizationState, layersMeta);
+ }, [visualization, visualizationState, layersMeta]);
+
+ if (supportedLayers == null) {
  return null;
  }
- const supportedLayers = visualization.getSupportedLayers?.(visualizationState, layersMeta);
- if (supportedLayers?.length === 1) {
+ if (supportedLayers.length === 1) {
  return (
  <EuiToolTip
  display="block"

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx

@@ -19,9 +19,13 @@ import { LayerPanel } from './layer_panel';
 import { coreMock } from 'src/core/public/mocks';
 import { generateId } from '../../../id_generator';
 import { mountWithProvider } from '../../../mocks';
+import { layerTypes } from '../../../../common';
+import { ReactWrapper } from 'enzyme';
 
 jest.mock('../../../id_generator');
 
+const waitMs = (time: number) => new Promise((r) => setTimeout(r, time));
+
 let container: HTMLDivElement | undefined;
 
 beforeEach(() => {
@@ -137,7 +141,7 @@ describe('ConfigPanel', () => {
 
  const updater = () => 'updated';
  updateDatasource('mockindexpattern', updater);
- await new Promise((r) => setTimeout(r, 0));
+ await waitMs(0);
  expect(lensStore.dispatch).toHaveBeenCalledTimes(1);
  expect(
  (lensStore.dispatch as jest.Mock).mock.calls[0][0].payload.updater(
@@ -147,7 +151,7 @@ describe('ConfigPanel', () => {
 
  updateAll('mockindexpattern', updater, props.visualizationState);
  // wait for one tick so async updater has a chance to trigger
- await new Promise((r) => setTimeout(r, 0));
+ await waitMs(0);
  expect(lensStore.dispatch).toHaveBeenCalledTimes(2);
  expect(
  (lensStore.dispatch as jest.Mock).mock.calls[0][0].payload.updater(
@@ -293,4 +297,164 @@ describe('ConfigPanel', () => {
  expect(focusedEl?.children[0].getAttribute('data-test-subj')).toEqual('lns-layerPanel-1');
  });
  });
+
+ describe('initial default value', () => {
+ function prepareAndMountComponent(props: ReturnType<typeof getDefaultProps>) {
+ (generateId as jest.Mock).mockReturnValue(`newId`);
+ return mountWithProvider(
+ <LayerPanels {...props} />,
+
+ {
+ preloadedState: {
+ datasourceStates: {
+ mockindexpattern: {
+ isLoading: false,
+ state: 'state',
+ },
+ },
+ activeDatasourceId: 'mockindexpattern',
+ },
+ },
+ {
+ attachTo: container,
+ }
+ );
+ }
+ function clickToAddLayer(instance: ReactWrapper) {
+ act(() => {
+ instance.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click');
+ });
+ instance.update();
+ act(() => {
+ instance
+ .find(`[data-test-subj="lnsLayerAddButton-${layerTypes.THRESHOLD}"]`)
+ .first()
+ .simulate('click');
+ });
+ instance.update();
+
+ return waitMs(0);
+ }
+
+ function clickToAddDimension(instance: ReactWrapper) {
+ act(() => {
+ instance.find('[data-test-subj="lns-empty-dimension"]').last().simulate('click');
+ });
+ return waitMs(0);
+ }
+
+ it('should not add an initial dimension when not specified', async () => {
+ const props = getDefaultProps();
+ props.activeVisualization.getSupportedLayers = jest.fn(() => [
+ { type: layerTypes.DATA, label: 'Data Layer' },
+ {
+ type: layerTypes.THRESHOLD,
+ label: 'Threshold layer',
+ },
+ ]);
+ mockDatasource.initializeDimension = jest.fn();
+
+ const { instance, lensStore } = await prepareAndMountComponent(props);
+ await clickToAddLayer(instance);
+
+ expect(lensStore.dispatch).toHaveBeenCalledTimes(1);
+ expect(mockDatasource.initializeDimension).not.toHaveBeenCalled();
+ });
+
+ it('should not add an initial dimension when initialDimensions are not available for the given layer type', async () => {
+ const props = getDefaultProps();
+ props.activeVisualization.getSupportedLayers = jest.fn(() => [
+ {
+ type: layerTypes.DATA,
+ label: 'Data Layer',
+ initialDimensions: [
+ {
+ groupId: 'testGroup',
+ columnId: 'myColumn',
+ dataType: 'number',
+ label: 'Initial value',
+ staticValue: 100,
+ },
+ ],
+ },
+ {
+ type: layerTypes.THRESHOLD,
+ label: 'Threshold layer',
+ },
+ ]);
+ mockDatasource.initializeDimension = jest.fn();
+
+ const { instance, lensStore } = await prepareAndMountComponent(props);
+ await clickToAddLayer(instance);
+
+ expect(lensStore.dispatch).toHaveBeenCalledTimes(1);
+ expect(mockDatasource.initializeDimension).not.toHaveBeenCalled();
+ });
+
+ it('should use group initial dimension value when adding a new layer if available', async () => {
+ const props = getDefaultProps();
+ props.activeVisualization.getSupportedLayers = jest.fn(() => [
+ { type: layerTypes.DATA, label: 'Data Layer' },
+ {
+ type: layerTypes.THRESHOLD,
+ label: 'Threshold layer',
+ initialDimensions: [
+ {
+ groupId: 'testGroup',
+ columnId: 'myColumn',
+ dataType: 'number',
+ label: 'Initial value',
+ staticValue: 100,
+ },
+ ],
+ },
+ ]);
+ mockDatasource.initializeDimension = jest.fn();
+
+ const { instance, lensStore } = await prepareAndMountComponent(props);
+ await clickToAddLayer(instance);
+
+ expect(lensStore.dispatch).toHaveBeenCalledTimes(1);
+ expect(mockDatasource.initializeDimension).toHaveBeenCalledWith(undefined, 'newId', {
+ columnId: 'myColumn',
+ dataType: 'number',
+ groupId: 'testGroup',
+ label: 'Initial value',
+ staticValue: 100,
+ });
+ });
+
+ it('should add an initial dimension value when clicking on the empty dimension button', async () => {
+ const props = getDefaultProps();
+ props.activeVisualization.getSupportedLayers = jest.fn(() => [
+ {
+ type: layerTypes.DATA,
+ label: 'Data Layer',
+ initialDimensions: [
+ {
+ groupId: 'a',
+ columnId: 'newId',
+ dataType: 'number',
+ label: 'Initial value',
+ staticValue: 100,
+ },
+ ],
+ },
+ ]);
+ mockDatasource.initializeDimension = jest.fn();
+
+ const { instance, lensStore } = await prepareAndMountComponent(props);
+
+ await clickToAddDimension(instance);
+ expect(lensStore.dispatch).toHaveBeenCalledTimes(1);
+
+ expect(mockDatasource.initializeDimension).toHaveBeenCalledWith('state', 'first', {
+ groupId: 'a',
+ columnId: 'newId',
+ dataType: 'number',
+ label: 'Initial value',
+ staticValue: 100,
+ });
+ });
+ });
 });