-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[XY axis] Integrates legend color picker with the eui palette (#90589)
* XY Axis, integrate legend color picker with the eui palette * Fix functional test to work with the eui palette * Order eui colors by group * Add unit test for use color picker * Add useMemo to getColorPicker * Remove the grey background from the first focused circle * Fix bug caused by comparing lowercase with uppercase characters * Fix bug on complimentary palette * Fix CI * fix linter * Use uppercase for hex color * Use eui variable instead * Changes on charts.json * Make the color picker accessible * Fix ci and tests * Allow keyboard navigation * Close the popover on mouse click event * Fix ci Co-authored-by: Kibana Machine <[email protected]>
- Loading branch information
1 parent
0e1a2cd
commit a1f15fb
Showing
15 changed files
with
326 additions
and
166 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 99 additions & 0 deletions
99
src/plugins/vis_type_xy/public/utils/get_color_picker.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| /* | ||
| * 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 { LegendColorPickerProps, XYChartSeriesIdentifier } from '@elastic/charts'; | ||
| import { EuiPopover } from '@elastic/eui'; | ||
| import { mountWithIntl } from '@kbn/test/jest'; | ||
| import { ComponentType, ReactWrapper } from 'enzyme'; | ||
| import { getColorPicker } from './get_color_picker'; | ||
| import { ColorPicker } from '../../../charts/public'; | ||
| import type { PersistedState } from '../../../visualizations/public'; | ||
|
|
||
| jest.mock('@elastic/charts', () => { | ||
| const original = jest.requireActual('@elastic/charts'); | ||
|
|
||
| return { | ||
| ...original, | ||
| getSpecId: jest.fn(() => {}), | ||
| }; | ||
| }); | ||
|
|
||
| describe('getColorPicker', function () { | ||
| const mockState = new Map(); | ||
| const uiState = ({ | ||
| get: jest | ||
| .fn() | ||
| .mockImplementation((key, fallback) => (mockState.has(key) ? mockState.get(key) : fallback)), | ||
| set: jest.fn().mockImplementation((key, value) => mockState.set(key, value)), | ||
| emit: jest.fn(), | ||
| setSilent: jest.fn(), | ||
| } as unknown) as PersistedState; | ||
|
|
||
| let wrapperProps: LegendColorPickerProps; | ||
| const Component: ComponentType<LegendColorPickerProps> = getColorPicker( | ||
| 'left', | ||
| jest.fn(), | ||
| jest.fn().mockImplementation((seriesIdentifier) => seriesIdentifier.seriesKeys[0]), | ||
| 'default', | ||
| uiState | ||
| ); | ||
| let wrapper: ReactWrapper<LegendColorPickerProps>; | ||
|
|
||
| beforeAll(() => { | ||
| wrapperProps = { | ||
| color: 'rgb(109, 204, 177)', | ||
| onClose: jest.fn(), | ||
| onChange: jest.fn(), | ||
| anchor: document.createElement('div'), | ||
| seriesIdentifiers: [ | ||
| { | ||
| yAccessor: 'col-2-1', | ||
| splitAccessors: {}, | ||
| seriesKeys: ['Logstash Airways', 'col-2-1'], | ||
| specId: 'histogram-col-2-1', | ||
| key: | ||
| 'groupId{__pseudo_stacked_group-ValueAxis-1__}spec{histogram-col-2-1}yAccessor{col-2-1}splitAccessors{col-1-3-Logstash Airways}', | ||
| } as XYChartSeriesIdentifier, | ||
| ], | ||
| }; | ||
| }); | ||
|
|
||
| it('renders the color picker', () => { | ||
| wrapper = mountWithIntl(<Component {...wrapperProps} />); | ||
| expect(wrapper.find(ColorPicker).length).toBe(1); | ||
| }); | ||
|
|
||
| it('renders the color picker with the colorIsOverwritten prop set to false if color is not overwritten for the specific series', () => { | ||
| wrapper = mountWithIntl(<Component {...wrapperProps} />); | ||
| expect(wrapper.find(ColorPicker).prop('colorIsOverwritten')).toBe(false); | ||
| }); | ||
|
|
||
| it('renders the color picker with the colorIsOverwritten prop set to true if color is overwritten for the specific series', () => { | ||
| uiState.set('vis.colors', { 'Logstash Airways': '#6092c0' }); | ||
| wrapper = mountWithIntl(<Component {...wrapperProps} />); | ||
| expect(wrapper.find(ColorPicker).prop('colorIsOverwritten')).toBe(true); | ||
| }); | ||
|
|
||
| it('renders the picker on the correct position', () => { | ||
| wrapper = mountWithIntl(<Component {...wrapperProps} />); | ||
| expect(wrapper.find(EuiPopover).prop('anchorPosition')).toEqual('rightCenter'); | ||
| }); | ||
|
|
||
| it('renders the picker for kibana palette with useLegacyColors set to true', () => { | ||
| const LegacyPaletteComponent: ComponentType<LegendColorPickerProps> = getColorPicker( | ||
| 'left', | ||
| jest.fn(), | ||
| jest.fn(), | ||
| 'kibana_palette', | ||
| uiState | ||
| ); | ||
| wrapper = mountWithIntl(<LegacyPaletteComponent {...wrapperProps} />); | ||
| expect(wrapper.find(ColorPicker).prop('useLegacyColors')).toBe(true); | ||
| }); | ||
| }); |
Oops, something went wrong.