Skip to content

Commit

Permalink
[Lens] Chart switch icons redesign (#178328)
Browse files Browse the repository at this point in the history
## Summary
Fixes #178232

<img width="434" alt="Screenshot 2024-03-14 at 09 55 23"
src="https://github.com/elastic/kibana/assets/4283304/4b41cfb0-6ab2-41e1-b44a-39dfd55876c7">

Apart from the design changes, I also made the tooltip copy more
specific. Here are the 3 cases we have:

1. We loose all configuration (eg from multilayer xy to gauge).
<img width="406" alt="Screenshot 2024-03-14 at 09 56 14"
src="https://github.com/elastic/kibana/assets/4283304/8ff796e4-6d53-4dbd-8477-cefb7b0b0ddf">

2. We loose layers (and apart from that, we can loose columns from the
first layer too so I inform user about it too!) ( eg from multilayer xy
chart to table)
<img width="428" alt="Screenshot 2024-03-14 at 09 56 33"
src="https://github.com/elastic/kibana/assets/4283304/964eb48a-cdd3-4524-b79d-355841de8083">

3. We loose columns only (eg. from donut chart to gauge)
<img width="426" alt="Screenshot 2024-03-14 at 09 56 07"
src="https://github.com/elastic/kibana/assets/4283304/849195c7-e595-4f06-a2f7-e015d14be3d4">

---------

Co-authored-by: Stratoula Kalafateli <[email protected]>
  • Loading branch information
mbondyra and stratoula authored Mar 19, 2024
1 parent a102c9b commit 7545046
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 61 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/*
* 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 './chart_switch.scss';
import React, { ReactNode } from 'react';
import { EuiFlexItem, EuiIconTip, EuiBetaBadge, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';

export const getDataLossWarning = (dataLoss: 'nothing' | 'layers' | 'everything' | 'columns') => {
if (dataLoss === 'nothing') {
return;
}
if (dataLoss === 'everything') {
return i18n.translate('xpack.lens.chartSwitch.dataLossEverything', {
defaultMessage: 'Changing to this visualization clears the current configuration.',
});
}
if (dataLoss === 'layers') {
return i18n.translate('xpack.lens.chartSwitch.dataLossLayersDescription', {
defaultMessage:
'Changing to this visualization modifies currently selected layer`s configuration and removes all other layers.',
});
} else
return i18n.translate('xpack.lens.chartSwitch.dataLossColumns', {
defaultMessage: `Changing to this visualization modifies the current configuration.`,
});
};

const DataLossWarning = ({ content, id }: { content: ReactNode; id: string }) => {
if (!content) return null;
return (
<EuiFlexItem grow={false}>
<EuiIconTip
size="s"
aria-label={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
defaultMessage: 'Warning',
})}
type="dot"
color="warning"
content={content}
iconProps={{
className: 'lnsChartSwitch__chartIcon',
'data-test-subj': `lnsChartSwitchPopoverAlert_${id}`,
}}
/>
</EuiFlexItem>
);
};

export const ExperimentalBadge = () => {
return (
<EuiFlexItem grow={false}>
<EuiToolTip
content={i18n.translate('xpack.lens.chartSwitch.experimentalLabel', {
defaultMessage: 'Technical preview',
})}
>
<EuiBetaBadge
css={css`
vertical-align: middle;
`}
iconType="beaker"
label={i18n.translate('xpack.lens.chartSwitch.experimentalLabel', {
defaultMessage: 'Technical preview',
})}
size="s"
/>
</EuiToolTip>
</EuiFlexItem>
);
};

export const ChartOptionAppend = ({
dataLoss,
showExperimentalBadge,
id,
}: {
dataLoss: 'nothing' | 'layers' | 'everything' | 'columns';
showExperimentalBadge?: boolean;
id: string;
}) => (
<EuiFlexGroup
gutterSize="xs"
responsive={false}
alignItems="center"
className="lnsChartSwitch__append"
>
{showExperimentalBadge ? <ExperimentalBadge /> : null}
<DataLossWarning content={getDataLossWarning(dataLoss)} id={id} />
</EuiFlexGroup>
);
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,17 @@
}
}

.lnsChartSwitch__append {
display: inline-flex;
.lnsChartSwitch__option {
.euiSelectableListItem__text {
flex-grow: 0;
}
.euiSelectableListItem__append {
margin-left: $euiSizeXS;
display: flex;
flex-grow: 1;
align-items: center;
justify-content: flex-end;
}
}

// Targeting img as this won't target normal EuiIcon's only the custom svgs's
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,16 @@ import {
mockDatasourceMap,
mockDatasourceStates,
renderWithReduxStore,
} from '../../../mocks';
} from '../../../../mocks';

import {
Visualization,
FramePublicAPI,
DatasourcePublicAPI,
SuggestionRequest,
} from '../../../types';
} from '../../../../types';
import { ChartSwitch, ChartSwitchProps } from './chart_switch';
import { LensAppState, applyChanges } from '../../../state_management';
import { LensAppState, applyChanges } from '../../../../state_management';

describe('chart_switch', () => {
function generateVisualization(id: string): jest.Mocked<Visualization> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiSelectable,
EuiIconTip,
EuiSelectableOption,
EuiBadge,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
Expand All @@ -28,9 +26,9 @@ import {
VisualizationMap,
DatasourceMap,
Suggestion,
} from '../../../types';
import { getSuggestions, switchToSuggestion } from '../suggestion_helpers';
import { showMemoizedErrorNotification } from '../../../lens_ui_errors';
} from '../../../../types';
import { getSuggestions, switchToSuggestion } from '../../suggestion_helpers';
import { showMemoizedErrorNotification } from '../../../../lens_ui_errors';
import {
insertLayer,
removeLayers,
Expand All @@ -41,8 +39,9 @@ import {
selectActiveDatasourceId,
selectVisualization,
selectDatasourceStates,
} from '../../../state_management';
import { generateId } from '../../../id_generator/id_generator';
} from '../../../../state_management';
import { generateId } from '../../../../id_generator/id_generator';
import { ChartOptionAppend } from './chart_option_append';

interface VisualizationSelection {
visualizationId: string;
Expand Down Expand Up @@ -317,8 +316,8 @@ export const ChartSwitch = memo(function ChartSwitch({
.sort((a, b) => {
return (a.fullLabel || a.label).localeCompare(b.fullLabel || b.label);
})
.map(
(v): SelectableEntry => ({
.map((v): SelectableEntry => {
return {
'aria-label': v.fullLabel || v.label,
className: 'lnsChartSwitch__option',
isGroupLabel: false,
Expand All @@ -331,50 +330,16 @@ export const ChartSwitch = memo(function ChartSwitch({
),
append:
v.selection.dataLoss !== 'nothing' || v.showExperimentalBadge ? (
<EuiFlexGroup
gutterSize="xs"
responsive={false}
alignItems="center"
className="lnsChartSwitch__append"
>
{v.selection.dataLoss !== 'nothing' ? (
<EuiFlexItem grow={false}>
<EuiIconTip
aria-label={i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
defaultMessage: 'Warning',
})}
type="warning"
color="warning"
content={i18n.translate(
'xpack.lens.chartSwitch.dataLossDescription',
{
defaultMessage:
'Selecting this visualization type will remove incompatible configuration options and multiple layers, if present',
}
)}
iconProps={{
className: 'lnsChartSwitch__chartIcon',
'data-test-subj': `lnsChartSwitchPopoverAlert_${v.id}`,
}}
/>
</EuiFlexItem>
) : null}
{v.showExperimentalBadge ? (
<EuiFlexItem grow={false}>
<EuiBadge color="hollow">
<FormattedMessage
id="xpack.lens.chartSwitch.experimentalLabel"
defaultMessage="Technical preview"
/>
</EuiBadge>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
<ChartOptionAppend
dataLoss={v.selection.dataLoss}
showExperimentalBadge={v.showExperimentalBadge}
id={v.selection.subVisualizationId}
/>
) : null,
// Apparently checked: null is not valid for TS
...(subVisualizationId === v.id && { checked: 'on' }),
})
)
};
})
);
}),
visualizationsLookup: lookup,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*
* 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.
*/

export { ChartSwitch } from './chart_switch';
export type { ChartSwitchProps } from './chart_switch';
3 changes: 1 addition & 2 deletions x-pack/plugins/translations/translations/fr-FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -21474,7 +21474,6 @@
"xpack.lens.chart.labelVisibility.auto": "Auto",
"xpack.lens.chart.labelVisibility.custom": "Personnalisé",
"xpack.lens.chart.labelVisibility.none": "Aucun",
"xpack.lens.chartSwitch.dataLossDescription": "La sélection de ce type de visualisation entraîne la suppression des options de configuration incompatibles et des calques multiples, le cas échéant.",
"xpack.lens.chartSwitch.dataLossLabel": "Avertissement",
"xpack.lens.chartSwitch.experimentalLabel": "Version d'évaluation technique",
"xpack.lens.chartTitle.unsaved": "Visualisation non enregistrée",
Expand Down Expand Up @@ -42551,4 +42550,4 @@
"xpack.serverlessObservability.nav.projectSettings": "Paramètres de projet",
"xpack.serverlessObservability.nav.visualizations": "Visualisations"
}
}
}
3 changes: 1 addition & 2 deletions x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -21488,7 +21488,6 @@
"xpack.lens.chart.labelVisibility.auto": "自動",
"xpack.lens.chart.labelVisibility.custom": "カスタム",
"xpack.lens.chart.labelVisibility.none": "なし",
"xpack.lens.chartSwitch.dataLossDescription": "ビジュアライゼーションタイプを選択すると、互換性のない構成オプションと複数のレイヤーが削除されます(存在する場合)。",
"xpack.lens.chartSwitch.dataLossLabel": "警告",
"xpack.lens.chartSwitch.experimentalLabel": "テクニカルプレビュー",
"xpack.lens.chartTitle.unsaved": "保存されていないビジュアライゼーション",
Expand Down Expand Up @@ -42543,4 +42542,4 @@
"xpack.serverlessObservability.nav.projectSettings": "プロジェクト設定",
"xpack.serverlessObservability.nav.visualizations": "ビジュアライゼーション"
}
}
}
3 changes: 1 addition & 2 deletions x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -21581,7 +21581,6 @@
"xpack.lens.chart.labelVisibility.auto": "自动",
"xpack.lens.chart.labelVisibility.custom": "定制",
"xpack.lens.chart.labelVisibility.none": "无",
"xpack.lens.chartSwitch.dataLossDescription": "选择此可视化类型将移除不兼容的配置选项和多个图层(如果存在)",
"xpack.lens.chartSwitch.dataLossLabel": "警告",
"xpack.lens.chartSwitch.experimentalLabel": "技术预览",
"xpack.lens.chartTitle.unsaved": "未保存的可视化",
Expand Down Expand Up @@ -42523,4 +42522,4 @@
"xpack.serverlessObservability.nav.projectSettings": "项目设置",
"xpack.serverlessObservability.nav.visualizations": "可视化"
}
}
}

0 comments on commit 7545046

Please sign in to comment.