github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens][Visualize][Canvas] Adds titles to the heatmap axis (#123992)

Browse source 
* [Lens - Viz editor] Adds titles to the heatmap axis, heatmap out of experimental

* Add unit test

* Add title visibility settings on canvas and lens heatmap

* Fix checks

* Fix translations

* Change label from name to title

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Stratoula Kalafateli 2022-02-01 10:30:37 +02:00 • committed by GitHub
parent 1eea7a32d4
commit 913eac01ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 359 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/plugins/chart_expressions/expression_heatmap/common/expression_functions/__snapshots__/heatmap_function.test.ts.snap generated
View file

@ -38,7 +38,9 @@ Object {
"gridConfig": Object {
"isCellLabelVisible": true,
"isXAxisLabelVisible": true,
"isXAxisTitleVisible": true,
"isYAxisLabelVisible": true,
"isYAxisTitleVisible": true,
"type": "heatmap_grid",
},
"highlightInHover": false,

2
src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.test.ts
View file

@ -33,6 +33,8 @@ describe('interpreter/functions#heatmap', () => {
isCellLabelVisible: true,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: true,
isXAxisTitleVisible: true,
type: EXPRESSION_HEATMAP_GRID_NAME,
},
palette: {

26
src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_grid.ts
View file

@ -52,6 +52,19 @@ export const heatmapGridConfig: ExpressionFunctionDefinition<
defaultMessage: 'Specifies whether or not the Y-axis labels are visible.',
}),
},
isYAxisTitleVisible: {
types: ['boolean'],
help: i18n.translate('expressionHeatmap.function.args.grid.isYAxisTitleVisible.help', {
defaultMessage: 'Specifies whether or not the Y-axis title is visible.',
}),
},
yTitle: {
types: ['string'],
help: i18n.translate('expressionHeatmap.function.args.grid.yTitle.help', {
defaultMessage: 'Specifies the title of the y axis',
}),
required: false,
},
// X-axis
isXAxisLabelVisible: {
types: ['boolean'],
@ -59,6 +72,19 @@ export const heatmapGridConfig: ExpressionFunctionDefinition<
defaultMessage: 'Specifies whether or not the X-axis labels are visible.',
}),
},
isXAxisTitleVisible: {
types: ['boolean'],
help: i18n.translate('expressionHeatmap.function.args.grid.isXAxisTitleVisible.help', {
defaultMessage: 'Specifies whether or not the X-axis title is visible.',
}),
},
xTitle: {
types: ['string'],
help: i18n.translate('expressionHeatmap.function.args.grid.xTitle.help', {
defaultMessage: 'Specifies the title of the x axis',
}),
required: false,
},
},
fn(input, args) {
return {

4
src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts
View file

@ -52,8 +52,12 @@ export interface HeatmapGridConfig {
isCellLabelVisible: boolean;
// Y-axis
isYAxisLabelVisible: boolean;
isYAxisTitleVisible: boolean;
yTitle?: string;
// X-axis
isXAxisLabelVisible: boolean;
isXAxisTitleVisible: boolean;
xTitle?: string;
}
export type HeatmapGridConfigResult = HeatmapGridConfig & {

27
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx
View file

@ -41,6 +41,8 @@ const args: HeatmapArguments = {
isCellLabelVisible: true,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: true,
isXAxisTitleVisible: true,
type: 'heatmap_grid',
},
palette: {
@ -59,16 +61,18 @@ const args: HeatmapArguments = {
highlightInHover: false,
xAccessor: 'col-1-2',
valueAccessor: 'col-0-1',
yAccessor: 'col-2-3',
};
const data: Datatable = {
type: 'datatable',
rows: [
{ 'col-0-1': 0, 'col-1-2': 'a' },
{ 'col-0-1': 148, 'col-1-2': 'b' },
{ 'col-0-1': 0, 'col-1-2': 'a', 'col-2-3': 'd' },
{ 'col-0-1': 148, 'col-1-2': 'b', 'col-2-3': 'c' },
],
columns: [
{ id: 'col-0-1', name: 'Count', meta: { type: 'number' } },
{ id: 'col-1-2', name: 'Dest', meta: { type: 'string' } },
{ id: 'col-2-3', name: 'Test', meta: { type: 'string' } },
],
};
@ -163,6 +167,25 @@ describe('HeatmapComponent', function () {
});
});
it('renders the axis titles', () => {
const component = shallowWithIntl(<HeatmapComponent {...wrapperProps} />);
expect(component.find(Heatmap).prop('xAxisTitle')).toEqual('Dest');
expect(component.find(Heatmap).prop('yAxisTitle')).toEqual('Test');
});
it('renders custom axis titles if given', () => {
const newProps = {
...wrapperProps,
args: {
...wrapperProps.args,
gridConfig: { ...wrapperProps.args.gridConfig, xTitle: 'test1', yTitle: 'test2' },
},
} as unknown as HeatmapRenderProps;
const component = shallowWithIntl(<HeatmapComponent {...newProps} />);
expect(component.find(Heatmap).prop('xAxisTitle')).toEqual('test1');
expect(component.find(Heatmap).prop('yAxisTitle')).toEqual('test2');
});
it('hides the legend if the legend isVisible args is false', async () => {
const newProps = {
...wrapperProps,

5
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
View file

@ -439,6 +439,9 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
},
};
const xAxisTitle = args.gridConfig.xTitle ?? xAxisColumn?.name;
const yAxisTitle = args.gridConfig.yTitle ?? yAxisColumn?.name;
return (
<>
{showLegend !== undefined && (
@ -487,6 +490,8 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
xSortPredicate={xAxisColumn ? getSortPredicate(xAxisColumn) : 'dataIndex'}
xAxisLabelName={xAxisColumn?.name}
yAxisLabelName={yAxisColumn?.name}
xAxisTitle={args.gridConfig.isXAxisTitleVisible ? xAxisTitle : undefined}
yAxisTitle={args.gridConfig.isYAxisTitleVisible ? yAxisTitle : undefined}
xAxisLabelFormatter={(v) => `${xValuesFormatter.convert(v) ?? ''}`}
yAxisLabelFormatter={
yAxisColumn

2
src/plugins/vis_types/heatmap/public/to_ast.ts
View file

@ -40,6 +40,8 @@ const prepareGrid = (params: HeatmapVisParams) => {
const gridConfig = buildExpressionFunction('heatmap_grid', {
isCellLabelVisible: params.valueAxes?.[0].labels.show ?? false,
isXAxisLabelVisible: true,
isYAxisTitleVisible: true,
isXAxisTitleVisible: true,
});
return buildExpression([gridConfig]);

12
x-pack/plugins/canvas/canvas_plugin_src/uis/models/heatmap_grid.ts
View file

@ -40,12 +40,24 @@ export const heatmapGrid = () => ({
help: strings.getIsYAxisLabelVisibleHelp(),
argType: 'toggle',
},
{
name: 'isYAxisTitleVisible',
displayName: strings.getIsYAxisTitleVisibleDisplayName(),
help: strings.getIsYAxisTitleVisibleHelp(),
argType: 'toggle',
},
{
name: 'isXAxisLabelVisible',
displayName: strings.getIsXAxisLabelVisibleDisplayName(),
help: strings.getIsXAxisLabelVisibleHelp(),
argType: 'toggle',
},
{
name: 'isXAxisTitleVisible',
displayName: strings.getIsXAxisTitleVisibleDisplayName(),
help: strings.getIsXAxisTitleVisibleHelp(),
argType: 'toggle',
},
],
resolve({ context }: any): ResolvedColumns {
if (getState(context) !== 'ready') {

16
x-pack/plugins/canvas/i18n/ui.ts
View file

@ -692,6 +692,14 @@ export const ModelStrings = {
i18n.translate('xpack.canvas.uis.models.heatmap_grid.args.isYAxisLabelVisibleLabel', {
defaultMessage: 'Specifies whether or not the Y-axis labels are visible',
}),
getIsYAxisTitleVisibleDisplayName: () =>
i18n.translate('xpack.canvas.uis.models.heatmap_grid.args.isYAxisTitleVisibleTile', {
defaultMessage: 'Show Y-axis title',
}),
getIsYAxisTitleVisibleHelp: () =>
i18n.translate('xpack.canvas.uis.models.heatmap_grid.args.isYAxisTitleVisibleLabel', {
defaultMessage: 'Specifies whether or not the Y-axis title is visible',
}),
getIsXAxisLabelVisibleDisplayName: () =>
i18n.translate('xpack.canvas.uis.models.heatmap_grid.args.isXAxisLabelVisibleTile', {
defaultMessage: 'Show X-axis labels',
@ -700,6 +708,14 @@ export const ModelStrings = {
i18n.translate('xpack.canvas.uis.models.heatmap_grid.args.isXAxisLabelVisibleLabel', {
defaultMessage: 'Specifies whether or not the X-axis labels are visible',
}),
getIsXAxisTitleVisibleDisplayName: () =>
i18n.translate('xpack.canvas.uis.models.heatmap_grid.args.isXAxisTitleVisibleTile', {
defaultMessage: 'Show X-axis title',
}),
getIsXAxisTitleVisibleHelp: () =>
i18n.translate('xpack.canvas.uis.models.heatmap_grid.args.isXAxisTitleVisibleLabel', {
defaultMessage: 'Specifies whether or not the X-axis title is visible',
}),
},
};

8
x-pack/plugins/lens/public/heatmap_visualization/suggestions.test.ts
View file

@ -182,6 +182,8 @@ describe('heatmap suggestions', () => {
isCellLabelVisible: false,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: false,
isXAxisTitleVisible: false,
},
legend: {
isVisible: true,
@ -233,6 +235,8 @@ describe('heatmap suggestions', () => {
isCellLabelVisible: false,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: false,
isXAxisTitleVisible: false,
},
legend: {
isVisible: true,
@ -297,6 +301,8 @@ describe('heatmap suggestions', () => {
isCellLabelVisible: false,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: false,
isXAxisTitleVisible: false,
},
legend: {
isVisible: true,
@ -370,6 +376,8 @@ describe('heatmap suggestions', () => {
isCellLabelVisible: false,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: false,
isXAxisTitleVisible: false,
},
legend: {
isVisible: true,

2
x-pack/plugins/lens/public/heatmap_visualization/suggestions.ts
View file

@ -72,6 +72,8 @@ export const getSuggestions: Visualization<HeatmapVisualizationState>['getSugges
isCellLabelVisible: false,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: state?.gridConfig?.isYAxisTitleVisible ?? false,
isXAxisTitleVisible: state?.gridConfig?.isXAxisTitleVisible ?? false,
},
};

85
x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx
View file

@ -6,11 +6,19 @@
*/
import React, { memo } from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
import { Position } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import type { VisualizationToolbarProps } from '../types';
import { LegendSettingsPopover, ToolbarPopover, ValueLabelsSettings } from '../shared_components';
import {
LegendSettingsPopover,
ToolbarPopover,
ValueLabelsSettings,
AxisTitleSettings,
TooltipWrapper,
} from '../shared_components';
import { EuiIconAxisLeft } from '../assets/axis_left';
import { EuiIconAxisBottom } from '../assets/axis_bottom';
import type { HeatmapVisualizationState } from './types';
import { getDefaultVisualValuesForLayer } from '../shared_components/datasource_default_values';
@ -40,7 +48,6 @@ export const HeatmapToolbar = memo(
state,
frame.datasourceLayers
).truncateText;
return (
<EuiFlexGroup gutterSize="m" justifyContent="spaceBetween" responsive={false}>
<EuiFlexItem>
@ -106,6 +113,78 @@ export const HeatmapToolbar = memo(
/>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup gutterSize="none" responsive={false}>
<TooltipWrapper
tooltipContent={i18n.translate('xpack.lens.heatmap.verticalAxisDisabledHelpText', {
defaultMessage: 'This setting only applies when vertical axis is enabled.',
})}
condition={!Boolean(state?.yAccessor)}
>
<ToolbarPopover
title={i18n.translate('xpack.lens.heatmap.verticalAxisLabel', {
defaultMessage: 'Vertical axis',
})}
type={EuiIconAxisLeft as IconType}
groupPosition="left"
isDisabled={!Boolean(state?.yAccessor)}
buttonDataTestSubj="lnsHeatmapVerticalAxisButton"
>
<AxisTitleSettings
axis="yLeft"
axisTitle={state?.gridConfig.yTitle}
updateTitleState={(value) =>
setState({
...state,
gridConfig: { ...state.gridConfig, yTitle: value },
})
}
isAxisTitleVisible={state?.gridConfig.isYAxisTitleVisible}
toggleAxisTitleVisibility={(_, checked) =>
setState({
...state,
gridConfig: { ...state.gridConfig, isYAxisTitleVisible: checked },
})
}
/>
</ToolbarPopover>
</TooltipWrapper>
<TooltipWrapper
tooltipContent={i18n.translate('xpack.lens.heatmap.horizontalAxisDisabledHelpText', {
defaultMessage: 'This setting only applies when horizontal axis is enabled.',
})}
condition={!Boolean(state?.xAccessor)}
>
<ToolbarPopover
title={i18n.translate('xpack.lens.heatmap.horizontalAxisLabel', {
defaultMessage: 'Horizontal axis',
})}
type={EuiIconAxisBottom as IconType}
groupPosition="center"
isDisabled={!Boolean(state?.xAccessor)}
buttonDataTestSubj="lnsHeatmapHorizontalAxisButton"
>
<AxisTitleSettings
axis="x"
axisTitle={state?.gridConfig.xTitle}
updateTitleState={(value) =>
setState({
...state,
gridConfig: { ...state.gridConfig, xTitle: value },
})
}
isAxisTitleVisible={state?.gridConfig.isXAxisTitleVisible}
toggleAxisTitleVisibility={(_, checked) =>
setState({
...state,
gridConfig: { ...state.gridConfig, isXAxisTitleVisible: checked },
})
}
/>
</ToolbarPopover>
</TooltipWrapper>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
);
}

12
x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts
View file

@ -41,6 +41,8 @@ function exampleState(): HeatmapVisualizationState {
isCellLabelVisible: false,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: true,
isXAxisTitleVisible: true,
},
shape: CHART_SHAPES.HEATMAP,
};
@ -74,6 +76,8 @@ describe('heatmap', () => {
isCellLabelVisible: false,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: true,
isXAxisTitleVisible: true,
},
});
});
@ -430,12 +434,16 @@ describe('heatmap', () => {
// grid
strokeWidth: [],
strokeColor: [],
xTitle: [],
yTitle: [],
// cells
isCellLabelVisible: [false],
// Y-axis
isYAxisLabelVisible: [true],
isYAxisTitleVisible: [true],
// X-axis
isXAxisLabelVisible: [true],
isXAxisTitleVisible: [true],
},
},
],
@ -547,8 +555,12 @@ describe('heatmap', () => {
isCellLabelVisible: [false],
// Y-axis
isYAxisLabelVisible: [false],
isYAxisTitleVisible: [true],
// X-axis
isXAxisLabelVisible: [false],
isXAxisTitleVisible: [true],
xTitle: [''],
yTitle: [''],
},
},
],

12
x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
View file

@ -81,6 +81,8 @@ function getInitialState(): Omit<HeatmapVisualizationState, 'layerId' | 'layerTy
isCellLabelVisible: false,
isYAxisLabelVisible: true,
isXAxisLabelVisible: true,
isYAxisTitleVisible: true,
isXAxisTitleVisible: true,
},
};
}
@ -109,7 +111,7 @@ export const getHeatmapVisualization = ({
defaultMessage: 'Heatmap',
}),
groupLabel: groupLabelForHeatmap,
showExperimentalBadge: true,
showExperimentalBadge: false,
sortPriority: 1,
},
],
@ -362,10 +364,14 @@ export const getHeatmapVisualization = ({
isCellLabelVisible: [state.gridConfig.isCellLabelVisible],
// Y-axis
isYAxisLabelVisible: [state.gridConfig.isYAxisLabelVisible],
isYAxisTitleVisible: [state.gridConfig.isYAxisTitleVisible ?? false],
yTitle: state.gridConfig.yTitle ? [state.gridConfig.yTitle] : [],
// X-axis
isXAxisLabelVisible: state.gridConfig.isXAxisLabelVisible
? [state.gridConfig.isXAxisLabelVisible]
: [],
isXAxisTitleVisible: [state.gridConfig.isXAxisTitleVisible ?? false],
xTitle: state.gridConfig.xTitle ? [state.gridConfig.xTitle] : [],
},
},
],
@ -435,8 +441,12 @@ export const getHeatmapVisualization = ({
isCellLabelVisible: [false],
// Y-axis
isYAxisLabelVisible: [false],
isYAxisTitleVisible: [state.gridConfig.isYAxisTitleVisible],
yTitle: [state.gridConfig.yTitle ?? ''],
// X-axis
isXAxisLabelVisible: [false],
isXAxisTitleVisible: [state.gridConfig.isXAxisTitleVisible],
xTitle: [state.gridConfig.xTitle ?? ''],
},
},
],

34
x-pack/plugins/lens/public/shared_components/axis_title_settings.test.tsx Normal file
View file

@ -0,0 +1,34 @@
/*
* 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 { shallowWithIntl as shallow } from '@kbn/test/jest';
import { AxisTitleSettings, AxisTitleSettingsProps } from './axis_title_settings';
describe('Axes Title settings', () => {
let props: AxisTitleSettingsProps;
beforeEach(() => {
props = {
axisTitle: 'My custom X axis title',
axis: 'x',
isAxisTitleVisible: true,
toggleAxisTitleVisibility: jest.fn(),
updateTitleState: jest.fn(),
};
});
it('should show the axes title on the corresponding input text', () => {
const component = shallow(<AxisTitleSettings {...props} />);
expect(component.find('[data-test-subj="lnsxAxisTitle"]').prop('value')).toBe(
'My custom X axis title'
);
});
it('should disable the input text if the switch is off', () => {
const component = shallow(<AxisTitleSettings {...props} isAxisTitleVisible={false} />);
expect(component.find('[data-test-subj="lnsxAxisTitle"]').prop('disabled')).toBe(true);
});
});

97
x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx Normal file
View file

@ -0,0 +1,97 @@
/*
* 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 {
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiSwitch,
EuiSpacer,
EuiFieldText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { AxesSettingsConfig } from '../../common/expressions';
import { useDebouncedValue } from './';
type AxesSettingsConfigKeys = keyof AxesSettingsConfig;
export interface AxisTitleSettingsProps {
/**
* Determines the axis
*/
axis: AxesSettingsConfigKeys;
/**
* Determines the axis title
*/
axisTitle: string | undefined;
/**
* Callback to axis title change
*/
updateTitleState: (value: string) => void;
/**
* Determines if the title visibility switch is on and the input text is disabled
*/
isAxisTitleVisible: boolean;
/**
* Toggles the axis title visibility
*/
toggleAxisTitleVisibility: (axis: AxesSettingsConfigKeys, checked: boolean) => void;
}
export const AxisTitleSettings: React.FunctionComponent<AxisTitleSettingsProps> = ({
axis,
axisTitle,
updateTitleState,
isAxisTitleVisible,
toggleAxisTitleVisibility,
}) => {
const { inputValue: title, handleInputChange: onTitleChange } = useDebouncedValue<string>({
value: axisTitle || '',
onChange: updateTitleState,
});
return (
<>
<EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiText size="xs">
<h4>
{i18n.translate('xpack.lens.shared.axisNameLabel', {
defaultMessage: 'Axis title',
})}
</h4>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSwitch
compressed
data-test-subj={`lnsShowAxisTitleSwitch__${axis}`}
label={i18n.translate('xpack.lens.shared.ShowAxisTitleLabel', {
defaultMessage: 'Show',
})}
onChange={({ target }) => toggleAxisTitleVisibility(axis, target.checked)}
checked={isAxisTitleVisible}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
<EuiFieldText
data-test-subj={`lns${axis}AxisTitle`}
compressed
placeholder={i18n.translate('xpack.lens.shared.overwriteAxisTitle', {
defaultMessage: 'Overwrite axis title',
})}
value={title || ''}
disabled={!isAxisTitleVisible || false}
onChange={({ target }) => onTitleChange(target.value)}
aria-label={i18n.translate('xpack.lens.shared.overwriteAxisTitle', {
defaultMessage: 'Overwrite axis title',
})}
/>
<EuiSpacer size="m" />
</>
);
};

1
x-pack/plugins/lens/public/shared_components/index.ts
View file

@ -15,5 +15,6 @@ export { useDebouncedValue } from './debounced_value';
export * from './helpers';
export { LegendActionPopover } from './legend_action_popover';
export { ValueLabelsSettings } from './value_labels_settings';
export { AxisTitleSettings } from './axis_title_settings';
export * from './static_header';
export * from './vis_label';

12
x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.test.tsx
View file

@ -46,18 +46,6 @@ describe('Axes Settings', () => {
expect(component.find(ToolbarPopover).prop('isDisabled')).toEqual(true);
});
it('should show the axes title on the corresponding input text', () => {
const component = shallow(<AxisSettingsPopover {...props} />);
expect(component.find('[data-test-subj="lnsxAxisTitle"]').prop('value')).toBe(
'My custom X axis title'
);
});
it('should disable the input text if the switch is off', () => {
const component = shallow(<AxisSettingsPopover {...props} isAxisTitleVisible={false} />);
expect(component.find('[data-test-subj="lnsxAxisTitle"]').prop('disabled')).toBe(true);
});
it('has the tickLabels switch on by default', () => {
const component = shallow(<AxisSettingsPopover {...props} />);
expect(component.find('[data-test-subj="lnsshowxAxisTickLabels"]').prop('checked')).toBe(true);

55
x-pack/plugins/lens/public/xy_visualization/xy_config_panel/axis_settings_popover.tsx
View file

@ -9,10 +9,8 @@ import React, { useEffect, useState } from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiSwitch,
EuiSpacer,
EuiFieldText,
IconType,
EuiFormRow,
EuiButtonGroup,
@ -21,7 +19,12 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { XYLayerConfig, AxesSettingsConfig, AxisExtentConfig } from '../../../common/expressions';
import { ToolbarPopover, useDebouncedValue, TooltipWrapper } from '../../shared_components';
import {
ToolbarPopover,
useDebouncedValue,
TooltipWrapper,
AxisTitleSettings,
} from '../../shared_components';
import { isHorizontalChart } from '../state_helpers';
import { EuiIconAxisBottom } from '../../assets/axis_bottom';
import { EuiIconAxisLeft } from '../../assets/axis_left';
@ -251,10 +254,6 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
setExtent,
]);
const { inputValue: title, handleInputChange: onTitleChange } = useDebouncedValue<string>({
value: axisTitle || '',
onChange: updateTitleState,
});
return (
<ToolbarPopover
title={config.popoverTitle}
@ -263,43 +262,13 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
isDisabled={isDisabled}
buttonDataTestSubj={config.buttonDataTestSubj}
>
<EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiText size="xs">
<h4>
{i18n.translate('xpack.lens.xyChart.axisNameLabel', {
defaultMessage: 'Axis name',
})}
</h4>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSwitch
compressed
data-test-subj={`lnsShowAxisTitleSwitch__${axis}`}
label={i18n.translate('xpack.lens.xyChart.ShowAxisTitleLabel', {
defaultMessage: 'Show',
})}
onChange={({ target }) => toggleAxisTitleVisibility(axis, target.checked)}
checked={isAxisTitleVisible}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
<EuiFieldText
data-test-subj={`lns${axis}AxisTitle`}
compressed
placeholder={i18n.translate('xpack.lens.xyChart.overwriteAxisTitle', {
defaultMessage: 'Overwrite axis title',
})}
value={title || ''}
disabled={!isAxisTitleVisible || false}
onChange={({ target }) => onTitleChange(target.value)}
aria-label={i18n.translate('xpack.lens.xyChart.overwriteAxisTitle', {
defaultMessage: 'Overwrite axis title',
})}
<AxisTitleSettings
axis={axis}
axisTitle={axisTitle}
updateTitleState={updateTitleState}
isAxisTitleVisible={isAxisTitleVisible}
toggleAxisTitleVisibility={toggleAxisTitleVisibility}
/>
<EuiSpacer size="m" />
<EuiSwitch
compressed
data-test-subj={`lnsshow${axis}AxisGridlines`}

6
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -749,7 +749,7 @@
"xpack.lens.xyChart.axisExtent.disabledDataBoundsMessage": "折れ線グラフのみをデータ境界に合わせることができます",
"xpack.lens.xyChart.axisExtent.full": "完全",
"xpack.lens.xyChart.axisExtent.label": "境界",
"xpack.lens.xyChart.axisNameLabel": "軸名",
"xpack.lens.shared.axisNameLabel": "軸名",
"xpack.lens.xyChart.axisOrientation.angled": "傾斜",
"xpack.lens.xyChart.axisOrientation.horizontal": "横",
"xpack.lens.xyChart.axisOrientation.label": "向き",
@ -805,7 +805,7 @@
"xpack.lens.xyChart.missingValuesLabel": "欠測値",
"xpack.lens.xyChart.missingValuesLabelHelpText": "デフォルトでは、Lensではデータのギャップが表示されません。ギャップを埋めるには、選択します。",
"xpack.lens.xyChart.nestUnderRoot": "データセット全体",
"xpack.lens.xyChart.overwriteAxisTitle": "軸タイトルを上書き",
"xpack.lens.shared.overwriteAxisTitle": "軸タイトルを上書き",
"xpack.lens.xyChart.position.help": "凡例の配置を指定します。",
"xpack.lens.xyChart.referenceLine.alertIconLabel": "アラート",
"xpack.lens.xyChart.referenceLine.asteriskIconLabel": "アスタリスク",
@ -837,7 +837,7 @@
"xpack.lens.xyChart.seriesColor.auto": "自動",
"xpack.lens.xyChart.seriesColor.label": "系列色",
"xpack.lens.xyChart.shouldTruncate.help": "凡例項目が切り捨てられるかどうかを指定します",
"xpack.lens.xyChart.ShowAxisTitleLabel": "表示",
"xpack.lens.shared.ShowAxisTitleLabel": "表示",
"xpack.lens.xyChart.showEnzones": "部分データマーカーを表示",
"xpack.lens.xyChart.showSingleSeries.help": "エントリが1件の凡例を表示するかどうかを指定します",
"xpack.lens.xyChart.splitSeries": "内訳の基準",

6
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -761,7 +761,7 @@
"xpack.lens.xyChart.axisExtent.disabledDataBoundsMessage": "仅折线图可适应数据边界",
"xpack.lens.xyChart.axisExtent.full": "实线",
"xpack.lens.xyChart.axisExtent.label": "边界",
"xpack.lens.xyChart.axisNameLabel": "轴名称",
"xpack.lens.shared.axisNameLabel": "轴名称",
"xpack.lens.xyChart.axisOrientation.angled": "带角度",
"xpack.lens.xyChart.axisOrientation.horizontal": "水平",
"xpack.lens.xyChart.axisOrientation.label": "方向",
@ -817,7 +817,7 @@
"xpack.lens.xyChart.missingValuesLabel": "缺少的值",
"xpack.lens.xyChart.missingValuesLabelHelpText": "默认情况下，Lens 隐藏数据中的缺口。要填充缺口，请进行选择。",
"xpack.lens.xyChart.nestUnderRoot": "整个数据集",
"xpack.lens.xyChart.overwriteAxisTitle": "覆盖轴标题",
"xpack.lens.shared.overwriteAxisTitle": "覆盖轴标题",
"xpack.lens.xyChart.position.help": "指定图例位置。",
"xpack.lens.xyChart.referenceLine.alertIconLabel": "告警",
"xpack.lens.xyChart.referenceLine.asteriskIconLabel": "星号",
@ -849,7 +849,7 @@
"xpack.lens.xyChart.seriesColor.auto": "自动",
"xpack.lens.xyChart.seriesColor.label": "系列颜色",
"xpack.lens.xyChart.shouldTruncate.help": "指定是否将截断图例项",
"xpack.lens.xyChart.ShowAxisTitleLabel": "显示",
"xpack.lens.shared.ShowAxisTitleLabel": "显示",
"xpack.lens.xyChart.showEnzones": "显示部分数据标记",
"xpack.lens.xyChart.showSingleSeries.help": "指定是否应显示只包含一个条目的图例",
"xpack.lens.xyChart.splitSeries": "细分方式",