From 5a24111e53cfb475a18c3189012c287f72c0a525 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 Sep 2019 15:05:30 -0400 Subject: [PATCH 01/12] Update to Charts 12.0.0 Move grid line styles into the theme and remove from the examples --- package.json | 2 +- .../views/elastic_charts/category_chart.js | 8 ----- src-docs/src/views/elastic_charts/sizes.js | 8 ----- src-docs/src/views/elastic_charts/theming.js | 21 ++--------- .../elastic_charts/theming_categorical.js | 14 +------- .../src/views/elastic_charts/time_chart.js | 14 +------- src/themes/charts/themes.ts | 36 +++++++++---------- yarn.lock | 8 ++--- 8 files changed, 26 insertions(+), 85 deletions(-) diff --git a/package.json b/package.json index 2a931cf9340..f4d6b930068 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": "^12.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/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/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/themes/charts/themes.ts b/src/themes/charts/themes.ts index 0d3a2fd59dd..e09b48b90cd 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, @@ -106,6 +88,22 @@ function createTheme(colors: any) { stroke: 'rgba(0,0,0,0)', // transparent strokeWidth: 0, }, + gridLineStyle: { + horizontal: { + visible: true, + stroke: colors.euiColorChartLines.rgba, + strokeWidth: 1, + opacity: 1, + dash: [4, 4], + }, + vertical: { + visible: true, + stroke: colors.euiColorChartLines.rgba, + strokeWidth: 1, + opacity: 1, + dash: [0, 0], + }, + }, }, colors: { vizColors: palettes.euiPaletteColorBlind.colors, diff --git a/yarn.lock b/yarn.lock index f13acedbdf2..5c821bbefa9 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@^12.0.0": + version "12.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.0.tgz#77207f7f055949ed524e9ff66d1e4e7ca2772b11" + integrity sha512-qZGXuVDkRfXxw//1QXBXx7aGP0Tqg1fHUAwjNMfRQfUoYVVlN68GerVZKIQCAG6/rWsjoGsA50s4EDbnV+zAGQ== dependencies: "@types/d3-shape" "^1.3.1" "@types/luxon" "^1.11.1" From 85afb9b6b04478df6e40a5f704a9bf79e99f49d7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 Sep 2019 15:29:31 -0400 Subject: [PATCH 02/12] =?UTF-8?q?Adding=20scales=20in=20even=20though=20th?= =?UTF-8?q?ey=E2=80=99re=20the=20default?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/themes/charts/themes.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index e09b48b90cd..8ac255c0b9a 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -68,6 +68,10 @@ function createTheme(colors: any) { fill: colors.euiColorDarkShade.rgba, }, }, + scales: { + barsPadding: 0.25, + histogramPadding: 0.05, + }, axes: { axisTitleStyle: { fontSize: 12, From 2f2dbf92fbbed8cd0dcc8b42a9f3238449fb8bfe Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Sep 2019 23:58:23 -0400 Subject: [PATCH 03/12] Update to 12.0.1 --- package.json | 2 +- src/themes/charts/themes.ts | 4 ++-- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index f4d6b930068..08881944264 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": "^12.0.0", + "@elastic/charts": "^12.0.1", "@elastic/datemath": "^5.0.2", "@elastic/eslint-config-kibana": "^0.15.0", "@svgr/core": "^4.1.0", diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index 8ac255c0b9a..cd862fa6b1e 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -98,14 +98,14 @@ function createTheme(colors: any) { stroke: colors.euiColorChartLines.rgba, strokeWidth: 1, opacity: 1, - dash: [4, 4], + dash: [0, 0], }, vertical: { visible: true, stroke: colors.euiColorChartLines.rgba, strokeWidth: 1, opacity: 1, - dash: [0, 0], + dash: [4, 4], }, }, }, diff --git a/yarn.lock b/yarn.lock index 5c821bbefa9..219b354f015 100644 --- a/yarn.lock +++ b/yarn.lock @@ -991,10 +991,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@elastic/charts@^12.0.0": - version "12.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.0.tgz#77207f7f055949ed524e9ff66d1e4e7ca2772b11" - integrity sha512-qZGXuVDkRfXxw//1QXBXx7aGP0Tqg1fHUAwjNMfRQfUoYVVlN68GerVZKIQCAG6/rWsjoGsA50s4EDbnV+zAGQ== +"@elastic/charts@^12.0.1": + version "12.0.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.1.tgz#4f5da4f5747e8e3d393ef203781006ae0b8664f7" + integrity sha512-cIyXFlS6XtxTeFkt/u9EPSV573YRgHPMj+sw002BCmh8JhKoAwTEFh+L0pPB59XBWgdvJnk6tznITqeSG5AA6Q== dependencies: "@types/d3-shape" "^1.3.1" "@types/luxon" "^1.11.1" From 8d4d37bab13783acacc354561be0169d947734d8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 25 Sep 2019 22:38:32 -0400 Subject: [PATCH 04/12] Update to 13.0.0 --- package.json | 2 +- src-docs/src/views/elastic_charts/shared.js | 4 ++-- src/themes/charts/themes.ts | 5 +++-- yarn.lock | 8 ++++---- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 08881944264..a5ecc067a4d 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": "^12.0.1", + "@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/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/themes/charts/themes.ts b/src/themes/charts/themes.ts index cd862fa6b1e..b06faca05ee 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -89,8 +89,9 @@ 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: { diff --git a/yarn.lock b/yarn.lock index 219b354f015..f6e626355eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -991,10 +991,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@elastic/charts@^12.0.1": - version "12.0.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.1.tgz#4f5da4f5747e8e3d393ef203781006ae0b8664f7" - integrity sha512-cIyXFlS6XtxTeFkt/u9EPSV573YRgHPMj+sw002BCmh8JhKoAwTEFh+L0pPB59XBWgdvJnk6tznITqeSG5AA6Q== +"@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" From 9c13f28cee5c8987c3f689cedcfb3c32559f60e6 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 25 Sep 2019 22:47:40 -0400 Subject: [PATCH 05/12] Fix inheritence of code block font sizes --- .../views/elastic_charts/theming_example.js | 30 +++++++++++++++++-- src/components/code/_code_block.scss | 1 + src/components/text/_text.scss | 20 ++++++------- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js index 38ccff6ea9f..f4c027683cb 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,36 @@ 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; + `} + +

+ We provide a plugin utility for ease of pulling in the correct + theme object. There is also a way to use this as an Observable. + Reference this{' '} + + pull request + {' '} + for more information. +

+ + {`import { npStart } from 'ui/new_platform'; + +`} + + +

EUI also provides some basic{' '} @@ -76,7 +102,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/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); +} From 08fe0ae7f922f724b8cd20da2bfb6fadd0084842 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 Sep 2019 15:05:30 -0400 Subject: [PATCH 06/12] Update to Charts 12.0.0 Move grid line styles into the theme and remove from the examples --- package.json | 2 +- .../views/elastic_charts/category_chart.js | 8 ----- src-docs/src/views/elastic_charts/sizes.js | 8 ----- src-docs/src/views/elastic_charts/theming.js | 21 ++--------- .../elastic_charts/theming_categorical.js | 14 +------- .../src/views/elastic_charts/time_chart.js | 14 +------- src/themes/charts/themes.ts | 36 +++++++++---------- yarn.lock | 8 ++--- 8 files changed, 26 insertions(+), 85 deletions(-) diff --git a/package.json b/package.json index 3fa17700502..c38cf933995 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": "^12.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/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/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/themes/charts/themes.ts b/src/themes/charts/themes.ts index 0d3a2fd59dd..e09b48b90cd 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, @@ -106,6 +88,22 @@ function createTheme(colors: any) { stroke: 'rgba(0,0,0,0)', // transparent strokeWidth: 0, }, + gridLineStyle: { + horizontal: { + visible: true, + stroke: colors.euiColorChartLines.rgba, + strokeWidth: 1, + opacity: 1, + dash: [4, 4], + }, + vertical: { + visible: true, + stroke: colors.euiColorChartLines.rgba, + strokeWidth: 1, + opacity: 1, + dash: [0, 0], + }, + }, }, colors: { vizColors: palettes.euiPaletteColorBlind.colors, diff --git a/yarn.lock b/yarn.lock index f13acedbdf2..5c821bbefa9 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@^12.0.0": + version "12.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.0.tgz#77207f7f055949ed524e9ff66d1e4e7ca2772b11" + integrity sha512-qZGXuVDkRfXxw//1QXBXx7aGP0Tqg1fHUAwjNMfRQfUoYVVlN68GerVZKIQCAG6/rWsjoGsA50s4EDbnV+zAGQ== dependencies: "@types/d3-shape" "^1.3.1" "@types/luxon" "^1.11.1" From 20e3fc2bf037db47e4c70efeb09b84d263484ee8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 Sep 2019 15:29:31 -0400 Subject: [PATCH 07/12] =?UTF-8?q?Adding=20scales=20in=20even=20though=20th?= =?UTF-8?q?ey=E2=80=99re=20the=20default?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/themes/charts/themes.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index e09b48b90cd..8ac255c0b9a 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -68,6 +68,10 @@ function createTheme(colors: any) { fill: colors.euiColorDarkShade.rgba, }, }, + scales: { + barsPadding: 0.25, + histogramPadding: 0.05, + }, axes: { axisTitleStyle: { fontSize: 12, From 465d095569f0d805ef459592386fd93b3704e15a Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Sep 2019 23:58:23 -0400 Subject: [PATCH 08/12] Update to 12.0.1 --- package.json | 2 +- src/themes/charts/themes.ts | 4 ++-- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index c38cf933995..ca4a65c0c04 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": "^12.0.0", + "@elastic/charts": "^12.0.1", "@elastic/datemath": "^5.0.2", "@elastic/eslint-config-kibana": "^0.15.0", "@svgr/core": "^4.1.0", diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index 8ac255c0b9a..cd862fa6b1e 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -98,14 +98,14 @@ function createTheme(colors: any) { stroke: colors.euiColorChartLines.rgba, strokeWidth: 1, opacity: 1, - dash: [4, 4], + dash: [0, 0], }, vertical: { visible: true, stroke: colors.euiColorChartLines.rgba, strokeWidth: 1, opacity: 1, - dash: [0, 0], + dash: [4, 4], }, }, }, diff --git a/yarn.lock b/yarn.lock index 5c821bbefa9..219b354f015 100644 --- a/yarn.lock +++ b/yarn.lock @@ -991,10 +991,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@elastic/charts@^12.0.0": - version "12.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.0.tgz#77207f7f055949ed524e9ff66d1e4e7ca2772b11" - integrity sha512-qZGXuVDkRfXxw//1QXBXx7aGP0Tqg1fHUAwjNMfRQfUoYVVlN68GerVZKIQCAG6/rWsjoGsA50s4EDbnV+zAGQ== +"@elastic/charts@^12.0.1": + version "12.0.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.1.tgz#4f5da4f5747e8e3d393ef203781006ae0b8664f7" + integrity sha512-cIyXFlS6XtxTeFkt/u9EPSV573YRgHPMj+sw002BCmh8JhKoAwTEFh+L0pPB59XBWgdvJnk6tznITqeSG5AA6Q== dependencies: "@types/d3-shape" "^1.3.1" "@types/luxon" "^1.11.1" From d03908cfbaf1936b41f3af0ca517ad3452f57b9c Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 25 Sep 2019 22:38:32 -0400 Subject: [PATCH 09/12] Update to 13.0.0 --- package.json | 2 +- src-docs/src/views/elastic_charts/shared.js | 4 ++-- src/themes/charts/themes.ts | 5 +++-- yarn.lock | 8 ++++---- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index ca4a65c0c04..453c38ca832 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": "^12.0.1", + "@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/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/themes/charts/themes.ts b/src/themes/charts/themes.ts index cd862fa6b1e..b06faca05ee 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -89,8 +89,9 @@ 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: { diff --git a/yarn.lock b/yarn.lock index 219b354f015..f6e626355eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -991,10 +991,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@elastic/charts@^12.0.1": - version "12.0.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.1.tgz#4f5da4f5747e8e3d393ef203781006ae0b8664f7" - integrity sha512-cIyXFlS6XtxTeFkt/u9EPSV573YRgHPMj+sw002BCmh8JhKoAwTEFh+L0pPB59XBWgdvJnk6tznITqeSG5AA6Q== +"@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" From ffe4fea0c9bbb9c8de44ee1d1c083554c57e3215 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 25 Sep 2019 22:47:40 -0400 Subject: [PATCH 10/12] Fix inheritence of code block font sizes --- .../views/elastic_charts/theming_example.js | 30 +++++++++++++++++-- src/components/code/_code_block.scss | 1 + src/components/text/_text.scss | 20 ++++++------- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js index 38ccff6ea9f..f4c027683cb 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,36 @@ 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; + `} + +

+ We provide a plugin utility for ease of pulling in the correct + theme object. There is also a way to use this as an Observable. + Reference this{' '} + + pull request + {' '} + for more information. +

+ + {`import { npStart } from 'ui/new_platform'; + +`} + + +

EUI also provides some basic{' '} @@ -76,7 +102,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/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); +} From bfb1cc019afc987337b040ebbe5b557e55058483 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 25 Sep 2019 22:59:34 -0400 Subject: [PATCH 11/12] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f7a296c8b8..9f9836ccdf5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Added `data-test-subj` support for basic and in-memory tables' actions ([#2353](https://github.com/elastic/eui/pull/2353)) - Added `ip` icon to glyph set ([#2371](https://github.com/elastic/eui/pull/2371)) - Set `textOnly={true}` for expanded rows in `EuiBasicTable` ([#2376](https://github.com/elastic/eui/pull/2376)) +- Update Elastic-Charts to version 13.0.0 and updated the theme object accordingly ([#2381](https://github.com/elastic/eui/pull/2381)) **Bug fixes** From 47195e722095732087ee7708d396daca2303163b Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 30 Sep 2019 15:22:28 -0400 Subject: [PATCH 12/12] Update Kibana section --- .../views/elastic_charts/theming_example.js | 23 ++++++------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js index f4c027683cb..dd3dc09de05 100644 --- a/src-docs/src/views/elastic_charts/theming_example.js +++ b/src-docs/src/views/elastic_charts/theming_example.js @@ -70,25 +70,16 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI

- We provide a plugin utility for ease of pulling in the correct - theme object. There is also a way to use this as an Observable. - Reference this{' '} + EUI provides a plugin utility for ease of pulling in the correct + theme object depending on the current Kibana theme. Learn more + from this{' '} - pull request - {' '} - for more information. + readme + + .

- - {`import { npStart } from 'ui/new_platform'; - -`} -