From 13889b82d85f17662db52d7c2f5dabc2c458ab73 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Wed, 16 Sep 2020 18:05:25 +0200 Subject: [PATCH 01/11] start adding sections --- x-pack/plugins/lens/public/types.ts | 1 + .../lens/public/xy_visualization/types.ts | 30 +++++++++++++++++++ .../translations/translations/ja-JP.json | 7 ----- .../translations/translations/zh-CN.json | 7 ----- 4 files changed, 31 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index edb787d9ec1a1..a48543eb6ed21 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -419,6 +419,7 @@ export interface VisualizationType { id: string; icon: IconType; label: string; + sectionLabel: string; } export interface Visualization { diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 185fa20f169ee..6f9a0e88083a5 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -417,6 +417,9 @@ export const visualizationTypes: VisualizationType[] = [ id: 'bar', icon: LensIconChartBar, label: i18n.translate('xpack.lens.xyVisualization.barLabel', { + defaultMessage: 'Vertical', + }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { defaultMessage: 'Bar', }), }, @@ -426,6 +429,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', { defaultMessage: 'Horizontal bar', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { + defaultMessage: 'Bar', + }), }, { id: 'bar_stacked', @@ -433,6 +439,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', { defaultMessage: 'Stacked bar', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { + defaultMessage: 'Bar', + }), }, { id: 'bar_percentage_stacked', @@ -440,6 +449,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', { defaultMessage: 'Bar percentage', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { + defaultMessage: 'Bar', + }), }, { id: 'bar_horizontal_stacked', @@ -447,6 +459,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', { defaultMessage: 'Stacked horizontal bar', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { + defaultMessage: 'Bar', + }), }, { id: 'bar_horizontal_percentage_stacked', @@ -454,6 +469,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', { defaultMessage: 'Horizontal bar percentage', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { + defaultMessage: 'Bar', + }), }, { id: 'area', @@ -461,6 +479,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.areaLabel', { defaultMessage: 'Area', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.areaSectionLabel', { + defaultMessage: 'Area', + }), }, { id: 'area_stacked', @@ -468,6 +489,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', { defaultMessage: 'Stacked area', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.areaSectionLabel', { + defaultMessage: 'Area', + }), }, { id: 'area_percentage_stacked', @@ -475,6 +499,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', { defaultMessage: 'Area percentage', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.areaSectionLabel', { + defaultMessage: 'Area', + }), }, { id: 'line', @@ -482,5 +509,8 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.lineLabel', { defaultMessage: 'Line', }), + sectionLabel: i18n.translate('xpack.lens.xyVisualization.lineSectionLabel', { + defaultMessage: 'Line', + }), }, ]; diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index e54d6739c0600..253c4a03eaf9d 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -9729,17 +9729,10 @@ "xpack.lens.xySuggestions.stackedChartTitle": "スタック", "xpack.lens.xySuggestions.unstackedChartTitle": "スタックが解除されました", "xpack.lens.xySuggestions.yAxixConjunctionSign": " と ", - "xpack.lens.xyVisualization.areaLabel": "エリア", - "xpack.lens.xyVisualization.barHorizontalLabel": "横棒", - "xpack.lens.xyVisualization.barLabel": "バー", "xpack.lens.xyVisualization.chartLabel": "{label} チャート", - "xpack.lens.xyVisualization.lineLabel": "折れ線", "xpack.lens.xyVisualization.mixedBarHorizontalLabel": "ミックスされた横棒", "xpack.lens.xyVisualization.mixedLabel": "ミックスされた XY", "xpack.lens.xyVisualization.noDataLabel": "結果が見つかりませんでした", - "xpack.lens.xyVisualization.stackedAreaLabel": "スタックされたエリア", - "xpack.lens.xyVisualization.stackedBarHorizontalLabel": "スタックされた横棒", - "xpack.lens.xyVisualization.stackedBarLabel": "スタックされたバー", "xpack.lens.xyVisualization.xyLabel": "XY", "xpack.licenseMgmt.app.checkingPermissionsErrorMessage": "パーミッションの確認中にエラーが発生", "xpack.licenseMgmt.app.deniedPermissionDescription": "ライセンス管理を使用するには、{permissionType}権限が必要です", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 4c8ccd56c1c01..c891fa3efbd66 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -9735,17 +9735,10 @@ "xpack.lens.xySuggestions.stackedChartTitle": "堆叠", "xpack.lens.xySuggestions.unstackedChartTitle": "非堆叠", "xpack.lens.xySuggestions.yAxixConjunctionSign": " & ", - "xpack.lens.xyVisualization.areaLabel": "面积图", - "xpack.lens.xyVisualization.barHorizontalLabel": "水平条形图", - "xpack.lens.xyVisualization.barLabel": "条形图", "xpack.lens.xyVisualization.chartLabel": "{label} 图表", - "xpack.lens.xyVisualization.lineLabel": "折线图", "xpack.lens.xyVisualization.mixedBarHorizontalLabel": "混合水平条形图", "xpack.lens.xyVisualization.mixedLabel": "混合 XY", "xpack.lens.xyVisualization.noDataLabel": "找不到结果", - "xpack.lens.xyVisualization.stackedAreaLabel": "堆叠面积图", - "xpack.lens.xyVisualization.stackedBarHorizontalLabel": "堆叠水平条形图", - "xpack.lens.xyVisualization.stackedBarLabel": "堆叠条形图", "xpack.lens.xyVisualization.xyLabel": "XY", "xpack.licenseMgmt.app.checkingPermissionsErrorMessage": "检查权限时出错", "xpack.licenseMgmt.app.deniedPermissionDescription": "要使用许可管理，必须具有{permissionType}权限。", From ef1cf7248d45b9b9f6315954b8a65a5022850a98 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Thu, 17 Sep 2020 15:56:23 +0200 Subject: [PATCH 02/11] implement search in chart switcher --- .../datatable_visualization/visualization.tsx | 6 + .../config_panel/layer_panel.test.tsx | 4 + .../editor_frame/editor_frame.test.tsx | 6 + .../workspace_panel/chart_switch.scss | 11 ++ .../workspace_panel/chart_switch.test.tsx | 37 +++++ .../workspace_panel/chart_switch.tsx | 141 ++++++++++++------ .../public/editor_frame_service/mocks.tsx | 2 + .../metric_visualization.tsx | 6 + .../pie_visualization/pie_visualization.tsx | 10 ++ x-pack/plugins/lens/public/types.ts | 1 + .../lens/public/xy_visualization/types.ts | 41 ++++- .../xy_visualization/xy_visualization.test.ts | 12 +- .../xy_visualization/xy_visualization.tsx | 8 +- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 15 files changed, 226 insertions(+), 61 deletions(-) diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx index 5b462f44b3dd5..e96b736df56aa 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx @@ -35,6 +35,12 @@ export const datatableVisualization: Visualization label: i18n.translate('xpack.lens.datatable.label', { defaultMessage: 'Data table', }), + shortLabel: i18n.translate('xpack.lens.datatable.label', { + defaultMessage: 'Data table', + }), + sectionLabel: i18n.translate('xpack.lens.datatable.sectionLabel', { + defaultMessage: 'Text', + }), }, ], diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index a9e2d6dc696ab..764d44f215c08 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -72,6 +72,8 @@ describe('LayerPanel', () => { icon: 'empty', id: 'testVis', label: 'TEST1', + shortLabel: 'TEST1', + sectionLabel: 'TEST', }, ], }; @@ -84,6 +86,8 @@ describe('LayerPanel', () => { icon: 'empty', id: 'testVis2', label: 'TEST2', + shortLabel: 'TEST2', + sectionLabel: 'TEST', }, ], }; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx index e628ea0675a8d..cecaffca342ca 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx @@ -78,6 +78,8 @@ describe('editor_frame', () => { icon: 'empty', id: 'testVis', label: 'TEST1', + shortLabel: 'TEST1', + sectionLabel: 'TEST', }, ], }; @@ -89,6 +91,8 @@ describe('editor_frame', () => { icon: 'empty', id: 'testVis2', label: 'TEST2', + shortLabel: 'TEST2', + sectionLabel: 'TEST', }, ], }; @@ -1317,6 +1321,8 @@ describe('editor_frame', () => { icon: 'empty', id: 'testVis3', label: 'TEST3', + shortLabel: 'TEST3', + sectionLabel: 'TEST', }, ], getSuggestions: () => [ diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss index f84191e1bfb1a..7af0641d68184 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss @@ -1,3 +1,14 @@ +.lnsChartSwitch__chartContainer { + @include euiScrollBar; + max-height: 500px; + overflow: auto; +} + +.lnsChartSwitch__sectionTitle { + font-weight: bold; + margin-top: $euiSizeM; +} + .lnsChartSwitch__header { > * { display: flex; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx index c78de9d140f76..e58eef190be8d 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx @@ -28,6 +28,8 @@ describe('chart_switch', () => { icon: 'empty', id, label: `Label ${id}`, + shortLabel: `Label ${id}`, + sectionLabel: 'My section', }, ], initialize: jest.fn((_frame, state?: unknown) => { @@ -68,16 +70,22 @@ describe('chart_switch', () => { icon: 'empty', id: 'subvisC1', label: 'C1', + shortLabel: 'C1', + sectionLabel: 'My section', }, { icon: 'empty', id: 'subvisC2', label: 'C2', + shortLabel: 'C2', + sectionLabel: 'My section', }, { icon: 'empty', id: 'subvisC3', label: 'C3', + shortLabel: 'C3', + sectionLabel: 'My other section', }, ], getVisualizationTypeId: jest.fn((state) => state.type), @@ -646,4 +654,33 @@ describe('chart_switch', () => { expect(allDisplayed).toBeTruthy(); }); + + it('should show visualizations in respective sections', () => { + const component = mount( + + ); + + showFlyout(component); + + const section1 = component.find(`[aria-labelledby="lnsChartSection-My section"]`); + + const allDisplayed = ['visA', 'visB', 'subvisC1', 'subvisC2'].every( + (subType) => section1.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).length > 0 + ); + + expect(allDisplayed).toBeTruthy(); + + const section2 = component.find(`[aria-labelledby="lnsChartSection-My other section"]`); + expect( + section2.find('[data-test-subj="lnsChartSwitchPopover_subvisC3"]').length + ).toBeGreaterThan(0); + }); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx index f4526cac39c8a..36b339abec38b 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx @@ -12,9 +12,14 @@ import { EuiPopoverTitle, EuiKeyPadMenu, EuiKeyPadMenuItem, + EuiFieldSearch, + EuiFlexGroup, + EuiFlexItem, + EuiText, } from '@elastic/eui'; -import { flatten } from 'lodash'; +import { flatten, groupBy } from 'lodash'; import { i18n } from '@kbn/i18n'; +import { EuiCallOut } from '@elastic/eui'; import { Visualization, FramePublicAPI, Datasource } from '../../../types'; import { Action } from '../state_management'; import { getSuggestions, switchToSuggestion, Suggestion } from '../suggestion_helpers'; @@ -173,21 +178,32 @@ export function ChartSwitch(props: Props) { }; } - const visualizationTypes = useMemo( + const [searchTerm, setSearchTerm] = useState(''); + + const visualizationTypeGroups = useMemo( () => flyoutOpen && - flatten( - Object.values(props.visualizationMap).map((v) => - v.visualizationTypes.map((t) => ({ - visualizationId: v.id, - ...t, - icon: t.icon, - })) + groupBy( + flatten( + Object.values(props.visualizationMap).map((v) => + v.visualizationTypes.map((t) => ({ + visualizationId: v.id, + ...t, + icon: t.icon, + })) + ) ) - ).map((visualizationType) => ({ - ...visualizationType, - selection: getSelection(visualizationType.visualizationId, visualizationType.id), - })), + .filter( + (visualizationType) => + visualizationType.shortLabel.toLowerCase().includes(searchTerm.toLowerCase()) || + visualizationType.sectionLabel.toLowerCase().includes(searchTerm.toLowerCase()) + ) + .map((visualizationType) => ({ + ...visualizationType, + selection: getSelection(visualizationType.visualizationId, visualizationType.id), + })), + 'sectionLabel' + ), // eslint-disable-next-line react-hooks/exhaustive-deps [ flyoutOpen, @@ -195,6 +211,7 @@ export function ChartSwitch(props: Props) { props.framePublicAPI, props.visualizationId, props.visualizationState, + searchTerm, ] ); @@ -219,38 +236,76 @@ export function ChartSwitch(props: Props) { anchorPosition="downLeft" > - {i18n.translate('xpack.lens.configPanel.selectVisualization', { - defaultMessage: 'Select a visualization', - })} + + + {i18n.translate('xpack.lens.configPanel.chartType', { + defaultMessage: 'Chart type', + })} + + + setSearchTerm(e.target.value)} + /> + + - - {(visualizationTypes || []).map((v) => ( - {v.label}} - role="menuitem" - data-test-subj={`lnsChartSwitchPopover_${v.id}`} - onClick={() => commitSelection(v.selection)} - betaBadgeLabel={ - v.selection.dataLoss !== 'nothing' - ? i18n.translate('xpack.lens.chartSwitch.dataLossLabel', { - defaultMessage: 'Data loss', - }) - : undefined - } - betaBadgeTooltipContent={ - v.selection.dataLoss !== 'nothing' - ? i18n.translate('xpack.lens.chartSwitch.dataLossDescription', { - defaultMessage: 'Switching to this chart will lose some of the configuration', - }) - : undefined - } - betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined} - > - - +
+ {Object.entries(visualizationTypeGroups || {}).map(([section, visualizationTypes]) => ( +
+ + {section} + + + {visualizationTypes.map((v) => ( + {v.shortLabel}} + role="menuitem" + data-test-subj={`lnsChartSwitchPopover_${v.id}`} + onClick={() => commitSelection(v.selection)} + betaBadgeLabel={ + v.selection.dataLoss !== 'nothing' + ? i18n.translate('xpack.lens.chartSwitch.dataLossLabel', { + defaultMessage: 'Data loss', + }) + : undefined + } + betaBadgeTooltipContent={ + v.selection.dataLoss !== 'nothing' + ? i18n.translate('xpack.lens.chartSwitch.dataLossDescription', { + defaultMessage: + 'Switching to this chart will lose some of the configuration', + }) + : undefined + } + betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined} + > + + + ))} + +
))} - + {searchTerm && Object.keys(visualizationTypeGroups).length === 0 && ( + + )} +
); diff --git a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx index 86b137851d9bd..6a55fb7e3181a 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx @@ -26,6 +26,8 @@ export function createMockVisualization(): jest.Mocked { icon: 'empty', id: 'TEST_VIS', label: 'TEST', + shortLabel: 'TEST', + sectionLabel: 'TEST', }, ], getVisualizationTypeId: jest.fn((_state) => 'empty'), diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx index 72c07bed1acb2..a1811aa880529 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx @@ -49,6 +49,12 @@ export const metricVisualization: Visualization = { label: i18n.translate('xpack.lens.metric.label', { defaultMessage: 'Metric', }), + shortLabel: i18n.translate('xpack.lens.metric.label', { + defaultMessage: 'Metric', + }), + sectionLabel: i18n.translate('xpack.lens.metric.sectionLabel', { + defaultMessage: 'Text', + }), }, ], diff --git a/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx b/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx index dd1b36e00ebb9..481b8bf62713e 100644 --- a/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx @@ -31,6 +31,10 @@ const bucketedOperations = (op: OperationMetadata) => op.isBucketed; const numberMetricOperations = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number'; +const sectionLabel = i18n.translate('xpack.lens.pieVisualization.sectionLabel', { + defaultMessage: 'Partition', +}); + export const pieVisualization: Visualization = { id: 'lnsPie', @@ -39,16 +43,22 @@ export const pieVisualization: Visualization = { id: 'donut', icon: CHART_NAMES.donut.icon, label: CHART_NAMES.donut.label, + shortLabel: CHART_NAMES.donut.label, + sectionLabel, }, { id: 'pie', icon: CHART_NAMES.pie.icon, label: CHART_NAMES.pie.label, + shortLabel: CHART_NAMES.pie.label, + sectionLabel, }, { id: 'treemap', icon: CHART_NAMES.treemap.icon, label: CHART_NAMES.treemap.label, + shortLabel: CHART_NAMES.treemap.label, + sectionLabel, }, ], diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index a48543eb6ed21..7fb2144ab23a2 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -419,6 +419,7 @@ export interface VisualizationType { id: string; icon: IconType; label: string; + shortLabel: string; sectionLabel: string; } diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 6f9a0e88083a5..13b57ba88b8ff 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -416,9 +416,12 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'bar', icon: LensIconChartBar, - label: i18n.translate('xpack.lens.xyVisualization.barLabel', { + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortBarLabel', { defaultMessage: 'Vertical', }), + label: i18n.translate('xpack.lens.xyVisualization.barLabel', { + defaultMessage: 'Bar', + }), sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { defaultMessage: 'Bar', }), @@ -426,8 +429,11 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'bar_horizontal', icon: LensIconChartBarHorizontal, + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortBarHorizontalLabel', { + defaultMessage: 'Horizontal', + }), label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', { - defaultMessage: 'Horizontal bar', + defaultMessage: 'H. bar', }), sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { defaultMessage: 'Bar', @@ -436,6 +442,9 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'bar_stacked', icon: LensIconChartBarStacked, + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedBarLabel', { + defaultMessage: 'Stacked', + }), label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', { defaultMessage: 'Stacked bar', }), @@ -446,6 +455,9 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'bar_percentage_stacked', icon: LensIconChartBarPercentage, + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedPercentageBarLabel', { + defaultMessage: 'Percentage', + }), label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', { defaultMessage: 'Bar percentage', }), @@ -456,8 +468,11 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'bar_horizontal_stacked', icon: LensIconChartBarHorizontalStacked, + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedBarHorizontalLabel', { + defaultMessage: 'Horizontal stacked', + }), label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', { - defaultMessage: 'Stacked horizontal bar', + defaultMessage: 'H. Stacked bar', }), sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { defaultMessage: 'Bar', @@ -466,8 +481,14 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'bar_horizontal_percentage_stacked', icon: LensIconChartBarHorizontalPercentage, + shortLabel: i18n.translate( + 'xpack.lens.xyVisualization.shortStackedPercentageBarHorizontalLabel', + { + defaultMessage: 'Horizontal percentage', + } + ), label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', { - defaultMessage: 'Horizontal bar percentage', + defaultMessage: 'H. bar percentage', }), sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { defaultMessage: 'Bar', @@ -476,6 +497,9 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'area', icon: LensIconChartArea, + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortAreaLabel', { + defaultMessage: 'Vertical', + }), label: i18n.translate('xpack.lens.xyVisualization.areaLabel', { defaultMessage: 'Area', }), @@ -486,6 +510,9 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'area_stacked', icon: LensIconChartAreaStacked, + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedAreaLabel', { + defaultMessage: 'Stacked', + }), label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', { defaultMessage: 'Stacked area', }), @@ -496,6 +523,9 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'area_percentage_stacked', icon: LensIconChartAreaPercentage, + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedPercentageAreaLabel', { + defaultMessage: 'Percentage', + }), label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', { defaultMessage: 'Area percentage', }), @@ -506,6 +536,9 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'line', icon: LensIconChartLine, + shortLabel: i18n.translate('xpack.lens.xyVisualization.shortLineLabel', { + defaultMessage: 'Vertical', + }), label: i18n.translate('xpack.lens.xyVisualization.lineLabel', { defaultMessage: 'Line', }), diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts index 7cf1830cdc2fa..a04ae3d7f13bb 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts @@ -44,14 +44,14 @@ describe('xy_visualization', () => { it('should show mixed xy chart when multilple series types', () => { const desc = xyVisualization.getDescription(mixedState('bar', 'line')); - expect(desc.label).toEqual('Mixed XY chart'); + expect(desc.label).toEqual('Mixed XY'); }); it('should show the preferredSeriesType if there are no layers', () => { const desc = xyVisualization.getDescription(mixedState()); expect(desc.icon).toEqual(LensIconChartBar); - expect(desc.label).toEqual('Bar chart'); + expect(desc.label).toEqual('Bar'); }); it('should show mixed horizontal bar chart when multiple horizontal bar types', () => { @@ -59,23 +59,23 @@ describe('xy_visualization', () => { mixedState('bar_horizontal', 'bar_horizontal_stacked') ); - expect(desc.label).toEqual('Mixed horizontal bar chart'); + expect(desc.label).toEqual('Mixed H. bar'); }); it('should show bar chart when bar only', () => { const desc = xyVisualization.getDescription(mixedState('bar_horizontal', 'bar_horizontal')); - expect(desc.label).toEqual('Horizontal bar chart'); + expect(desc.label).toEqual('H. bar'); }); it('should show the chart description if not mixed', () => { expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area chart'); expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line chart'); expect(xyVisualization.getDescription(mixedState('area_stacked')).label).toEqual( - 'Stacked area chart' + 'Stacked area' ); expect(xyVisualization.getDescription(mixedState('bar_horizontal_stacked')).label).toEqual( - 'Stacked horizontal bar chart' + 'Stacked H. bar' ); }); }); diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx index 0b8f7e2ed0f11..76c5a51cb7168 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx @@ -53,7 +53,7 @@ function getDescription(state?: State) { return { icon: LensIconChartBarHorizontal, label: i18n.translate('xpack.lens.xyVisualization.mixedBarHorizontalLabel', { - defaultMessage: 'Mixed horizontal bar', + defaultMessage: 'Mixed H. bar', }), }; } @@ -118,14 +118,10 @@ export const xyVisualization: Visualization = { getDescription(state) { const { icon, label } = getDescription(state); - const chartLabel = i18n.translate('xpack.lens.xyVisualization.chartLabel', { - defaultMessage: '{label} chart', - values: { label }, - }); return { icon: icon || defaultIcon, - label: chartLabel, + label, }; }, diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 253c4a03eaf9d..2696a1673f1b2 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -9729,7 +9729,6 @@ "xpack.lens.xySuggestions.stackedChartTitle": "スタック", "xpack.lens.xySuggestions.unstackedChartTitle": "スタックが解除されました", "xpack.lens.xySuggestions.yAxixConjunctionSign": " と ", - "xpack.lens.xyVisualization.chartLabel": "{label} チャート", "xpack.lens.xyVisualization.mixedBarHorizontalLabel": "ミックスされた横棒", "xpack.lens.xyVisualization.mixedLabel": "ミックスされた XY", "xpack.lens.xyVisualization.noDataLabel": "結果が見つかりませんでした", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index c891fa3efbd66..191e736941fc2 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -9735,7 +9735,6 @@ "xpack.lens.xySuggestions.stackedChartTitle": "堆叠", "xpack.lens.xySuggestions.unstackedChartTitle": "非堆叠", "xpack.lens.xySuggestions.yAxixConjunctionSign": " & ", - "xpack.lens.xyVisualization.chartLabel": "{label} 图表", "xpack.lens.xyVisualization.mixedBarHorizontalLabel": "混合水平条形图", "xpack.lens.xyVisualization.mixedLabel": "混合 XY", "xpack.lens.xyVisualization.noDataLabel": "找不到结果", From 793dd9e28c366e1c327b65c810c2810b73a0ac39 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Thu, 17 Sep 2020 15:57:17 +0200 Subject: [PATCH 03/11] fix test --- .../lens/public/xy_visualization/xy_visualization.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts index a04ae3d7f13bb..fb4c5c522eb58 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts @@ -69,8 +69,8 @@ describe('xy_visualization', () => { }); it('should show the chart description if not mixed', () => { - expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area chart'); - expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line chart'); + expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area'); + expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line'); expect(xyVisualization.getDescription(mixedState('area_stacked')).label).toEqual( 'Stacked area' ); From 2ce476fcce56d8660cf49b9824107cb89f2117e9 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Fri, 18 Sep 2020 11:13:11 +0200 Subject: [PATCH 04/11] fix test --- .../lens/public/xy_visualization/xy_visualization.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts index fb4c5c522eb58..ef665f3ec25a0 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts @@ -75,7 +75,7 @@ describe('xy_visualization', () => { 'Stacked area' ); expect(xyVisualization.getDescription(mixedState('bar_horizontal_stacked')).label).toEqual( - 'Stacked H. bar' + 'H. Stacked bar' ); }); }); From 2c0d90d4f65005ee08541f22e50ffc3848b8f10d Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 21 Sep 2020 12:44:28 +0200 Subject: [PATCH 05/11] add unchanged translations back --- x-pack/plugins/translations/translations/ja-JP.json | 5 +++++ x-pack/plugins/translations/translations/zh-CN.json | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index e09529da1a051..86836ee46f9a9 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -9704,9 +9704,14 @@ "xpack.lens.xySuggestions.stackedChartTitle": "スタック", "xpack.lens.xySuggestions.unstackedChartTitle": "スタックが解除されました", "xpack.lens.xySuggestions.yAxixConjunctionSign": " と ", + "xpack.lens.xyVisualization.areaLabel": "エリア", + "xpack.lens.xyVisualization.barLabel": "バー", + "xpack.lens.xyVisualization.lineLabel": "折れ線", "xpack.lens.xyVisualization.mixedBarHorizontalLabel": "ミックスされた横棒", "xpack.lens.xyVisualization.mixedLabel": "ミックスされた XY", "xpack.lens.xyVisualization.noDataLabel": "結果が見つかりませんでした", + "xpack.lens.xyVisualization.stackedAreaLabel": "スタックされたエリア", + "xpack.lens.xyVisualization.stackedBarLabel": "スタックされたバー", "xpack.lens.xyVisualization.xyLabel": "XY", "xpack.licenseMgmt.app.checkingPermissionsErrorMessage": "パーミッションの確認中にエラーが発生", "xpack.licenseMgmt.app.deniedPermissionDescription": "ライセンス管理を使用するには、{permissionType}権限が必要です", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index e974ff09af11f..fd8a370c97458 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -9710,9 +9710,14 @@ "xpack.lens.xySuggestions.stackedChartTitle": "堆叠", "xpack.lens.xySuggestions.unstackedChartTitle": "非堆叠", "xpack.lens.xySuggestions.yAxixConjunctionSign": " & ", + "xpack.lens.xyVisualization.areaLabel": "面积图", + "xpack.lens.xyVisualization.barLabel": "条形图", + "xpack.lens.xyVisualization.lineLabel": "折线图", "xpack.lens.xyVisualization.mixedBarHorizontalLabel": "混合水平条形图", "xpack.lens.xyVisualization.mixedLabel": "混合 XY", "xpack.lens.xyVisualization.noDataLabel": "找不到结果", + "xpack.lens.xyVisualization.stackedAreaLabel": "堆叠面积图", + "xpack.lens.xyVisualization.stackedBarLabel": "堆叠条形图", "xpack.lens.xyVisualization.xyLabel": "XY", "xpack.licenseMgmt.app.checkingPermissionsErrorMessage": "检查权限时出错", "xpack.licenseMgmt.app.deniedPermissionDescription": "要使用许可管理，必须具有{permissionType}权限。", From 94275770bf5b4b0174dea8623de5f2b46083a16f Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Wed, 23 Sep 2020 16:24:17 +0200 Subject: [PATCH 06/11] remove section headers --- .../editor_frame/workspace_panel/chart_switch.scss | 11 ++--------- .../editor_frame/workspace_panel/chart_switch.tsx | 12 ++---------- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss index 7af0641d68184..d785231d24cdf 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss @@ -1,12 +1,5 @@ -.lnsChartSwitch__chartContainer { - @include euiScrollBar; - max-height: 500px; - overflow: auto; -} - -.lnsChartSwitch__sectionTitle { - font-weight: bold; - margin-top: $euiSizeM; +.lnsChartSwitch__chartSection + .lnsChartSwitch__chartSection { + margin-bottom: $euiSizeS; } .lnsChartSwitch__header { diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx index 36b339abec38b..0322d927e099a 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx @@ -15,7 +15,6 @@ import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, - EuiText, } from '@elastic/eui'; import { flatten, groupBy } from 'lodash'; import { i18n } from '@kbn/i18n'; @@ -252,16 +251,9 @@ export function ChartSwitch(props: Props) { -
+
{Object.entries(visualizationTypeGroups || {}).map(([section, visualizationTypes]) => ( -
- - {section} - +
{visualizationTypes.map((v) => ( Date: Tue, 29 Sep 2020 16:58:48 +0200 Subject: [PATCH 07/11] remove sections and short labels --- .../datatable_visualization/visualization.tsx | 6 - .../config_panel/layer_panel.test.tsx | 4 - .../editor_frame/editor_frame.test.tsx | 6 - .../workspace_panel/chart_switch.scss | 4 + .../workspace_panel/chart_switch.test.tsx | 37 ------ .../workspace_panel/chart_switch.tsx | 124 ++++++++---------- .../public/editor_frame_service/mocks.tsx | 2 - .../metric_visualization.tsx | 6 - .../pie_visualization/pie_visualization.tsx | 10 -- x-pack/plugins/lens/public/types.ts | 2 - .../lens/public/xy_visualization/types.ts | 63 --------- 11 files changed, 59 insertions(+), 205 deletions(-) diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx index e96b736df56aa..5b462f44b3dd5 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx @@ -35,12 +35,6 @@ export const datatableVisualization: Visualization label: i18n.translate('xpack.lens.datatable.label', { defaultMessage: 'Data table', }), - shortLabel: i18n.translate('xpack.lens.datatable.label', { - defaultMessage: 'Data table', - }), - sectionLabel: i18n.translate('xpack.lens.datatable.sectionLabel', { - defaultMessage: 'Text', - }), }, ], diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index 764d44f215c08..a9e2d6dc696ab 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -72,8 +72,6 @@ describe('LayerPanel', () => { icon: 'empty', id: 'testVis', label: 'TEST1', - shortLabel: 'TEST1', - sectionLabel: 'TEST', }, ], }; @@ -86,8 +84,6 @@ describe('LayerPanel', () => { icon: 'empty', id: 'testVis2', label: 'TEST2', - shortLabel: 'TEST2', - sectionLabel: 'TEST', }, ], }; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx index cecaffca342ca..e628ea0675a8d 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx @@ -78,8 +78,6 @@ describe('editor_frame', () => { icon: 'empty', id: 'testVis', label: 'TEST1', - shortLabel: 'TEST1', - sectionLabel: 'TEST', }, ], }; @@ -91,8 +89,6 @@ describe('editor_frame', () => { icon: 'empty', id: 'testVis2', label: 'TEST2', - shortLabel: 'TEST2', - sectionLabel: 'TEST', }, ], }; @@ -1321,8 +1317,6 @@ describe('editor_frame', () => { icon: 'empty', id: 'testVis3', label: 'TEST3', - shortLabel: 'TEST3', - sectionLabel: 'TEST', }, ], getSuggestions: () => [ diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss index d785231d24cdf..3bebff0228fb5 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss @@ -20,3 +20,7 @@ img.lnsChartSwitch__chartIcon { // sass-lint:disable-line no-qualifying-elements // The large icons aren't square so max out the width to fill the height width: 100%; } + +.lnsChartSwitch__search { + width: 4 * $euiSizeXXL; +} \ No newline at end of file diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx index e58eef190be8d..c78de9d140f76 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx @@ -28,8 +28,6 @@ describe('chart_switch', () => { icon: 'empty', id, label: `Label ${id}`, - shortLabel: `Label ${id}`, - sectionLabel: 'My section', }, ], initialize: jest.fn((_frame, state?: unknown) => { @@ -70,22 +68,16 @@ describe('chart_switch', () => { icon: 'empty', id: 'subvisC1', label: 'C1', - shortLabel: 'C1', - sectionLabel: 'My section', }, { icon: 'empty', id: 'subvisC2', label: 'C2', - shortLabel: 'C2', - sectionLabel: 'My section', }, { icon: 'empty', id: 'subvisC3', label: 'C3', - shortLabel: 'C3', - sectionLabel: 'My other section', }, ], getVisualizationTypeId: jest.fn((state) => state.type), @@ -654,33 +646,4 @@ describe('chart_switch', () => { expect(allDisplayed).toBeTruthy(); }); - - it('should show visualizations in respective sections', () => { - const component = mount( - - ); - - showFlyout(component); - - const section1 = component.find(`[aria-labelledby="lnsChartSection-My section"]`); - - const allDisplayed = ['visA', 'visB', 'subvisC1', 'subvisC2'].every( - (subType) => section1.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).length > 0 - ); - - expect(allDisplayed).toBeTruthy(); - - const section2 = component.find(`[aria-labelledby="lnsChartSection-My other section"]`); - expect( - section2.find('[data-test-subj="lnsChartSwitchPopover_subvisC3"]').length - ).toBeGreaterThan(0); - }); }); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx index 0322d927e099a..a23085f715680 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx @@ -16,7 +16,7 @@ import { EuiFlexGroup, EuiFlexItem, } from '@elastic/eui'; -import { flatten, groupBy } from 'lodash'; +import { flatten } from 'lodash'; import { i18n } from '@kbn/i18n'; import { EuiCallOut } from '@elastic/eui'; import { Visualization, FramePublicAPI, Datasource } from '../../../types'; @@ -179,30 +179,25 @@ export function ChartSwitch(props: Props) { const [searchTerm, setSearchTerm] = useState(''); - const visualizationTypeGroups = useMemo( + const visualizationTypes = useMemo( () => flyoutOpen && - groupBy( - flatten( - Object.values(props.visualizationMap).map((v) => - v.visualizationTypes.map((t) => ({ - visualizationId: v.id, - ...t, - icon: t.icon, - })) - ) + flatten( + Object.values(props.visualizationMap).map((v) => + v.visualizationTypes.map((t) => ({ + visualizationId: v.id, + ...t, + icon: t.icon, + })) ) - .filter( - (visualizationType) => - visualizationType.shortLabel.toLowerCase().includes(searchTerm.toLowerCase()) || - visualizationType.sectionLabel.toLowerCase().includes(searchTerm.toLowerCase()) - ) - .map((visualizationType) => ({ - ...visualizationType, - selection: getSelection(visualizationType.visualizationId, visualizationType.id), - })), - 'sectionLabel' - ), + ) + .filter((visualizationType) => + visualizationType.label.toLowerCase().includes(searchTerm.toLowerCase()) + ) + .map((visualizationType) => ({ + ...visualizationType, + selection: getSelection(visualizationType.visualizationId, visualizationType.id), + })), // eslint-disable-next-line react-hooks/exhaustive-deps [ flyoutOpen, @@ -241,9 +236,11 @@ export function ChartSwitch(props: Props) { defaultMessage: 'Chart type', })} - + setSearchTerm(e.target.value)} @@ -251,53 +248,42 @@ export function ChartSwitch(props: Props) { -
- {Object.entries(visualizationTypeGroups || {}).map(([section, visualizationTypes]) => ( -
- - {visualizationTypes.map((v) => ( - {v.shortLabel}} - role="menuitem" - data-test-subj={`lnsChartSwitchPopover_${v.id}`} - onClick={() => commitSelection(v.selection)} - betaBadgeLabel={ - v.selection.dataLoss !== 'nothing' - ? i18n.translate('xpack.lens.chartSwitch.dataLossLabel', { - defaultMessage: 'Data loss', - }) - : undefined - } - betaBadgeTooltipContent={ - v.selection.dataLoss !== 'nothing' - ? i18n.translate('xpack.lens.chartSwitch.dataLossDescription', { - defaultMessage: - 'Switching to this chart will lose some of the configuration', - }) - : undefined - } - betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined} - > - - - ))} - -
+ + {(visualizationTypes || []).map((v) => ( + {v.label}} + role="menuitem" + data-test-subj={`lnsChartSwitchPopover_${v.id}`} + onClick={() => commitSelection(v.selection)} + betaBadgeLabel={ + v.selection.dataLoss !== 'nothing' + ? i18n.translate('xpack.lens.chartSwitch.dataLossLabel', { + defaultMessage: 'Data loss', + }) + : undefined + } + betaBadgeTooltipContent={ + v.selection.dataLoss !== 'nothing' + ? i18n.translate('xpack.lens.chartSwitch.dataLossDescription', { + defaultMessage: 'Switching to this chart will lose some of the configuration', + }) + : undefined + } + betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined} + > + + ))} - {searchTerm && Object.keys(visualizationTypeGroups).length === 0 && ( - - )} -
+ + {searchTerm && (visualizationTypes || []).length === 0 && ( + + )} ); diff --git a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx index 6a55fb7e3181a..86b137851d9bd 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx @@ -26,8 +26,6 @@ export function createMockVisualization(): jest.Mocked { icon: 'empty', id: 'TEST_VIS', label: 'TEST', - shortLabel: 'TEST', - sectionLabel: 'TEST', }, ], getVisualizationTypeId: jest.fn((_state) => 'empty'), diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx index a1811aa880529..72c07bed1acb2 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx @@ -49,12 +49,6 @@ export const metricVisualization: Visualization = { label: i18n.translate('xpack.lens.metric.label', { defaultMessage: 'Metric', }), - shortLabel: i18n.translate('xpack.lens.metric.label', { - defaultMessage: 'Metric', - }), - sectionLabel: i18n.translate('xpack.lens.metric.sectionLabel', { - defaultMessage: 'Text', - }), }, ], diff --git a/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx b/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx index 481b8bf62713e..dd1b36e00ebb9 100644 --- a/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx @@ -31,10 +31,6 @@ const bucketedOperations = (op: OperationMetadata) => op.isBucketed; const numberMetricOperations = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number'; -const sectionLabel = i18n.translate('xpack.lens.pieVisualization.sectionLabel', { - defaultMessage: 'Partition', -}); - export const pieVisualization: Visualization = { id: 'lnsPie', @@ -43,22 +39,16 @@ export const pieVisualization: Visualization = { id: 'donut', icon: CHART_NAMES.donut.icon, label: CHART_NAMES.donut.label, - shortLabel: CHART_NAMES.donut.label, - sectionLabel, }, { id: 'pie', icon: CHART_NAMES.pie.icon, label: CHART_NAMES.pie.label, - shortLabel: CHART_NAMES.pie.label, - sectionLabel, }, { id: 'treemap', icon: CHART_NAMES.treemap.icon, label: CHART_NAMES.treemap.label, - shortLabel: CHART_NAMES.treemap.label, - sectionLabel, }, ], diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 7fb2144ab23a2..edb787d9ec1a1 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -419,8 +419,6 @@ export interface VisualizationType { id: string; icon: IconType; label: string; - shortLabel: string; - sectionLabel: string; } export interface Visualization { diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 13b57ba88b8ff..0d45409de9530 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -416,134 +416,71 @@ export const visualizationTypes: VisualizationType[] = [ { id: 'bar', icon: LensIconChartBar, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortBarLabel', { - defaultMessage: 'Vertical', - }), label: i18n.translate('xpack.lens.xyVisualization.barLabel', { defaultMessage: 'Bar', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { - defaultMessage: 'Bar', - }), }, { id: 'bar_horizontal', icon: LensIconChartBarHorizontal, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortBarHorizontalLabel', { - defaultMessage: 'Horizontal', - }), label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', { defaultMessage: 'H. bar', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { - defaultMessage: 'Bar', - }), }, { id: 'bar_stacked', icon: LensIconChartBarStacked, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedBarLabel', { - defaultMessage: 'Stacked', - }), label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', { defaultMessage: 'Stacked bar', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { - defaultMessage: 'Bar', - }), }, { id: 'bar_percentage_stacked', icon: LensIconChartBarPercentage, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedPercentageBarLabel', { - defaultMessage: 'Percentage', - }), label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', { defaultMessage: 'Bar percentage', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { - defaultMessage: 'Bar', - }), }, { id: 'bar_horizontal_stacked', icon: LensIconChartBarHorizontalStacked, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedBarHorizontalLabel', { - defaultMessage: 'Horizontal stacked', - }), label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', { defaultMessage: 'H. Stacked bar', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { - defaultMessage: 'Bar', - }), }, { id: 'bar_horizontal_percentage_stacked', icon: LensIconChartBarHorizontalPercentage, - shortLabel: i18n.translate( - 'xpack.lens.xyVisualization.shortStackedPercentageBarHorizontalLabel', - { - defaultMessage: 'Horizontal percentage', - } - ), label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', { defaultMessage: 'H. bar percentage', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.barSectionLabel', { - defaultMessage: 'Bar', - }), }, { id: 'area', icon: LensIconChartArea, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortAreaLabel', { - defaultMessage: 'Vertical', - }), label: i18n.translate('xpack.lens.xyVisualization.areaLabel', { defaultMessage: 'Area', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.areaSectionLabel', { - defaultMessage: 'Area', - }), }, { id: 'area_stacked', icon: LensIconChartAreaStacked, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedAreaLabel', { - defaultMessage: 'Stacked', - }), label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', { defaultMessage: 'Stacked area', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.areaSectionLabel', { - defaultMessage: 'Area', - }), }, { id: 'area_percentage_stacked', icon: LensIconChartAreaPercentage, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortStackedPercentageAreaLabel', { - defaultMessage: 'Percentage', - }), label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', { defaultMessage: 'Area percentage', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.areaSectionLabel', { - defaultMessage: 'Area', - }), }, { id: 'line', icon: LensIconChartLine, - shortLabel: i18n.translate('xpack.lens.xyVisualization.shortLineLabel', { - defaultMessage: 'Vertical', - }), label: i18n.translate('xpack.lens.xyVisualization.lineLabel', { defaultMessage: 'Line', }), - sectionLabel: i18n.translate('xpack.lens.xyVisualization.lineSectionLabel', { - defaultMessage: 'Line', - }), }, ]; From c201d10c66f96b219781a62b0a5c27119c152560 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Thu, 1 Oct 2020 10:25:00 +0200 Subject: [PATCH 08/11] adjust labels --- x-pack/plugins/lens/public/xy_visualization/types.ts | 8 ++++---- .../lens/public/xy_visualization/visualization.test.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 0d45409de9530..771067d7d9863 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -424,7 +424,7 @@ export const visualizationTypes: VisualizationType[] = [ id: 'bar_horizontal', icon: LensIconChartBarHorizontal, label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', { - defaultMessage: 'H. bar', + defaultMessage: 'H. Bar', }), }, { @@ -438,7 +438,7 @@ export const visualizationTypes: VisualizationType[] = [ id: 'bar_percentage_stacked', icon: LensIconChartBarPercentage, label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', { - defaultMessage: 'Bar percentage', + defaultMessage: 'Percentage bar', }), }, { @@ -452,7 +452,7 @@ export const visualizationTypes: VisualizationType[] = [ id: 'bar_horizontal_percentage_stacked', icon: LensIconChartBarHorizontalPercentage, label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', { - defaultMessage: 'H. bar percentage', + defaultMessage: 'H. Percentage bar', }), }, { @@ -473,7 +473,7 @@ export const visualizationTypes: VisualizationType[] = [ id: 'area_percentage_stacked', icon: LensIconChartAreaPercentage, label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', { - defaultMessage: 'Area percentage', + defaultMessage: 'Percentage area', }), }, { diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts index 458b3c8e0d16b..d51b8c195c92c 100644 --- a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts @@ -65,7 +65,7 @@ describe('xy_visualization', () => { it('should show bar chart when bar only', () => { const desc = xyVisualization.getDescription(mixedState('bar_horizontal', 'bar_horizontal')); - expect(desc.label).toEqual('H. bar'); + expect(desc.label).toEqual('H. Bar'); }); it('should show the chart description if not mixed', () => { From 831c385293fd76afb250d042ca908d45520c1d6e Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 5 Oct 2020 12:55:18 +0200 Subject: [PATCH 09/11] add label for searching --- .../workspace_panel/chart_switch.tsx | 7 +++++-- x-pack/plugins/lens/public/types.ts | 16 ++++++++++++++++ .../lens/public/xy_visualization/types.ts | 12 ++++++++++++ 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx index a23085f715680..1cb18cebfeb8d 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx @@ -191,8 +191,11 @@ export function ChartSwitch(props: Props) { })) ) ) - .filter((visualizationType) => - visualizationType.label.toLowerCase().includes(searchTerm.toLowerCase()) + .filter( + (visualizationType) => + visualizationType.label.toLowerCase().includes(searchTerm.toLowerCase()) || + (visualizationType.searchLabel && + visualizationType.searchLabel.toLowerCase().includes(searchTerm.toLowerCase())) ) .map((visualizationType) => ({ ...visualizationType, diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index e5e8a645dd0e8..a40725048fd73 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -419,10 +419,26 @@ export interface FramePublicAPI { removeLayers: (layerIds: string[]) => void; } +/** + * A visualization type advertized to the user in the chart switcher + */ export interface VisualizationType { + /** + * Unique id of the visualization type within the visualization defining it + */ id: string; + /** + * Icon used in the chart switcher + */ icon: IconType; + /** + * Visible ;abel used in the chart switcher and above the workspace panel in collapsed state + */ label: string; + /** + * Optional label used in chart type search if chart switcher is expanded + */ + searchLabel?: string; } export interface Visualization { diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 3958193c8fb6f..f4b6fea6c7690 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -428,6 +428,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', { defaultMessage: 'H. Bar', }), + searchLabel: i18n.translate('xpack.lens.xyVisualization.barHorizontalSearchLabel', { + defaultMessage: 'Horizontal bar', + }), }, { id: 'bar_stacked', @@ -449,6 +452,9 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', { defaultMessage: 'H. Stacked bar', }), + searchLabel: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalSearchLabel', { + defaultMessage: 'Horizontal stacked bar', + }), }, { id: 'bar_horizontal_percentage_stacked', @@ -456,6 +462,12 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', { defaultMessage: 'H. Percentage bar', }), + searchLabel: i18n.translate( + 'xpack.lens.xyVisualization.stackedPercentageBarHorizontalSearchLabel', + { + defaultMessage: 'Horizontal percentage bar', + } + ), }, { id: 'area', From d2c4dfff55a64e406f8be0b518b3a9defe22b689 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 5 Oct 2020 13:00:58 +0200 Subject: [PATCH 10/11] rename to full label --- .../editor_frame/workspace_panel/chart_switch.tsx | 5 +++-- x-pack/plugins/lens/public/types.ts | 4 ++-- x-pack/plugins/lens/public/xy_visualization/types.ts | 8 ++++---- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx index 1cb18cebfeb8d..ddefb545ce4a6 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx @@ -194,8 +194,8 @@ export function ChartSwitch(props: Props) { .filter( (visualizationType) => visualizationType.label.toLowerCase().includes(searchTerm.toLowerCase()) || - (visualizationType.searchLabel && - visualizationType.searchLabel.toLowerCase().includes(searchTerm.toLowerCase())) + (visualizationType.fullLabel && + visualizationType.fullLabel.toLowerCase().includes(searchTerm.toLowerCase())) ) .map((visualizationType) => ({ ...visualizationType, @@ -256,6 +256,7 @@ export function ChartSwitch(props: Props) { {v.label}} + title={v.fullLabel} role="menuitem" data-test-subj={`lnsChartSwitchPopover_${v.id}`} onClick={() => commitSelection(v.selection)} diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index a40725048fd73..7d5671a9034fe 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -436,9 +436,9 @@ export interface VisualizationType { */ label: string; /** - * Optional label used in chart type search if chart switcher is expanded + * Optional label used in chart type search if chart switcher is expanded and for tooltips */ - searchLabel?: string; + fullLabel?: string; } export interface Visualization { diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index f4b6fea6c7690..abee787888787 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -428,7 +428,7 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', { defaultMessage: 'H. Bar', }), - searchLabel: i18n.translate('xpack.lens.xyVisualization.barHorizontalSearchLabel', { + fullLabel: i18n.translate('xpack.lens.xyVisualization.barHorizontalFullLabel', { defaultMessage: 'Horizontal bar', }), }, @@ -452,7 +452,7 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', { defaultMessage: 'H. Stacked bar', }), - searchLabel: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalSearchLabel', { + fullLabel: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalFullLabel', { defaultMessage: 'Horizontal stacked bar', }), }, @@ -462,8 +462,8 @@ export const visualizationTypes: VisualizationType[] = [ label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', { defaultMessage: 'H. Percentage bar', }), - searchLabel: i18n.translate( - 'xpack.lens.xyVisualization.stackedPercentageBarHorizontalSearchLabel', + fullLabel: i18n.translate( + 'xpack.lens.xyVisualization.stackedPercentageBarHorizontalFullLabel', { defaultMessage: 'Horizontal percentage bar', } From 149d4214ec190953a66817d764951880b3deff36 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Tue, 6 Oct 2020 15:40:02 +0200 Subject: [PATCH 11/11] review comments --- .../workspace_panel/chart_switch.scss | 4 ---- .../workspace_panel/chart_switch.tsx | 20 +++++++++++-------- x-pack/plugins/lens/public/types.ts | 4 ++-- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss index 3bebff0228fb5..e0031d051df81 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss @@ -1,7 +1,3 @@ -.lnsChartSwitch__chartSection + .lnsChartSwitch__chartSection { - margin-bottom: $euiSizeS; -} - .lnsChartSwitch__header { > * { display: flex; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx index ddefb545ce4a6..73ffbf56ff45a 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx @@ -15,10 +15,11 @@ import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, + EuiSelectableMessage, } from '@elastic/eui'; import { flatten } from 'lodash'; import { i18n } from '@kbn/i18n'; -import { EuiCallOut } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import { Visualization, FramePublicAPI, Datasource } from '../../../types'; import { Action } from '../state_management'; import { getSuggestions, switchToSuggestion, Suggestion } from '../suggestion_helpers'; @@ -233,7 +234,7 @@ export function ChartSwitch(props: Props) { anchorPosition="downLeft" > - + {i18n.translate('xpack.lens.configPanel.chartType', { defaultMessage: 'Chart type', @@ -281,12 +282,15 @@ export function ChartSwitch(props: Props) { ))} {searchTerm && (visualizationTypes || []).length === 0 && ( - + + {searchTerm}, + }} + /> + )} ); diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 3b41ed4ec8d04..2b9ca5a2425f8 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -431,7 +431,7 @@ export interface FramePublicAPI { } /** - * A visualization type advertized to the user in the chart switcher + * A visualization type advertised to the user in the chart switcher */ export interface VisualizationType { /** @@ -443,7 +443,7 @@ export interface VisualizationType { */ icon: IconType; /** - * Visible ;abel used in the chart switcher and above the workspace panel in collapsed state + * Visible label used in the chart switcher and above the workspace panel in collapsed state */ label: string; /**