diff --git a/CHANGELOG.md b/CHANGELOG.md index 8564722a666..f26e8a6b796 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `14.4.0`. +- Update Elastic-Charts to version 13.0.0 and updated the theme object accordingly ([#2381](https://github.com/elastic/eui/pull/2381)) ## [`14.4.0`](https://github.com/elastic/eui/tree/v14.4.0) diff --git a/package.json b/package.json index 802d41385db..49f2e509a6b 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", - "@elastic/charts": "^11.2.0", + "@elastic/charts": "^13.0.0", "@elastic/datemath": "^5.0.2", "@elastic/eslint-config-kibana": "^0.15.0", "@svgr/core": "^4.1.0", diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index b6e4e49ec3a..7ab0920161b 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -78,12 +78,6 @@ class _CategoryChart extends Component { const theme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - const gridHorizontalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings - : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings; - const gridVerticalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridVerticalSettings - : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings; const ChartType = CHART_COMPONENTS[this.state.chartType]; @@ -123,7 +117,6 @@ class _CategoryChart extends Component { diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js index 7a1cc10479f..9c00575c801 100644 --- a/src-docs/src/views/elastic_charts/shared.js +++ b/src-docs/src/views/elastic_charts/shared.js @@ -25,9 +25,9 @@ export const ExternalBadge = () => { iconSide="right" onClickAriaLabel="Go to elastic-charts docs" onClick={() => - window.open('https://github.com/elastic/elastic-charts/tree/v10.2.0') + window.open('https://github.com/elastic/elastic-charts/tree/v13.0.0') }> - External library: elastic-charts v10.2.0 + External library: elastic-charts v13.0.0 ); }; diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.js index b1f63784070..e49fadec897 100644 --- a/src-docs/src/views/elastic_charts/sizes.js +++ b/src-docs/src/views/elastic_charts/sizes.js @@ -172,12 +172,6 @@ class _Sizes extends Component { const theme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - const gridHorizontalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings - : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings; - const gridVerticalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridVerticalSettings - : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings; const lineAnnotationStyle = isDarkTheme ? EUI_CHARTS_THEME_DARK.lineAnnotation : EUI_CHARTS_THEME_LIGHT.lineAnnotation; @@ -239,13 +233,11 @@ class _Sizes extends Component { tickFormat={xAxisFormatter} id="bottom-axis" position="bottom" - gridLineStyle={gridVerticalSettings} /> diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.js index e5ad66f23ea..e444ca8889a 100644 --- a/src-docs/src/views/elastic_charts/theming.js +++ b/src-docs/src/views/elastic_charts/theming.js @@ -47,13 +47,6 @@ class _Theming extends Component { ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - const gridHorizontalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings - : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings; - const gridVerticalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridVerticalSettings - : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings; - const customColors = { colors: { vizColors: colorPalette('#FFFFE0', '#017F75', 5), @@ -92,18 +85,8 @@ class _Theming extends Component { yAccessors={['y']} customSeriesColors={data1CustomSeriesColors} /> - - + + ); diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.js index 584b9238ae0..bd5baad5d14 100644 --- a/src-docs/src/views/elastic_charts/theming_categorical.js +++ b/src-docs/src/views/elastic_charts/theming_categorical.js @@ -245,12 +245,6 @@ class _Categorical extends Component { const theme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - const gridHorizontalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings - : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings; - const gridVerticalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridVerticalSettings - : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings; let ChartType = CHART_COMPONENTS[chartType]; @@ -364,15 +358,9 @@ class _Categorical extends Component { - + {customLegend} diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js index 38ccff6ea9f..dd3dc09de05 100644 --- a/src-docs/src/views/elastic_charts/theming_example.js +++ b/src-docs/src/views/elastic_charts/theming_example.js @@ -17,6 +17,7 @@ import { EuiText, EuiCodeBlock, EuiLink, + EuiCallOut, } from '../../../../src/components'; export const ElasticChartsThemingExample = { @@ -60,11 +61,27 @@ export const ElasticChartsThemingExample = { Elastic Charts. Simply import these objects from the themes folder and pass the correct one to the Settings.theme property.

- + {`import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; + const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; + `} + +

+ EUI provides a plugin utility for ease of pulling in the correct + theme object depending on the current Kibana theme. Learn more + from this{' '} + + readme + + . +

+ +

EUI also provides some basic{' '} @@ -76,7 +93,7 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI prepend it to the list of themes supplied to Settings.

- + {`import { colorPalette } from '../../../../src/services'; const customColors = { diff --git a/src-docs/src/views/elastic_charts/time_chart.js b/src-docs/src/views/elastic_charts/time_chart.js index 1b615afd39c..45265dc9923 100644 --- a/src-docs/src/views/elastic_charts/time_chart.js +++ b/src-docs/src/views/elastic_charts/time_chart.js @@ -67,12 +67,6 @@ class _TimeChart extends Component { const theme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - const gridHorizontalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridHorizontalSettings - : EUI_CHARTS_THEME_LIGHT.gridHorizontalSettings; - const gridVerticalSettings = isDarkTheme - ? EUI_CHARTS_THEME_DARK.gridVerticalSettings - : EUI_CHARTS_THEME_LIGHT.gridVerticalSettings; let ChartType = CHART_COMPONENTS[this.state.chartType]; let ChartType2 = CHART_COMPONENTS[this.state.chartType]; @@ -127,15 +121,9 @@ class _TimeChart extends Component { position="bottom" tickFormat={timeFormatter(niceTimeFormatByDay(1))} showGridLines={this.state.chartType !== 'BarSeries'} - gridLineStyle={gridVerticalSettings} tickPadding={0} /> - + diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss index 5bdcb3f0930..700a85b771e 100644 --- a/src/components/code/_code_block.scss +++ b/src/components/code/_code_block.scss @@ -19,6 +19,7 @@ display: block; line-height: $euiLineHeight; font-weight: $euiFontWeightRegular; + font-size: inherit; } .euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton { diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss index d6cc07aeb91..5ded4974fb5 100644 --- a/src/components/text/_text.scss +++ b/src/components/text/_text.scss @@ -222,18 +222,18 @@ min-width: 75%; } - &.euiText--small { - @include fontSize($euiFontSizeS); - @include euiScaleText($euiFontSizeS); - } - - &.euiText--extraSmall { - @include fontSize($euiFontSizeXS); - @include euiScaleText($euiFontSizeXS); - } - > :last-child, .euiTextColor > :last-child { margin-bottom: 0 !important; // sass-lint:disable-line no-important } } + +.euiText--small { + @include fontSize($euiFontSizeS); + @include euiScaleText($euiFontSizeS); +} + +.euiText--extraSmall { + @include fontSize($euiFontSizeXS); + @include euiScaleText($euiFontSizeXS); +} diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index 0d3a2fd59dd..b06faca05ee 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -1,10 +1,6 @@ import { palettes } from '../../services/color/eui_palettes'; import { DEFAULT_VISUALIZATION_COLOR } from '../../services/color/visualization_colors'; -import { - PartialTheme, - GridLineConfig, - LineAnnotationStyle, -} from '@elastic/charts'; +import { PartialTheme, LineAnnotationStyle } from '@elastic/charts'; // @ts-ignore import lightColors from '!!sass-vars-to-js-loader!../../global_styling/variables/_colors.scss'; @@ -15,26 +11,12 @@ const fontFamily = `'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`; export interface EuiChartThemeType { - gridHorizontalSettings: GridLineConfig; - gridVerticalSettings: GridLineConfig; lineAnnotation: LineAnnotationStyle; theme: PartialTheme; } function createTheme(colors: any) { return { - gridHorizontalSettings: { - stroke: colors.euiColorChartLines.rgba, - strokeWidth: 1, - opacity: 1, - dash: [0, 0], - }, - gridVerticalSettings: { - stroke: colors.euiColorChartLines.rgba, - strokeWidth: 1, - opacity: 1, - dash: [4, 4], - }, lineAnnotation: { line: { strokeWidth: 1, @@ -86,6 +68,10 @@ function createTheme(colors: any) { fill: colors.euiColorDarkShade.rgba, }, }, + scales: { + barsPadding: 0.25, + histogramPadding: 0.05, + }, axes: { axisTitleStyle: { fontSize: 12, @@ -103,8 +89,25 @@ function createTheme(colors: any) { padding: 8, }, tickLineStyle: { - stroke: 'rgba(0,0,0,0)', // transparent - strokeWidth: 0, + visible: false, + stroke: colors.euiColorChartLines.rgba, + strokeWidth: 1, + }, + gridLineStyle: { + horizontal: { + visible: true, + stroke: colors.euiColorChartLines.rgba, + strokeWidth: 1, + opacity: 1, + dash: [0, 0], + }, + vertical: { + visible: true, + stroke: colors.euiColorChartLines.rgba, + strokeWidth: 1, + opacity: 1, + dash: [4, 4], + }, }, }, colors: { diff --git a/yarn.lock b/yarn.lock index f13acedbdf2..f6e626355eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -991,10 +991,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@elastic/charts@^11.2.0": - version "11.2.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-11.2.0.tgz#b967de667ae0c71313b407c8e6b06f7f9aa87fa0" - integrity sha512-8jPRsYsREABEXw1OpiN9sO62DV01G9+q6ieuvrQxa1I5AaFcaRo4K65NH8NwShU/nW62R5BpMq+vWN9Qax6igQ== +"@elastic/charts@^13.0.0": + version "13.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-13.0.0.tgz#eefd1a003c18c558465fa5d1dce28c137d1f50b4" + integrity sha512-Eia4lE7HEXZCZIlxsyLA/QTtrViDiENIM8QQa6ktSPpqRNzbRT6dLZii0Hv/GZem1PSBIw6M8HoTlP6/7L0BUA== dependencies: "@types/d3-shape" "^1.3.1" "@types/luxon" "^1.11.1"