From 441bdedc1d8af96b0eb3cca98e422fb6d666b2b2 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 12 Apr 2024 10:50:01 -0700 Subject: [PATCH 1/3] chore: fully remove deprecated charts theming exports --- scripts/compile-eui.js | 22 -- scripts/dtsgenerator.js | 1 - .../src/views/elastic_charts/sparklines.tsx | 33 ++- src/themes/charts/themes.ts | 251 ------------------ src/themes/charts/webpack.config.js | 71 ----- 5 files changed, 27 insertions(+), 351 deletions(-) delete mode 100644 src/themes/charts/themes.ts delete mode 100644 src/themes/charts/webpack.config.js diff --git a/scripts/compile-eui.js b/scripts/compile-eui.js index 0cd2c285a0c..cda2d448953 100755 --- a/scripts/compile-eui.js +++ b/scripts/compile-eui.js @@ -26,7 +26,6 @@ const IGNORE_TESTENV = [ ]; const IGNORE_PACKAGES = [ '**/react-datepicker/test/**/*.js', - '**/themes/charts/themes.ts', ]; function compileLib() { @@ -207,27 +206,6 @@ function compileBundle() { } ); console.log(chalk.green('✔ Finished test utils files')); - - console.log('Building chart theme module...'); - execSync('webpack --config=src/themes/charts/webpack.config.js', { - stdio: 'inherit', - }); - dtsGenerator({ - prefix: '', - out: 'dist/eui_charts_theme.d.ts', - baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'), - files: ['themes.ts'], - resolveModuleId() { - return '@elastic/eui/dist/eui_charts_theme'; - }, - resolveModuleImport(params) { - if (params.importedModuleId === '../../components/common') { - return '@elastic/eui/src/components/common'; - } - return null; - }, - }); - console.log(chalk.green('✔ Finished chart theme module')); } compileLib(); diff --git a/scripts/dtsgenerator.js b/scripts/dtsgenerator.js index b973005e67c..3c9a3008600 100644 --- a/scripts/dtsgenerator.js +++ b/scripts/dtsgenerator.js @@ -37,7 +37,6 @@ const generator = dtsGenerator({ '**/*.stories.{ts,tsx}', '**/*.mock.{ts,tsx}', '**/__mocks__/*', - 'src/themes/charts/*', // A separate d.ts file is generated for the charts theme file 'src/test/**/*', // Separate d.ts files are generated for test utils 'src-docs/**/*', // Don't include src-docs '**/*.mdx', // Don't include storybook mdx files diff --git a/src-docs/src/views/elastic_charts/sparklines.tsx b/src-docs/src/views/elastic_charts/sparklines.tsx index 55efb9e8173..cc441a6b72c 100644 --- a/src-docs/src/views/elastic_charts/sparklines.tsx +++ b/src-docs/src/views/elastic_charts/sparklines.tsx @@ -7,10 +7,9 @@ import { Tooltip, LineSeries, AreaSeries, + PartialTheme, } from '@elastic/charts'; -import { EUI_SPARKLINE_THEME_PARTIAL } from '../../../../src/themes/charts/themes'; - import { EuiPanel, EuiStat, @@ -28,6 +27,28 @@ import { } from '../../../../src/services'; import { useChartBaseTheme } from './utils/use_chart_base_theme'; +/** + * Example sparkline styles to match `ThemeService.useSparklineOverrides` from kibana `charts` plugin + * + * See https://github.com/elastic/kibana/blob/82fdf0414d61a1419038eed395bcdf941d72a58c/src/plugins/charts/public/services/theme/theme.ts#L55-L77 + */ +const sparklineOverrides: PartialTheme = { + lineSeriesStyle: { + point: { + visible: false, + strokeWidth: 1, + radius: 1, + }, + }, + areaSeriesStyle: { + point: { + visible: false, + strokeWidth: 1, + radius: 1, + }, + }, +}; + export const TIME_DATA_SMALL = [ [1551438630000, 8.515625], [1551438660000, 10.796875], @@ -60,7 +81,7 @@ export default () => { @@ -91,7 +112,7 @@ export default () => { @@ -130,7 +151,7 @@ export default () => { @@ -161,7 +182,7 @@ export default () => { diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts deleted file mode 100644 index 7df6c42e2ca..00000000000 --- a/src/themes/charts/themes.ts +++ /dev/null @@ -1,251 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { PartialTheme, LineAnnotationSpec } from '@elastic/charts'; - -import { euiPaletteColorBlind } from '../../services/color/eui_palettes'; -import { DEFAULT_VISUALIZATION_COLOR } from '../../services/color/visualization_colors'; -import { tint, shade } from '../../services/color'; -import { buildTheme, getComputed } from '../../services/theme/utils'; -import { EuiThemeAmsterdam } from '../../themes/amsterdam/theme'; - -const fontFamily = `'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, - 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`; - -export interface EuiChartThemeType { - lineAnnotation: LineAnnotationSpec['style']; - theme: PartialTheme; -} - -function createTheme(colors: any): EuiChartThemeType { - return { - /** - * @deprecated use `_THEME.lineAnnotation` theme from `@elastic/charts` - */ - lineAnnotation: { - line: { - strokeWidth: 1, - stroke: colors.darkShade, - opacity: 1, - }, - }, - /** - * @deprecated use `_THEME` theme from `@elastic/charts` - */ - theme: { - background: { - color: colors.emptyShade, - }, - chartMargins: { - left: 0, - right: 0, - top: 0, - bottom: 0, - }, - lineSeriesStyle: { - line: { - strokeWidth: 2, - }, - point: { - fill: colors.emptyShade, - strokeWidth: 2, - radius: 3, - }, - }, - areaSeriesStyle: { - area: { - opacity: 0.3, - }, - line: { - strokeWidth: 2, - }, - point: { - visible: false, - fill: colors.emptyShade, - strokeWidth: 2, - radius: 3, - }, - }, - barSeriesStyle: { - displayValue: { - fontSize: 10, - fontFamily: fontFamily, - fill: { - textBorder: 0, - }, - alignment: { - horizontal: 'center', - vertical: 'middle', - }, - }, - }, - scales: { - barsPadding: 0.25, - histogramPadding: 0.05, - }, - axes: { - axisTitle: { - fontSize: 12, - fontFamily: fontFamily, - fill: colors.text, - padding: { - inner: 10, - outer: 0, - }, - }, - axisLine: { - stroke: colors.chartLines, - }, - tickLabel: { - fontSize: 10, - fontFamily: fontFamily, - fill: colors.subduedText, - padding: { - outer: 8, - inner: 10, - }, - }, - tickLine: { - visible: false, - stroke: colors.chartLines, - strokeWidth: 1, - }, - gridLine: { - horizontal: { - visible: true, - stroke: colors.chartLines, - strokeWidth: 1, - opacity: 1, - dash: [0, 0], - }, - vertical: { - visible: true, - stroke: colors.chartLines, - strokeWidth: 1, - opacity: 1, - dash: [4, 4], - }, - }, - }, - colors: { - vizColors: euiPaletteColorBlind({ sortBy: 'natural' }), - defaultVizColor: DEFAULT_VISUALIZATION_COLOR, - }, - crosshair: { - band: { - fill: colors.chartBand, - }, - line: { - stroke: colors.darkShade, - strokeWidth: 1, - dash: [4, 4], - }, - crossLine: { - stroke: colors.darkShade, - strokeWidth: 1, - dash: [4, 4], - }, - }, - goal: { - tickLabel: { - fontFamily: fontFamily, - fill: colors.subduedText, - }, - majorLabel: { - fontFamily: fontFamily, - fill: colors.text, - }, - minorLabel: { - fontFamily: fontFamily, - fill: colors.subduedText, - }, - majorCenterLabel: { - fontFamily: fontFamily, - fill: colors.text, - }, - minorCenterLabel: { - fontFamily: fontFamily, - fill: colors.subduedText, - }, - targetLine: { - stroke: colors.darkestShade, - }, - tickLine: { - stroke: colors.mediumShade, - }, - progressLine: { - stroke: colors.darkestShade, - }, - }, - partition: { - fontFamily: fontFamily, - minFontSize: 8, - maxFontSize: 16, - fillLabel: { - valueFont: { - fontWeight: 700, - }, - }, - linkLabel: { - maxCount: 5, - fontSize: 11, - textColor: colors.text, - }, - outerSizeRatio: 1, - circlePadding: 4, - sectorLineStroke: colors.emptyShade, - sectorLineWidth: 1.5, - }, - }, - }; -} - -// Build a static output of the EUI Amsterdam theme colors -// TODO: At some point, should Elastic Charts be able to inherit or create a theme dynamically from our theme provider? -const KEY = '_EUI_CHART_THEME_AMSTERDAM'; -const builtTheme = buildTheme({}, KEY) as typeof EuiThemeAmsterdam; -const lightColors = getComputed(EuiThemeAmsterdam, builtTheme, 'LIGHT').colors; -const darkColors = getComputed(EuiThemeAmsterdam, builtTheme, 'DARK').colors; - -/** - * @deprecated use `LIGHT_THEME` & `LIGHT_THEME.lineAnnotation` - */ -export const EUI_CHARTS_THEME_LIGHT: EuiChartThemeType = createTheme({ - ...lightColors, - chartLines: shade(lightColors.lightestShade, 0.03), - chartBand: lightColors.lightestShade, -}); - -/** - * @deprecated use `DARK_THEME` & `DARK_THEME.lineAnnotation` theme from `@elastic/charts` - */ -export const EUI_CHARTS_THEME_DARK: EuiChartThemeType = createTheme({ - ...darkColors, - chartLines: darkColors.lightShade, - chartBand: tint(darkColors.lightestShade, 0.025), -}); - -/** - * @deprecated use `useSparklineOverrides` hook from the kibana `charts` plugin `theme` service - */ -export const EUI_SPARKLINE_THEME_PARTIAL: PartialTheme = { - lineSeriesStyle: { - point: { - visible: false, - strokeWidth: 1, - radius: 1, - }, - }, - areaSeriesStyle: { - point: { - visible: false, - strokeWidth: 1, - radius: 1, - }, - }, -}; diff --git a/src/themes/charts/webpack.config.js b/src/themes/charts/webpack.config.js deleted file mode 100644 index bd43d8e1e26..00000000000 --- a/src/themes/charts/webpack.config.js +++ /dev/null @@ -1,71 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -/* eslint-disable @typescript-eslint/no-var-requires */ - -const path = require('path'); -const webpack = require('webpack'); -const CircularDependencyPlugin = require('circular-dependency-plugin'); -const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); - -const plugins = [ - new webpack.NoEmitOnErrorsPlugin(), - new CircularDependencyPlugin({ - exclude: /node_modules/, - failOnError: true, - }), - // run TypeScript during webpack build - new ForkTsCheckerWebpackPlugin({ - typescript: { - configFile: path.resolve(__dirname, '..', '..', '..', 'tsconfig.json'), - }, - async: false, // makes errors more visible, but potentially less performant - }), -]; - -module.exports = { - mode: 'development', - - devtool: 'source-map', - - entry: { - guide: './themes.ts', - }, - - context: __dirname, - - output: { - path: path.resolve(__dirname, '../../../dist'), - filename: 'eui_charts_theme.js', - library: { - type: 'commonjs', - }, - }, - - resolve: { - extensions: ['.ts', '.tsx', '.js', '.json'], - }, - - module: { - rules: [ - { - test: /\.(js|tsx?)$/, - loader: 'babel-loader', - exclude: /node_modules/, - }, - { - test: /\.scss$/, - use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], - exclude: /node_modules/, - }, - ], - strictExportPresence: true, - }, - - plugins, -}; From daf373d4022072fb42c620fe8395eb5bde50af52 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 12 Apr 2024 10:57:33 -0700 Subject: [PATCH 2/3] chore: add changelog --- changelogs/upcoming/7682.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelogs/upcoming/7682.md diff --git a/changelogs/upcoming/7682.md b/changelogs/upcoming/7682.md new file mode 100644 index 00000000000..db164754496 --- /dev/null +++ b/changelogs/upcoming/7682.md @@ -0,0 +1,4 @@ +**Breaking changes** + +- Removed `EUI_CHARTS_THEME_DARK`, `EUI_CHARTS_THEME_LIGHT` and `EUI_SPARKLINE_THEME_PARTIAL` exports. + From 61c077525f0b4cbce2f53dcf73662a99c2567357 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Mon, 3 Jun 2024 11:09:12 -0700 Subject: [PATCH 3/3] changelog copy tweaks --- packages/eui/changelogs/upcoming/7682.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/changelogs/upcoming/7682.md b/packages/eui/changelogs/upcoming/7682.md index db164754496..453bc73d9db 100644 --- a/packages/eui/changelogs/upcoming/7682.md +++ b/packages/eui/changelogs/upcoming/7682.md @@ -1,4 +1,4 @@ **Breaking changes** -- Removed `EUI_CHARTS_THEME_DARK`, `EUI_CHARTS_THEME_LIGHT` and `EUI_SPARKLINE_THEME_PARTIAL` exports. +- Removed deprecated `EUI_CHARTS_THEME_DARK`, `EUI_CHARTS_THEME_LIGHT` and `EUI_SPARKLINE_THEME_PARTIAL` exports