Skip to content

[Step 3] Cleanup charts plugin #130132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexwizp merged 6 commits into from
Apr 19, 2022
Merged

[Step 3] Cleanup charts plugin #130132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
134ce22
[Step 3] Cleanup charts plugin
alexwizp Apr 13, 2022
c8798d9
update JEST
alexwizp Apr 14, 2022
07c44ed
Merge branch 'main' into step-3
alexwizp Apr 18, 2022
a9b46c4
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Apr 18, 2022
5fe4850
Merge branch 'main' into step-3
kibanamachine Apr 18, 2022
6350ecb
Merge branch 'main' into step-3
kibanamachine Apr 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/kbn-coloring/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ RUNTIME_DEPS = [
"@npm//@elastic/eui",
"@npm//react-use",
"@npm//react",
"@npm//@emotion/react",
"@npm//@emotion/css",
]

# In this array place dependencies necessary to build the types, which will include the
Expand All @@ -71,6 +73,8 @@ TYPES_DEPS = [
"@npm//@types/react",
"@npm//@elastic/eui",
"@npm//react-use",
"@npm//@emotion/react",
"@npm//@emotion/css",
]

jsts_transpiler(
Expand Down
8 changes: 0 additions & 8 deletions packages/kbn-coloring/src/shared_components/coloring/palette_configuration.scss
View file
Open in desktop

This file was deleted.

18 changes: 14 additions & 4 deletions packages/kbn-coloring/src/shared_components/coloring/palette_configuration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
import { i18n } from '@kbn/i18n';
import React, { useReducer, useMemo } from 'react';
import useDebounce from 'react-use/lib/useDebounce';
import { EuiFormRow, htmlIdGenerator, EuiButtonGroup, EuiIconTip } from '@elastic/eui';
import { css } from '@emotion/react';
import { EuiFormRow, htmlIdGenerator, EuiButtonGroup, EuiIconTip, useEuiTheme } from '@elastic/eui';
import { PalettePicker } from './palette_picker';
import {
PaletteOutput,
Expand All @@ -19,8 +20,6 @@ import {
RequiredPaletteParamTypes,
} from '../../palettes';

import './palette_configuration.scss';

import { toColorRanges } from './utils';
import { ColorRanges, ColorRangesContext } from './color_ranges';
import { isAllColorRangesValid } from './color_ranges/color_ranges_validation';
Expand Down Expand Up @@ -72,8 +71,19 @@ export const CustomizablePalette = ({
[localState]
);

const { euiTheme } = useEuiTheme();

const styles = useMemo(
() => css`
padding: ${euiTheme.size.base};
background-color: ${euiTheme.colors.lightestShade};
border-bottom: ${euiTheme.border.thin};
`,
[euiTheme.size.base, euiTheme.colors.lightestShade, euiTheme.border.thin]
);

return (
<div className="lnsPalettePanel__section lnsPalettePanel__section--shaded">
<div css={styles} className="lnsPalettePanel__section">
<EuiFormRow
display="rowCompressed"
label={i18n.translate('coloring.dynamicColoring.palettePicker.label', {
Expand Down
2 changes: 1 addition & 1 deletion packages/kbn-optimizer/limits.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ pageLoadAssetSize:
alerting: 106936
apm: 64385
canvas: 1066647
charts: 95000
charts: 55000
cloud: 21076
console: 46091
core: 435325
Expand Down
47 changes: 26 additions & 21 deletions ...ins/chart_expressions/expression_gauge/public/components/icons/horizontal_bullet_icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,30 @@

import React from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';

export const HorizontalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
width="30"
height="22"
viewBox="0 0 30 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
className="chart-icon__subdued"
d="M1 13a1 1 0 00-1 1v2a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-2a1 1 0 00-1-1H1z"
/>
<path
className="chart-icon__accent"
d="M0 6a1 1 0 011-1h24a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V6z"
/>
</svg>
);
export const HorizontalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();

return (
<svg
width="30"
height="22"
viewBox="0 0 30 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
css={chartIcon.subdued}
d="M1 13a1 1 0 00-1 1v2a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-2a1 1 0 00-1-1H1z"
/>
<path
css={chartIcon.accent}
d="M0 6a1 1 0 011-1h24a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V6z"
/>
</svg>
);
};
47 changes: 26 additions & 21 deletions ...ugins/chart_expressions/expression_gauge/public/components/icons/vertical_bullet_icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,30 @@

import React from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';

export const VerticalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
width="30"
height="22"
viewBox="0 0 30 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
className="chart-icon__subdued"
d="M16 22a1 1 0 01-1-1V4a1 1 0 011-1h4a1 1 0 011 1v17a1 1 0 01-1 1h-4z"
/>
<path
className="chart-icon__accent"
d="M10 0h2a1 1 0 011 1v20a1 1 0 01-1 1h-2a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1V7h-1a1 1 0 010-2h1V2h-1a1 1 0 010-2z"
/>
</svg>
);
export const VerticalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();

return (
<svg
width="30"
height="22"
viewBox="0 0 30 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
css={chartIcon.subdued}
d="M16 22a1 1 0 01-1-1V4a1 1 0 011-1h4a1 1 0 011 1v17a1 1 0 01-1 1h-4z"
/>
<path
css={chartIcon.accent}
d="M10 0h2a1 1 0 011 1v20a1 1 0 01-1 1h-2a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1V7h-1a1 1 0 010-2h1V2h-1a1 1 0 010-2z"
/>
</svg>
);
};
23 changes: 23 additions & 0 deletions ...plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,17 @@ jest.mock('@elastic/charts', () => {
};
});

const actWithTimeout = (action: Function, timer: number = 1) =>
Comment thread
mbondyra marked this conversation as resolved.
act(
() =>
new Promise((resolve) =>
setTimeout(async () => {
await action();
resolve();
}, timer)
)
);

const chartsThemeService = chartPluginMock.createSetupContract().theme;
const palettesRegistry = chartPluginMock.createPaletteRegistry();
const formatService = fieldFormatsServiceMock.createStartContract();
Expand Down Expand Up @@ -110,6 +121,9 @@ describe('HeatmapComponent', function () {

it('renders the legend toggle component if uiState is set', async () => {
const component = mountWithIntl(<HeatmapComponent {...wrapperProps} />);
await actWithTimeout(async () => {
await component.update();
});
await act(async () => {
expect(findTestSubject(component, 'vislibToggleLegend').length).toBe(1);
});
Expand All @@ -118,13 +132,19 @@ describe('HeatmapComponent', function () {
it('not renders the legend toggle component if uiState is undefined', async () => {
const newProps = { ...wrapperProps, uiState: undefined } as unknown as HeatmapRenderProps;
const component = mountWithIntl(<HeatmapComponent {...newProps} />);
await actWithTimeout(async () => {
await component.update();
});
await act(async () => {
expect(findTestSubject(component, 'vislibToggleLegend').length).toBe(0);
});
});

it('renders the legendColorPicker if uiState is set', async () => {
const component = mountWithIntl(<HeatmapComponent {...wrapperProps} />);
await actWithTimeout(async () => {
await component.update();
});
await act(async () => {
expect(component.find(Settings).prop('legendColorPicker')).toBeDefined();
});
Expand All @@ -133,6 +153,9 @@ describe('HeatmapComponent', function () {
it('not renders the legendColorPicker if uiState is undefined', async () => {
const newProps = { ...wrapperProps, uiState: undefined } as unknown as HeatmapRenderProps;
const component = mountWithIntl(<HeatmapComponent {...newProps} />);
await actWithTimeout(async () => {
await component.update();
});
await act(async () => {
expect(component.find(Settings).prop('legendColorPicker')).toBeUndefined();
});
Expand Down
47 changes: 26 additions & 21 deletions src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,30 @@

import { EuiIconProps } from '@elastic/eui';
import React from 'react';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';

export const HeatmapIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
width={30}
height={22}
viewBox="0 0 30 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
className="chart-icon__accent"
d="M16 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V1zM0 17a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4zm17-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V9a1 1 0 00-1-1h-4zm-1 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4zm9-17a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1h-4z"
/>
<path
className="chart-icon__subdued"
d="M0 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1zm0 8a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9zm9-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1H9zM8 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H9a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H9zm15-7a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4z"
/>
</svg>
);
export const HeatmapIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();

return (
<svg
width={30}
height={22}
viewBox="0 0 30 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
css={chartIcon.subdued}
d="M16 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V1zM0 17a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4zm17-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V9a1 1 0 00-1-1h-4zm-1 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4zm9-17a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1h-4z"
/>
<path
css={chartIcon.accent}
d="M0 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1zm0 8a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9zm9-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1H9zM8 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H9a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H9zm15-7a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4z"
/>
</svg>
);
};
10 changes: 5 additions & 5 deletions ...ssion_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 18 additions & 5 deletions ...t_expressions/expression_partition_vis/public/components/partition_vis_component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,17 @@ jest.mock('@elastic/charts', () => {
};
});

const actWithTimeout = (action: Function, timer: number = 1) =>
act(
() =>
new Promise((resolve) =>
setTimeout(async () => {
await action();
resolve();
}, timer)
)
);

const chartsThemeService = chartPluginMock.createSetupContract().theme;
const palettesRegistry = chartPluginMock.createPaletteRegistry();
const visParams = createMockPieParams();
Expand Down Expand Up @@ -131,20 +142,22 @@ describe('PartitionVisComponent', function () {
expect(component).toMatchSnapshot();
});

it('renders the legend on the correct position', () => {
const component = shallow(<PartitionVisComponent {...wrapperProps} />);
expect(component.find(Settings).prop('legendPosition')).toEqual('right');
});

it('renders the legend toggle component', async () => {
const component = mount(<PartitionVisComponent {...wrapperProps} />);
await actWithTimeout(async () => {
await component.update();
});

await act(async () => {
expect(findTestSubject(component, 'vislibToggleLegend').length).toBe(1);
});
});

it('hides the legend if the legend toggle is clicked', async () => {
const component = mount(<PartitionVisComponent {...wrapperProps} />);
await actWithTimeout(async () => {
await component.update();
});
findTestSubject(component, 'vislibToggleLegend').simulate('click');
await act(async () => {
expect(component.find(Settings).prop('showLegend')).toEqual(false);
Expand Down
Loading