From aeb51adbd1b3781a1590b8ba6d9694d935800371 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 28 Jan 2022 09:24:14 +0200 Subject: [PATCH 1/6] [Lens - Viz editor] Adds titles to the heatmap axis, heatmap out of experimental --- .../expression_heatmap/public/components/heatmap_component.tsx | 2 ++ .../plugins/lens/public/heatmap_visualization/visualization.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index 7fe41ccf16a6f..7129d58611e4e 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -487,6 +487,8 @@ export const HeatmapComponent: FC = memo( xSortPredicate={xAxisColumn ? getSortPredicate(xAxisColumn) : 'dataIndex'} xAxisLabelName={xAxisColumn?.name} yAxisLabelName={yAxisColumn?.name} + xAxisTitle={xAxisColumn?.name} + yAxisTitle={yAxisColumn?.name} xAxisLabelFormatter={(v) => `${xValuesFormatter.convert(v) ?? ''}`} yAxisLabelFormatter={ yAxisColumn diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx index 82305d293fe4d..f604aef1fa8ad 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx @@ -109,7 +109,7 @@ export const getHeatmapVisualization = ({ defaultMessage: 'Heatmap', }), groupLabel: groupLabelForHeatmap, - showExperimentalBadge: true, + showExperimentalBadge: false, sortPriority: 1, }, ], From 739a94de2baee12017cc9ff3c8b13b80f48f5f78 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 28 Jan 2022 09:31:05 +0200 Subject: [PATCH 2/6] Add unit test --- .../public/components/heatmap_component.test.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx index da548c3bd1fa3..cc3c542cd24cb 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx @@ -59,16 +59,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 +165,12 @@ describe('HeatmapComponent', function () { }); }); + it('renders the axis titles', () => { + const component = shallowWithIntl(); + expect(component.find(Heatmap).prop('xAxisTitle')).toEqual('Dest'); + expect(component.find(Heatmap).prop('yAxisTitle')).toEqual('Test'); + }); + it('hides the legend if the legend isVisible args is false', async () => { const newProps = { ...wrapperProps, From 3741102c54c335cf4e0bf5ea5e29de47a2514359 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Mon, 31 Jan 2022 17:10:29 +0200 Subject: [PATCH 3/6] Add title visibility settings on canvas and lens heatmap --- .../heatmap_function.test.ts.snap | 2 + .../heatmap_function.test.ts | 2 + .../expression_functions/heatmap_grid.ts | 26 +++++ .../common/types/expression_functions.ts | 4 + .../components/heatmap_component.test.tsx | 15 +++ .../public/components/heatmap_component.tsx | 7 +- .../vis_types/heatmap/public/to_ast.ts | 2 + .../uis/models/heatmap_grid.ts | 12 +++ x-pack/plugins/canvas/i18n/ui.ts | 16 +++ .../heatmap_visualization/suggestions.test.ts | 8 ++ .../heatmap_visualization/suggestions.ts | 2 + .../toolbar_component.tsx | 85 +++++++++++++++- .../visualization.test.ts | 12 +++ .../heatmap_visualization/visualization.tsx | 10 ++ .../axis_title_settings.test.tsx | 34 +++++++ .../shared_components/axis_title_settings.tsx | 97 +++++++++++++++++++ .../lens/public/shared_components/index.ts | 1 + .../axis_settings_popover.test.tsx | 12 --- .../xy_config_panel/axis_settings_popover.tsx | 55 +++-------- 19 files changed, 342 insertions(+), 60 deletions(-) create mode 100644 x-pack/plugins/lens/public/shared_components/axis_title_settings.test.tsx create mode 100644 x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx diff --git a/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/__snapshots__/heatmap_function.test.ts.snap b/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/__snapshots__/heatmap_function.test.ts.snap index 55b7ddfcaea53..136b47468667b 100644 --- a/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/__snapshots__/heatmap_function.test.ts.snap +++ b/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/__snapshots__/heatmap_function.test.ts.snap @@ -38,7 +38,9 @@ Object { "gridConfig": Object { "isCellLabelVisible": true, "isXAxisLabelVisible": true, + "isXAxisTitleVisible": true, "isYAxisLabelVisible": true, + "isYAxisTitleVisible": true, "type": "heatmap_grid", }, "highlightInHover": false, diff --git a/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.test.ts b/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.test.ts index 0b0cdf565dc33..b43c29c200cef 100644 --- a/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.test.ts +++ b/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.test.ts @@ -33,6 +33,8 @@ describe('interpreter/functions#heatmap', () => { isCellLabelVisible: true, isYAxisLabelVisible: true, isXAxisLabelVisible: true, + isYAxisTitleVisible: true, + isXAxisTitleVisible: true, type: EXPRESSION_HEATMAP_GRID_NAME, }, palette: { diff --git a/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_grid.ts b/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_grid.ts index 7ade1793f1f6c..9d3b8f6a29ada 100644 --- a/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_grid.ts +++ b/src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_grid.ts @@ -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 { diff --git a/src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts index b99f7c13bc202..efd4e1a8b990c 100644 --- a/src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts +++ b/src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts @@ -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 & { diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx index cc3c542cd24cb..59113e5826d24 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx @@ -41,6 +41,8 @@ const args: HeatmapArguments = { isCellLabelVisible: true, isYAxisLabelVisible: true, isXAxisLabelVisible: true, + isYAxisTitleVisible: true, + isXAxisTitleVisible: true, type: 'heatmap_grid', }, palette: { @@ -171,6 +173,19 @@ describe('HeatmapComponent', function () { 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(); + 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, diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index 7129d58611e4e..3713a4b3c01df 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -439,6 +439,9 @@ export const HeatmapComponent: FC = memo( }, }; + const xAxisTitle = args.gridConfig.xTitle ?? xAxisColumn?.name; + const yAxisTitle = args.gridConfig.yTitle ?? yAxisColumn?.name; + return ( <> {showLegend !== undefined && ( @@ -487,8 +490,8 @@ export const HeatmapComponent: FC = memo( xSortPredicate={xAxisColumn ? getSortPredicate(xAxisColumn) : 'dataIndex'} xAxisLabelName={xAxisColumn?.name} yAxisLabelName={yAxisColumn?.name} - xAxisTitle={xAxisColumn?.name} - yAxisTitle={yAxisColumn?.name} + xAxisTitle={args.gridConfig.isXAxisTitleVisible ? xAxisTitle : undefined} + yAxisTitle={args.gridConfig.isYAxisTitleVisible ? yAxisTitle : undefined} xAxisLabelFormatter={(v) => `${xValuesFormatter.convert(v) ?? ''}`} yAxisLabelFormatter={ yAxisColumn diff --git a/src/plugins/vis_types/heatmap/public/to_ast.ts b/src/plugins/vis_types/heatmap/public/to_ast.ts index d4fa5c8574dfe..b0bb4b2d6de86 100644 --- a/src/plugins/vis_types/heatmap/public/to_ast.ts +++ b/src/plugins/vis_types/heatmap/public/to_ast.ts @@ -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]); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/models/heatmap_grid.ts b/x-pack/plugins/canvas/canvas_plugin_src/uis/models/heatmap_grid.ts index ed8c86b4b0f36..12c29e838f4c6 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/uis/models/heatmap_grid.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/models/heatmap_grid.ts @@ -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') { diff --git a/x-pack/plugins/canvas/i18n/ui.ts b/x-pack/plugins/canvas/i18n/ui.ts index 8029688d8a1c5..dcbaf92abbe4e 100644 --- a/x-pack/plugins/canvas/i18n/ui.ts +++ b/x-pack/plugins/canvas/i18n/ui.ts @@ -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', + }), }, }; diff --git a/x-pack/plugins/lens/public/heatmap_visualization/suggestions.test.ts b/x-pack/plugins/lens/public/heatmap_visualization/suggestions.test.ts index 1a1d7578a01e3..6ee4a000fac1d 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/suggestions.test.ts +++ b/x-pack/plugins/lens/public/heatmap_visualization/suggestions.test.ts @@ -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, diff --git a/x-pack/plugins/lens/public/heatmap_visualization/suggestions.ts b/x-pack/plugins/lens/public/heatmap_visualization/suggestions.ts index aeddb8473fa98..94b27ddcad5e2 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/suggestions.ts +++ b/x-pack/plugins/lens/public/heatmap_visualization/suggestions.ts @@ -72,6 +72,8 @@ export const getSuggestions: Visualization['getSugges isCellLabelVisible: false, isYAxisLabelVisible: true, isXAxisLabelVisible: true, + isYAxisTitleVisible: state?.gridConfig?.isYAxisTitleVisible ?? false, + isXAxisTitleVisible: state?.gridConfig?.isXAxisTitleVisible ?? false, }, }; diff --git a/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx b/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx index a4806e0849db4..dfc9a05622f97 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx +++ b/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx @@ -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 ( @@ -106,6 +113,78 @@ export const HeatmapToolbar = memo( /> + + + + + + setState({ + ...state, + gridConfig: { ...state.gridConfig, yTitle: value }, + }) + } + isAxisTitleVisible={state?.gridConfig.isYAxisTitleVisible} + toggleAxisTitleVisibility={(_, checked) => + setState({ + ...state, + gridConfig: { ...state.gridConfig, isYAxisTitleVisible: checked }, + }) + } + /> + + + + + + setState({ + ...state, + gridConfig: { ...state.gridConfig, xTitle: value }, + }) + } + isAxisTitleVisible={state?.gridConfig.isXAxisTitleVisible} + toggleAxisTitleVisibility={(_, checked) => + setState({ + ...state, + gridConfig: { ...state.gridConfig, isXAxisTitleVisible: checked }, + }) + } + /> + + + + ); } diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts b/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts index 17ee15faf8f3b..a08b12ca9ae6d 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts @@ -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: [''], }, }, ], diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx index f604aef1fa8ad..c21f738cee695 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx @@ -81,6 +81,8 @@ function getInitialState(): Omit { + 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(); + 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(); + expect(component.find('[data-test-subj="lnsxAxisTitle"]').prop('disabled')).toBe(true); + }); +}); diff --git a/x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx b/x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx new file mode 100644 index 0000000000000..97e0cd214fe86 --- /dev/null +++ b/x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx @@ -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 = ({ + axis, + axisTitle, + updateTitleState, + isAxisTitleVisible, + toggleAxisTitleVisibility, +}) => { + const { inputValue: title, handleInputChange: onTitleChange } = useDebouncedValue({ + value: axisTitle || '', + onChange: updateTitleState, + }); + return ( + <> + + + +

+ {i18n.translate('xpack.lens.shared.axisNameLabel', { + defaultMessage: 'Axis name', + })} +

+ + + + toggleAxisTitleVisibility(axis, target.checked)} + checked={isAxisTitleVisible} + /> + + + + onTitleChange(target.value)} + aria-label={i18n.translate('xpack.lens.shared.overwriteAxisTitle', { + defaultMessage: 'Overwrite axis title', + })} + /> + + + ); +}; diff --git a/x-pack/plugins/lens/public/shared_components/index.ts b/x-pack/plugins/lens/public/shared_components/index.ts index dd2d5aa7c8558..82363911040b7 100644 --- a/x-pack/plugins/lens/public/shared_components/index.ts +++ b/x-pack/plugins/lens/public/shared_components/index.ts @@ -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'; 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..81e82bd1fb904 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 @@ -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(); - 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(); - expect(component.find('[data-test-subj="lnsxAxisTitle"]').prop('disabled')).toBe(true); - }); - it('has the tickLabels switch on by default', () => { const component = shallow(); expect(component.find('[data-test-subj="lnsshowxAxisTickLabels"]').prop('checked')).toBe(true); 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..6f0adf3d33810 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 @@ -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({ - value: axisTitle || '', - onChange: updateTitleState, - }); return ( - - - -

- {i18n.translate('xpack.lens.xyChart.axisNameLabel', { - defaultMessage: 'Axis name', - })} -

- - - - toggleAxisTitleVisibility(axis, target.checked)} - checked={isAxisTitleVisible} - /> - - - - onTitleChange(target.value)} - aria-label={i18n.translate('xpack.lens.xyChart.overwriteAxisTitle', { - defaultMessage: 'Overwrite axis title', - })} + - Date: Mon, 31 Jan 2022 18:03:35 +0200 Subject: [PATCH 4/6] Fix checks --- .../lens/public/heatmap_visualization/toolbar_component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx b/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx index dfc9a05622f97..7e2f6db9b30cd 100644 --- a/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx +++ b/x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx @@ -123,7 +123,7 @@ export const HeatmapToolbar = memo( > Date: Mon, 31 Jan 2022 19:05:13 +0200 Subject: [PATCH 5/6] Fix translations --- x-pack/plugins/translations/translations/ja-JP.json | 6 +++--- x-pack/plugins/translations/translations/zh-CN.json | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index cc4035fbaf301..0f54ea98c2e6d 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -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": "内訳の基準", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 7cffdf21f4ccc..04218f5c66a37 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -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": "细分方式", From b577f5bab7dedc6c75be8dbaf4fbcb062defe931 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Tue, 1 Feb 2022 08:34:11 +0200 Subject: [PATCH 6/6] Change label from name to title --- .../lens/public/shared_components/axis_title_settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx b/x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx index 97e0cd214fe86..edecee61d7709 100644 --- a/x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx +++ b/x-pack/plugins/lens/public/shared_components/axis_title_settings.tsx @@ -60,7 +60,7 @@ export const AxisTitleSettings: React.FunctionComponent

{i18n.translate('xpack.lens.shared.axisNameLabel', { - defaultMessage: 'Axis name', + defaultMessage: 'Axis title', })}