From 653073f8c6d199b069830c3acc13fb0c6664e9d8 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 8 Oct 2024 18:57:23 +0200 Subject: [PATCH] [Lens] Fix partition theme after ech upgrade (#195269) ## Summary When I've updated elastic-charts with the last new version, the `point.fill` parameter of lineSeriesStyle has changed in value. This created an unwanted change also in the partition chart that was using that style to color the partition sector borders. I've removed the useless color override of `sectorLineStroke` in the overwrite partition theme, leaving the control to use the chart theme. I've also removed the possibility of unwanted changes for other properties like `fontFamily` and in the `linkedText.textColor`. In the same PR I've removed duplicated tests that where testing exactly the same code/arguments/data, the only difference was the test name. I've also refactored a bit the code, cleaning up the typings and consolidating a bit the theme override logic --- .../partition_vis_component.test.tsx.snap | 24 -- .../components/partition_vis_component.tsx | 10 +- .../public/utils/get_partition_theme.test.ts | 297 +++++------------- .../public/utils/get_partition_theme.ts | 159 ++++------ 4 files changed, 153 insertions(+), 337 deletions(-) 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 35c1fc0e632131..e1293b9986f045 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 @@ -810,17 +810,13 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "partition": Object { "circlePadding": 4, "emptySizeRatio": 0.3, - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "linkLabel": Object { - "fontSize": 11, "maxCount": 5, "maxTextLength": 100, - "textColor": "#343741", }, "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": undefined, - "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -1742,17 +1738,13 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "partition": Object { "circlePadding": 4, "emptySizeRatio": 0, - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "linkLabel": Object { - "fontSize": 11, "maxCount": 5, "maxTextLength": undefined, - "textColor": "#343741", }, "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": 1, - "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -2738,17 +2730,13 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "partition": Object { "circlePadding": 4, "emptySizeRatio": 0, - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "linkLabel": Object { - "fontSize": 11, "maxCount": 5, "maxTextLength": 100, - "textColor": "#343741", }, "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": undefined, - "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -3734,17 +3722,13 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "partition": Object { "circlePadding": 4, "emptySizeRatio": 0, - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "linkLabel": Object { - "fontSize": 11, "maxCount": 5, "maxTextLength": 100, - "textColor": "#343741", }, "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": undefined, - "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -4666,17 +4650,13 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "partition": Object { "circlePadding": 4, "emptySizeRatio": 0, - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "linkLabel": Object { - "fontSize": 11, "maxCount": 5, "maxTextLength": undefined, - "textColor": "#343741", }, "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": 1, - "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -5562,17 +5542,13 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "partition": Object { "circlePadding": 4, "emptySizeRatio": 0, - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", "linkLabel": Object { - "fontSize": 11, "maxCount": 5, "maxTextLength": undefined, - "textColor": "#343741", }, "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": undefined, - "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx index 826e868cab5401..5baf582877a68a 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx @@ -378,19 +378,11 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { getPartitionTheme( visType, visParams, - chartBaseTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor ), - [ - visType, - visParams, - chartBaseTheme, - containerDimensions, - rescaleFactor, - hasOpenedOnAggBasedEditor, - ] + [visType, visParams, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor] ); const fixedViewPort = document.getElementById('app-fixed-viewport'); diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_partition_theme.test.ts b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_partition_theme.test.ts index 26508151e9c59f..e6cfeabb5e70ca 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_partition_theme.test.ts +++ b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_partition_theme.test.ts @@ -11,8 +11,6 @@ import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common'; import { getPartitionTheme } from './get_partition_theme'; import { createMockPieParams, createMockDonutParams, createMockPartitionVisParams } from '../mocks'; import { ChartTypes, LabelPositions, PartitionVisParams } from '../../common/types'; -import { RecursivePartial } from '@elastic/eui'; -import { Theme } from '@elastic/charts'; const column: ExpressionValueVisDimension = { type: 'vis_dimension', @@ -29,11 +27,6 @@ const column: ExpressionValueVisDimension = { const splitRows = [column]; const splitColumns = [column]; -const chartTheme: RecursivePartial = { - barSeriesStyle: { displayValue: { fontFamily: 'Arial' } }, - lineSeriesStyle: { point: { fill: '#fff' } }, - axes: { axisTitle: { fill: '#000' } }, -}; const linkLabelWithEnoughSpace = (visParams: PartitionVisParams) => ({ maxCount: Number.POSITIVE_INFINITY, @@ -41,36 +34,33 @@ const linkLabelWithEnoughSpace = (visParams: PartitionVisParams) => ({ maxTextLength: visParams.labels.truncate ?? undefined, }); -const linkLabelsWithoutSpaceForOuterLabels = { maxCount: 0 }; +const linkLabelsWithoutSpaceForOuterLabels = (visParams: PartitionVisParams) => ({ + maxCount: 0, + maxTextLength: visParams.labels.truncate ?? undefined, +}); -const linkLabelsWithoutSpaceForLabels = { +const linkLabelsWithoutSpaceForLabels = (visParams: PartitionVisParams) => ({ maxCount: 0, maximumSection: Number.POSITIVE_INFINITY, -}; + maxTextLength: visParams.labels.truncate ?? undefined, +}); -const getStaticThemePartition = ( - theme: RecursivePartial, - visParams: PartitionVisParams -) => ({ - fontFamily: theme.barSeriesStyle?.displayValue?.fontFamily, +const getStaticThemePartition = (visParams: PartitionVisParams) => ({ outerSizeRatio: 1, minFontSize: 10, maxFontSize: 16, emptySizeRatio: visParams.emptySizeRatio ?? 0, - sectorLineStroke: theme.lineSeriesStyle?.point?.fill, sectorLineWidth: 1.5, circlePadding: 4, }); -const getStaticThemeOptions = (theme: RecursivePartial, visParams: PartitionVisParams) => ({ - partition: getStaticThemePartition(theme, visParams), +const getStaticThemeOptions = (visParams: PartitionVisParams) => ({ + partition: getStaticThemePartition(visParams), chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, }); -const getDefaultLinkLabel = (visParams: PartitionVisParams, theme: RecursivePartial) => ({ +const getDefaultLinkLabel = (visParams: PartitionVisParams) => ({ maxCount: 5, - fontSize: 11, - textColor: theme.axes?.axisTitle?.fill, maxTextLength: visParams.labels.truncate ?? undefined, }); @@ -86,165 +76,99 @@ const runPieDonutWaffleTestSuites = (chartType: ChartTypes, visParams: Partition dimensions: { ...visParams.dimensions, splitColumn: splitColumns }, }; - it('should return correct default theme options', () => { - const theme = getPartitionTheme(chartType, visParams, chartTheme, dimensions); - expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), - partition: { - ...getStaticThemePartition(chartTheme, visParams), - outerSizeRatio: undefined, - linkLabel: getDefaultLinkLabel(visParams, chartTheme), - }, - }); - }); - - it('should not return padding settings if dimensions are not specified', () => { - const theme = getPartitionTheme(chartType, visParams, chartTheme, dimensions); - - expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), - partition: { - ...getStaticThemePartition(chartTheme, visParams), - outerSizeRatio: undefined, - linkLabel: getDefaultLinkLabel(visParams, chartTheme), - }, - }); - }); - it('should not return padding settings if split column or row are specified', () => { - const themeForSplitColumns = getPartitionTheme( - chartType, - vParamsSplitColumns, - chartTheme, - dimensions - ); + const themeForSplitColumns = getPartitionTheme(chartType, vParamsSplitColumns, dimensions); expect(themeForSplitColumns).toEqual({ - ...getStaticThemeOptions(chartTheme, vParamsSplitColumns), + ...getStaticThemeOptions(vParamsSplitColumns), partition: { - ...getStaticThemePartition(chartTheme, vParamsSplitColumns), + ...getStaticThemePartition(vParamsSplitColumns), outerSizeRatio: undefined, - linkLabel: linkLabelsWithoutSpaceForOuterLabels, + linkLabel: linkLabelsWithoutSpaceForOuterLabels(vParamsSplitColumns), }, }); - const themeForSplitRows = getPartitionTheme( - chartType, - vParamsSplitRows, - chartTheme, - dimensions - ); + const themeForSplitRows = getPartitionTheme(chartType, vParamsSplitRows, dimensions); expect(themeForSplitRows).toEqual({ - ...getStaticThemeOptions(chartTheme, vParamsSplitRows), + ...getStaticThemeOptions(vParamsSplitRows), partition: { - ...getStaticThemePartition(chartTheme, vParamsSplitRows), + ...getStaticThemePartition(vParamsSplitRows), outerSizeRatio: undefined, - linkLabel: linkLabelsWithoutSpaceForOuterLabels, + linkLabel: linkLabelsWithoutSpaceForOuterLabels(vParamsSplitRows), }, }); }); it('should return adjusted padding settings if dimensions are specified and is on aggBased editor', () => { const specifiedDimensions = { width: 2000, height: 2000 }; - const theme = getPartitionTheme( - chartType, - visParams, - chartTheme, - specifiedDimensions, - undefined, - true - ); + const theme = getPartitionTheme(chartType, visParams, specifiedDimensions, undefined, true); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), + ...getStaticThemeOptions(visParams), chartPaddings: { top: 500, bottom: 500, left: 500, right: 500 }, partition: { - ...getStaticThemePartition(chartTheme, visParams), - linkLabel: getDefaultLinkLabel(visParams, chartTheme), + ...getStaticThemePartition(visParams), + linkLabel: getDefaultLinkLabel(visParams), }, }); }); it('should return right settings for the theme related fields', () => { - const theme = getPartitionTheme(chartType, visParams, chartTheme, dimensions); + const theme = getPartitionTheme(chartType, visParams, dimensions); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), + ...getStaticThemeOptions(visParams), partition: { - ...getStaticThemePartition(chartTheme, visParams), + ...getStaticThemePartition(visParams), outerSizeRatio: undefined, - linkLabel: getDefaultLinkLabel(visParams, chartTheme), + linkLabel: getDefaultLinkLabel(visParams), }, }); }); it('should return undefined outerSizeRatio for split chart and show labels', () => { const specifiedDimensions = { width: 2000, height: 2000 }; - const theme = getPartitionTheme(chartType, vParamsSplitRows, chartTheme, specifiedDimensions); + const theme = getPartitionTheme(chartType, vParamsSplitRows, specifiedDimensions); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, vParamsSplitRows), + ...getStaticThemeOptions(vParamsSplitRows), partition: { - ...getStaticThemePartition(chartTheme, vParamsSplitRows), + ...getStaticThemePartition(vParamsSplitRows), outerSizeRatio: undefined, - linkLabel: linkLabelsWithoutSpaceForOuterLabels, + linkLabel: linkLabelsWithoutSpaceForOuterLabels(vParamsSplitRows), }, }); const themeForSplitColumns = getPartitionTheme( chartType, vParamsSplitColumns, - chartTheme, specifiedDimensions ); expect(themeForSplitColumns).toEqual({ - ...getStaticThemeOptions(chartTheme, vParamsSplitColumns), + ...getStaticThemeOptions(vParamsSplitColumns), partition: { - ...getStaticThemePartition(chartTheme, vParamsSplitColumns), + ...getStaticThemePartition(vParamsSplitColumns), outerSizeRatio: undefined, - linkLabel: linkLabelsWithoutSpaceForOuterLabels, + linkLabel: linkLabelsWithoutSpaceForOuterLabels(vParamsSplitColumns), }, }); }); - it( - 'should return undefined outerSizeRatio for not specified dimensions, visible labels,' + - 'and default labels position and not split chart', - () => { - const theme = getPartitionTheme(chartType, visParams, chartTheme, dimensions); - - expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), - partition: { - ...getStaticThemePartition(chartTheme, visParams), - outerSizeRatio: undefined, - linkLabel: getDefaultLinkLabel(visParams, chartTheme), - }, - }); - } - ); - it( 'should return rescaleFactor value for outerSizeRatio if dimensions are specified,' + ' is not split chart, labels are shown and labels position is not `inside`', () => { const specifiedDimensions = { width: 2000, height: 2000 }; const rescaleFactor = 2; - const theme = getPartitionTheme( - chartType, - visParams, - chartTheme, - specifiedDimensions, - rescaleFactor - ); + const theme = getPartitionTheme(chartType, visParams, specifiedDimensions, rescaleFactor); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), + ...getStaticThemeOptions(visParams), partition: { - ...getStaticThemePartition(chartTheme, visParams), + ...getStaticThemePartition(visParams), outerSizeRatio: rescaleFactor, - linkLabel: getDefaultLinkLabel(visParams, chartTheme), + linkLabel: getDefaultLinkLabel(visParams), }, }); } @@ -260,20 +184,14 @@ const runPieDonutWaffleTestSuites = (chartType: ChartTypes, visParams: Partition labels: { ...visParams.labels, position: LabelPositions.INSIDE }, }; - const theme = getPartitionTheme( - chartType, - vParams, - chartTheme, - specifiedDimensions, - rescaleFactor - ); + const theme = getPartitionTheme(chartType, vParams, specifiedDimensions, rescaleFactor); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, vParams), + ...getStaticThemeOptions(vParams), partition: { - ...getStaticThemePartition(chartTheme, vParams), + ...getStaticThemePartition(vParams), outerSizeRatio: 0.5, - linkLabel: linkLabelsWithoutSpaceForOuterLabels, + linkLabel: linkLabelsWithoutSpaceForOuterLabels(vParams), }, }); } @@ -287,12 +205,12 @@ const runPieDonutWaffleTestSuites = (chartType: ChartTypes, visParams: Partition ...visParams, labels: { ...visParams.labels, last_level: true }, }; - const theme = getPartitionTheme(chartType, vParams, chartTheme, specifiedDimensions); + const theme = getPartitionTheme(chartType, vParams, specifiedDimensions); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, vParams), + ...getStaticThemeOptions(vParams), partition: { - ...getStaticThemePartition(chartTheme, vParams), + ...getStaticThemePartition(vParams), linkLabel: linkLabelWithEnoughSpace(vParams), }, }); @@ -304,55 +222,50 @@ const runPieDonutWaffleTestSuites = (chartType: ChartTypes, visParams: Partition ...visParams, labels: { ...visParams.labels, position: LabelPositions.INSIDE }, }; - const theme = getPartitionTheme(chartType, vParams, chartTheme, dimensions); + const theme = getPartitionTheme(chartType, vParams, dimensions); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, vParams), + ...getStaticThemeOptions(vParams), partition: { - ...getStaticThemePartition(chartTheme, vParams), + ...getStaticThemePartition(vParams), outerSizeRatio: undefined, - linkLabel: linkLabelsWithoutSpaceForOuterLabels, + linkLabel: linkLabelsWithoutSpaceForOuterLabels(vParams), }, }); - const themeSplitColumns = getPartitionTheme( - chartType, - vParamsSplitColumns, - chartTheme, - dimensions - ); + const themeSplitColumns = getPartitionTheme(chartType, vParamsSplitColumns, dimensions); expect(themeSplitColumns).toEqual({ - ...getStaticThemeOptions(chartTheme, vParamsSplitColumns), + ...getStaticThemeOptions(vParamsSplitColumns), partition: { - ...getStaticThemePartition(chartTheme, vParamsSplitColumns), + ...getStaticThemePartition(vParamsSplitColumns), outerSizeRatio: undefined, - linkLabel: linkLabelsWithoutSpaceForOuterLabels, + linkLabel: linkLabelsWithoutSpaceForOuterLabels(vParamsSplitColumns), }, }); - const themeSplitRows = getPartitionTheme(chartType, vParamsSplitRows, chartTheme, dimensions); + const themeSplitRows = getPartitionTheme(chartType, vParamsSplitRows, dimensions); expect(themeSplitRows).toEqual({ - ...getStaticThemeOptions(chartTheme, vParamsSplitRows), + ...getStaticThemeOptions(vParamsSplitRows), partition: { - ...getStaticThemePartition(chartTheme, vParamsSplitRows), + ...getStaticThemePartition(vParamsSplitRows), outerSizeRatio: undefined, - linkLabel: linkLabelsWithoutSpaceForOuterLabels, + linkLabel: linkLabelsWithoutSpaceForOuterLabels(vParamsSplitRows), }, }); }); it('should hide links if labels are not shown', () => { const vParams = { ...visParams, labels: { ...visParams.labels, show: false } }; - const theme = getPartitionTheme(chartType, vParams, chartTheme, dimensions); + const theme = getPartitionTheme(chartType, vParams, dimensions); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, vParams), + ...getStaticThemeOptions(vParams), partition: { - ...getStaticThemePartition(chartTheme, vParams), + ...getStaticThemePartition(vParams), outerSizeRatio: undefined, - linkLabel: linkLabelsWithoutSpaceForLabels, + linkLabel: linkLabelsWithoutSpaceForLabels(vParams), }, }); }); @@ -369,101 +282,61 @@ const runTreemapMosaicTestSuites = (chartType: ChartTypes, visParams: PartitionV }; it('should return correct theme options', () => { - const theme = getPartitionTheme(chartType, visParams, chartTheme, dimensions); - expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), - partition: { - ...getStaticThemePartition(chartTheme, visParams), - linkLabel: getDefaultLinkLabel(visParams, chartTheme), - }, - }); - }); - - it('should return empty padding settings if dimensions are not specified', () => { - const theme = getPartitionTheme(chartType, visParams, chartTheme, dimensions); - + const theme = getPartitionTheme(chartType, visParams, dimensions); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), + ...getStaticThemeOptions(visParams), partition: { - ...getStaticThemePartition(chartTheme, visParams), - linkLabel: getDefaultLinkLabel(visParams, chartTheme), + ...getStaticThemePartition(visParams), + linkLabel: getDefaultLinkLabel(visParams), }, }); }); it('should return padding settings if split column or row are specified', () => { - const themeForSplitColumns = getPartitionTheme( - chartType, - vParamsSplitColumns, - chartTheme, - dimensions - ); + const themeForSplitColumns = getPartitionTheme(chartType, vParamsSplitColumns, dimensions); expect(themeForSplitColumns).toEqual({ - ...getStaticThemeOptions(chartTheme, vParamsSplitColumns), + ...getStaticThemeOptions(vParamsSplitColumns), partition: { - ...getStaticThemePartition(chartTheme, vParamsSplitColumns), - linkLabel: getDefaultLinkLabel(vParamsSplitColumns, chartTheme), + ...getStaticThemePartition(vParamsSplitColumns), + linkLabel: getDefaultLinkLabel(vParamsSplitColumns), }, }); - const themeForSplitRows = getPartitionTheme( - chartType, - vParamsSplitRows, - chartTheme, - dimensions - ); + const themeForSplitRows = getPartitionTheme(chartType, vParamsSplitRows, dimensions); expect(themeForSplitRows).toEqual({ - ...getStaticThemeOptions(chartTheme, vParamsSplitRows), + ...getStaticThemeOptions(vParamsSplitRows), partition: { - ...getStaticThemePartition(chartTheme, vParamsSplitRows), - linkLabel: getDefaultLinkLabel(vParamsSplitRows, chartTheme), + ...getStaticThemePartition(vParamsSplitRows), + linkLabel: getDefaultLinkLabel(vParamsSplitRows), }, }); }); it('should return fullfilled padding settings if dimensions are specified', () => { const specifiedDimensions = { width: 2000, height: 2000 }; - const theme = getPartitionTheme( - chartType, - visParams, - chartTheme, - specifiedDimensions, - undefined, - true - ); + const theme = getPartitionTheme(chartType, visParams, specifiedDimensions, undefined, true); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), + ...getStaticThemeOptions(visParams), chartPaddings: { top: 500, bottom: 500, left: 500, right: 500 }, partition: { - ...getStaticThemePartition(chartTheme, visParams), - linkLabel: getDefaultLinkLabel(visParams, chartTheme), - }, - }); - }); - - it('should return settings for the theme related fields', () => { - const theme = getPartitionTheme(chartType, visParams, chartTheme, dimensions); - expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), - partition: { - ...getStaticThemePartition(chartTheme, visParams), - linkLabel: getDefaultLinkLabel(visParams, chartTheme), + ...getStaticThemePartition(visParams), + linkLabel: getDefaultLinkLabel(visParams), }, }); }); it('should make color transparent if labels are hidden', () => { const vParams = { ...visParams, labels: { ...visParams.labels, show: false } }; - const theme = getPartitionTheme(chartType, vParams, chartTheme, dimensions); + const theme = getPartitionTheme(chartType, vParams, dimensions); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, vParams), + ...getStaticThemeOptions(vParams), partition: { - ...getStaticThemePartition(chartTheme, vParams), - linkLabel: getDefaultLinkLabel(visParams, chartTheme), + ...getStaticThemePartition(vParams), + linkLabel: getDefaultLinkLabel(visParams), fillLabel: { textColor: 'rgba(0,0,0,0)' }, }, }); @@ -481,14 +354,14 @@ describe('Donut getPartitionTheme', () => { runPieDonutWaffleTestSuites(chartType, visParams); it('should return correct empty size ratio and partitionLayout', () => { - const theme = getPartitionTheme(ChartTypes.DONUT, visParams, chartTheme, dimensions); + const theme = getPartitionTheme(ChartTypes.DONUT, visParams, dimensions); expect(theme).toEqual({ - ...getStaticThemeOptions(chartTheme, visParams), + ...getStaticThemeOptions(visParams), outerSizeRatio: undefined, partition: { - ...getStaticThemePartition(chartTheme, visParams), - linkLabel: getDefaultLinkLabel(visParams, chartTheme), + ...getStaticThemePartition(visParams), + linkLabel: getDefaultLinkLabel(visParams), outerSizeRatio: undefined, }, }); diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_partition_theme.ts b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_partition_theme.ts index e1e47dc27fc5b9..8ee92d31544b51 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_partition_theme.ts +++ b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_partition_theme.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { RecursivePartial, Theme, PartialTheme } from '@elastic/charts'; +import { PartialTheme } from '@elastic/charts'; import { ChartTypes, LabelPositions, @@ -15,37 +15,13 @@ import { PieContainerDimensions, } from '../../common/types'; -type GetThemeByTypeFn = ( - chartType: ChartTypes, - visParams: PartitionVisParams, - dimensions?: PieContainerDimensions, - rescaleFactor?: number -) => PartialTheme; - -type GetThemeFn = ( - chartType: ChartTypes, - visParams: PartitionVisParams, - chartTheme: RecursivePartial, - dimensions?: PieContainerDimensions, - rescaleFactor?: number, - hasOpenedOnAggBasedEditor?: boolean -) => PartialTheme; +const MAX_SIZE = 1000; -type GetPieDonutWaffleThemeFn = ( +function getPieDonutWaffleCommonTheme( visParams: PartitionVisParams, dimensions?: PieContainerDimensions, - rescaleFactor?: number -) => PartialTheme; - -type GetTreemapMosaicThemeFn = (visParams: PartitionVisParams) => PartialTheme; - -const MAX_SIZE = 1000; - -const getPieDonutWaffleCommonTheme: GetPieDonutWaffleThemeFn = ( - visParams, - dimensions, rescaleFactor = 1 -) => { +): PartialTheme['partition'] { const isSplitChart = Boolean(visParams.dimensions.splitColumn || visParams.dimensions.splitRow); const preventLinksFromShowing = (visParams.labels.position === LabelPositions.INSIDE || isSplitChart) && visParams.labels.show; @@ -59,15 +35,14 @@ const getPieDonutWaffleCommonTheme: GetPieDonutWaffleThemeFn = ( } : { outerSizeRatio: undefined }; - const theme: PartialTheme = {}; - theme.partition = { ...(usingOuterSizeRatio ?? {}) }; + const partitionTheme: PartialTheme['partition'] = { ...(usingOuterSizeRatio ?? {}) }; if ( visParams.labels.show && visParams.labels.position === LabelPositions.DEFAULT && visParams.labels.last_level ) { - theme.partition.linkLabel = { + partitionTheme.linkLabel = { maxCount: Number.POSITIVE_INFINITY, maximumSection: Number.POSITIVE_INFINITY, maxTextLength: visParams.labels.truncate ?? undefined, @@ -76,7 +51,7 @@ const getPieDonutWaffleCommonTheme: GetPieDonutWaffleThemeFn = ( if (preventLinksFromShowing || !visParams.labels.show) { // Prevent links from showing - theme.partition.linkLabel = { + partitionTheme.linkLabel = { maxCount: 0, ...(!visParams.labels.show ? { maximumSection: Number.POSITIVE_INFINITY } : {}), }; @@ -84,48 +59,55 @@ const getPieDonutWaffleCommonTheme: GetPieDonutWaffleThemeFn = ( if (!preventLinksFromShowing && dimensions && !isSplitChart) { // shrink up to 20% to give some room for the linked values - theme.partition.outerSizeRatio = rescaleFactor; + partitionTheme.outerSizeRatio = rescaleFactor; } - return theme; -}; + return partitionTheme; +} + +function getDonutSpecificTheme( + visParams: PartitionVisParams, + dimensions?: PieContainerDimensions, + rescaleFactor?: number +): PartialTheme['partition'] { + const partition = getPieDonutWaffleCommonTheme(visParams, dimensions, rescaleFactor); + return { ...partition, emptySizeRatio: visParams.emptySizeRatio }; +} -const getDonutSpecificTheme: GetPieDonutWaffleThemeFn = (visParams, ...args) => { - const { partition, ...restTheme } = getPieDonutWaffleCommonTheme(visParams, ...args); - return { ...restTheme, partition: { ...partition, emptySizeRatio: visParams.emptySizeRatio } }; -}; +function getTreemapMosaicCommonTheme(visParams: PartitionVisParams): PartialTheme['partition'] { + return !visParams.labels.show ? { fillLabel: { textColor: 'rgba(0,0,0,0)' } } : {}; +} -const getTreemapMosaicCommonTheme: GetTreemapMosaicThemeFn = (visParams) => { - if (!visParams.labels.show) { - return { - partition: { - fillLabel: { textColor: 'rgba(0,0,0,0)' }, - }, - }; +function getSpecificTheme( + chartType: ChartTypes, + visParams: PartitionVisParams, + dimensions?: PieContainerDimensions, + rescaleFactor?: number +): PartialTheme['partition'] { + switch (chartType) { + case ChartTypes.PIE: + return getPieDonutWaffleCommonTheme(visParams, dimensions, rescaleFactor); + case ChartTypes.DONUT: + return getDonutSpecificTheme(visParams, dimensions, rescaleFactor); + case ChartTypes.TREEMAP: + return getTreemapMosaicCommonTheme(visParams); + case ChartTypes.MOSAIC: + return getTreemapMosaicCommonTheme(visParams); + case ChartTypes.WAFFLE: + return getPieDonutWaffleCommonTheme(visParams, dimensions, rescaleFactor); } - return {}; -}; +} -const getSpecificTheme: GetThemeByTypeFn = (chartType, visParams, dimensions, rescaleFactor) => - ({ - [ChartTypes.PIE]: () => getPieDonutWaffleCommonTheme(visParams, dimensions, rescaleFactor), - [ChartTypes.DONUT]: () => getDonutSpecificTheme(visParams, dimensions, rescaleFactor), - [ChartTypes.TREEMAP]: () => getTreemapMosaicCommonTheme(visParams), - [ChartTypes.MOSAIC]: () => getTreemapMosaicCommonTheme(visParams), - [ChartTypes.WAFFLE]: () => getPieDonutWaffleCommonTheme(visParams, dimensions, rescaleFactor), - }[chartType]()); - -export const getPartitionTheme: GetThemeFn = ( - chartType, - visParams, - chartTheme, - dimensions, +export function getPartitionTheme( + chartType: ChartTypes, + visParams: PartitionVisParams, + dimensions?: PieContainerDimensions, rescaleFactor = 1, - hasOpenedOnAggBasedEditor -) => { + hasOpenedOnAggBasedEditor?: boolean +): PartialTheme { // On small multiples we want the labels to only appear inside const isSplitChart = Boolean(visParams.dimensions.splitColumn || visParams.dimensions.splitRow); - const paddingProps: PartialTheme | null = + const paddingProps: PartialTheme = dimensions && !isSplitChart && hasOpenedOnAggBasedEditor ? { chartPaddings: { @@ -135,34 +117,27 @@ export const getPartitionTheme: GetThemeFn = ( right: ((1 - Math.min(1, MAX_SIZE / dimensions?.width)) / 2) * dimensions?.height, }, } - : null; - const partition = { - fontFamily: chartTheme.barSeriesStyle?.displayValue?.fontFamily, - outerSizeRatio: 1, - minFontSize: 10, - maxFontSize: 16, - emptySizeRatio: 0, - sectorLineStroke: chartTheme.lineSeriesStyle?.point?.fill, - sectorLineWidth: 1.5, - circlePadding: 4, - linkLabel: { - maxCount: 5, - fontSize: 11, - textColor: chartTheme.axes?.axisTitle?.fill, - maxTextLength: visParams.labels.truncate ?? undefined, - }, - }; - const { partition: specificPartition = {}, ...restSpecificTheme } = getSpecificTheme( - chartType, - visParams, - dimensions, - rescaleFactor - ); + : {}; + + const specificPartition = getSpecificTheme(chartType, visParams, dimensions, rescaleFactor); return { - partition: { ...partition, ...specificPartition }, + partition: { + outerSizeRatio: 1, + minFontSize: 10, + maxFontSize: 16, + emptySizeRatio: 0, + sectorLineWidth: 1.5, + circlePadding: 4, + ...specificPartition, + linkLabel: { + // fontSize: 11, + maxTextLength: visParams.labels.truncate ?? undefined, + maxCount: 5, + ...specificPartition?.linkLabel, + }, + }, chartMargins: { top: 0, bottom: 0, left: 0, right: 0 }, - ...(paddingProps ?? {}), - ...restSpecificTheme, + ...paddingProps, }; -}; +}