[Lens] Remove "inside only" option for treemap labels (#65363)

* [Lens] Remove "inside only" option for treemap labels

* Fix type error

* Update from feedback
This commit is contained in:
Wylie Conlon 2020-05-06 16:45:32 -04:00 committed by GitHub
parent 6c13f7f55e
commit 90de711c27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 3 deletions

View file

@ -109,7 +109,10 @@ export function PieComponent(
return String(d); return String(d);
}, },
fillLabel: fillLabel:
isDarkMode && shape === 'treemap' && layerIndex < columnGroups.length - 1 isDarkMode &&
shape === 'treemap' &&
layerIndex < columnGroups.length - 1 &&
categoryDisplay !== 'hide'
? { ...fillLabel, textColor: euiDarkVars.euiTextColor } ? { ...fillLabel, textColor: euiDarkVars.euiTextColor }
: fillLabel, : fillLabel,
shape: { shape: {
@ -252,6 +255,7 @@ export function PieComponent(
valueFormatter={(d: number) => (hideLabels ? '' : formatters[metricColumn.id].convert(d))} valueFormatter={(d: number) => (hideLabels ? '' : formatters[metricColumn.id].convert(d))}
layers={layers} layers={layers}
config={config} config={config}
topGroove={hideLabels || categoryDisplay === 'hide' ? 0 : undefined}
/> />
</Chart> </Chart>
</VisualizationContainer> </VisualizationContainer>

View file

@ -66,6 +66,24 @@ const categoryOptions: Array<{
}, },
]; ];
const categoryOptionsTreemap: Array<{
value: SharedLayerState['categoryDisplay'];
inputDisplay: string;
}> = [
{
value: 'default',
inputDisplay: i18n.translate('xpack.lens.pieChart.showTreemapCategoriesLabel', {
defaultMessage: 'Show labels',
}),
},
{
value: 'hide',
inputDisplay: i18n.translate('xpack.lens.pieChart.categoriesInLegendLabel', {
defaultMessage: 'Hide labels',
}),
},
];
const legendOptions: Array<{ const legendOptions: Array<{
value: SharedLayerState['legendDisplay']; value: SharedLayerState['legendDisplay'];
label: string; label: string;
@ -113,7 +131,7 @@ export function SettingsWidget(props: VisualizationLayerWidgetProps<PieVisualiza
<EuiSuperSelect <EuiSuperSelect
compressed compressed
valueOfSelected={layer.categoryDisplay} valueOfSelected={layer.categoryDisplay}
options={categoryOptions} options={state.shape === 'treemap' ? categoryOptionsTreemap : categoryOptions}
onChange={option => { onChange={option => {
setState({ setState({
...state, ...state,

View file

@ -508,7 +508,7 @@ describe('suggestions', () => {
metric: 'b', metric: 'b',
numberDisplay: 'hidden', numberDisplay: 'hidden',
categoryDisplay: 'inside', categoryDisplay: 'default', // This is changed
legendDisplay: 'show', legendDisplay: 'show',
percentDecimals: 0, percentDecimals: 0,
nestedLegend: true, nestedLegend: true,

View file

@ -115,6 +115,10 @@ export function suggestions({
layerId: table.layerId, layerId: table.layerId,
groups: groups.map(col => col.columnId), groups: groups.map(col => col.columnId),
metric: metrics[0].columnId, metric: metrics[0].columnId,
categoryDisplay:
state.layers[0].categoryDisplay === 'inside'
? 'default'
: state.layers[0].categoryDisplay,
} }
: { : {
layerId: table.layerId, layerId: table.layerId,