From 1ea7e04e578f74dbefa517464f1060397dd13153 Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Mon, 29 Nov 2021 16:10:03 -0600 Subject: [PATCH 01/10] changing axis color updates visualization state --- .../expressions/xy_chart/axis_config.ts | 6 +++++ .../xy_visualization/color_assignment.ts | 1 + .../lens/public/xy_visualization/types.ts | 2 ++ .../axis_settings_popover.test.tsx | 23 ++++++++++++++++ .../xy_config_panel/axis_settings_popover.tsx | 25 +++++++++++++++++ .../xy_config_panel/index.tsx | 27 +++++++++++++++++++ 6 files changed, 84 insertions(+) diff --git a/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts b/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts index 0b9667353706d..6a45ea6379218 100644 --- a/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts +++ b/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts @@ -16,6 +16,12 @@ export interface AxesSettingsConfig { yRight: boolean; } +export interface AxesSettingsStringConfig { + x: string; + yLeft: string; + yRight: string; +} + export interface AxisExtentConfig { mode: 'full' | 'dataBounds' | 'custom'; lowerBound?: number; diff --git a/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts b/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts index 5ed6ec052a0da..6decdba867463 100644 --- a/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts +++ b/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts @@ -25,6 +25,7 @@ interface LayerColorConfig { } export const defaultReferenceLineColor = euiLightVars.euiColorDarkShade; +export const defaultAxisLineColor = '#eaeaea'; // TODO - get this from somewhere export type ColorAssignments = Record< string, diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 75e80782c5d38..4ccca0bdabf4d 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -25,6 +25,7 @@ import type { XYLayerConfig, XYCurveType, AxesSettingsConfig, + AxesSettingsStringConfig, FittingFunction, LabelsOrientationConfig, } from '../../common/expressions'; @@ -43,6 +44,7 @@ export interface XYState { yTitle?: string; yRightTitle?: string; axisTitlesVisibilitySettings?: AxesSettingsConfig; + axisColors?: AxesSettingsStringConfig; tickLabelsVisibilitySettings?: AxesSettingsConfig; gridlinesVisibilitySettings?: AxesSettingsConfig; labelsOrientation?: LabelsOrientationConfig; diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx index ebe0e536a4d77..54144b7b95d5c 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx @@ -10,6 +10,9 @@ import { shallowWithIntl as shallow } from '@kbn/test/jest'; import { AxisSettingsPopover, AxisSettingsPopoverProps } from './axis_settings_popover'; import { ToolbarPopover } from '../../shared_components'; import { layerTypes } from '../../../common'; +import { EuiColorPicker } from '@elastic/eui'; +import { defaultAxisLineColor } from '../color_assignment'; +import { EuiColorPickerOutput } from '@elastic/eui/src/components/color_picker/color_picker'; describe('Axes Settings', () => { let props: AxisSettingsPopoverProps; @@ -120,6 +123,26 @@ describe('Axes Settings', () => { expect(component.find('[data-test-subj="lnsshowEndzones"]').prop('checked')).toBe(true); }); + describe('manipulating axis color', () => { + it('starts on default axis color', () => { + const component = shallow(); + expect(component.find(EuiColorPicker).prop('color')).toBe(defaultAxisLineColor); + }); + + it('reports a new color choice', () => { + const updateColorMock = jest.fn(); + + const component = shallow(); + + const newColor = 'new-color'; + + component.find(EuiColorPicker).prop('onChange')(newColor, {} as EuiColorPickerOutput); + + expect(updateColorMock).toHaveBeenCalledTimes(1); + expect(updateColorMock).toHaveBeenCalledWith(props.axis, newColor); + }); + }); + describe('axis extent', () => { it('hides the extent section if no extent is passed in', () => { const component = shallow(); diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx index 4ce1667ee1008..c8182784b550d 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx @@ -18,6 +18,7 @@ import { EuiButtonGroup, htmlIdGenerator, EuiFieldNumber, + EuiColorPicker, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { XYLayerConfig, AxesSettingsConfig, AxisExtentConfig } from '../../../common/expressions'; @@ -29,6 +30,7 @@ import { EuiIconAxisRight } from '../../assets/axis_right'; import { EuiIconAxisTop } from '../../assets/axis_top'; import { ToolbarButtonProps } from '../../../../../../src/plugins/kibana_react/public'; import { validateExtent } from '../axes_configuration'; +import { defaultAxisLineColor } from '../color_assignment'; type AxesSettingsConfigKeys = keyof AxesSettingsConfig; @@ -49,6 +51,14 @@ export interface AxisSettingsPopoverProps { * Callback to axis title change */ updateTitleState: (value: string) => void; + /** + * Callback to axis color change + */ + updateColor: (axis: AxesSettingsConfigKeys, value: string) => void; + /** + * Determines axis color + */ + color?: string; /** * Determines if the popover is Disabled */ @@ -199,9 +209,11 @@ export const AxisSettingsPopover: React.FunctionComponent + updateColor(axis, newColor)} + color={color || defaultAxisLineColor} + // TODO - is placeholder necessary? + placeholder={i18n.translate('xpack.lens.xyChart.seriesColor.auto', { + defaultMessage: 'Auto', + })} + // aria-label={inputLabel} TODO - renable + /> + = T extends Array ? P : T; type AxesSettingsConfigKeys = keyof AxesSettingsConfig; @@ -246,6 +247,7 @@ export const XyToolbar = memo(function XyToolbar( yLeft: state?.axisTitlesVisibilitySettings?.yLeft ?? true, yRight: state?.axisTitlesVisibilitySettings?.yRight ?? true, }; + const onAxisTitlesVisibilitySettingsChange = ( axis: AxesSettingsConfigKeys, checked: boolean @@ -262,6 +264,25 @@ export const XyToolbar = memo(function XyToolbar( }); }; + const axisColors = { + x: state?.axisColors?.x ?? defaultAxisLineColor, + yLeft: state?.axisColors?.yLeft ?? defaultAxisLineColor, + yRight: state?.axisColors?.yRight ?? defaultAxisLineColor, + }; + + const onAxisColorChanged = (axis: AxesSettingsConfigKeys, color: string): void => { + const newAxisColors = { + ...axisColors, + ...{ + [axis]: color, + }, + }; + setState({ + ...state, + axisColors: newAxisColors, + }); + }; + const nonOrdinalXAxis = state?.layers.every( (layer) => !layer.xAccessor || @@ -476,6 +497,8 @@ export const XyToolbar = memo(function XyToolbar( layers={state?.layers} axisTitle={state?.yTitle} updateTitleState={(value) => setState({ ...state, yTitle: value })} + color={state?.axisColors?.yLeft} + updateColor={onAxisColorChanged} areTickLabelsVisible={tickLabelsVisibilitySettings.yLeft} toggleTickLabelsVisibility={onTickLabelsVisibilitySettingsChange} areGridlinesVisible={gridlinesVisibilitySettings.yLeft} @@ -499,6 +522,8 @@ export const XyToolbar = memo(function XyToolbar( layers={state?.layers} axisTitle={state?.xTitle} updateTitleState={(value) => setState({ ...state, xTitle: value })} + color={state?.axisColors?.x} + updateColor={onAxisColorChanged} areTickLabelsVisible={tickLabelsVisibilitySettings.x} toggleTickLabelsVisibility={onTickLabelsVisibilitySettingsChange} areGridlinesVisible={gridlinesVisibilitySettings.x} @@ -534,6 +559,8 @@ export const XyToolbar = memo(function XyToolbar( layers={state?.layers} axisTitle={state?.yRightTitle} updateTitleState={(value) => setState({ ...state, yRightTitle: value })} + color={state?.axisColors?.yRight} + updateColor={onAxisColorChanged} areTickLabelsVisible={tickLabelsVisibilitySettings.yRight} toggleTickLabelsVisibility={onTickLabelsVisibilitySettingsChange} areGridlinesVisible={gridlinesVisibilitySettings.yRight} From a6c9acfcd6be982ea379b6983c6c24654bd27bfc Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Tue, 30 Nov 2021 14:43:21 -0600 Subject: [PATCH 02/10] Apply axis colors from state --- .../expressions/xy_chart/axis_config.ts | 43 +++++++++++++ .../common/expressions/xy_chart/xy_args.ts | 7 ++- .../common/expressions/xy_chart/xy_chart.ts | 6 ++ x-pack/plugins/lens/public/expressions.ts | 2 + .../__snapshots__/expression.test.tsx.snap | 42 +++++++++++++ .../__snapshots__/to_expression.test.ts.snap | 24 ++++++- .../xy_visualization/expression.test.tsx | 62 ++++++++++++++++++- .../public/xy_visualization/expression.tsx | 36 +++++++---- .../xy_visualization/to_expression.test.ts | 58 ++++++++++++++++- .../public/xy_visualization/to_expression.ts | 18 +++++- .../lens/server/expressions/expressions.ts | 2 + 11 files changed, 282 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts b/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts index 6a45ea6379218..f804299c2c946 100644 --- a/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts +++ b/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts @@ -50,6 +50,49 @@ export interface YConfig { textVisibility?: boolean; } +export type AxisColorsConfigResult = AxesSettingsStringConfig & { + type: 'lens_xy_axisColorsConfig'; +}; + +export const axisColorsConfig: ExpressionFunctionDefinition< + 'lens_xy_axisColorsConfig', + null, + AxesSettingsStringConfig, + AxisColorsConfigResult +> = { + name: 'lens_xy_axisColorsConfig', + aliases: [], + type: 'lens_xy_axisColorsConfig', + help: `Configure the xy chart's axis titles appearance`, + inputTypes: ['null'], + args: { + x: { + types: ['string'], + help: i18n.translate('xpack.lens.xyChart.xAxisColor.help', { + defaultMessage: 'The color of the x-axis.', + }), + }, + yLeft: { + types: ['string'], + help: i18n.translate('xpack.lens.xyChart.yLeftAxisColor.help', { + defaultMessage: 'The color of the left y-axis.', + }), + }, + yRight: { + types: ['string'], + help: i18n.translate('xpack.lens.xyChart.yRightAxisColor.help', { + defaultMessage: 'The color of the right y-axis.', + }), + }, + }, + fn: function fn(input: unknown, args: AxesSettingsStringConfig) { + return { + type: 'lens_xy_axisColorsConfig', + ...args, + }; + }, +}; + export type AxisTitlesVisibilityConfigResult = AxesSettingsConfig & { type: 'lens_xy_axisTitlesVisibilityConfig'; }; diff --git a/x-pack/plugins/lens/common/expressions/xy_chart/xy_args.ts b/x-pack/plugins/lens/common/expressions/xy_chart/xy_args.ts index f00608135820a..9e894ae231f77 100644 --- a/x-pack/plugins/lens/common/expressions/xy_chart/xy_args.ts +++ b/x-pack/plugins/lens/common/expressions/xy_chart/xy_args.ts @@ -5,7 +5,11 @@ * 2.0. */ -import type { AxisExtentConfigResult, AxisTitlesVisibilityConfigResult } from './axis_config'; +import type { + AxisColorsConfigResult, + AxisExtentConfigResult, + AxisTitlesVisibilityConfigResult, +} from './axis_config'; import type { FittingFunction } from './fitting_function'; import type { GridlinesConfigResult } from './grid_lines_config'; import type { LayerArgs } from './layer_config'; @@ -30,6 +34,7 @@ export interface XYArgs { layers: LayerArgs[]; fittingFunction?: FittingFunction; axisTitlesVisibilitySettings?: AxisTitlesVisibilityConfigResult; + axisColorSettings?: AxisColorsConfigResult; tickLabelsVisibilitySettings?: TickLabelsConfigResult; gridlinesVisibilitySettings?: GridlinesConfigResult; labelsOrientation?: LabelsOrientationConfigResult; diff --git a/x-pack/plugins/lens/common/expressions/xy_chart/xy_chart.ts b/x-pack/plugins/lens/common/expressions/xy_chart/xy_chart.ts index 0e58105447689..a595c352825ef 100644 --- a/x-pack/plugins/lens/common/expressions/xy_chart/xy_chart.ts +++ b/x-pack/plugins/lens/common/expressions/xy_chart/xy_chart.ts @@ -115,6 +115,12 @@ export const xyChart: ExpressionFunctionDefinition< defaultMessage: 'Show x and y axes titles', }), }, + axisColorSettings: { + types: ['lens_xy_axisColorsConfig'], + help: i18n.translate('xpack.lens.xyChart.axisColorSettings.help', { + defaultMessage: 'Defines axis colors', + }), + }, layers: { // eslint-disable-next-line @typescript-eslint/no-explicit-any types: ['lens_xy_layer'] as any, diff --git a/x-pack/plugins/lens/public/expressions.ts b/x-pack/plugins/lens/public/expressions.ts index 9d972d8ed6941..efce46968372e 100644 --- a/x-pack/plugins/lens/public/expressions.ts +++ b/x-pack/plugins/lens/public/expressions.ts @@ -11,6 +11,7 @@ import { axisExtentConfig, yAxisConfig, axisTitlesVisibilityConfig, + axisColorsConfig, } from '../common/expressions/xy_chart/axis_config'; import { gridlinesConfig } from '../common/expressions/xy_chart/grid_lines_config'; import { labelsOrientationConfig } from '../common/expressions/xy_chart/labels_orientation_config'; @@ -57,6 +58,7 @@ export const setupExpressions = ( datatableColumn, tickLabelsConfig, axisTitlesVisibilityConfig, + axisColorsConfig, heatmap, heatmapLegendConfig, heatmapGridConfig, diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap index e2566aa22ce9e..ad60c53ab3bbf 100644 --- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap +++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap @@ -55,6 +55,9 @@ exports[`xy_expression XYChart component it renders area 1`] = ` position="bottom" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -89,6 +92,9 @@ exports[`xy_expression XYChart component it renders area 1`] = ` position="left" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -286,6 +292,9 @@ exports[`xy_expression XYChart component it renders bar 1`] = ` position="bottom" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -320,6 +329,9 @@ exports[`xy_expression XYChart component it renders bar 1`] = ` position="left" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -531,6 +543,9 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = ` position="left" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -565,6 +580,9 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = ` position="bottom" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -776,6 +794,9 @@ exports[`xy_expression XYChart component it renders line 1`] = ` position="bottom" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -810,6 +831,9 @@ exports[`xy_expression XYChart component it renders line 1`] = ` position="left" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -1007,6 +1031,9 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = ` position="bottom" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -1041,6 +1068,9 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = ` position="left" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -1246,6 +1276,9 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = ` position="bottom" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -1280,6 +1313,9 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = ` position="left" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -1499,6 +1535,9 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = position="left" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, @@ -1533,6 +1572,9 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = position="bottom" style={ Object { + "axisLine": Object { + "stroke": "#eaeaea", + }, "axisTitle": Object { "padding": undefined, "visible": true, diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap index 2af871d581039..479c89270af21 100644 --- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap +++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap @@ -5,13 +5,35 @@ Object { "chain": Array [ Object { "arguments": Object { + "axisColorSettings": Array [ + Object { + "chain": Array [ + Object { + "arguments": Object { + "x": Array [ + "#123456", + ], + "yLeft": Array [ + "#654321", + ], + "yRight": Array [ + "#123456", + ], + }, + "function": "lens_xy_axisColorsConfig", + "type": "function", + }, + ], + "type": "expression", + }, + ], "axisTitlesVisibilitySettings": Array [ Object { "chain": Array [ Object { "arguments": Object { "x": Array [ - true, + false, ], "yLeft": Array [ true, diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx index bb3b5bfcbfec6..11c417774fa1e 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx @@ -25,11 +25,12 @@ import { PaletteOutput } from 'src/plugins/charts/public'; import { calculateMinInterval, XYChart, XYChartRenderProps } from './expression'; import type { LensMultiTable } from '../../common'; import { layerTypes } from '../../common'; -import { xyChart } from '../../common/expressions'; +import { AxesSettingsStringConfig, xyChart } from '../../common/expressions'; import { layerConfig, legendConfig, tickLabelsConfig, + axisColorsConfig, gridlinesConfig, XYArgs, LegendConfig, @@ -47,6 +48,7 @@ import { mountWithIntl } from '@kbn/test/jest'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; import { EmptyPlaceholder } from '../shared_components/empty_placeholder'; import { XyEndzones } from './x_domain'; +import { defaultAxisLineColor } from './color_assignment'; const onClickValue = jest.fn(); const onSelectRange = jest.fn(); @@ -426,6 +428,21 @@ describe('xy_expression', () => { }); }); + test('axisColorsConfig produces the correct arguments', () => { + const args: AxesSettingsStringConfig = { + x: '#x-color', + yLeft: '#yleft-color', + yRight: '#yright-color', + }; + + const result = axisColorsConfig.fn(null, args, createMockExecutionContext()); + + expect(result).toEqual({ + type: 'lens_xy_axisColorsConfig', + ...args, + }); + }); + test('gridlinesConfig produces the correct arguments', () => { const args: AxesSettingsConfig = { x: true, @@ -2695,6 +2712,49 @@ describe('xy_expression', () => { }); }); + describe('axis colors', () => { + test('it should apply default axis colors', () => { + const { data, args } = sampleArgs(); + + args.axisColorSettings = undefined; + + const component = shallow( + + ); + + const axes = component.find(Axis); + expect(axes.at(0).prop('style')?.axisLine).toMatchObject({ + stroke: defaultAxisLineColor, + }); + expect(axes.at(1).prop('style')?.axisLine).toMatchObject({ + stroke: defaultAxisLineColor, + }); + }); + + test('it should apply custom axis colors', () => { + const { data, args } = sampleArgs(); + + args.axisColorSettings = { + x: '#x-axis', + yLeft: '#yleft-axis', + yRight: '#yright-axis', + type: 'lens_xy_axisColorsConfig', + }; + + const component = shallow( + + ); + + const axes = component.find(Axis); + expect(axes.at(0).prop('style')?.axisLine).toMatchObject({ + stroke: args.axisColorSettings.x, + }); + expect(axes.at(1).prop('style')?.axisLine).toMatchObject({ + stroke: args.axisColorSettings.yLeft, + }); + }); + }); + test('it should format the boolean values correctly', () => { const data: LensMultiTable = { type: 'lens_multitable', diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx index d22a8034cdf2b..bf7750c4e4930 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx @@ -64,7 +64,7 @@ import { MULTILAYER_TIME_AXIS_STYLE } from '../../../../../src/plugins/charts/co import { EmptyPlaceholder } from '../shared_components'; import { getFitOptions } from './fitting_functions'; import { getAxesConfiguration, GroupsConfiguration, validateExtent } from './axes_configuration'; -import { getColorAssignments } from './color_assignment'; +import { defaultAxisLineColor, getColorAssignments } from './color_assignment'; import { getXDomain, XyEndzones } from './x_domain'; import { getLegendAction } from './get_legend_action'; import { @@ -311,6 +311,15 @@ export function XYChart({ yRight: 0, }; + const axisColorSettings = { + ...{ + x: defaultAxisLineColor, + yLeft: defaultAxisLineColor, + yRight: defaultAxisLineColor, + }, + ...args.axisColorSettings, + }; + const filteredBarLayers = filteredLayers.filter((layer) => layer.seriesType.includes('bar')); const chartHasMoreThanOneBarSeries = @@ -352,18 +361,14 @@ export function XYChart({ }; const getYAxesStyle = (groupId: 'left' | 'right') => { - const tickVisible = - groupId === 'right' - ? tickLabelsVisibilitySettings?.yRight - : tickLabelsVisibilitySettings?.yLeft; + const whichAxis = groupId === 'right' ? 'yRight' : 'yLeft'; + + const tickVisible = tickLabelsVisibilitySettings[whichAxis]; const style = { tickLabel: { visible: tickVisible, - rotation: - groupId === 'right' - ? args.labelsOrientation?.yRight || 0 - : args.labelsOrientation?.yLeft || 0, + rotation: args.labelsOrientation?.[whichAxis] || 0, padding: referenceLinePaddings[groupId] != null ? { @@ -372,10 +377,7 @@ export function XYChart({ : undefined, }, axisTitle: { - visible: - groupId === 'right' - ? axisTitlesVisibilitySettings?.yRight - : axisTitlesVisibilitySettings?.yLeft, + visible: axisTitlesVisibilitySettings[whichAxis], // if labels are not visible add the padding to the title padding: !tickVisible && referenceLinePaddings[groupId] != null @@ -384,6 +386,9 @@ export function XYChart({ } : undefined, }, + axisLine: { + stroke: axisColorSettings[whichAxis], + }, }; return style; }; @@ -601,6 +606,11 @@ export function XYChart({ : undefined, }, }; + + xAxisStyle.axisLine = { + stroke: axisColorSettings.x, + }; + return ( { @@ -55,6 +55,8 @@ describe('#toExpression', () => { preferredSeriesType: 'bar', fittingFunction: 'Carry', tickLabelsVisibilitySettings: { x: false, yLeft: true, yRight: true }, + axisTitlesVisibilitySettings: { x: false, yLeft: true, yRight: true }, + axisColors: { x: '#123456', yLeft: '#654321', yRight: '#123456' }, labelsOrientation: { x: 0, yLeft: -90, @@ -136,6 +138,60 @@ describe('#toExpression', () => { }); }); + it('should populate axis colors with defaults', () => { + const expression = xyVisualization.toExpression( + { + legend: { position: Position.Bottom, isVisible: true }, + valueLabels: 'hide', + preferredSeriesType: 'bar', + layers: [ + { + layerId: 'first', + layerType: layerTypes.DATA, + seriesType: 'area', + splitAccessor: 'd', + xAccessor: 'a', + accessors: ['b', 'c'], + }, + ], + }, + frame.datasourceLayers + ) as Ast; + expect((expression.chain[0].arguments.axisColorSettings[0] as Ast).chain[0].arguments).toEqual({ + x: [defaultAxisLineColor], + yLeft: [defaultAxisLineColor], + yRight: [defaultAxisLineColor], + }); + }); + + it('should respect axis color customizations', () => { + const customColor = '#custom-color'; + const expression = xyVisualization.toExpression( + { + legend: { position: Position.Bottom, isVisible: true }, + valueLabels: 'hide', + preferredSeriesType: 'bar', + axisColors: { x: customColor, yLeft: customColor, yRight: customColor }, + layers: [ + { + layerId: 'first', + layerType: layerTypes.DATA, + seriesType: 'area', + splitAccessor: 'd', + xAccessor: 'a', + accessors: ['b', 'c'], + }, + ], + }, + frame.datasourceLayers + ) as Ast; + expect((expression.chain[0].arguments.axisColorSettings[0] as Ast).chain[0].arguments).toEqual({ + x: [customColor], + yLeft: [customColor], + yRight: [customColor], + }); + }); + it('should generate an expression without x accessor', () => { const expression = xyVisualization.toExpression( { diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts index 1cd0bab48cd68..61a1a7e8f4363 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts @@ -14,7 +14,7 @@ import { getColumnToLabelMap } from './state_helpers'; import type { ValidLayer, XYLayerConfig } from '../../common/expressions'; import { layerTypes } from '../../common'; import { hasIcon } from './xy_config_panel/reference_line_panel'; -import { defaultReferenceLineColor } from './color_assignment'; +import { defaultAxisLineColor, defaultReferenceLineColor } from './color_assignment'; export const getSortedAccessors = (datasource: DatasourcePublicAPI, layer: XYLayerConfig) => { const originalOrder = datasource @@ -242,6 +242,22 @@ export const buildExpression = ( ], }, ], + axisColorSettings: [ + { + type: 'expression', + chain: [ + { + type: 'function', + function: 'lens_xy_axisColorsConfig', + arguments: { + x: [state?.axisColors?.x ?? defaultAxisLineColor], + yLeft: [state?.axisColors?.yLeft ?? defaultAxisLineColor], + yRight: [state?.axisColors?.yRight ?? defaultAxisLineColor], + }, + }, + ], + }, + ], tickLabelsVisibilitySettings: [ { type: 'expression', diff --git a/x-pack/plugins/lens/server/expressions/expressions.ts b/x-pack/plugins/lens/server/expressions/expressions.ts index a04ad27d1a276..e60bdf2b81e7c 100644 --- a/x-pack/plugins/lens/server/expressions/expressions.ts +++ b/x-pack/plugins/lens/server/expressions/expressions.ts @@ -20,6 +20,7 @@ import { datatableColumn, tickLabelsConfig, axisTitlesVisibilityConfig, + axisColorsConfig, getTimeScale, getDatatable, lensMultitable, @@ -49,6 +50,7 @@ export const setupExpressions = ( datatableColumn, tickLabelsConfig, axisTitlesVisibilityConfig, + axisColorsConfig, getDatatable(getFormatFactory(core)), getTimeScale(getTimeZoneFactory(core)), ].forEach((expressionFn) => expressions.registerFunction(expressionFn)); From 00db787eeb8a58ce3bde127c7ba913050fb93c26 Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Tue, 30 Nov 2021 14:48:31 -0600 Subject: [PATCH 03/10] improve assertion style --- .../public/xy_visualization/expression.test.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx index 11c417774fa1e..b321e734a7aca 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx @@ -2723,12 +2723,8 @@ describe('xy_expression', () => { ); const axes = component.find(Axis); - expect(axes.at(0).prop('style')?.axisLine).toMatchObject({ - stroke: defaultAxisLineColor, - }); - expect(axes.at(1).prop('style')?.axisLine).toMatchObject({ - stroke: defaultAxisLineColor, - }); + expect(axes.at(0).prop('style')?.axisLine?.stroke).toBe(defaultAxisLineColor); + expect(axes.at(1).prop('style')?.axisLine?.stroke).toBe(defaultAxisLineColor); }); test('it should apply custom axis colors', () => { @@ -2746,12 +2742,8 @@ describe('xy_expression', () => { ); const axes = component.find(Axis); - expect(axes.at(0).prop('style')?.axisLine).toMatchObject({ - stroke: args.axisColorSettings.x, - }); - expect(axes.at(1).prop('style')?.axisLine).toMatchObject({ - stroke: args.axisColorSettings.yLeft, - }); + expect(axes.at(0).prop('style')?.axisLine?.stroke).toBe(args.axisColorSettings.x); + expect(axes.at(1).prop('style')?.axisLine?.stroke).toBe(args.axisColorSettings.yLeft); }); }); From a663f5dae632bcadefbdfaca62a7cc60da8d2db4 Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Tue, 30 Nov 2021 15:05:58 -0600 Subject: [PATCH 04/10] Apply label to color picker --- .../xy_config_panel/axis_settings_popover.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx index c8182784b550d..cb164fc52a317 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx @@ -267,6 +267,11 @@ export const AxisSettingsPopover: React.FunctionComponent + + + updateColor(axis, newColor)} + color={color || defaultAxisLineColor} + aria-label={axisColorLabel} + /> + - updateColor(axis, newColor)} - color={color || defaultAxisLineColor} - // TODO - is placeholder necessary? - placeholder={i18n.translate('xpack.lens.xyChart.seriesColor.auto', { - defaultMessage: 'Auto', - })} - // aria-label={inputLabel} TODO - renable - /> - Date: Tue, 30 Nov 2021 15:35:30 -0600 Subject: [PATCH 05/10] fix test typing --- .../xy_config_panel/axis_settings_popover.test.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx index 54144b7b95d5c..20f019493180d 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx @@ -34,6 +34,7 @@ describe('Axes Settings', () => { areTickLabelsVisible: true, areGridlinesVisible: true, isAxisTitleVisible: true, + updateColor: jest.fn(), toggleAxisTitleVisibility: jest.fn(), toggleTickLabelsVisibility: jest.fn(), toggleGridlinesVisibility: jest.fn(), @@ -130,16 +131,14 @@ describe('Axes Settings', () => { }); it('reports a new color choice', () => { - const updateColorMock = jest.fn(); - - const component = shallow(); + const component = shallow(); const newColor = 'new-color'; component.find(EuiColorPicker).prop('onChange')(newColor, {} as EuiColorPickerOutput); - expect(updateColorMock).toHaveBeenCalledTimes(1); - expect(updateColorMock).toHaveBeenCalledWith(props.axis, newColor); + expect(props.updateColor).toHaveBeenCalledTimes(1); + expect(props.updateColor).toHaveBeenCalledWith(props.axis, newColor); }); }); From 4e1d60b113f37c972a3cf2dbfe753bc45a556995 Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Tue, 30 Nov 2021 16:46:09 -0600 Subject: [PATCH 06/10] import default axis color from elastic-charts --- .../lens/public/xy_visualization/color_assignment.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts b/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts index 416d7c973c3eb..9c4132f6b8467 100644 --- a/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts +++ b/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts @@ -9,6 +9,7 @@ import { uniq, mapValues } from 'lodash'; import type { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public'; import type { Datatable } from 'src/plugins/expressions'; import { euiLightVars } from '@kbn/ui-shared-deps-src/theme'; +import { LIGHT_THEME } from '@elastic/charts'; import type { AccessorConfig, FramePublicAPI } from '../types'; import { getColumnToLabelMap } from './state_helpers'; import { FormatFactory, LayerType, layerTypes } from '../../common'; @@ -25,7 +26,11 @@ interface LayerColorConfig { } export const defaultReferenceLineColor = euiLightVars.euiColorDarkShade; -export const defaultAxisLineColor = '#eaeaea'; // TODO - get this from somewhere +export const { + axes: { + axisLine: { stroke: defaultAxisLineColor }, + }, +} = LIGHT_THEME; export type ColorAssignments = Record< string, From 67c0f7b5154b12f40fc27c56460ec6061a4c92ce Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Wed, 1 Dec 2021 09:03:59 -0600 Subject: [PATCH 07/10] Preserve color state when generating XY suggestions --- .../lens/public/xy_visualization/xy_suggestions.test.ts | 5 +++++ .../plugins/lens/public/xy_visualization/xy_suggestions.ts | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts index d7b48553ce73a..d16227d0b23d8 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts @@ -637,6 +637,7 @@ describe('xy_suggestions', () => { valueLabels: 'hide', fittingFunction: 'None', axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + axisColors: { x: '#123456', yLeft: '#123456', yRight: '#123456' }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, @@ -681,6 +682,7 @@ describe('xy_suggestions', () => { preferredSeriesType: 'bar', fittingFunction: 'None', axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + axisColors: { x: '#123456', yLeft: '#123456', yRight: '#123456' }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, @@ -800,6 +802,7 @@ describe('xy_suggestions', () => { preferredSeriesType: 'bar', fittingFunction: 'None', axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + axisColors: { x: '#123456', yLeft: '#123456', yRight: '#123456' }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, @@ -845,6 +848,7 @@ describe('xy_suggestions', () => { preferredSeriesType: 'bar', fittingFunction: 'None', axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + axisColors: { x: '#123456', yLeft: '#123456', yRight: '#123456' }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, @@ -891,6 +895,7 @@ describe('xy_suggestions', () => { preferredSeriesType: 'bar', fittingFunction: 'None', axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, + axisColors: { x: '#123456', yLeft: '#123456', yRight: '#123456' }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts index 2e275c455a4d0..3ae587fdd52da 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts @@ -20,6 +20,7 @@ import { State, XYState, visualizationTypes } from './types'; import type { SeriesType, XYLayerConfig } from '../../common/expressions'; import { layerTypes } from '../../common'; import { getIconForSeries } from './state_helpers'; +import { defaultAxisLineColor } from './color_assignment'; const columnSortOrder = { document: 0, @@ -540,6 +541,11 @@ function buildSuggestion({ yLeft: true, yRight: true, }, + axisColors: currentState?.axisColors || { + x: defaultAxisLineColor, + yLeft: defaultAxisLineColor, + yRight: defaultAxisLineColor, + }, tickLabelsVisibilitySettings: currentState?.tickLabelsVisibilitySettings || { x: true, yLeft: true, From a02d1e28b34c81c3c4cd24aa8d6a59f06f8626f8 Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Thu, 2 Dec 2021 15:56:42 -0600 Subject: [PATCH 08/10] allow for undefined axis colors --- .../expressions/xy_chart/axis_config.ts | 6 +-- .../__snapshots__/expression.test.tsx.snap | 42 ++++++++++++------- .../xy_visualization/expression.test.tsx | 16 ++++--- .../public/xy_visualization/expression.tsx | 27 ++++++------ .../xy_visualization/to_expression.test.ts | 8 ++-- .../public/xy_visualization/to_expression.ts | 8 ++-- .../xy_config_panel/axis_settings_popover.tsx | 2 +- .../xy_config_panel/index.tsx | 17 ++++---- .../public/xy_visualization/xy_suggestions.ts | 7 +--- 9 files changed, 72 insertions(+), 61 deletions(-) diff --git a/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts b/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts index f804299c2c946..d784b914763ed 100644 --- a/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts +++ b/x-pack/plugins/lens/common/expressions/xy_chart/axis_config.ts @@ -17,9 +17,9 @@ export interface AxesSettingsConfig { } export interface AxesSettingsStringConfig { - x: string; - yLeft: string; - yRight: string; + x?: string; + yLeft?: string; + yRight?: string; } export interface AxisExtentConfig { diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap index ad60c53ab3bbf..f4a0da1c42cb7 100644 --- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap +++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap @@ -56,9 +56,10 @@ exports[`xy_expression XYChart component it renders area 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -93,9 +94,10 @@ exports[`xy_expression XYChart component it renders area 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -293,9 +295,10 @@ exports[`xy_expression XYChart component it renders bar 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -330,9 +333,10 @@ exports[`xy_expression XYChart component it renders bar 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -544,9 +548,10 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -581,9 +586,10 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -795,9 +801,10 @@ exports[`xy_expression XYChart component it renders line 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -832,9 +839,10 @@ exports[`xy_expression XYChart component it renders line 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -1032,9 +1040,10 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -1069,9 +1078,10 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -1277,9 +1287,10 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -1314,9 +1325,10 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = ` style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -1536,9 +1548,10 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, @@ -1573,9 +1586,10 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = style={ Object { "axisLine": Object { - "stroke": "#eaeaea", + "stroke": undefined, }, "axisTitle": Object { + "fill": undefined, "padding": undefined, "visible": true, }, diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx index b321e734a7aca..5f1da30b797c1 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx @@ -2713,7 +2713,7 @@ describe('xy_expression', () => { }); describe('axis colors', () => { - test('it should apply default axis colors', () => { + test('it should default axis colors to undefined', () => { const { data, args } = sampleArgs(); args.axisColorSettings = undefined; @@ -2723,8 +2723,11 @@ describe('xy_expression', () => { ); const axes = component.find(Axis); - expect(axes.at(0).prop('style')?.axisLine?.stroke).toBe(defaultAxisLineColor); - expect(axes.at(1).prop('style')?.axisLine?.stroke).toBe(defaultAxisLineColor); + const [xAxisStyle, yLeftAxisStyle] = [axes.at(0).prop('style'), axes.at(1).prop('style')]; + expect(xAxisStyle?.axisLine?.stroke).toBeUndefined(); + expect(xAxisStyle?.axisTitle?.fill).toBeUndefined(); + expect(yLeftAxisStyle?.axisLine?.stroke).toBeUndefined(); + expect(yLeftAxisStyle?.axisTitle?.fill).toBeUndefined(); }); test('it should apply custom axis colors', () => { @@ -2742,8 +2745,11 @@ describe('xy_expression', () => { ); const axes = component.find(Axis); - expect(axes.at(0).prop('style')?.axisLine?.stroke).toBe(args.axisColorSettings.x); - expect(axes.at(1).prop('style')?.axisLine?.stroke).toBe(args.axisColorSettings.yLeft); + const [xAxisStyle, yLeftAxisStyle] = [axes.at(0).prop('style'), axes.at(1).prop('style')]; + expect(xAxisStyle?.axisLine?.stroke).toBe(args.axisColorSettings.x); + expect(xAxisStyle?.axisTitle?.fill).toBe(args.axisColorSettings.x); + expect(yLeftAxisStyle?.axisLine?.stroke).toBe(args.axisColorSettings.yLeft); + expect(yLeftAxisStyle?.axisTitle?.fill).toBe(args.axisColorSettings.yLeft); }); }); diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx index bf7750c4e4930..9c4bc74d5cc76 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx @@ -64,7 +64,7 @@ import { MULTILAYER_TIME_AXIS_STYLE } from '../../../../../src/plugins/charts/co import { EmptyPlaceholder } from '../shared_components'; import { getFitOptions } from './fitting_functions'; import { getAxesConfiguration, GroupsConfiguration, validateExtent } from './axes_configuration'; -import { defaultAxisLineColor, getColorAssignments } from './color_assignment'; +import { getColorAssignments } from './color_assignment'; import { getXDomain, XyEndzones } from './x_domain'; import { getLegendAction } from './get_legend_action'; import { @@ -239,6 +239,7 @@ export function XYChart({ layers, fittingFunction, gridlinesVisibilitySettings, + axisColorSettings, valueLabels, hideEndzones, yLeftExtent, @@ -311,15 +312,6 @@ export function XYChart({ yRight: 0, }; - const axisColorSettings = { - ...{ - x: defaultAxisLineColor, - yLeft: defaultAxisLineColor, - yRight: defaultAxisLineColor, - }, - ...args.axisColorSettings, - }; - const filteredBarLayers = filteredLayers.filter((layer) => layer.seriesType.includes('bar')); const chartHasMoreThanOneBarSeries = @@ -385,9 +377,10 @@ export function XYChart({ inner: referenceLinePaddings[groupId], } : undefined, + fill: axisColorSettings?.[whichAxis], }, axisLine: { - stroke: axisColorSettings[whichAxis], + stroke: axisColorSettings?.[whichAxis], }, }; return style; @@ -587,6 +580,10 @@ export function XYChart({ }, axisTitle: { visible: axisTitlesVisibilitySettings.x, + fill: axisColorSettings?.x, + }, + axisLine: { + stroke: axisColorSettings?.x, }, } : { @@ -604,13 +601,13 @@ export function XYChart({ !tickLabelsVisibilitySettings?.x && referenceLinePaddings.bottom != null ? { inner: referenceLinePaddings.bottom } : undefined, + fill: axisColorSettings?.x, + }, + axisLine: { + stroke: axisColorSettings?.x, }, }; - xAxisStyle.axisLine = { - stroke: axisColorSettings.x, - }; - return ( { }); }); - it('should populate axis colors with defaults', () => { + it('should populate axis colors with empty defaults', () => { const expression = xyVisualization.toExpression( { legend: { position: Position.Bottom, isVisible: true }, @@ -158,9 +158,9 @@ describe('#toExpression', () => { frame.datasourceLayers ) as Ast; expect((expression.chain[0].arguments.axisColorSettings[0] as Ast).chain[0].arguments).toEqual({ - x: [defaultAxisLineColor], - yLeft: [defaultAxisLineColor], - yRight: [defaultAxisLineColor], + x: [], + yLeft: [], + yRight: [], }); }); diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts index 61a1a7e8f4363..0580e21fde16a 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts @@ -14,7 +14,7 @@ import { getColumnToLabelMap } from './state_helpers'; import type { ValidLayer, XYLayerConfig } from '../../common/expressions'; import { layerTypes } from '../../common'; import { hasIcon } from './xy_config_panel/reference_line_panel'; -import { defaultAxisLineColor, defaultReferenceLineColor } from './color_assignment'; +import { defaultReferenceLineColor } from './color_assignment'; export const getSortedAccessors = (datasource: DatasourcePublicAPI, layer: XYLayerConfig) => { const originalOrder = datasource @@ -250,9 +250,9 @@ export const buildExpression = ( type: 'function', function: 'lens_xy_axisColorsConfig', arguments: { - x: [state?.axisColors?.x ?? defaultAxisLineColor], - yLeft: [state?.axisColors?.yLeft ?? defaultAxisLineColor], - yRight: [state?.axisColors?.yRight ?? defaultAxisLineColor], + x: state?.axisColors?.x ? [state?.axisColors?.x] : [], + yLeft: state?.axisColors?.yLeft ? [state?.axisColors?.yLeft] : [], + yRight: state?.axisColors?.yRight ? [state?.axisColors?.yRight] : [], }, }, ], diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx index cb164fc52a317..521015a2ddcea 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx @@ -320,7 +320,7 @@ export const AxisSettingsPopover: React.FunctionComponent updateColor(axis, newColor)} color={color || defaultAxisLineColor} aria-label={axisColorLabel} diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/index.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/index.tsx index e6da482e56363..67aea244f1af0 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/index.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/index.tsx @@ -29,6 +29,7 @@ import { YAxisMode, AxesSettingsConfig, AxisExtentConfig, + AxesSettingsStringConfig, } from '../../../common/expressions'; import { isHorizontalChart, isHorizontalSeries } from '../state_helpers'; import { trackUiEvent } from '../../lens_ui_telemetry'; @@ -40,7 +41,6 @@ import { getScaleType } from '../to_expression'; import { ColorPicker } from './color_picker'; import { ReferenceLinePanel } from './reference_line_panel'; import { PalettePicker, TooltipWrapper } from '../../shared_components'; -import { defaultAxisLineColor } from '../color_assignment'; type UnwrapArray = T extends Array ? P : T; type AxesSettingsConfigKeys = keyof AxesSettingsConfig; @@ -264,19 +264,18 @@ export const XyToolbar = memo(function XyToolbar( }); }; - const axisColors = { - x: state?.axisColors?.x ?? defaultAxisLineColor, - yLeft: state?.axisColors?.yLeft ?? defaultAxisLineColor, - yRight: state?.axisColors?.yRight ?? defaultAxisLineColor, - }; - const onAxisColorChanged = (axis: AxesSettingsConfigKeys, color: string): void => { - const newAxisColors = { - ...axisColors, + let newAxisColors: AxesSettingsStringConfig | undefined = { + ...state.axisColors, ...{ [axis]: color, }, }; + + if (!Object.values(newAxisColors).some(Boolean)) { + newAxisColors = undefined; // clean up + } + setState({ ...state, axisColors: newAxisColors, diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts index 3ae587fdd52da..f4556f2c91b1e 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts @@ -20,7 +20,6 @@ import { State, XYState, visualizationTypes } from './types'; import type { SeriesType, XYLayerConfig } from '../../common/expressions'; import { layerTypes } from '../../common'; import { getIconForSeries } from './state_helpers'; -import { defaultAxisLineColor } from './color_assignment'; const columnSortOrder = { document: 0, @@ -541,11 +540,7 @@ function buildSuggestion({ yLeft: true, yRight: true, }, - axisColors: currentState?.axisColors || { - x: defaultAxisLineColor, - yLeft: defaultAxisLineColor, - yRight: defaultAxisLineColor, - }, + axisColors: currentState?.axisColors, tickLabelsVisibilitySettings: currentState?.tickLabelsVisibilitySettings || { x: true, yLeft: true, From a8f84dd3c5c204bff83c848189870293612cd3ec Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Thu, 2 Dec 2021 16:01:49 -0600 Subject: [PATCH 09/10] Remove default color from color picker --- .../lens/public/xy_visualization/color_assignment.ts | 6 ------ .../xy_config_panel/axis_settings_popover.test.tsx | 2 +- .../xy_config_panel/axis_settings_popover.tsx | 6 ++++-- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts b/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts index 9c4132f6b8467..be7f6f1d1d225 100644 --- a/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts +++ b/x-pack/plugins/lens/public/xy_visualization/color_assignment.ts @@ -9,7 +9,6 @@ import { uniq, mapValues } from 'lodash'; import type { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public'; import type { Datatable } from 'src/plugins/expressions'; import { euiLightVars } from '@kbn/ui-shared-deps-src/theme'; -import { LIGHT_THEME } from '@elastic/charts'; import type { AccessorConfig, FramePublicAPI } from '../types'; import { getColumnToLabelMap } from './state_helpers'; import { FormatFactory, LayerType, layerTypes } from '../../common'; @@ -26,11 +25,6 @@ interface LayerColorConfig { } export const defaultReferenceLineColor = euiLightVars.euiColorDarkShade; -export const { - axes: { - axisLine: { stroke: defaultAxisLineColor }, - }, -} = LIGHT_THEME; export type ColorAssignments = Record< string, diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx index 20f019493180d..1ee4da9f04ed7 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx @@ -127,7 +127,7 @@ describe('Axes Settings', () => { describe('manipulating axis color', () => { it('starts on default axis color', () => { const component = shallow(); - expect(component.find(EuiColorPicker).prop('color')).toBe(defaultAxisLineColor); + expect(component.find(EuiColorPicker).prop('color')).toBeUndefined(); }); it('reports a new color choice', () => { diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx index 521015a2ddcea..143894361a5fe 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx @@ -30,7 +30,6 @@ import { EuiIconAxisRight } from '../../assets/axis_right'; import { EuiIconAxisTop } from '../../assets/axis_top'; import { ToolbarButtonProps } from '../../../../../../src/plugins/kibana_react/public'; import { validateExtent } from '../axes_configuration'; -import { defaultAxisLineColor } from '../color_assignment'; type AxesSettingsConfigKeys = keyof AxesSettingsConfig; @@ -322,7 +321,10 @@ export const AxisSettingsPopover: React.FunctionComponent updateColor(axis, newColor)} - color={color || defaultAxisLineColor} + placeholder={i18n.translate('xpack.lens.xyChart.axisColor.auto', { + defaultMessage: 'Auto', + })} + color={color} aria-label={axisColorLabel} /> From 9129a1fcbfa3657dbdf88f830772625c172d01e0 Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Fri, 3 Dec 2021 07:58:48 -0600 Subject: [PATCH 10/10] remove old imports --- x-pack/plugins/lens/public/xy_visualization/expression.test.tsx | 1 - .../plugins/lens/public/xy_visualization/to_expression.test.ts | 2 +- .../xy_config_panel/axis_settings_popover.test.tsx | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx index 5f1da30b797c1..9826f62a6ad7e 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx @@ -48,7 +48,6 @@ import { mountWithIntl } from '@kbn/test/jest'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; import { EmptyPlaceholder } from '../shared_components/empty_placeholder'; import { XyEndzones } from './x_domain'; -import { defaultAxisLineColor } from './color_assignment'; const onClickValue = jest.fn(); const onSelectRange = jest.fn(); diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts index 9af1c9039ef92..28a456206153a 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts @@ -13,7 +13,7 @@ import { Operation } from '../types'; import { createMockDatasource, createMockFramePublicAPI } from '../mocks'; import { layerTypes } from '../../common'; import { fieldFormatsServiceMock } from '../../../../../src/plugins/field_formats/public/mocks'; -import { defaultAxisLineColor, defaultReferenceLineColor } from './color_assignment'; +import { defaultReferenceLineColor } from './color_assignment'; import { themeServiceMock } from '../../../../../src/core/public/mocks'; describe('#toExpression', () => { diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx index 1ee4da9f04ed7..cd517e17eea34 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx @@ -11,7 +11,6 @@ import { AxisSettingsPopover, AxisSettingsPopoverProps } from './axis_settings_p import { ToolbarPopover } from '../../shared_components'; import { layerTypes } from '../../../common'; import { EuiColorPicker } from '@elastic/eui'; -import { defaultAxisLineColor } from '../color_assignment'; import { EuiColorPickerOutput } from '@elastic/eui/src/components/color_picker/color_picker'; describe('Axes Settings', () => {