Skip to content

Commit

Permalink
[Lens] Thresholds added (#108342) (#112789)
Browse files Browse the repository at this point in the history 
Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>
Co-authored-by: dej611 <dej611@gmail.com>
Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>
Co-authored-by: dej611 <dej611@gmail.com>
Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
  • Loading branch information
@kibanamachine @mbondyra @dej611
4 people authored Sep 22, 2021
1 parent 8330702 commit 3a0bd67
Show file tree
Hide file tree
Showing 67 changed files with 4,007 additions and 761 deletions.
26 changes: 25 additions & 1 deletion x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 & {
Expand Down Expand Up @@ -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 {
Expand Down
40 changes: 40 additions & 0 deletions x-pack/plugins/lens/public/assets/chart_bar_threshold.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
15 changes: 10 additions & 5 deletions x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/add_layer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import React, { useState } from 'react';
import React, { useState, useMemo } from 'react';
import {
EuiToolTip,
EuiButton,
Expand Down Expand Up @@ -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"
Expand Down
168 changes: 166 additions & 2 deletions .../plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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(
Expand All @@ -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(
Expand Down Expand Up @@ -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,
});
});
});
});
Loading

0 comments on commit 3a0bd67

Please sign in to comment.