[CCI] Revert changes to chart themes (#831)

* Revert "Remove unused chart theme code (#657)"

This reverts commit e9a63af.

Signed-off-by: Andrey Myssak <[email protected]>
Co-authored-by: Sergey Myssak <[email protected]>

* Revert "Remove charts theme code (#554)"

This reverts commit 2086980.

Signed-off-by: Andrey Myssak <[email protected]>
Co-authored-by: Sergey Myssak <[email protected]>

---------

Signed-off-by: Andrey Myssak <[email protected]>
Co-authored-by: Sergey Myssak <[email protected]>
Co-authored-by: Josh Romero <[email protected]>

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 */

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
   ],

src-docs/src/theme_dark.scss

@@ -20,3 +20,4 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';

src-docs/src/theme_light.scss

@@ -20,3 +20,4 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';

src-docs/src/theme_next_dark.scss

@@ -19,3 +19,4 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';

src-docs/src/theme_next_light.scss

@@ -19,3 +19,4 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
+@import '../../src/themes/charts/theme';

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 (
     <Chart size={{ height: 320 }}>
       <Settings
-        theme={[customColors]}
+        theme={[customColors, OUI_CHARTS_THEME_LIGHT]}
         showLegend={false}
         showLegendDisplayValue={false}
       />

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

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<PartitionConfig>;
+}
+
+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 */