From f4fb046e79a3770a3df8fd1b95e44e49df7c68e9 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sat, 18 Dec 2021 15:29:46 -0600 Subject: [PATCH 01/10] updade elastic-charts to v41.0.0 --- package.json | 2 +- src/themes/charts/themes.ts | 47 +++++++++++++++++-------------------- yarn.lock | 28 +++++++++++----------- 3 files changed, 36 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index f74ad70ba83..e285e2e7881 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ "@cypress/code-coverage": "^3.9.12", "@cypress/react": "^5.10.3", "@cypress/webpack-dev-server": "^1.7.0", - "@elastic/charts": "^38.1.1", + "@elastic/charts": "^41.0.0", "@elastic/datemath": "^5.0.3", "@elastic/eslint-config-kibana": "^0.15.0", "@emotion/babel-preset-css-prop": "^11.0.0", diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index 220d5372079..cf292a559ba 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -6,14 +6,10 @@ * Side Public License, v 1. */ +import { PartialTheme, LineAnnotationStyle } from '@elastic/charts'; + import { euiPaletteColorBlind } from '../../services/color/eui_palettes'; import { DEFAULT_VISUALIZATION_COLOR } from '../../services/color/visualization_colors'; -import { - PartialTheme, - LineAnnotationStyle, - PartitionConfig, -} from '@elastic/charts'; -import { RecursivePartial } from '../../components/common'; // @ts-ignore typescript doesn't understand the webpack loader import lightColors from '!!sass-vars-to-js-loader!../../themes/amsterdam/_colors_light.scss'; @@ -26,7 +22,6 @@ const fontFamily = `'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, export interface EuiChartThemeType { lineAnnotation: LineAnnotationStyle; theme: PartialTheme; - partition: RecursivePartial; } function createTheme(colors: any): EuiChartThemeType { @@ -44,25 +39,6 @@ function createTheme(colors: any): EuiChartThemeType { padding: 0, }, }, - partition: { - fontFamily: fontFamily, - minFontSize: 8, - maxFontSize: 16, - fillLabel: { - valueFont: { - fontWeight: 700, - }, - }, - linkLabel: { - maxCount: 5, - fontSize: 11, - textColor: colors.euiTextColor.rgba, - }, - outerSizeRatio: 1, - circlePadding: 4, - sectorLineStroke: colors.euiColorEmptyShade.rgba, - sectorLineWidth: 1.5, - }, theme: { background: { color: colors.euiColorEmptyShade.rgba, @@ -208,6 +184,25 @@ function createTheme(colors: any): EuiChartThemeType { stroke: colors.euiColorDarkestShade.rgba, }, }, + partition: { + fontFamily: fontFamily, + minFontSize: 8, + maxFontSize: 16, + fillLabel: { + valueFont: { + fontWeight: 700, + }, + }, + linkLabel: { + maxCount: 5, + fontSize: 11, + textColor: colors.euiTextColor.rgba, + }, + outerSizeRatio: 1, + circlePadding: 4, + sectorLineStroke: colors.euiColorEmptyShade.rgba, + sectorLineWidth: 1.5, + }, }, }; } diff --git a/yarn.lock b/yarn.lock index 8a1cd7efafe..fef3280d51f 100755 --- a/yarn.lock +++ b/yarn.lock @@ -1189,10 +1189,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@elastic/charts@^38.1.1": - version "38.1.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-38.1.1.tgz#ca12e9a9e3dbcd28f151e8858326ea722ec7065a" - integrity sha512-c6/pFVTrrY3210rHbEjcKwJGqUCowhW0sm+wZhBzGEMIfcLdzeE8BqhDYmdE2glslN/EWMKCNCZjC7g+yOmZ0g== +"@elastic/charts@^41.0.0": + version "41.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-41.0.0.tgz#fcc83b86d72aa3f2787b2652e5d72076ad756cec" + integrity sha512-8MhmoYfoBGrQWDxF+XW/QCfrJv0Oyd0HekYFW7I6Q/C9KdtAyhHloQ4u4NC2NSCOz6yQgoFwCml0hI+shrPSCA== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" @@ -1202,7 +1202,7 @@ d3-collection "^1.0.7" d3-interpolate "^1.4.0" d3-scale "^1.0.7" - d3-shape "^1.3.4" + d3-shape "^2.0.0" luxon "^1.25.0" prop-types "^15.7.2" re-reselect "^3.4.0" @@ -5619,10 +5619,10 @@ d3-interpolate@1, d3-interpolate@^1.4.0: dependencies: d3-color "1" -d3-path@1: - version "1.0.9" - resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf" - integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg== +"d3-path@1 - 2": + version "2.0.0" + resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8" + integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA== d3-scale@^1.0.7: version "1.0.7" @@ -5637,12 +5637,12 @@ d3-scale@^1.0.7: d3-time "1" d3-time-format "2" -d3-shape@^1.3.4: - version "1.3.7" - resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7" - integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw== +d3-shape@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f" + integrity sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA== dependencies: - d3-path "1" + d3-path "1 - 2" d3-time-format@2: version "2.3.0" From e0d51df9a53db73af796e7d83add2b597192d166 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sun, 19 Dec 2021 09:03:27 -0600 Subject: [PATCH 02/10] fix chart examples in docs --- .../elastic_charts/accessibility_sunburst.js | 22 +++------- src-docs/src/views/elastic_charts/pie.js | 25 +++++------ .../src/views/elastic_charts/pie_example.js | 38 ++-------------- .../src/views/elastic_charts/pie_slices.js | 33 ++++++++------ src-docs/src/views/elastic_charts/treemap.js | 44 +++++++++---------- 5 files changed, 61 insertions(+), 101 deletions(-) diff --git a/src-docs/src/views/elastic_charts/accessibility_sunburst.js b/src-docs/src/views/elastic_charts/accessibility_sunburst.js index 1dd87e08847..97c1fbb2796 100644 --- a/src-docs/src/views/elastic_charts/accessibility_sunburst.js +++ b/src-docs/src/views/elastic_charts/accessibility_sunburst.js @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { ThemeContext } from '../../components'; -import { Chart, Partition, Settings } from '@elastic/charts'; +import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts'; import { EUI_CHARTS_THEME_DARK, @@ -20,7 +20,6 @@ export const AccessibilitySunburst = () => { const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT; - const euiPartitionConfig = euiChartTheme.partition; const { vizColors } = euiChartTheme.theme.colors; const data = [ @@ -50,12 +49,14 @@ export const AccessibilitySunburst = () => { count} layers={[ { @@ -66,11 +67,7 @@ export const AccessibilitySunburst = () => { }, }, ]} - config={{ - ...euiPartitionConfig, - clockwiseSectors: false, - partitionLayout: 'sunburst', - }} + clockwiseSectors={false} /> @@ -82,6 +79,7 @@ export const AccessibilitySunburst = () => { { count} + layout={PartitionLayout.sunburst} layers={[ { groupByRollup: ({ fruit }) => fruit, @@ -98,14 +97,7 @@ export const AccessibilitySunburst = () => { }, }, ]} - config={{ - ...euiPartitionConfig, - ...(isDarkTheme - ? EUI_CHARTS_THEME_DARK.partition - : EUI_CHARTS_THEME_LIGHT.partition), - clockwiseSectors: false, - partitionLayout: 'sunburst', - }} + clockwiseSectors={false} /> diff --git a/src-docs/src/views/elastic_charts/pie.js b/src-docs/src/views/elastic_charts/pie.js index 597c64d12b2..fb8d992515a 100644 --- a/src-docs/src/views/elastic_charts/pie.js +++ b/src-docs/src/views/elastic_charts/pie.js @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { ThemeContext } from '../../components'; -import { Chart, Partition, Settings } from '@elastic/charts'; +import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts'; import { EUI_CHARTS_THEME_DARK, @@ -27,7 +27,6 @@ export default () => { const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT; - const euiPartitionConfig = euiChartTheme.partition; return (
@@ -38,7 +37,7 @@ export default () => { - + { count: 319, }, ]} + layout={PartitionLayout.sunburst} valueAccessor={(d) => d.count} layers={[ { groupByRollup: (d) => d.status, shape: { fillColor: (d) => - euiChartTheme.theme.colors.vizColors[d.sortIndex], + euiChartTheme.colors.vizColors[d.sortIndex], }, }, ]} - config={{ - ...euiPartitionConfig, - clockwiseSectors: false, - }} + clockwiseSectors={false} /> @@ -74,7 +71,7 @@ export default () => { - + { percent: 8.7, }, ]} + layout={PartitionLayout.sunburst} valueAccessor={(d) => Number(d.percent)} valueFormatter={() => ''} layers={[ @@ -98,15 +96,12 @@ export default () => { groupByRollup: (d) => d.language, shape: { fillColor: (d) => - euiChartTheme.theme.colors.vizColors[d.sortIndex], + euiChartTheme.colors.vizColors[d.sortIndex], }, }, ]} - config={{ - ...euiPartitionConfig, - emptySizeRatio: 0.4, - clockwiseSectors: false, - }} + emptySizeRatio={0.4} + clockwiseSectors={false} /> diff --git a/src-docs/src/views/elastic_charts/pie_example.js b/src-docs/src/views/elastic_charts/pie_example.js index 2e785cf0424..7b85493a3d0 100644 --- a/src-docs/src/views/elastic_charts/pie_example.js +++ b/src-docs/src/views/elastic_charts/pie_example.js @@ -13,8 +13,6 @@ import { EuiLink, EuiIconTip, EuiToolTip, - EuiCallOut, - EuiCode, EuiImage, } from '../../../../src/components'; @@ -197,40 +195,15 @@ export const ElasticChartsPieExample = { /> .

- - Elastic Charts'{' '} - - partition charts do not currently support theming - {' '} - through the {''} component. - - } - > -

- {' '} - EUI provides a separate key for use with - - {'Partition.config={{...EUI_CHARTS_THEME_LIGHT.partition}}'} - - . The chart colors also need to be passed a different way via{' '} - - {'Partition.layers.shape.fillColor'} - - . See the snippet for full details. -

- ), demo: , snippet: `import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT; -const euiPartitionConfig = euiChartTheme.partition; - + + `, }, diff --git a/src-docs/src/views/elastic_charts/pie_slices.js b/src-docs/src/views/elastic_charts/pie_slices.js index 805976b118b..7c428df7881 100644 --- a/src-docs/src/views/elastic_charts/pie_slices.js +++ b/src-docs/src/views/elastic_charts/pie_slices.js @@ -1,6 +1,6 @@ /* eslint-disable no-nested-ternary */ import React, { Fragment, useState, useContext } from 'react'; -import { Chart, Partition, Settings } from '@elastic/charts'; +import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts'; import { ThemeContext } from '../../components'; import { @@ -34,7 +34,6 @@ export default () => { const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT; - const euiPartitionConfig = euiChartTheme.partition; const sliceOrderRadiosIdPrefix = 'colorType'; const sliceOrderRadios = [ @@ -140,15 +139,26 @@ export default () => { } }; + const themeOverrides = { + partition: { + emptySizeRatio: pieTypeIdSelected.includes('Donut') && 0.4, + }, + }; + return ( {customTitle}
- + Number(d.percent)} valueFormatter={showValues ? undefined : () => ''} valueGetter={showValues ? 'percent' : undefined} @@ -161,11 +171,7 @@ export default () => { }, }, ]} - config={{ - ...euiPartitionConfig, - emptySizeRatio: pieTypeIdSelected.includes('Donut') && 0.4, - ...sliceOrderConfig, - }} + {...sliceOrderConfig} />
@@ -273,8 +279,10 @@ export default () => { textToCopy={`

Distribution of the top ${numSlices} browsers from 2019

 - - ${showLegend ? '' : ''} + + { }, }, ]} - config={{ - ...euiPartitionConfig, - ${pieTypeIdSelected.includes('Donut') ? 'emptySizeRatio: 0.4,' : ''} + ${pieTypeIdSelected.includes('Donut') ? 'emptySizeRatio={0.4}' : ''} + {...{ ${sliceOrderConfigText} }} /> diff --git a/src-docs/src/views/elastic_charts/treemap.js b/src-docs/src/views/elastic_charts/treemap.js index c7e86d94f79..7319015e218 100644 --- a/src-docs/src/views/elastic_charts/treemap.js +++ b/src-docs/src/views/elastic_charts/treemap.js @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useMemo } from 'react'; import { ThemeContext } from '../../components'; import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts'; import { GITHUB_DATASET_MOD } from './data'; @@ -32,6 +32,11 @@ export default () => { sortBy: 'natural', }); + const euiChartTheme = useMemo( + () => (isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT), + [isDarkTheme] + ); + return (
@@ -41,18 +46,21 @@ export default () => { - + d.count} layers={[ { groupByRollup: (d) => d.total, shape: { - fillColor: isDarkTheme - ? EUI_CHARTS_THEME_DARK.partition.sectorLineStroke - : EUI_CHARTS_THEME_LIGHT.partition.sectorLineStroke, + fillColor: euiChartTheme.theme.partition.sectorLineStroke, }, hideInLegend: true, }, @@ -70,27 +78,21 @@ export default () => { }, }, ]} - config={{ - ...(isDarkTheme - ? EUI_CHARTS_THEME_DARK.partition - : EUI_CHARTS_THEME_LIGHT.partition), - clockwiseSectors: false, - fillLabel: { - ...(isDarkTheme - ? EUI_CHARTS_THEME_DARK.partition.fillLabel - : EUI_CHARTS_THEME_LIGHT.partition.fillLabel), - textInvertible: true, - }, - }} + clockwiseSectors={false} /> - + d.count} valueGetter="percent" topGroove={0} @@ -113,12 +115,6 @@ export default () => { }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - ...(isDarkTheme - ? EUI_CHARTS_THEME_DARK.partition - : EUI_CHARTS_THEME_LIGHT.partition), - }} /> From 54faaccb3d575584e1ab968e8cba4b7ba9e7ec3e Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sun, 19 Dec 2021 13:40:50 -0600 Subject: [PATCH 03/10] update changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6af0bcf0665..176f1dffac0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,11 @@ **Bug fixes** - Fixed a `EuiDataGrid` sizing bug which didn't account for a horizontal scrollbar ([#5478](https://github.com/elastic/eui/pull/5478)) +- Upgraded to `@elastic/charts@^41.0.0` which removed partition config in favor of theming. + +**Breaking changes** + +- Requires `@elastic/charts@^41.0.0` for refactored partition chart theming. No more partition config on eui charts theme. ## [`43.1.1`](https://github.com/elastic/eui/tree/v43.1.1) From e43c55c318ed0bd6d3f6e63e37fa83c26747dca1 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sun, 19 Dec 2021 13:42:32 -0600 Subject: [PATCH 04/10] fix visColors error --- src-docs/src/views/elastic_charts/pie.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/elastic_charts/pie.js b/src-docs/src/views/elastic_charts/pie.js index fb8d992515a..54ebaa133bf 100644 --- a/src-docs/src/views/elastic_charts/pie.js +++ b/src-docs/src/views/elastic_charts/pie.js @@ -57,7 +57,7 @@ export default () => { groupByRollup: (d) => d.status, shape: { fillColor: (d) => - euiChartTheme.colors.vizColors[d.sortIndex], + euiChartTheme.theme.colors.vizColors[d.sortIndex], }, }, ]} @@ -96,7 +96,7 @@ export default () => { groupByRollup: (d) => d.language, shape: { fillColor: (d) => - euiChartTheme.colors.vizColors[d.sortIndex], + euiChartTheme.theme.colors.vizColors[d.sortIndex], }, }, ]} From dc6a97ffbc136f3e6353bf0f0e0942df3f422a07 Mon Sep 17 00:00:00 2001 From: Nick Partridge Date: Mon, 20 Dec 2021 10:06:58 -0600 Subject: [PATCH 05/10] Apply suggestions from code review Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 176f1dffac0..916454d9618 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,11 +3,10 @@ **Bug fixes** - Fixed a `EuiDataGrid` sizing bug which didn't account for a horizontal scrollbar ([#5478](https://github.com/elastic/eui/pull/5478)) -- Upgraded to `@elastic/charts@^41.0.0` which removed partition config in favor of theming. **Breaking changes** -- Requires `@elastic/charts@^41.0.0` for refactored partition chart theming. No more partition config on eui charts theme. +- Upgraded to `@elastic/charts@^41.0.0` which removed partition config in favor of inclusion in Charts theme config ([#5492](https://github.com/elastic/eui/pull/5492)) ## [`43.1.1`](https://github.com/elastic/eui/tree/v43.1.1) From b956b5fb494a7affa2466845a7ad8a780a2a59ea Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 20 Dec 2021 10:15:20 -0600 Subject: [PATCH 06/10] fix bad docs string with spec props text --- src-docs/src/views/elastic_charts/pie_slices.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/elastic_charts/pie_slices.js b/src-docs/src/views/elastic_charts/pie_slices.js index 7c428df7881..77f12bf57af 100644 --- a/src-docs/src/views/elastic_charts/pie_slices.js +++ b/src-docs/src/views/elastic_charts/pie_slices.js @@ -70,7 +70,7 @@ export default () => { clockwiseSectors: false, }); const [sliceOrderConfigText, setSliceOrderConfigText] = useState( - 'clockwiseSectors: false,' + 'clockwiseSectors={false}' ); const [pieTypeIdSelected, setPieTypeIdSelected] = useState( @@ -92,10 +92,10 @@ export default () => { .label; if (sliceOrderLabel.includes('Counter')) { setSliceOrderConfig({ clockwiseSectors: false }); - setSliceOrderConfigText('clockwiseSectors: false,'); + setSliceOrderConfigText('clockwiseSectors={false}'); } else if (sliceOrderLabel.includes('Clockwise')) { setSliceOrderConfig({ specialFirstInnermostSector: false }); - setSliceOrderConfigText('specialFirstInnermostSector: false,'); + setSliceOrderConfigText('specialFirstInnermostSector={false}'); } else if (sliceOrderLabel.includes('natural')) { setSliceOrderConfig({}); setSliceOrderConfigText(''); @@ -312,9 +312,7 @@ export default () => { }, ]} ${pieTypeIdSelected.includes('Donut') ? 'emptySizeRatio={0.4}' : ''} - {...{ - ${sliceOrderConfigText} - }} + ${sliceOrderConfigText} /> `} > From 93a4a4be05f703346e4d9a07390ed9872d622ea2 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 20 Dec 2021 10:23:52 -0600 Subject: [PATCH 07/10] add back seperate partition option to be removed later --- src/themes/charts/themes.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index cf292a559ba..138e58e8e36 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -22,6 +22,7 @@ const fontFamily = `'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, export interface EuiChartThemeType { lineAnnotation: LineAnnotationStyle; theme: PartialTheme; + partition: PartialTheme['partition']; } function createTheme(colors: any): EuiChartThemeType { @@ -39,6 +40,25 @@ function createTheme(colors: any): EuiChartThemeType { padding: 0, }, }, + partition: { + fontFamily: fontFamily, + minFontSize: 8, + maxFontSize: 16, + fillLabel: { + valueFont: { + fontWeight: 700, + }, + }, + linkLabel: { + maxCount: 5, + fontSize: 11, + textColor: colors.euiTextColor.rgba, + }, + outerSizeRatio: 1, + circlePadding: 4, + sectorLineStroke: colors.euiColorEmptyShade.rgba, + sectorLineWidth: 1.5, + }, theme: { background: { color: colors.euiColorEmptyShade.rgba, From 1315a9698e6cb8884358407cb3e9d8d6e7faabe1 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 20 Dec 2021 11:29:36 -0600 Subject: [PATCH 08/10] add back partition config types --- CHANGELOG.md | 5 +---- package.json | 2 +- src/themes/charts/themes.ts | 9 +++++++-- yarn.lock | 8 ++++---- 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 916454d9618..7bbbde1e394 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,10 +3,7 @@ **Bug fixes** - Fixed a `EuiDataGrid` sizing bug which didn't account for a horizontal scrollbar ([#5478](https://github.com/elastic/eui/pull/5478)) - -**Breaking changes** - -- Upgraded to `@elastic/charts@^41.0.0` which removed partition config in favor of inclusion in Charts theme config ([#5492](https://github.com/elastic/eui/pull/5492)) +- Upgraded to `@elastic/charts@^41.0.1` which deprecated `PartitionConfig` in favor of inclusion in Charts theme config ([#5492](https://github.com/elastic/eui/pull/5492)) ## [`43.1.1`](https://github.com/elastic/eui/tree/v43.1.1) diff --git a/package.json b/package.json index e285e2e7881..e1be475e164 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ "@cypress/code-coverage": "^3.9.12", "@cypress/react": "^5.10.3", "@cypress/webpack-dev-server": "^1.7.0", - "@elastic/charts": "^41.0.0", + "@elastic/charts": "^41.0.1", "@elastic/datemath": "^5.0.3", "@elastic/eslint-config-kibana": "^0.15.0", "@emotion/babel-preset-css-prop": "^11.0.0", diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index 138e58e8e36..d8618e7839b 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -6,7 +6,12 @@ * Side Public License, v 1. */ -import { PartialTheme, LineAnnotationStyle } from '@elastic/charts'; +import { + PartialTheme, + LineAnnotationStyle, + RecursivePartial, + PartitionConfig, +} from '@elastic/charts'; import { euiPaletteColorBlind } from '../../services/color/eui_palettes'; import { DEFAULT_VISUALIZATION_COLOR } from '../../services/color/visualization_colors'; @@ -22,7 +27,7 @@ const fontFamily = `'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, export interface EuiChartThemeType { lineAnnotation: LineAnnotationStyle; theme: PartialTheme; - partition: PartialTheme['partition']; + partition: RecursivePartial; } function createTheme(colors: any): EuiChartThemeType { diff --git a/yarn.lock b/yarn.lock index fef3280d51f..251155b0dc8 100755 --- a/yarn.lock +++ b/yarn.lock @@ -1189,10 +1189,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@elastic/charts@^41.0.0": - version "41.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-41.0.0.tgz#fcc83b86d72aa3f2787b2652e5d72076ad756cec" - integrity sha512-8MhmoYfoBGrQWDxF+XW/QCfrJv0Oyd0HekYFW7I6Q/C9KdtAyhHloQ4u4NC2NSCOz6yQgoFwCml0hI+shrPSCA== +"@elastic/charts@^41.0.1": + version "41.0.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-41.0.1.tgz#28bd722d86366f799668e1e79c36b3977c1a9710" + integrity sha512-oqNcWG6qkJCsSk+DcXWIOgvz7SpfY4AsOG6moTD/i5LnON9mteVsMdRm1Tw4PZV6JWDgGQnSH3gmQhQrb0wONQ== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" From efd9945cf09506d19c71b07a7ef4643a839775e6 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 20 Dec 2021 11:31:56 -0600 Subject: [PATCH 09/10] update changelog --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7bbbde1e394..5c161b2431b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,10 @@ **Bug fixes** - Fixed a `EuiDataGrid` sizing bug which didn't account for a horizontal scrollbar ([#5478](https://github.com/elastic/eui/pull/5478)) -- Upgraded to `@elastic/charts@^41.0.1` which deprecated `PartitionConfig` in favor of inclusion in Charts theme config ([#5492](https://github.com/elastic/eui/pull/5492)) + +**Deprecations** + +- Deprecated `PartitionConfig` in favor of inclusion in Charts `theme.partition` ([#5492](https://github.com/elastic/eui/pull/5492)) ## [`43.1.1`](https://github.com/elastic/eui/tree/v43.1.1) From 8b95383ea841489af87edd2e8bff4b52eeac9ba1 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 20 Dec 2021 11:35:27 -0600 Subject: [PATCH 10/10] add deprecated comment --- src/themes/charts/themes.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index d8618e7839b..ac19da9365d 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -27,6 +27,7 @@ const fontFamily = `'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, export interface EuiChartThemeType { lineAnnotation: LineAnnotationStyle; theme: PartialTheme; + /** DEPRECATED: Use `theme.partition` config instead */ partition: RecursivePartial; }