-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Lens] Chart switch icons redesign (#178328)
## 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
Showing
8 changed files
with
137 additions
and
61 deletions.
There are no files selected for viewing
96 changes: 96 additions & 0 deletions
96
...ic/editor_frame_service/editor_frame/workspace_panel/chart_switch/chart_option_append.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
...gins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters