From 729df21e5c234e62a05391223b3cbfae1c0c3f30 Mon Sep 17 00:00:00 2001 From: Andrey Myssak Date: Tue, 20 Jun 2023 21:21:13 +0600 Subject: [PATCH 1/2] Revert "Remove unused chart theme code (#657)" This reverts commit e9a63afd05e4bb532f30fd9359a71704e15a8ded. Signed-off-by: Andrey Myssak Co-authored-by: Sergey Myssak --- scripts/compile-oui.js | 49 ++++++++++++++++++++++++++++++ scripts/dtsgenerator.js | 1 + src-docs/src/theme_dark.scss | 1 + src-docs/src/theme_light.scss | 1 + src-docs/src/theme_next_dark.scss | 1 + src-docs/src/theme_next_light.scss | 1 + 6 files changed, 54 insertions(+) diff --git a/scripts/compile-oui.js b/scripts/compile-oui.js index 96b9a02ed6..1746eb6ee2 100755 --- a/scripts/compile-oui.js +++ b/scripts/compile-oui.js @@ -308,6 +308,55 @@ function compileBundle() { } }); console.log(chalk.green('✔ Finished test utils files')); + + console.log('Building chart theme module...'); + execSync( + 'webpack src/themes/charts/themes.ts -o dist/oui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js', + { + stdio: 'inherit', + } + ); + dtsGenerator({ + prefix: '', + out: 'dist/oui_charts_theme.d.ts', + baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'), + files: ['themes.ts'], + resolveModuleId() { + return '@opensearch-project/oui/dist/oui_charts_theme'; + }, + resolveModuleImport(params) { + if (params.importedModuleId === '../../components/common') { + return '@opensearch-project/oui/src/components/common'; + } + return null; + } + }); + + /* OUI -> EUI Aliases */ + execSync( + 'webpack src/themes/charts/themes.ts -o dist/eui_charts_theme.js --output-library-target="commonjs" --config=src/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; + } + }); + /* End of Aliases */ + + console.log(chalk.green('✔ Finished chart theme module')); } /* OUI -> EUI Aliases */ diff --git a/scripts/dtsgenerator.js b/scripts/dtsgenerator.js index c31976a46b..399ff749ee 100644 --- a/scripts/dtsgenerator.js +++ b/scripts/dtsgenerator.js @@ -46,6 +46,7 @@ const generator = dtsGenerator({ '**/*.test.tsx', '**/*.testenv.ts', '**/*.testenv.tsx', + 'src/themes/charts/*', // A separate d.ts file is generated for the charts theme file 'src/test/*', // A separate d.ts file is generated for test utils 'src-docs/**/*', // Don't include src-docs ], diff --git a/src-docs/src/theme_dark.scss b/src-docs/src/theme_dark.scss index 44296a9d92..0cfed9c329 100644 --- a/src-docs/src/theme_dark.scss +++ b/src-docs/src/theme_dark.scss @@ -20,3 +20,4 @@ // Elastic charts @import '~@elastic/charts/dist/theme'; +@import '../../src/themes/charts/theme'; diff --git a/src-docs/src/theme_light.scss b/src-docs/src/theme_light.scss index f32f76dc86..b88c094394 100644 --- a/src-docs/src/theme_light.scss +++ b/src-docs/src/theme_light.scss @@ -20,3 +20,4 @@ // Elastic charts @import '~@elastic/charts/dist/theme'; +@import '../../src/themes/charts/theme'; diff --git a/src-docs/src/theme_next_dark.scss b/src-docs/src/theme_next_dark.scss index 9d4a2b4179..cab47044b0 100644 --- a/src-docs/src/theme_next_dark.scss +++ b/src-docs/src/theme_next_dark.scss @@ -19,3 +19,4 @@ // Elastic charts @import '~@elastic/charts/dist/theme'; +@import '../../src/themes/charts/theme'; diff --git a/src-docs/src/theme_next_light.scss b/src-docs/src/theme_next_light.scss index 523c86f9af..4ce311637c 100644 --- a/src-docs/src/theme_next_light.scss +++ b/src-docs/src/theme_next_light.scss @@ -19,3 +19,4 @@ // Elastic charts @import '~@elastic/charts/dist/theme'; +@import '../../src/themes/charts/theme'; From 73fefe127c0b26eba292806687112963e5b38cca Mon Sep 17 00:00:00 2001 From: Andrey Myssak Date: Tue, 20 Jun 2023 21:21:13 +0600 Subject: [PATCH 2/2] Revert "Remove charts theme code (#554)" This reverts commit 20869800a42d1f658b3a2d4bde4d9a7a4df13296. Signed-off-by: Andrey Myssak Co-authored-by: Sergey Myssak --- .../markdown_editor_with_plugins.js | 4 +- src/themes/charts/theme.scss | 16 ++ src/themes/charts/themes.ts | 229 ++++++++++++++++++ 3 files changed, 248 insertions(+), 1 deletion(-) create mode 100644 src/themes/charts/theme.scss create mode 100644 src/themes/charts/themes.ts diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js index 8300a6d07d..1f7b193d73 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js +++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js @@ -19,6 +19,8 @@ import { DataGenerator, } from '@elastic/charts'; +import { OUI_CHARTS_THEME_LIGHT } from '../../../../src/themes/charts/themes'; + import { getDefaultOuiMarkdownParsingPlugins, getDefaultOuiMarkdownProcessingPlugins, @@ -246,7 +248,7 @@ const ChartMarkdownRenderer = ({ palette, categories }) => { return ( diff --git a/src/themes/charts/theme.scss b/src/themes/charts/theme.scss new file mode 100644 index 0000000000..63dd379f50 --- /dev/null +++ b/src/themes/charts/theme.scss @@ -0,0 +1,16 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// There should be a good default in EC too +.echAnnotation { + font-size: $ouiFontSizeXS; + font-weight: $ouiFontWeightBold; +} diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts new file mode 100644 index 0000000000..850d27069a --- /dev/null +++ b/src/themes/charts/themes.ts @@ -0,0 +1,229 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ouiPaletteColorBlind } from '../../services/color/oui_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!../../global_styling/variables/_colors.scss'; +// @ts-ignore typescript doesn't understand the webpack loader +import darkColors from '!!sass-vars-to-js-loader!../../themes/oui/oui_colors_dark.scss'; + +const fontFamily = `'Inter UI', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`; + +export interface OuiChartThemeType { + lineAnnotation: LineAnnotationStyle; + theme: PartialTheme; + partition: RecursivePartial; +} + +function createTheme(colors: any): OuiChartThemeType { + return { + lineAnnotation: { + line: { + strokeWidth: 1, + stroke: colors.ouiColorDarkShade.rgba, + opacity: 1, + }, + details: { + fontSize: 10, + fontFamily: fontFamily, + fill: colors.ouiColorDarkShade.rgba, + padding: 0, + }, + }, + partition: { + fontFamily: fontFamily, + minFontSize: 8, + maxFontSize: 16, + fillLabel: { + textInvertible: false, + valueFont: { + fontWeight: 700, + }, + }, + linkLabel: { + maxCount: 5, + fontSize: 11, + textColor: colors.ouiColorDarkestShade.rgba, + }, + outerSizeRatio: 1, + circlePadding: 4, + sectorLineStroke: colors.ouiColorEmptyShade.rgba, + sectorLineWidth: 1.5, + }, + theme: { + background: { + color: colors.ouiColorEmptyShade.rgba, + }, + chartMargins: { + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + lineSeriesStyle: { + line: { + strokeWidth: 2, + }, + point: { + fill: colors.ouiColorEmptyShade.rgba, + strokeWidth: 2, + radius: 3, + }, + }, + areaSeriesStyle: { + area: { + opacity: 0.3, + }, + line: { + strokeWidth: 2, + }, + point: { + visible: false, + fill: colors.ouiColorEmptyShade.rgba, + strokeWidth: 2, + radius: 3, + }, + }, + barSeriesStyle: { + displayValue: { + fontSize: 8, + fontFamily: fontFamily, + fill: colors.ouiColorDarkShade.rgba, + }, + }, + scales: { + barsPadding: 0.25, + histogramPadding: 0.05, + }, + axes: { + axisTitle: { + fontSize: 12, + fontFamily: fontFamily, + fill: colors.ouiColorDarkestShade.rgba, + padding: { + inner: 10, + outer: 0, + }, + }, + axisLine: { + stroke: colors.ouiColorChartLines.rgba, + }, + tickLabel: { + fontSize: 10, + fontFamily: fontFamily, + fill: colors.ouiColorDarkShade.rgba, + padding: { + outer: 8, + inner: 10, + }, + }, + tickLine: { + visible: false, + stroke: colors.ouiColorChartLines.rgba, + strokeWidth: 1, + }, + gridLine: { + horizontal: { + visible: true, + stroke: colors.ouiColorChartLines.rgba, + strokeWidth: 1, + opacity: 1, + dash: [0, 0], + }, + vertical: { + visible: true, + stroke: colors.ouiColorChartLines.rgba, + strokeWidth: 1, + opacity: 1, + dash: [4, 4], + }, + }, + }, + colors: { + vizColors: ouiPaletteColorBlind({ sortBy: 'natural' }), + defaultVizColor: DEFAULT_VISUALIZATION_COLOR, + }, + crosshair: { + band: { + fill: colors.ouiColorChartBand.rgba, + }, + line: { + stroke: colors.ouiColorDarkShade.rgba, + strokeWidth: 1, + dash: [4, 4], + }, + crossLine: { + stroke: colors.ouiColorDarkShade.rgba, + strokeWidth: 1, + dash: [4, 4], + }, + }, + }, + }; +} + +export const OUI_CHARTS_THEME_LIGHT: OuiChartThemeType = createTheme( + lightColors +); +export const OUI_CHARTS_THEME_DARK: OuiChartThemeType = createTheme(darkColors); + +export const OUI_SPARKLINE_THEME_PARTIAL: PartialTheme = { + lineSeriesStyle: { + point: { + visible: false, + strokeWidth: 1, + radius: 1, + }, + }, + areaSeriesStyle: { + point: { + visible: false, + strokeWidth: 1, + radius: 1, + }, + }, +}; + +/* OUI -> EUI Aliases */ +export interface EuiChartThemeType extends OuiChartThemeType {} +export const EUI_CHARTS_THEME_LIGHT = OUI_CHARTS_THEME_LIGHT; +export const EUI_CHARTS_THEME_DARK = OUI_CHARTS_THEME_DARK; +export const EUI_SPARKLINE_THEME_PARTIAL = OUI_SPARKLINE_THEME_PARTIAL; +/* End of Aliases */