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, }; -}; +}