diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index 94512bd8b43b7..4f7a2e3305191 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -226,12 +226,13 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` ariaUseDefaultSummary={true} baseTheme={Object {}} debugState={false} - flatLegend={false} + flatLegend={true} legendAction={[Function]} legendColorPicker={[Function]} legendMaxDepth={1} legendPosition="right" legendSize={130} + legendSort={[Function]} noResults={ { [visData.rows, metricColumn] ); - const flatLegend = isLegendFlat(visType, splitChartDimension); + const flatLegend = !visParams.nestedLegend || isLegendFlat(visType, splitChartDimension); const canShowPieChart = !isEmpty && !isMetricEmpty && !isAllZeros && !hasNegative; @@ -425,6 +425,32 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { const partitionType = getPartitionType(visType); + const customLegendSort = useMemo(() => { + if (!showLegend || !flatLegend) { + return; + } + const [bucketColumn] = bucketColumns; + if (!bucketColumn.id) { + return; + } + const lookup: Record = {}; + visData.rows.forEach((row, i) => { + const category = row[bucketColumn.id!]; + if (!(category in lookup)) { + lookup[category] = i; + } + }); + return (a: SeriesIdentifier, b: SeriesIdentifier) => { + if (a.key == null) { + return 1; + } + if (b.key == null) { + return -1; + } + return lookup[a.key] - lookup[b.key]; + }; + }, [bucketColumns, flatLegend, showLegend, visData.rows]); + return (
{!canShowPieChart ? ( @@ -471,6 +497,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { legendMaxDepth={visParams.nestedLegend ? undefined : 1} legendColorPicker={props.uiState ? LegendColorPickerWrapper : undefined} flatLegend={flatLegend} + legendSort={customLegendSort} tooltip={tooltip} showLegendExtra={visParams.showValuesInLegend} onElementClick={([elementEvent]) => { diff --git a/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx index e8558d4e595a4..49f03b505283c 100644 --- a/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx +++ b/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx @@ -165,30 +165,32 @@ export const MaxLinesInput = ({ ); }; +const noop = () => {}; + export const LegendSettingsPopover: React.FunctionComponent = ({ legendOptions, mode, onDisplayChange, position, location, - onLocationChange = () => {}, + onLocationChange = noop, verticalAlignment, horizontalAlignment, floatingColumns, - onAlignmentChange = () => {}, - onFloatingColumnsChange = () => {}, + onAlignmentChange = noop, + onFloatingColumnsChange = noop, onPositionChange, renderNestedLegendSwitch, nestedLegend, - onNestedLegendChange = () => {}, + onNestedLegendChange = noop, valueInLegend, - onValueInLegendChange = () => {}, + onValueInLegendChange = noop, renderValueInLegendSwitch, groupPosition = 'right', maxLines, - onMaxLinesChange = () => {}, + onMaxLinesChange = noop, shouldTruncate, - onTruncateLegendChange = () => {}, + onTruncateLegendChange = noop, legendSize, onLegendSizeChange, showAutoLegendSizeOption, @@ -294,7 +296,7 @@ export const LegendSettingsPopover: React.FunctionComponent diff --git a/x-pack/plugins/lens/public/visualizations/partition/to_expression.ts b/x-pack/plugins/lens/public/visualizations/partition/to_expression.ts index 69a7e76186e1a..e2360de8ff67c 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/to_expression.ts +++ b/x-pack/plugins/lens/public/visualizations/partition/to_expression.ts @@ -192,7 +192,10 @@ const generateCommonArguments = ( legendPosition: layer.legendPosition || Position.Right, maxLegendLines: layer.legendMaxLines ?? 1, legendSize: layer.legendSize, - nestedLegend: !!layer.nestedLegend, + nestedLegend: + layer.primaryGroups.length + (layer.secondaryGroups?.length ?? 0) > 1 + ? Boolean(layer.nestedLegend) + : false, truncateLegend: layer.truncateLegend ?? getDefaultVisualValuesForLayer(state, datasourceLayers).truncateText, palette: generatePaletteAstArguments(paletteService, state.palette), diff --git a/x-pack/plugins/lens/public/visualizations/partition/toolbar.tsx b/x-pack/plugins/lens/public/visualizations/partition/toolbar.tsx index 31615ed7a331a..8f5d9e11bead9 100644 --- a/x-pack/plugins/lens/public/visualizations/partition/toolbar.tsx +++ b/x-pack/plugins/lens/public/visualizations/partition/toolbar.tsx @@ -263,7 +263,10 @@ export function PieToolbar(props: VisualizationToolbarProps 1 + } nestedLegend={Boolean(layer.nestedLegend)} onNestedLegendChange={onNestedLegendChange} shouldTruncate={layer.truncateLegend ?? defaultTruncationValue}