Skip to content

Commit

Permalink
Webpack upgrade cleanup
Browse files Browse the repository at this point in the history
Signed-off-by: Matt Provost <provomat@amazon.com>

Fix tests

Signed-off-by: Matt Provost <provomat@amazon.com>

Revert Remove charts theme code

Signed-off-by: Matt Provost <provomat@amazon.com>

Update i18n tokens

Signed-off-by: Matt Provost <provomat@amazon.com>
  • Loading branch information
BSFishy committed May 18, 2023
1 parent 57aaa3f commit a033f12
Show file tree
Hide file tree
Showing 6 changed files with 2,791 additions and 2,433 deletions.
12 changes: 6 additions & 6 deletions i18ntokens.json
Expand Up @@ -187,12 +187,12 @@
"start": {
"line": 191,
"column": 8,
"index": 5650
"index": 5638
},
"end": {
"line": 193,
"column": 40,
"index": 5750
"index": 5738
}
},
"filepath": "src/components/bottom_bar/bottom_bar.tsx"
Expand All @@ -205,12 +205,12 @@
"start": {
"line": 217,
"column": 14,
"index": 6647
"index": 6635
},
"end": {
"line": 221,
"column": 16,
"index": 6920
"index": 6908
}
},
"filepath": "src/components/bottom_bar/bottom_bar.tsx"
Expand All @@ -223,12 +223,12 @@
"start": {
"line": 223,
"column": 14,
"index": 6953
"index": 6941
},
"end": {
"line": 226,
"column": 16,
"index": 7150
"index": 7138
}
},
"filepath": "src/components/bottom_bar/bottom_bar.tsx"
Expand Down
24 changes: 12 additions & 12 deletions scripts/babel/proptypes-from-ts-props/index.test.ts
Expand Up @@ -496,11 +496,11 @@ const FooComponent: React.SFC<IFooProps> = () => {

expect(result.code).toBe(`import React from 'react';
import PropTypes from "prop-types";
var Foo;
(function (Foo) {
var Foo = /*#__PURE__*/function (Foo) {
Foo["bar"] = "BAR";
Foo["baz"] = "BAZ";
})(Foo || (Foo = {}));
return Foo;
}(Foo || {});
;
const FooComponent = () => {
return <div>Hello World</div>;
Expand All @@ -527,11 +527,11 @@ const FooComponent: React.SFC<IFooProps> = () => {

expect(result.code).toBe(`import React from 'react';
import PropTypes from "prop-types";
var Foo;
(function (Foo) {
var Foo = /*#__PURE__*/function (Foo) {
Foo[Foo["bar"] = 3] = "bar";
Foo[Foo["baz"] = 54] = "baz";
})(Foo || (Foo = {}));
return Foo;
}(Foo || {});
;
const FooComponent = () => {
return <div>Hello World</div>;
Expand Down Expand Up @@ -559,12 +559,12 @@ const FooComponent: React.SFC<IFooProps> = () => {

expect(result.code).toBe(`import React from 'react';
import PropTypes from "prop-types";
var Foo;
(function (Foo) {
var Foo = /*#__PURE__*/function (Foo) {
Foo["bar"] = "BAR";
Foo[Foo["baz"] = 5] = "baz";
Foo[Foo["buzz"] = false] = "buzz";
})(Foo || (Foo = {}));
return Foo;
}(Foo || {});
;
const FooComponent = () => {
return <div>Hello World</div>;
Expand All @@ -591,11 +591,11 @@ const FooComponent: React.SFC<IFooProps> = () => {

expect(result.code).toBe(`import React from 'react';
import PropTypes from "prop-types";
var Foo;
(function (Foo) {
var Foo = /*#__PURE__*/function (Foo) {
Foo["bar"] = "BAR";
Foo["baz"] = "BAZ";
})(Foo || (Foo = {}));
return Foo;
}(Foo || {});
;
const FooComponent = () => {
return <div>Hello World</div>;
Expand Down
Expand Up @@ -19,6 +19,8 @@ import {
DataGenerator,
} from '@elastic/charts';

import { OUI_CHARTS_THEME_LIGHT } from '../../../../src/themes/charts/themes';

import {
getDefaultOuiMarkdownParsingPlugins,
getDefaultOuiMarkdownProcessingPlugins,
Expand Down Expand Up @@ -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}
/>
Expand Down
16 changes: 16 additions & 0 deletions 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;
}
229 changes: 229 additions & 0 deletions 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 */

0 comments on commit a033f12

Please sign in to comment.